我们都在画画。这是疯了

几乎所有流行的设计工具导出到图像。这是有问题的，原因如下：

1. 您不能与图像进行交互。原型设计工具使我们能够向图像添加屏幕过渡和简单交互。然而，随着我们的产品继续需求更先进的屏幕转换和微观互动，图像根本无法跟上。
2. 图像不流畅。通过图像传达响应式设计决策通常是一项艰巨的任务。
3. 图像不是有状态的。为了有效地传达UI的各种状态，通常需要许多图像。
4. 位图图像依赖于分辨率。随着视网膜设备的出现，图像有时可能会变得不好。
5. 图像文件往往很沉重，通常很难存储，管理或共享。

只要设计工具继续出口图像，它们将永远无法产生我们产品的准确表示。这种缺乏准确性阻碍了设计师和开发人员之间的沟通。只要设计师继续使用一个不幸的媒介来传达他们的工作，这个工作总是会被误解。

这是一个非常重要的一点，因为在其核心，几乎所有的设计工具将矢量形状转换为图像。Photoshop，Illustrator，Marvel，Adobe XD，Sketch和Figma在这方面都是一样的。然而，图像只能部分地传达设计意图。随着我们的产品继续采用和支持复杂的交互，语音输入，视频输入，增强现实，虚拟现实，温度敏感性等，这些工具提供的价值将会快速减少。基于图像的设计是一个死胡同。

我们的设计工具应该操纵实际产品，而不是其图片。

我们的产品是互动的。我们的工具是静态的。

我以前在这一点上触及到这一点，但它是非常关键的，所以我想我会详细说一下。

想想几乎所有产品中常见的简单交互的数量，但不能通过我们的设计工具进行沟通。这是我头顶的简要列表：

• 悬停按钮
• 聚焦输入
• 勾选复选框
• 标签内容
• 滚动区域
• 焦点状态的标签索引
• 键盘快捷键

当然，这些功能中的一些可以模仿一些黑客工程，但人们不得不怀疑，地球是什么？为什么设计师不能设计出实际的产品？最终，所有的模型都是一次性的，但是设计师花了几个月的时间来调整他们的完美。那个时间会更好地调整实际的产品。

我不会走得太远，“应该设计师代码”兔子洞，但我不是建议我们都写代码。我只是说没有什么好的理由为什么我们的设计工具不能支持直接操纵我们的直播产品。

Framer在该部门比大多数人做得更好，支持高级和详细的交互。该包的其余部分都非常落后。

我们的工具应该支持web的布局范例

直到大约一年前，在网络上构建布局的唯一方法是使用display: table和vertical-alignCSS属性。现在我们有Flexbox，很快我们将会有CSS网格。这三个布局引擎的功能非常相似，利用DOM的流程。几乎所有网站都是使用这三种布局系统之一构建的。

因此，我们的设计工具支持相同的布局模型是有道理的。对？

那么几乎所有的设计工具都忽略这些布局系统，而是选择将每个层定位在它的画板中。这打开了Web功能与我们的设计工具的功能之间的差距，引入了许多问题：

• 响应式设计变得非常困难，因为每个断点都必须手动重新排列。或者，可以引入基于约束的布局系统，但是增加了复杂性，使学习曲线变得更加陡峭，并最终阻止开发人员将布局直接传递到网络。
• 由于每个层都在文档的流动之外，操作内容变得棘手。例如，如果要将项目添加到列表中，则必须手动重新定位该列表中的其他项目。当然，可以引入重复的功能和其他花哨的功能来缓解痛苦，但是这再次引起了更多的复杂性，并使DOM给我们免费的东西变得复杂。
• 绝对定位自然会导致固定的像素坐标和尺寸。这样就会产生不灵活性，而且与Web的功能大相径庭。网络建立在像em，rem，vh，vw和％这样的流体单元上。我们的工具默认情况下应支持这些单位。

设计工具不应该像网站和它的细微差别一样 - 反而应该是网络。

一个单一的工具不是这样的

良好的设计发生在阶段。一个结构良好的设计系统有几个不同的层次：

1. 样式调色板
   形成您的品牌标识的颜色，阴影，间距，边框半径，字体，字体大小，动画和其他样式的集合。目前，大多数设计工具只支持调色板。直到他们支持其他风格的属性，系统地设计是非常费力的。
2. 资产
   这包括图标，插图和图像等元素。有一些惊人的图像编辑器在那里，Figma的矢量工具是非常好的，但是谈到SVG的支持，我们的设计工具留下了很多的希望。
3. 组件库
   组件是一种样式和资产的集合，可以将数据呈现给各种变体中的单个元素。示例包括按钮，输入，徽章等。正如我所提到的，Figma和Sketch最近将这个过程从主要绘图流程中抽象出来 - 很遗憾，他们只是组件的图片，而不是实际的组件。
4. 模块
   模块/组合是一组组件，它们将数据呈现给各种状态的封装的UI UI。示例可能包括标题栏，标签菜单，登录表单，表等。由于模块只是复杂的组件，我猜猜Figma和Sketch也可以处理这些。虽然分离两者可能有一些优点。
5. 屏幕
   屏幕是模块，组件和数据的集合，以形成用户可以交互的完整UI。

大多数设计工具提供了至少在某种程度上支持这些设计阶段的功能。问题是所有的阶段都是混合的。几乎所有的设计工具只提供一种模式 - 绘图模式。您创建一组画板，并开始绘制图片。只有最近才有像Sketch和Figma这样的工具从主绘图模式中抽象出元件/符号 - 这是奇怪的，因为在前端开发中，组件已被抽象多年。

在设计样式调色板时，我不需要看到画板或矢量工具。我想看到选择和谐色彩的工具。我想要预设一些像8dp的间距刻度或选择的尺寸。

设计图标需要完全不同的思维方式来设计用户流。一个简单的SVG编辑器，允许我绘制原生SVG矩形，圆形，线条和路径，然后导出优化的SVG代码将是理想的。

在设计组件时，我不应再考虑个别样式 - 我应该只是从我预定义的样式调色板中选择样式。我不能只为一个组件开始调整风格，因为这会引入不一致，从而稀释了我的设计系统的有效性。一旦样式调色板到位，它应该只能在源代码编辑。

同样，在组成一个模块时，我只应该暴露在我的预定义的组件库中。侧边栏中不应有样式属性。没有矢量工具。只是一个可重用的组件库，我可以拖放来组合模块。

组合屏幕也是如此。在这一点上，我们只是重用组件和模块来构建一个UI。我们不是在考虑风格或形状或其他创造性的工作。我们主要专注于设计内容和用户流。

这些设计阶段中的每一个都可以在单独的工具中进行，也可以在同一工具中完全或者不同的模式进行 我不认为这很重要。有一件事是肯定的，但目前的大部分设计工具都无法承认这一过程。

我们的工具应该鼓励好的设计

设计师有一个罕见的奢侈品，能够为项目添加无数个独特的风格，没有任何明显的反响。需要稍大一点的字体大小？只是碰它了 没有biggie。需要稍微更亮的颜色吗？只是调整它 这个很酷。您甚至可以在同一个项目中创建多个画板，每个画板对于类似的样式使用稍微不同的值，并且可能会被忽视。

你的设计工具永远不会告诉你你不能做某事。它永远不会拉你使用非品牌的颜色。它永远不会阻止您使用不属于您的间距标度的空格值。它永远不会警告你，20％的人口字面上看不到你刚才设计的浅灰色文字。

那么为何不…？因为设计工具不在乎。

设计工具非常喜欢无限创意的愿景，他们忽视了设计理念的意义，设计包容性，系统设计。

简单地说，设计工具可以让我们做任何我们想要的任何事情。在某种程度上，这种无限创造力的水平是有用的，特别是在思想阶段。作为UI设计师，我们大部分的工作流程并不需要太多的创造力。相反，我们的工作流程要求重用，重复，熟悉和标准化; 需要我们的工具很少满足。

这种无限自由与网络发展的现实是不相符的。由于开发人员正在使用实际的产品，所以它们都必须使用相同的代码。开发人员不能简单地将孤立的字体大小或随机颜色值添加到代码库。首先，一个linter（一个关于写不好的代码的警告消息警告）可能会立即开始尖叫。如果没有，那么他们的伪造工艺可能会在代码审查期间被捕。如果它以某种方式设法滑过裂缝，最终会引起明显的性能影响。

在产品团队中看到的最具破坏性的问题之一是设计和开发团队之间的脱节。开发人员多年来一直在严格的指导和制约。除非我们的设计工具采用同样的限制，否则差距就不会缩小。

我们应该使用实时数据进行设计

实时数据已经在一定程度上被许多工具合并，这是非常好看的。Adobe XD有一些真正的功能，用于生成类似于典型的实时数据的假数据。Invision Craft还为Sketch提供了一些很酷的实时数据功能。

实时数据不应该停止与文本，但。图像和视频等其他元素可以通过显着增加加载时间对用户体验产生巨大的影响。如果您正在使用网络浏览器，浏览器开发工具可以让您将连接限​​制为类似各种互联网速度。然后，您可以看到新的内容可能会如何影响用户体验。

我们的设计工具能为我们提供这些奢侈品吗？

一句话：不。

我们越接近设计实际产品，我们的设计工作就越有帮助和更有影响力。

网络是开放的。我们的工具也应该是。

关于网络的真正美丽的一个是它的开放获取。任何设备上都可以在任何网络浏览器中查看网站。

与设计工具比较如何？那几天前，我弟弟大卫要我对他正在建设的应用程序进行设计审查。他给我发了一个草图文件。当我打开它，这发生了...

 

大多数设计工具都是围墙花园。如果一位同事在Photoshop中工作，另一位同事无法在Sketch中打开该项目。您的整个团队使用相同的工具还不够 - 它们也必须使用相同版本的该工具。

Marvel和Figma在这里做得很好，提供免费的计划和创新的协作功能。

那么，设计工具的未来是什么？

设计工具的创新非常有价值，最近有很多。在Airbnb设计工具中，Jon Gold和Benjamin Wilkins一直在使用React-Sketchapp，它使用React组件并将它们呈现在Sketch中。Jon和Ben也一直致力于一个令人兴奋的新工具，它将卫生巾草图和不知何故将它们变成React组件。

Adam Morse，Brent Jackson和John Otander正在Compositor开发一套工具，它基本上解决了这篇文章或许是世界上的所有问题。

我在Modulz上工作，这是一个新的设计工具和开源设计系统，它也旨在解决本文提到的问题。如果您有兴趣，请在Twitter上关注更新。

虽然工具创新很重要，但真正的挑战是教育。设计界根本就没有准备好系统的设计工具。许多设计师对建筑系统几乎没有兴趣。对于一些，JPG是最终目标 - Dribbble喜欢。

我们需要以某种方式激发问责制的文化。开发人员多年来一直追求责任感。他们有工具来保持他们的代码检查。如果开发人员重复违反严格的代码指南，您可以确定问题将得到解决。

同时，设计师经常聚集在一层层次上，完全混乱，不用考虑层命名，分组和排序。它们都是自己的。由于输出（光栅图像）不受输入（矢量图层）的影响，因此不会对设计者进行组织的真正负担。设计师经常以设计的艺术浪漫化为由，将自己绘制为魔术师，为了表演而需要留给自己的设备，经常否认这种缺乏组织。

我们也必须启发一种包容的文化。我们应该积极地遏制诸如超轻文字颜色的不法行为，这使得许多人难以阅读文本，或者使网页载入速度较慢的超高品质字体，或者对无色人脸难以理解的无模式UI元素。目前，这种类型的不法行为在设计界中得到了赞誉。如果我们欢迎一个聪明的设计工具，我们必须反转这种文化。