设计工具已超出预期。 这是我们如何修复它们的方法。

很少有一天,我不会花费至少一些时间来思考设计工具。 几年前,我建立了一个被Marvel收购的设计工具。 那是两年多以前了,但是从那以后,情况并没有太大变化,我也没有热情去改善它。

最近,我在推特上发布了有关设计工具的信息-众所周知,这种工具有时会发生。

那天我不是唯一发表意见的人,其他人也对此表示赞同。

对于设计工具而言,2017年7月28日不是好日子。

这些Twitter线程中蕴藏着许多深刻的见解,但很长一段时间以来,我一直想花时间深入研究一下我认为当前设计工具模型的根本缺陷。作为我认为应该前进的方向的暗示。

我们都在画画。 太疯狂了

几乎所有流行的设计工具都可以导出到图像。 由于许多原因,这是有问题的:

  1. 您无法与图像互动。 原型工具使我们能够向图像添加屏幕过渡和简单的交互。 但是,由于我们的产品继续要求更高级的屏幕过渡和微交互,因此图像根本无法跟上。
  2. 图像不流畅。 通过图像传达响应式设计决策通常是一项艰巨的任务。
  3. 图像不是有状态的。 为了有效地传达UI的各种状态,通常需要许多图像。
  4. 位图图像取决于分辨率。 随着视网膜设备的出现,图像有时会表现不佳。
  5. 图像文件往往很沉重,并且通常难以存储,管理或共享。

只要设计工具继续导出图像,它们将永远无法生成我们产品的准确表示。 缺乏准确性阻碍了设计人员与开发人员之间的沟通。 只要设计师继续使用一种严重不足的媒介来传达他们的作品,那作品就总是容易被误解。

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

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

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

我在上一点提到了这一点,但是它非常关键,因此我想我要详细说明一下。

考虑一下几乎所有产品中普遍存在但无法通过我们的设计工具进行交流的简单交互的数量。 这是我头上的简短清单:

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

当然,其中一些功能可以通过一些骇人听闻的工程技术来模仿,但是人们不得不怀疑,这到底意味着什么? 为什么设计师不能只设计实际的产品? 最终,所有的模型都是一次性的,但是设计师花了几个月的时间对其进行完善。 花费时间来调整实际产品会更好。

我不会太过“应该设计师编码”的麻烦,但我不建议大家都写代码。 我只是说我们的设计工具不能支持直接操纵我们的实时产品并没有充分的理由。

Framer比本部门的大多数人做得更好,支持高级和详细的交互。 其他产品则远远落后。

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

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

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

好吧,几乎所有设计工具都忽略了这些布局系统,而是选择将每一层绝对定位在其画板上。 这在网络功能和设计工具的功能之间打开了鸿沟,引入了许多问题:

  • 响应式设计变得非常困难,因为必须为每个断点手动重新排列每一层。 或者,可以引入基于约束的布局系统,但会增加复杂性,使学习曲线变陡,最终阻止开发人员将布局直接传输到Web。
  • 由于每一层都在文档流之外,因此处理内容变得很棘手。 例如,如果要将项目添加到列表中,则必须手动在该列表中重新放置其他项目。 当然,可以引入重复功能和其他奇特功能来减轻痛苦,但这又增加了复杂性并使DOM免费提供给我们的东西变得复杂。
  • 绝对定位自然会导致像素坐标和尺寸固定。 这滋生了僵硬性,并且再次与Web的功能大相径庭。 该网络建立在诸如em,rem,vh,vw和%之类的流体单位上。 默认情况下,我们的工具应支持这些单元。

设计工具不需要类似于或反映网络及其细微差别,而应该只是网络。

整体工具不是解决之道

好的设计是分阶段进行的。 结构良好的设计系统具有几个不同的层:

  1. 样式调色板颜色,阴影,间距,边框半径,字体,字体大小,动画和其他样式的集合,这些构成了您的品牌形象。 当前,大多数设计工具仅支持调色板。 在它们支持其他样式属性之前,系统地设计将非常费力。
  2. 资产这包括图标,插图和图像等元素。 那里有一些出色的图像编辑器,并且Figma的矢量工具非常出色,但是当涉及到SVG支持时,我们的设计工具还有很多不足之处。
  3. 组件库组件是样式和资产的集合,这些样式和资产将数据呈现为具有各种变体的单个元素。 例子包括按钮,输入,徽章等。正如我提到的那样,Figma和Sketch最近从主绘图流程中抽象了此过程-遗憾的是它们只是组件的图片,而不是实际的组件。
  4. 模块模块/组合是组件的集合,这些组件以各种状态将数据呈现给UI的封装部分。 示例可能包括标题栏,选项卡菜单,登录表单,表格等。由于模块只是复杂的组件,我猜想Figma和Sketch也可以处理这些。 尽管将两者分开可能有一些好处。
  5. 屏幕屏幕是模块,组件和数据的集合,以形成用户可以与之交互的完整UI。

大多数设计工具提供的功能至少在一定程度上支持了每个设计阶段。 问题在于所有阶段都是混合的。 几乎所有设计工具都只提供一种模式-绘图模式。 您创建了一组画板,然后开始绘制图片。 直到最近,诸如Sketch和Figma之类的工具才从主绘图模式中抽象出组件/符号,这很奇怪,因为在前端开发中,组件已经抽象了很多年了。

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

设计图标需要与设计用户流程完全不同的思维方式。 一个简单的SVG编辑器使我能够绘制本机SVG矩形,圆形,直线和路径,然后导出优化的SVG代码将是理想的选择。

在设计组件时,我不再应该考虑单个样式-我应该只是从预定义的样式调色板中选择样式。 我不能只为一个组件开始调整样式,因为那样会引入不一致,从而降低我的设计系统的效率。 样式调色板到位后,只能在源代码上对其进行编辑。

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

组成屏幕也是如此。 至此,我们只是在重用组件和模块来构建UI。 我们不是在考虑样式或形状或其他创造性工作。 我们主要专注于设计内容和用户流程。

这些设计阶段中的每一个都可以完全在单独的工具中进行,也可以在同一工具中以不同的方式进行。 我认为这没什么大不了的。 可以肯定的是,大多数当前的设计工具甚至都无法识别该过程。

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

设计师拥有一种罕见的奢侈,能够为项目添加无限数量的独特样式,而不会产生任何明显的影响。 需要稍大的字体吗? 只是撞上它。 没关系 需要较亮的颜色吗? 只是调整它。 这很酷。 您甚至可以在同一项目中创建多个画板,每个画板对于相似的样式使用略有不同的值,并且可能不会引起注意。

您的设计工具永远不会告诉您您无法做某事。 使用品牌以外的颜色永远不会吸引您。 它永远不会阻止您使用不属于您的间距比例的空格值。 永远不会警告您,实际上有20%的人口看不到您刚刚设计的浅灰色文本。

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

设计工具痴迷于无限创造力的愿景,以至于他们忘记了明智设计,包容性设计和系统设计的含义。

简而言之,设计工具使我们能够做任何我们想做的事情。 在某种程度上,这种无限的创造力是有用的,尤其是在构思阶段。 但是作为UI设计师,我们的大部分工作流程并不需要太多的创造力。 相反,我们的工作流程要求重用,重复,熟悉和标准化。 需要我们的工具几乎无法满足。

这种无限的自由与Web开发的现实不符。 由于开发人员正在使用实际产品,因此他们都必须使用相同的代码。 开发人员不能简单地将孤立的字体大小或随机的颜色值添加到代码库中。 首先,一个短毛猫(一个警告消息,警告您写得不好的代码)可能会立即开始尖叫。 如果没有,那么他们的低劣工艺可能会在代码审查期间被逮捕。 如果它设法以某种方式滑过裂缝,则对性能的显着影响最终将发出警报。

我在产品团队中看到的最具破坏性的问题之一是设计团队与开发团队之间的脱节。 多年来,开发人员一直在遵循严格的准则和约束条件。 除非我们的设计工具采用这些相同的约束,否则差距将永远不会缩小。

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

实时数据已在一定程度上被许多工具合并,这很高兴看到。 Adobe XD具有一些真正精巧的功能,可以生成类似于典型实时数据的虚假数据。 Invision Craft还为Sketch提供了一些很酷的实时数据功能。

但是,实时数据不应仅以文本结尾。 通过显着增加加载时间,图像和视频等其他元素可能会对用户体验产生巨大影响。 如果您正在使用Web,则浏览器开发工具可让您限制连接速度,以达到各种Internet速度。 然后,您可以直接了解新内容可能如何影响用户体验。

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

一句话:不。

我们离实际产品越近,设计工作就越有帮助和影响力。

网络已打开。 我们的工具也应该如此。

网络的真正美丽之处之一就是其开放的可访问性。 几乎可以在任何设备上的任何Web浏览器中查看网站。

与设计工具相比如何? 好吧,几天前,我的哥哥大卫要求我对他正在开发的应用进行设计审查。 他寄给我一个素描文件。 当我打开它时,发生了…

大多数设计工具是围墙花园。 如果某个同事在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元素。 当前,这种类型的渎职行为在设计界中受到称赞。 如果我们欢迎使用智能设计工具,则必须颠覆这种文化。

如果要使用系统的设计工具赢得我们的心,则必须首先进行教育。