公平地说,它可能永远都会这样。
目前,设计软件正在努力解决各种问题。 术语“屏幕设计”很常见,指的是我们许多人正在非常专门地为屏幕设计,而不是为印刷或任何其他应用程序设计,而屏幕具有它们特有的挑战。 我们现在的工作流程与过去不同。 我们有不同的协作需求。 我们有不同的技术和经济需求。
让我们来一窥这些怪事。
设计工具仍在摸索 **响应式设计**
如今,几乎可以认为任何新的网络项目(或重新设计)都将是 响应式设计。 响应式设计是针对不同尺寸和不同功能的屏幕的解决方案。 所以我们不能只设计一个 1280px 宽的版本就完事。
像 Sketch 这样的软件使任意尺寸的多个画板成为一等公民,以帮助解决这个问题。

这并不能完全解决我们正在为尺寸、尺寸和密度可能截然不同的屏幕进行设计的想法,但它无疑比仅仅设计一个尺寸更具说服力。
但是,如何创建所有你想要创建的不同画板呢? 复制粘贴、调整大小以及拖放? 你可以,但是设计工具正在开始在这里摸索一点。 这是一个名为 Constraints 的 Sketch 插件,它试图让这一切变得更容易
Figma 内置了这种约束的想法

Webflow 是一款独特的设计工具,它与 Sketch 或 Illustrator 中那样完全任意地拖放不同。 相反,你是在操作实际上与真正的 Web 布局属性(如边距、填充,甚至像 Flexbox 和 Grid 这样的东西)一一对应的元素。 他们使使用 Webflow 编辑器自然地 响应式,你可以在工作时立即看到它。
设计工具仍在摸索 **协作**
想象一下,你使用 Photoshop 进行设计。 你有 `.psd` 文件,这些文件就是你的设计。 你如何交付它们? 电子邮件? 也许吧,但这对于团队来说有点乱。 也许你有一个共享的 Dropbox 文件夹?

Adobe 知道设计团队需要这个。 他们拥有“Creative Cloud”,它可以做所有事情,从管理你拥有的实际软件,到让你访问字体和库存图片等设计资产,到帮助你共享文件

当然,但这除了让每个人都能够访问这些文件之外,没有做任何其他事情。 即使多个用户同时编辑同一个文件,也存在合并冲突的风险。
文件本身只是协作故事的一部分。 版本历史呢? 笔记和反馈呢? 批准呢?
Invision 是设计工具中的重要参与者,我猜想主要是因为它的协作功能。 你通常不会在 InVision 中创建设计,你只是将它们上传到那里,然后用它们做更多的事情,比如讨论它们

如果根本没有“文件”需要处理怎么办? 当你的设计软件是一个 Web 应用程序时,设计文档实际上不是你必须自己处理的文档,它们只是存在于应用程序中。 Figma 就是这样

此外,Figma 提供了 团队,这意味着团队之间的协作只是登录并共享访问所有内容的问题。
更进一步,Figma 具有实时设计功能。 也就是说,像 Google 文档(或 CodePen 协作模式)那样的同时编辑操作

作为设计工具仍在摸索的证明,我认为 Figma 在营销方面不再过多地推崇此功能。 我认为他们发现,尽管这是一个引人注目的功能,但实际的设计团队并不真正喜欢它。 谁知道呢。
这是一篇有趣的文章,由 Meng To 比较 Figma 和 Sketch。
设计工具仍在摸索 **资产和版本**
设计不仅仅是屏幕模型。 设计团队可能需要访问图标集、品牌系统、调色板、一组平面图形……
看看 Lingo,这是一个专门为此设计的应用程序。 协作是一个关键功能,但它的团队协作是基于资产的。

我可以想象这样的工具不仅可以更容易地共享资产,还可以让每个人使用的资产版本保持最新。 也就是说,防止人们在其本地机器上保留一个“充满图标的文件夹”,并使其变得过时。
说到版本…… 我相信我们都经历过(也听过笑话)关于以类似方式命名的文件:
Homepage_v2_final_FINAL_no_really_THIS_ONE_is_FINAL.psd
开发人员由于版本控制,并没有真正遇到这个问题。 设计师的版本控制在哪里? 像 Abstract 这样的应用程序正在努力解决这个问题。
Abstract 不仅可以帮助协作,还可以帮助版本管理。
所有内容都已保存。 不会丢失任何东西。 你可以信赖的版本控制。
设计工具仍在摸索 **设计系统**
正如我 最近所说
我们不是在构建页面,而是在构建系统。 风格指南。 设计系统。 模式库。 这些东西正在成为网络项目流程的标准部分。 它们可能会成为主要交付成果。
多年来,我们看到设计软件开始慢慢地适应这种思维方式。 即使像字体样式这样简单的东西,也花了很长时间才从 InDesign(在 InDesign 中,它们是不可或缺的)迁移到 Illustrator 和 Photoshop。 它们如此明显地需要,以至于新的设计工具似乎总是有它们。

然而,如果你所做的工作 *专门* 是字体,那么就有专门针对此的工具。 像 Typecast 这样的工具就是为了这个目的
或者 TypeNugget,我们已经 在这里介绍过

一个 Web 应用程序设计工具, UX Pin,正在 重点关注 成为设计系统的设计工具。

我们已经 之前介绍过,你可以在此处了解更多关于它们的意思
设计工具仍在摸索 **交互性**
我们看到设计工具取得了很大的进步,但我们也看到,对于单个工具来说,要做到一切都很难。 交互设计就是一个很好的例子。
悬停状态! 滑动和手势! 页面过渡! 动画! 点击反馈!
Sketch 在某些方面做得很好,但它几乎没有处理交互性的工具。 一方面,这很可惜。 屏幕设计 *充满了* 交互性。 它绝对是设计师关注的重点,也是他们工作中必不可少的一部分。 另一方面,如果所有设计工具都试图将交互性工具打包在一起,我可能会担心臃肿和缺乏重点。
看看 Framer,他们在正面解决交互设计问题
Framer 是一款可视化设计工具,它拥有所有熟悉的样式工具(包括一些有趣基于约束的响应式内容),但它通过在工具中进行编码来处理交互性内容
设计工具仍在摸索 **平台**
每次谈到 Sketch,我都会感到一丝愧疚,因为我知道它只能在 macOS 上使用。这排除了很多从事网站工作的人。他们甚至没有计划。像 Adobe 这样的知名玩家通常会将其产品跨平台发布,但即使是它们也比基于 Web 的工具逊色,这些工具可以在任何平台上运行。我认为像 Figma 和 UX Pin 这样的基于 Web 的工具具有强大的优势,它们具有固有的协作和共享功能以及跨平台功能。
但是,无论平台如何,台式机并不是这里唯一的因素。苹果当然在设计 iPad Pro 时考虑到了设计师

上面可以使用什么样的设计软件?Affinity Designer 似乎正在开发它
今天办公室很安静,我感觉有点调皮……谁想看一点#affinitydesigner #ipad #shakycam 的预告片?🐱 pic.twitter.com/ZfbSIJY5Vn
— Matt Priestley (@mattp4478) 2017 年 7 月 12 日
以及像Graphic这样的工具

设计工具仍在探索趋势
你可以在 Sketch 中用噪声填充一个框

我不太确定为什么,但我认为这可能会影响设计师在设计中使用噪声。没有一键式选项可以将区域填充为微小的甲虫,但我认为如果有了这个选项,我们会看到更多被微小的甲虫填充的 div。
Adobe Experience Design 具有“背景模糊”功能,无疑是受最近的苹果设计启发的。
哎呀,我可以在 Photoshop 中通过“极坐标”扭曲物体。
设计工具影响设计,设计影响设计工具。无论默认的透明度设置是什么,都会影响设计。无论默认的渐变颜色是什么。无论默认的缓动值是什么。
设计工具仍在探索数据
我想你一定听过一些关于支持和反对lorem ipsum 文本的激烈争论。“它并不反映真实的设计!”你可能会听到。无论你如何看待,看到设计工具尝试使用真实数据进行设计,确实很有趣。
Adobe Experience Design 在这方面有一些有趣的功能。例如他们的 Repeat Grid 工具,它本身就是一个有趣的原型工具,也可以帮助填充真实的文本和图像

Webflow 也在设计中使用数据方面提供了很多帮助。他们表示
使用真实数据进行设计可以让我们更深入地了解页面的功能。部分原因是它会显现出设计师在设计模型中努力避免的所有“问题”,例如标题过长、图像质量低等。
使用真实内容进行设计可以让作者和设计师更好地了解他们需要做什么。
他们内置了 CMS 来存储结构化数据,然后使用设计工具将这些数据添加到设计中
设计工具仍在探索定价模式
我敢肯定,你们中的许多人还记得 Adobe 软件是(昂贵的)一次性成本。现在转型已经完成,我们看到使用软件的每月费用在 10 到 50 美元之间,我认为这对一些人来说更实惠,而对另一些人来说则不那么实惠。
Web 应用程序几乎总是按月收费。Figma 对团队来说是每月 12 美元/用户。从商业角度来看,对于软件创建者来说,这似乎是明智之举。我自己的经历也印证了这一点。但我可以理解为什么这会让人们对原生软件产品望而却步。Sketch 是一次性付费 99 美元,我承认这感觉很好。
当然,这永远不会改变,而且不仅仅是一次性费用与按月付费之间的区别。有免费试用、免费增值模式、应用内购买和附加模式,所有这些模式都在工具领域中被实验和使用。
总结
这方面还有很多内容,而我远非能涵盖所有内容的人。
例如,我并没有过多地谈论在浏览器中进行设计,但那里确实存在工具。除了那些专注于排版的应用程序之外,我们没有关注那些层出不穷的微型单一功能应用程序。Coolors 就是一个我非常喜欢的例子。更不用说那些大量的设计资源网站了。我们也没有讨论像React-Sketchapp这样的跨界项目。
最后,我们来看一篇有趣的相关文章。Colm Tuite 最近写了一篇名为“设计工具正在跑偏,我们该如何修正它们。”的文章。以下是他的观点之一,我认为它很有见地
为什么设计师不能直接设计产品本身?最终,所有模型都是一次性的,但设计师却花费数月时间将它们调整到完美。这段时间用来调整产品本身会更有价值。
噪声选项有两个目的
它是一个过时时代的遗迹,那时所有东西都具有深度的纹理,需要看起来“真实”,也就是拟物化。你不会将背景设置为纯黑色,你会添加一些噪声让它看起来略带黑色;你不会让按钮简单地使用平滑的渐变,你会添加一些噪声让它们看起来粗糙一些
在非常细微的渐变中,它可以消除(或减少)你看到的色带现象。这对柔和的渐变来说更重要,而不是变化幅度很大的渐变。
最后,它可以用于审美目的;谷歌产品中出现的许多图像都具有相当多的噪声,例如这个,这个,甚至这个。谷歌称之为“加盐加胡椒”,这里有一篇关于他们如何实现它的文章在这里
100% 所有工具仍在探索,主要原因是很少有人愿意投资开发出色的工具,大多数都专注于适合、完善和功能性(这并没有为制造业的质量带来很大的改善,而制造业正是它的起源)。
多语言和多货币(我不知道有什么好的工具,有些工具可以,但效果一般)
多设备(同样,RWD 应该拯救我们所有人,但我感觉它只是一个廉价的 polyfill)
跨平台(就在上周,我听到一位才华横溢的本地开发人员在播客中抱怨 Ionic)
A/B 测试(大多数人都在围着一款平台叫喊,说他们的“算法”将提供帮助)
希望在未来 10 年,“魔法”会出现。没有证据证明它会,或者已经开始,但它比以前稍微好了一些,所以……我想我们拭目以待吧?
小细节:当你谈论定价模式时,你说“Sketch 是一次性付费 99 美元,我承认这感觉很好。”Sketch 是 99 美元/年,所以它并不是完全的固定费用。你可以在支付一次后继续使用它,但你不会获得任何更新。这可能会让它比标准订阅模式更让人困惑(为了便于了解,我因为订阅到期而落后了大约 6 个更新,我的升级价格是 69 美元,而不是 99 美元,可以再使用一年)。
不错。
能够生成良好但并非完美的代码的设计工具将使通过 github 和 bitbucket 进行版本控制和协作变得容易。关键是使用真正的代码,以及一些 png、gif 和 jpeg(众所周知,svg 是代码),无论是好是坏。有一些工具可以为 Web 和移动应用实现这一点。Coffee Cup 的 Responsive Designer 和 Pinegrow。对于移动应用,有 Neonto Studio (Neonto.com) 用于 iOS 和 Android,以及 Creo (Creolabs.com) 用于 iOS。Paintcodeapp.com 是一个可以为所有平台生成真实代码的设计工具。
如果我们倾向于成为 CSS 专家,而这正是我们工作的主要内容,那么有人认为我们是否害怕在未来十年被这些工具取代?这有点让我害怕。
不要忘记 Gravit Designer,它本身就是 Sketch 和 Figma 的竞争对手。它是免费的,可以在浏览器中运行(也可以离线使用桌面应用程序),可以在所有平台上使用,并结合了 UI 设计、插画和印刷设计工具。Gravit Cloud 允许你与同伴分享设计,并随时访问它们。查看一下:https://designer.io/.
嗨,克里斯。教程很棒且内容丰富。我是一个 WordPress 初学者。目前我正在开发我的第一个主题,我想添加一个菜单,就像你在 CSS tricks 上添加的那样。你能告诉我如何在 WordPress 菜单中添加图标添加功能吗?
我已经创建了静态标记来实现这一点,但无法为 WordPress 动态实现。如果你能帮我,那就太好了。非常感谢你的所有教程。我是你的忠实粉丝。
此致
MS Shohan