网页原型设计工具设计_设计工具用完了

网页原型设计工具设计

by Colm Tuite

通过Colm Tuite

设计工具已超出预期。 这是我们如何修复它们的方法。 (Design tools are running out of track. Here’s how we can fix them.)

Rarely a day goes by where I don’t spend at least some time thinking about design tools. A few years ago, I built a design tool which was acquired by Marvel. That was over two years ago but since then the landscape hasn’t changed much, nor has my passion for improving it.

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

Recently, I tweeted about design tools — a thing which has been known to happen from time to time.

最近，我在推特上发布了有关设计工具的信息-这是不时发生的事情。

I wasn’t the only one to speak my mind that day, others chimed in too.

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

July 28, 2017 was not a good day for design tools.

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

There’s a lot of great insight buried in these Twitter threads but for a long time, I’ve been wanting to take the time to dive deep into just what it is that I think is so fundamentally broken about the current design tool model, as well as hint at the direction I think we should be headed.

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

我们都在画画。 太疯狂了 (We are all just drawing pictures. It’s insane.)

Almost all popular design tools export to images. This is problematic for a number of reasons:

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

1. You cannot interact with an image. Prototyping tools empower us to add screen transitions and simple interactions to images. However, as our products continue to demand more advanced screen transitions and micro-interactions, images simply cannot keep up.
   您无法与图像互动。 原型工具使我们能够向图像添加屏幕过渡和简单的交互。 但是，由于我们的产品继续要求更高级的屏幕转换和微交互，因此图像根本无法跟上。
2. Images are not fluid. Communicating responsive design decisions through images is usually a difficult task.
   图像不流畅。 通过图像传达响应式设计决策通常是一项艰巨的任务。
3. Images are not stateful. In order to effectively communicate the various states for a UI, often many images are necessary.
   图像不是有状态的。 为了有效地传达UI的各种状态，通常需要很多图像。
4. Bitmap images are resolution dependent. With the advent of retina devices, images can sometimes render poorly.
   位图图像取决于分辨率。 随着视网膜设备的出现，图像有时会表现不佳。
5. Images files tend to be heavy and are often cumbersome to store, manage or share.
   图像文件往往很沉重，并且通常难以存储，管理或共享。

As long as design tools continue to export images, they will never be able to produce accurate representations of our products. This lack of accuracy hinders communication between designers and developers. As long as designers continue to use a woefully inadequate medium to communicate their work, that work will always be open to misinterpretation.

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

This is a very significant point because, at their core, almost all design tools convert vector shapes to images. Photoshop, Illustrator, Marvel, Adobe XD, Sketch and Figma are all the same in this regard. Yet images can only partially communicate design intent. As our products continue to adopt and support complex interactions, voice input, video input, augmented reality, virtual reality, temperature sensitivity etc., the value these tools provide will diminish rapidly. Image-based design is a dead end.

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

Our design tools should manipulate the actual product, not a picture of it.

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

我们的产品是交互式的。 我们的工具是静态的。 (Our products are interactive. Our tools are static.)

I touched on this in my previous point but it’s super critical so I figured I’d elaborate a little.

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

Think of the amount of simple interactions which are commonplace in almost all of our products yet cannot be communicated through our design tools. Here’s a brief list off the top of my head:

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

• Hovering a button
  悬停按钮
• Focusing an input
  集中输入
• Checking a checkbox
  选中一个复选框
• Tabbed content
  标签内容
• Scroll areas
  滚动区域
• Tab index for focused states
  焦点状态的标签索引
• Keyboard shortcuts
  键盘快捷键

Sure, some of these features can be mimicked with some hacky engineering but one has to wonder, what on Earth is the point? Why can’t designers just design the actual product?! Ultimately, all mockups are disposable, yet designers spend months tweaking them to perfection. That time would be much better spent tweaking the actual product.

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

I won’t go too far down the “should designers code” rabbit hole but I’m not suggesting we all write code. I’m just saying there is no good reason why our design tools can’t support direct manipulation of our live products.

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

Framer does a better job than most in this department, supporting advanced and detailed interactions. The rest of the pack are very far behind.

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

我们的工具应支持Web的布局范例 (Our tools should support the web’s layout paradigm)

Until about a year ago, the only way to build layouts on the web was to use the display: table and vertical-align CSS properties. Now we have Flexbox and soon we will have CSS grid. These three layout engines function pretty similarly, utilising the flow of the DOM. Almost all websites are built using one of these three layout systems.

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

So, it makes sense that our design tools support the same layout model. Right?

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

Well, almost all design tools ignore these layout systems, instead opting to position each layer absolutely within its artboard. This opens a chasm between how the web functions and how our design tools function, introducing many issues:

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

• Responsive design becomes very difficult because each layer must be rearranged manually for every breakpoint. Alternatively, a constraint-based layout system can be introduced but that adds complexity, steepens learning curves and ultimately prevents developers from transferring the layout directly to the web.
  响应式设计变得非常困难，因为必须为每个断点手动重新排列每一层。 或者，可以引入基于约束的布局系统，但会增加复杂性，加剧学习曲线，并最终阻止开发人员将布局直接传输到Web。
• Since each layer is outside the flow of the document, manipulating content becomes tricky. For example, if you want to add an item to a list, you must manually reposition the other items in that list. Of course, repeat functions and other fancy features can be introduced to ease the pain but again, this introduces added complexity and complicates something that the DOM gives us for free.
  由于每一层都在文档流之外，因此处理内容变得很棘手。 例如，如果要将项目添加到列表中，则必须手动在该列表中重新放置其他项目。 当然，可以引入重复功能和其他奇特的功能来减轻痛苦，但这又增加了复杂性并使DOM免费提供给我们的东西变得复杂。
• Absolute positioning naturally leads to fixed pixel coordinates and dimensions. This breeds inflexibility and, again, is a huge departure from how the web functions. The web is built on fluid units like em, rem, vh, vw and %. Our tools should support these units by default.
  绝对定位自然会导致像素坐标和尺寸固定。 这滋生了僵化，并且再次与Web的运行方式大相径庭。 网络建立在诸如em，rem，vh，vw和％之类的流体单位上。 默认情况下，我们的工具应支持这些单元。

Design tools shouldn’t need to resemble or reflect the web and its nuances — they should just BE the web.

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

整体工具不是解决之道 (A monolithic tool is not the way)

Good design happens in stages. A well-structured design system has a few distinct layers:

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

1. Style palette

   样式调色板

   A collection of colors, shadows, spacing, border radii, typefaces, font sizes, animations and other styles which form your brand identity. Currently, most design tools only support color palettes. Until they support the other style properties, it will be extremely laborious to design systematically.

   颜色，阴影，间距，边框半径，字体，字体大小，动画和其他样式的集合，这些构成了您的品牌形象。 当前，大多数设计工具仅支持调色板。 在它们支持其他样式属性之前，系统地设计将非常费力。

2. Assets

   资产

   This includes elements like icons, illustrations and images. There are some phenomenal image editors out there and Figma’s vector tool is excellent but when it comes to SVG support, our design tools leave a lot to be desired.

   这包括图标，插图和图像等元素。 那里有一些出色的图像编辑器，并且Figma的矢量工具非常出色，但是当涉及到SVG支持时，我们的设计工具还有很多不足之处。

3. Component library

   组件库

   A component is a collection of styles and assets which renders data to a single element in a variety of variations. Examples include buttons, inputs, badges etc. As I mentioned, Figma and Sketch have recently abstracted this process away from the main drawing flow — it’s a pity they’re just pictures of components and not

   组件是样式和资产的集合，这些样式和资产以各种变体将数据呈现到单个元素。 例子包括按钮，输入，徽章等。正如我提到的那样，Figma和Sketch最近从主绘图流程中抽象了此过程-遗憾的是它们只是组件的图片而并非

   actual components.

   实际组成部分。

4. Modules

   模组

   A module/composition is a collection of components which renders data to an encapsulated piece of UI in a variety of states. Examples might include header bars, tab menus, login forms, tables etc. Since modules are just complex components, I’m guessing Figma and Sketch can handle these too. Though there may be some merit to separating the two.

   模块/组合是组件的集合，这些组件以各种状态将数据呈现到UI的封装部分。 示例可能包括标题栏，选项卡菜单，登录表单，表格等。由于模块只是复杂的组件，我猜想Figma和Sketch也可以处理这些问题。 尽管将两者分开可能有一些好处。

5. Screens

   屏风

   A screen is a collection of modules, components and data to form a complete UI which the user can interact with.

   屏幕是模块，组件和数据的集合，以形成用户可以与之交互的完整UI。

Most design tools provide features which support each of these design stages to some extent at least. The problem is that all of the stages are conflated. Almost all design tools offer just one mode — the drawing mode. You create a set of artboards and just start drawing pictures. Only very recently have tools like Sketch and Figma abstracted components/symbols away from the main drawing mode — which is weird because in front-end development, components have been abstracted for many years.

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

While designing a style palette, I don’t need to see artboards or vector tools. I want to see tools for choosing harmonious colors. I want presets for things like an 8dp spacing scale or a selection of type scales.

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

Designing an icon requires a completely different mode of thinking to designing a user flow. A simple SVG editor which allowed me to draw native SVG rectangles, circles, lines and paths, then exported optimised SVG code would be ideal.

设计图标需要与设计用户流程完全不同的思维方式。 一个简单的SVG编辑器非常理想，该编辑器允许我绘制本机SVG矩形，圆形，直线和路径，然后导出优化的SVG代码。

While designing a component, I should no longer be thinking about individual styles — I should simply be choosing styles from my predefined style palette. I can’t just start tweaking styles for one component because that would introduce inconsistency, diluting the effectiveness of my design system. Once a style palette is in place, it should only be editable at the source.

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

Similarly, while composing a module, I should only be exposed to my predefined component library. There should be no style properties in a sidebar. No vector tools. Just a library of reusable components which I can drag and drop to compose modules.

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

The same goes for composing screens. At this point, we’re just reusing components and modules to build a UI. We’re not thinking about styles or shapes or other creative endeavours. We’re primarily focused on designing the content and user flows.

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

Each of these design stages could take place in separate tools entirely or just different modes within the same tool. I don’t think it matters much. One thing is for sure though, most current design tools fail to even acknowledge the process.

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

我们的工具应鼓励良好的设计 (Our tools should encourage good design)

Designers have the rare luxury of being able to add an infinite number of unique styles to a project without any noticeable repercussions. Need a slightly larger font size? Just bump it up. No biggie. Need a slightly brighter colour? Just tweak it. It’s cool. You could even create multiple artboards in the same project, each using slightly different values for similar styles and it would probably go unnoticed.

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

Your design tool is never going to tell you that you can’t do something. It’s never going to pull you up for using an off-brand color. It’s never going to prevent you from using a whitespace value which doesn’t belong in your spacing scale. It’s never going to warn you that 20% of the population literally cannot see that light gray text you’ve just designed.

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

And why not…? Because design tools don’t care.

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

Design tools are so waywardly enamoured with a vision for unlimited creativity that they have lost sight of what it means to design sensibly, to design inclusively, to design systematically.

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

Put simply, design tools allow us to do whatever the hell we want. To some extent, this level of boundless creativity is useful, especially in the ideation phases. As UI designers though, the majority of our workflow doesn’t call for much creativity. Rather, our workflow calls for reuse, repetition, familiarity and standardisation; needs that our tools do little to satisfy.

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

This unlimited freedom is at odds with the reality of web development. Since developers are working with the actual product, they must all work with the same code. Developers cannot simply add isolated font sizes or random color values to the codebase. Firstly, a linter (an alert message warning about poorly written code) would likely start screaming immediately. If not, then their shoddy craftsmanship would probably be apprehended during a code review. If it somehow managed to slip through the cracks, a noticeable performance impact would eventually sound the alarm.

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

One of the most disruptive problems I see on product teams is the disconnect between design and development teams. Developers have been working with strict guidelines and constraints for years. Unless our design tools adopt these same constraints, the gap will never narrow.

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

我们应该用实时数据进行设计 (We should be designing with live data)

Live data has been incorporated to some extent by a lot of tools, which is great to see. Adobe XD have some really neat features for generating fake data that resembles typical live data. Invision Craft also provides some cool live data features for Sketch.

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

Live data shouldn’t stop with text, though. Other elements like images and video can have a huge impact on the user experience by significantly increasing load times. If you’re working on the web, browser dev tools allow you to throttle the connection to resemble a variety of internet speeds. Then, you can see first-hand how a new piece of content might affect the user experience.

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

Do our design tools afford us these luxuries?

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

In a word: no.

一言以蔽之。

The closer we get to designing the actual product, the more helpful and impactful our design work can be.

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

网络已打开。 我们的工具也应该如此。 (The web is open. Our tools should be, too.)

One of the truly beautiful things about the web is its open accessibility. A website can be viewed in any web browser on just about any device.

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

How does that compare with design tools? Well, a few days ago, my brother David asked me for a design review of an app he is building. He sent me a Sketch file. When I opened it, this happened…

与设计工具相比如何？ 好吧，几天前，我的兄弟David要求我对他正在开发的应用程序进行设计审查。 他寄给我一个素描文件。 当我打开它时，发生了…

Most design tools are walled gardens. If one colleague is working in Photoshop, another colleague can’t open that project in Sketch. It’s not even enough to have your whole team using the same tool — they must also be using the same version of that tool.

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

Marvel and Figma do a good job here, offering free plans and innovative collaboration features.

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

那么，设计工具的未来是什么？ (So, what is the future of design tools?)

Innovation in design tooling is extremely valuable and there’s been a lot of it recently. At Airbnb design tools, Jon Gold and Benjamin Wilkins have been working on React-Sketchapp which takes React components and renders them inside Sketch. Jon and Ben have also been working on a mind-blowing new tool which takes napkin sketches and somehow turns them into React components.

设计工具的创新非常有价值，最近有很多创新。 在Airbnb设计工具上， 乔恩·戈德 ( Jon Gold)和本杰明·威尔金斯 ( Benjamin Wilkins)一直在研究React-Sketchapp ，该工具采用React组件并将其渲染到Sketch中。 乔恩(Jon)和本(Ben)也一直在研究一种令人赞叹的新工具 ，该工具可以使用餐巾纸草图，并以某种方式将其转变为React组件。

Adam Morse, Brent Jackson and John Otander are working on a suite of tools at Compositor which basically solve all of the problems in this article and maybe the world.

亚当·莫尔斯 ( Adam Morse) ， 布伦特·杰克逊 ( Brent Jackson)和约翰·奥丹德 ( John Otander)正在Compositor上开发一套工具，这些工具基本上可以解决本文乃至整个世界中的所有问题 。

I’m working on Modulz, a new design tool and open-source design system which also aims to solve the problems I mentioned in this article. If you’re interested, follow along on Twitter for updates.

我正在使用Modulz (一种新的设计工具和开源设计系统)，该系统还旨在解决我在本文中提到的问题。 如果您有兴趣，请在Twitter上关注更新。

While innovation in tooling is important, the real challenge is education. The design community is simply not ready for a systematic design tool. Many designers have little to no interest in building systems. For some, the JPG is the end goal — the Dribbble likes.

尽管工具创新很重要，但真正的挑战是教育。 设计社区根本不准备使用系统的设计工具。 许多设计师对建筑系统几乎没有兴趣。 对于某些人来说，JPG是最终目标-Dribbble喜欢。

We need to somehow inspire a culture of accountability. Developers have had a culture of accountability for years. They have tools to keep their code in check. If a developer repeatedly deviates from their strict code guidelines, you can be sure the issue will be addressed.

我们需要以某种方式激发问责文化。 多年以来，开发人员一直具有问责文化。 他们有工具来检查他们的代码。 如果开发人员反复偏离其严格的代码准则，则可以确定将解决此问题。

Meanwhile, designers frequently amass mountains of layers in complete disarray with little regard given to layer naming, grouping, and ordering. It’s very much each to their own. Since the output (raster image) is unaffected by the input (vector layers), there’s no real burden placed on designers to be organized. Designers often excuse this lack of organization by romanticizing the art of design, painting themselves as magicians who need to be left to their own devices in order to perform.

同时，设计人员经常以完全混乱的方式堆积大量的图层，而很少考虑图层的命名，分组和排序。 各自都有。 由于输出(光栅图像)不受输入(向量层)的影响，因此对组织的设计人员没有真正的负担。 设计师常常通过浪漫化设计艺术来消除这种组织上的不足，将自己描绘成魔术师，需要任凭自己的设备才能表演。

We must also inspire a culture of inclusion. We should actively discourage malpractice like ultra light text colors which makes text difficult to read for many people, or super high-quality typefaces which make webpages slow to load, or patternless UI elements which make things difficult to understand for color blind people. Currently, this type of malpractice is applauded among the design community. If we’re to welcome a smart design tool, we must invert this culture.

我们还必须激发包容文化。 我们应该积极劝阻不当行为，例如使许多人难以阅读的超浅文本颜色，使网页加载缓慢的超高质量字体，使盲人难以理解的无图案UI元素。 当前，这种类型的不当行为在设计界中受到称赞。 如果我们欢迎使用智能设计工具，则必须颠覆这种文化。

If a systematic design tool is to win our hearts, it must first educate.

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

翻译自: https://www.freecodecamp.org/news/design-tools-are-running-out-of-track-94f21b6ae939/

网页原型设计工具设计