《Design Systems》系列翻译 19 系统化感知模式 part1

写在前面------

因为工作内容的因素，最近这3年一直在探索如何打造一个高度灵活性的设计规范体系，在能够维持自身设计积累的基础之上，也能够配合项目需要快速的产出高质量的定制化交付件，偶然之间看到了这本书，看过之后感觉很有启发，就利用业余的时间翻译成中文，水平有限，还请大家多多指教。 

***********************************

Chapter 9

Systemizing Perceptual Patterns
系统化感知模式。

 

The exercise in this chapter describes how to define perceptual patterns and integrate them into the system.
本章练习如何定义感知模式并将其集成到系统中。

 

Something grabbed my attention recently in the two products I was using — the design of accordion controls. In both interfaces the accordions looked similar and had identical (standard) functionality: expanding and collapsing sections of content. Both would be considered “aesthetically pleasing” by most people. But somehow one of them didn’t feel as robust as the other. The hover state was too subtle, the transitions were a little slow, the selected state didn’t stand out, and there didn’t seem to be enough contrast between headings and body copy.
最近，有两款我正在使用的产品中折叠面板控制器的设计引起了我的注意。在这两款产品的界面中，控制器看起来都很相似，具有相同的(标准)功能：内容的展开和折叠部分。这两者都会被大多数人认为是“审美上令人愉快的”。但不知怎么的，他们中的一个感觉不像另一个那么强壮。悬停状态太微妙，过渡有点慢，选定的状态不突出，标题和正文之间似乎没有足够的对比。

 

The design of the other accordion seemed to get all the details just right. Not only that, the same patterns — color, transitions, contrast, typography — were applied throughout the interface which helped to make it feel sturdy and well built. Even though the two products had similar utility, one of them gave a perception of quality and reliability, while the other came across flimsy and fragile.

另一个折叠面板的设计似乎把所有的细节都做得恰到好处。不仅如此，同样的图案-颜色，过渡，对比，排版-应用于整个界面，这有助于使它感觉稳固和良好的建设。尽管这两种产品有相似的用途，但其中一种给人一种质量和可靠性的感觉，而另一种却是感觉很单薄。

 

Sometimes we think that if beauty is not what we’re after, we don’t have to place any importance on aesthetics: “It’s just a functional tool. It doesn’t have to feel like anything in particular.” But then we miss a key opportunity to influence how a product is perceived. What’s important is, of course, not the styles themselves but the effect they have. A functional tool should be useful and usable, but it should also feel simple, safe and robust.

有时我们认为，如果美不是我们所追求的，我们就不需要重视美：“它只是一个功能性的工具。不一定要有什么特别的感觉。“。但随后，我们错过了一个影响如何看待一个产品的关键机会。当然，风格本身不是重点，而是它们的效果。一个功能型工具应该是有用和可用的，但它也应该感觉简洁，安全和强有力的。

 

To influence perception in a reliable and scalable way, we need to be aware of the patterns that create it.
为了以可靠和可扩展的方式影响感知，我们需要了解创建感知的模式。

 

Looking Beyond Style Properties
关注风格属性之外的部分。

 

The most obvious way to think of color, typography, spacing and other styles, is in terms of their properties: color values, text sizes, measurement units.
最明显的考虑颜色、排版、间距和其他样式的方式，是根据它们的特性：颜色值、文本大小、度量单位。

 

Take color, for instance. In many pattern libraries it’s represented by a set of values.
以颜色为例。在许多模式库中，它由一组值表示。

                                              


Pivotal’s¹ color variables demonstrate a common approach to represent color information.
Pivotal的1个颜色变量演示了一种表示颜色信息的通用方法。

 

But even with a standardized color palette there’s still plenty of scope for interpretation. What do the values represent? Which variation of green should you use? How do the colors work together?
但是即使有一个标准化的调色板，仍然有很大的解释空间。这些值代表什么？你应该使用哪种绿色扩展色？这些颜色是如何协同工作的呢？

 

Here’s a counterintuitive thought, for a design systems enthusiast: slight diversions in color aren’t problematic. In fact, having twenty shades of blue isn’t an issue, if blue has a consistent meaning throughout the interface. But if blue represents links in some parts of the site, and in others there are blue headings users can’t click, it can cause usability concerns. A set of shared colors is not enough — you also need a shared use of color in the context of the product.
对于一个设计系统爱好者来说，这里有一个违反直觉的想法：轻微的色彩改变是没有问题的。事实上，如果蓝色在整个界面中具有一致的含义，那么拥有20种颜色的蓝色就不是问题了。但是，如果蓝色表示站点某些部分的链接，而在其他地方有用户无法单击的蓝色标题，则可能会引起可用性问题。光有一组共享的颜色是不够的--您还需要在产品的内容中普及颜色的用法。

 

Likewise, a well-defined typographic scale alone won’t make your typography more cohesive. Even after we standardized all the text sizes on FutureLearn and introduced a unified type scale, the headings still weren’t always used consistently — designers and developers weren’t sure which size to pick from the scale. A shared use of typography required clear guidelines and patterns of usage which everyone could understand.
同样，仅仅有一个清晰的排版比例并不能使你的排版更有凝聚力。即使在我们对Futurelearn上的所有文本大小进行了标准化并引入了统一的类型规格之后，标题仍然没有始终一致地使用--设计人员和开发人员不确定从中选择哪种尺寸。共同使用排版需要明确的指导方针和使用模式，每个人都能理解。

 

 

 




The typographic scale on FutureLearn provided a foundation for all typography.
FutureLearn的排版标尺为所有的排版提供了参考标准。

 

How do we define the styles in a way that communicates their purpose and encourages their consistent use? As before, we’ll start at a higher level, and then go down into the details. With functional patterns we looked first at user behaviors. With perceptual patterns, we will start with aesthetic qualities.
我们如何定义样式来传达它们的目的,并鼓励一致的使用他们呢？和以前一样，我们将从更高的层次开始，然后深入到细节中。使用功能模式，我们首先研究用户行为。有了感性的模式，我们就会从美观程度开始。

 

Aesthetic Qualities And Signature Patterns

美观程度与签名模式。

 

Every interface has a certain feel, even if it’s only represented through text or voice. The most effective styles aren’t applied on the surface but evolve with the product — they will link to its ethos and core design principles (“Timeless, not cutting edge,” “Direction over choice”). Think how those qualities are embodied. What makes your product feel timeless, or utilitarian, or traditional, or cutting edge, or warm, or robust?
每个界面都有一定的感觉，即使它只是通过文本或声音来展现。想想这些品质是如何体现的。是什么让你觉得你的产品是永恒的、功利的、传统的、超前的、温馨的、强健的？

 

If the design has been around for a while, pinning down those patterns isn’t always easy. We’ve seen (with the FutureLearn examples in chapter 4) that as your product grows, its core aesthetic can change. By the time you look at the styles, you might notice that some of them are more effective than others and have stronger associations with your brand.
如果设计已经存在了一段时间，那么确定这些模式并不总是那么容易。我们已经看到(与FutureLearn的例子在第4章)，随着您的产品增长，其核心美学可以改变。当你观察风格时，你可能会注意到其中一些比其他风格更有效，并且与你的品牌有更强的联系。

 

Signature patterns² is a useful kick-off exercise to get the whole team (not only designers) on the same page, especially if they’re not used to thinking about perceptual patterns. Ask each person to write down the most memorable and distinct elements that make your product feel a certain way.
签名模式2是一个很有用的入门练习，可以让整个团队(不仅仅是设计师)在同一起点上，特别是当他们不习惯考虑感知模式时。让每个人写下让你的产品有某种感觉的最令人难忘和最独特的元素。

 

•What are the styles and tones that first come to mind when people think about your product?
·当人们想到你的产品时，首先想到的风格和色调是什么？

 

•How do your users describe the aesthetic?
·用户如何描述审美？

 

•Are there any moments frequently recalled in user feedback (“That pink tick always makes me smile”)?
·在用户反馈中是否有经常出现的场景（“粉红色的对号总是让我微笑”）？

 

It’s also helpful to identify places or examples where the design is off-brand; for example, “Small subtle animations, not quick bouncy ones.”
它也有助于识别有哪些地方或例子的设计是与品牌不一致的，例如，“微妙的小动效，而不是快速弹跳。”

 

Think not only about the properties but high-level principles, combinations of different elements, and the relationships between them. For instance, instead of simply listing the colors, describe the proportions between them: “Primarily white with pink and blue accents.” Include examples of a typical representation of the pattern. Here’s what your list might look like:
不仅要考虑属性，还要考虑高级原则、不同元素的组合以及它们之间的关系。例如，不要简单地列出颜色，而是描述它们之间的比例：“主色是白色，带有粉红色和蓝色的强调色。”包括模式的标准示例。以下是您的列表可能看起来的样子：




Notes from signature patterns exercise for FutureLearn.
FutureLearn签名模式练习笔记。

 

I find that capturing signature patterns as a team can provide guidance and inspiration for the whole process. When looking at shapes, say, if circles are a distinguishing feature in your interface, you might want to question why you use squares in some cases.
我发现练习签名模式的过程可以为团队提供全程的指导和灵感。当观察形状时，例如，如果圆形是界面中的一个显著特征，那么您可能想问为什么在某些情况下使用正方形。

 

Identifying Perceptual Patterns
识别感知模式。

 

Drawing on the signature patterns exercise, you should then make your own list of individual styles to work through. Here are some of the types of things that may appear in your list:
在签名模式练习的基础上，您应该制定自己要处理的个人样式列表。以下是可能出现在您的列表中的一些类型：

 

•color

颜色

•interactive states

交互状态

•animations

动效

•typography

排版

•spacing

间距

•iconography styles

图标样式

•shapes and borders

形状和描边

•illustrations

插画

•photography

图片素材

•voice and tone

语音和语调

•sounds and audio cues

声音和音频提示

With each individual style you choose to focus on, there’s a simple process to systemize them.
对于您选择关注的每一种风格，都有一个简单的过程来将它们系统化。

 

1. Start with the purpose.
1.。从目的开始。

 

2. Collect and group existing elements.
2.。收集和分组现有元素。

 

3. Define patterns and building blocks.
3.。定义模式和构建模块。

 

4. Agree on the guiding principles.
4.。符合指导原则。

 

You won’t be able to go through all of the styles in one go. Each one will need its own inventory (and possibly a sprint or longer to integrate the changes afterwards).
你不可能一蹴而就。每个人都需要自己的积累(可能还需要一个设计冲刺或更长的时间来汇总之后的更改)。

 

As you go through them, there will be overlaps: between typography and space, color and text, shapes and borders, borders and iconography. This is good, because you can build on the properties you’ve defined previously and you can see how they relate to each other. For example, the colors you define will be used in interactive states; interactive states will be used in animations. When looking at typography and spacing, you can see how size of text affects spacing around it.

当你通览它们，会有重叠：排版和间距，颜色和文字，形状和边框，边框和图标。这很好，因为您可以在前面定义的属性的基础上进行构建，并且可以看到它们是如何相互关联的。例如，您定义的颜色将用于交互状态；交互状态将用于动画。当查看排版和间距时，您可以看到文本的大小是如何影响周围的间距的。

 

Color
颜色。

 

The goal of the first step is to make the use of color more consistent. To do that we will start by listing the roles color plays in your interface.
第一步的目标是使颜色的使用更加一致。为此，我们将首先列出颜色在您的界面中扮演的角色。

 

Start with the Purpose
从目的开始。

 

Wording is important. How we phrase a purpose shouldn’t be vague and obvious. A statement like this, from the government of Canada’s Web Experience Toolkit³, wouldn’t be particularly helpful: “Use color as a presentation element for either decorative purposes or to convey information.”
措辞很重要。我们对目标的表述不应该含糊不清和显而易见。加拿大政府的“网络体验工具3”(WebExperienceToolkit 3)也发表了这样的声明：“将颜色作为表现元素，用于装饰或传达信息。”

 

Be specific. For example, color can be used to:
具体点。例如，颜色可用于：

 

•Display different types and hierarchy of text (body, headings, blockquotes).
显示不同类型和层次的文本(正文、标题、区块引语)。

 

•Highlight links and actions (main CTAs, supporting CTAs, links).
高亮链接和操作(主要的CTA、辅助CTA、链接)。

 

•Draw attention to messages and differentiate between them (affirmation, warning).
·吸引注意力到信息中，并区分这些信息(成功、警告)。

 

•Separate content or create emphasis (backgrounds, borders).
分离内容或作出强调(背景、边界)。

 

•Differentiate between types of data (in charts, graphs).
区分不同数据类型(图表和图像)。

 

The roles you define will determine the categories for your inventory.
您定义的角色将决定样式库的类别。

 

Collect and Group Existing Colors
收集和并对现有颜色分组。

 

Even though I prefer paper inventories because of their tangibility, it’s tricky to audit styles by cutting them out on paper. A Google doc⁴ can work better, and so can Keynote, Powerpoint or Sketch — whatever suits you.

尽管我更喜欢纸质样式库，因为它们是有形的，但是通过在纸上剪掉它们来审核风格是很棘手的。谷歌文档4可以更好地工作，keynote，Powerpoint或Sketch-任何适合你的都可以。

 

Set up a blank document with the categories. As you go through the audit, you might adjust the headings or add new ones, but it helps not to start with a blank page.
设置带有目录的空白文档。在进行审核时，可以调整标题或添加新标题，但最好不要从空白页面开始。

 




Example of initial categories for auditing colors in a Google doc.
在Google文档中审核颜色的初始类别示例。

 

For each category add:
每个分类的附加想：

 

•Type
Specify the type of object the color is applied to, such as a call to action, a heading, a feedback message, and so on.

类型 指定应用颜色的对象类型，例如对动作的调用、标题、反馈消息等等。

•Example
Add a screenshot of the element, to show where color is used.
·示例：
添加元素的屏幕截图，以显示颜色的使用位置。

•Value
Specify the hex value.
·参数值
指定十六进制值。

•Feel
If the purpose of the color is to create a certain mood or feel, specify that.
·感觉
如果颜色的目的是创造某种情绪或感觉，请具体说明。

 

You’ll end up with a list of color instances grouped by purpose. Here’s an example of an audit for links and buttons in the public library’s interface. In the same manner, I would collect and group text colors, feedback messages, backgrounds, borders, and so on.

最后，您将得到一个按用途分组的颜色实例列表。下面是一个公共库界面中的链接和按钮的示例。以同样的方式，我会收集和分组文本颜色，反馈信息，背景，边框，等等。

 


Audit of links and buttons, conducted in a Google doc.

链接和按钮的列表，在谷歌文档中进行管理。

 

Some colors will have a specific feel associated with them. In TED’s interface, black headers are used to create a more cinematic (and less informational) feel. On FutureLearn, a full blue to yellow gradient helps to create a celebratory mood when a learner completes a milestone.

有些颜色会有一种特定的感觉与他们联系在一起。在TED的界面中，黑色标题被用来创造更多的影院般(和更少的信息)的感觉。在“FutureLearn”中，从蓝色到黄色的完全渐变有助于在学习者完成一个里程碑时创造一种庆祝的气氛。

 




Use of full gradient on FutureLearn for a milestone celebration.
FutureLearn使用全渐变色为一个里程碑庆祝。

If there are specific emotional qualities that color is meant to bring into your product, it’s important to capture that. Misuse can weaken the purpose colors were intended for. Using a full gradient in promotional modules on FutureLearn, for instance, would weaken its association with celebration.
如果有特定的情感品质，颜色是为了给你的产品带来特定单一的，捕捉到这一点很重要。错误使用将削弱目的颜色的意图。例如，在“FutureLearn”的宣传模块中使用全渐变色，会削弱它与庆祝活动的联系。

 

 

Define Patterns
定义模式。

 

Next, you can define patterns of usage based on the purpose of color (and feel, if appropriate). When do you use blue links and when gray? What is the meaning of red calls to action? Why are some backgrounds gray and others brightly colored? What is the difference between black and red headings?

接下来，您可以根据颜色的用途定义使用模式(如果适当的话，还可以定义感觉)。你什么时候用蓝色的链环，什么时候用灰色的？红色CTA按钮是什么意思？为什么有些背景是灰色的，而另一些背景是亮色的？黑色标题和红色标题有什么区别？

 

Don’t worry about the exact hex values just yet. What matters is that you agree on the use of color across the interface. Here’s an example of how patterns could be defined for links and buttons.
现在还不用担心确切的十六进制值色值。重要的是你对在界面上使用那些颜色达成了一致。下面是一个如何为链接和按钮定义模式的示例。

 

                                             


How color patterns for links and buttons could be defined for the library site.

如何为图书馆网站定义链接和按钮的颜色模式。

Considering purpose first means that you’re not only adjusting variations of the same color, but sometimes will change the way color is used. On the library’s site, because some interactive elements are red, we’d expect all red elements to be interactive. But in the example below, you can’t click the “Recommendations” heading to view recommendations. In this case we can consider changing the color of the heading to black or making the heading interactive.

目的优先意味着你不仅要调整相同颜色的变化，而且有时还会改变颜色的使用方式。在图书馆网站中，因为一些交互元素是红色的，所以我们希望所有的红色元素都是交互的。但在下面的示例中，您不能单击“建议”标题来查看建议。在这种情况下，我们可以考虑将标题的颜色改为黑色或使标题具有交互性。

 

 

A red heading on the library site that is not interactive.

图书馆网站模块的红色标题没有交互属性

 

It’s important to note that these decisions can alter the overall aesthetic of the site. We might decide that links and calls to action should be red instead of blue, but that could result in a more noticeable overall change to the aesthetic of the interface — suddenly there would be many more red elements in proportion to blue.
重要的是要注意这些决定可以改变整个网站的视觉样式。我们可能会决定，链接和CTA按钮应该是红色而不是蓝色，但这可能导致整体界面更明显的视觉审美变化-突然红色元素占比上会高于蓝色。

 

In FutureLearn’s interface, we considered changing the square shapes used in the course progress module to circles, before we realized that the course navigation was a signature pattern and replacing the shapes would alter the brand’s feel.
在FutureLearn的界面中，我们考虑将课程进度模块元素中的正方形改为圆形，然后才意识到课程导航是一种签名模式，替换这些形状会改变品牌的感觉。

 

Understanding signature patterns can help you find the right balance between making improvements and making sure you don’t weaken or dilute the existing aesthetic. If your goal is to change the current design, it should be done prior to the systemizing exercise.⁵
理解签名模式可以帮助您在改进和确保不会削弱或稀释现有的美学之间找到适当的平衡。如果你的目标是改变当前的设计，那么应该在系统化练习之前完成这些变动。

 

Specify Building Blocks
指定构成模块

 

During a color inventory it’s not uncommon to discover dozens of variations of the same color (Marcin Treder discovered 62 shades of gray while doing the color inventory for UXPin⁶). Most of them are unnecessary and create needless complexities in design and code.
在色彩目录中，通常会发现同一颜色出现了几十种的变体(Marcin Treder在为UXPIN 6梳理颜色目录时发现了62种灰色阴影)。其中大多数都是不必要的，并在设计和代码中造成不必要的复杂性。

 

The goal of this step is to make the color palette more focused, precise and accessible. Typically this involves reducing the number of variables for each color.

这一步的目的是使调色板更集中，更精确，更容易获得。通常，这涉及到减少每种颜色的变体数量。

 

 

 

Here are a few tips that can be helpful in this process.
下面是一些在这个过程中有帮助的提示。

 

Start Only with What You Need
只从你需要颜色的开始

 

The advantage of a purpose-directed inventory is that it helps you guide and limit color choices. When you start with the role and meaning of color, you get an idea of how many options you really need. By considering where and how they’ll be used, you will know, for instance, that you only need three variations of blue.
有目的性的清单的优点是它可以帮助您规范和限制颜色的选择。当你从颜色的作用和意义开始，你就会知道你真正需要多少种选择。通过考虑在哪里和如何使用它们，你会知道，例如，你只需要三种不同的蓝色。

 

The number of shades and tints will vary, depending on your circumstances. In FutureLearn’s interface, we purposefully avoided darker and lighter varieties of the same color to keep the palette crisp. It helped us make the color system simple and focused.
根据您的环境，颜色和颜色的数量会有所不同。在FutureLearn的界面，我们故意避免同一颜色中更暗和更亮的变体，从而保持调色板的清爽。它帮助我们确保颜色系统简单和集中。

 

On the other hand, UXPin, a prototyping tool, has light and dark modes, which means the color palette needs shades and tints to provide sufficient contrast in both settings.

另一方面，UXPin是一种原型工具，有浅色模式和深色模式，这意味着调色板需要阴影和色调，以便在这两种设置中提供足够的对比度。

 




FutureLearn’s primary and secondary colors (left) and some of the UXPin colors (right) show how the need for color variation is different in different interfaces.

FutureLearn的主次颜色(左)和一些UXPin颜色(右)显示在不同的界面对颜色变化的需要是如何不同的。

 

Sometimes you need to have more options, particularly if there are multiple themes, or if you’re dealing with data visualization. But it’s important to avoid including the colors just to add more variety to your palette. The more choices there are, the more complex the system is, then the harder it is to achieve consistent use of color. Start with only what you need and build on it.
有时候，您需要有更多的选项项目，特别是如果有多个主题，或者您正在处理数据可视化。但重要的是要避免仅仅为了给您的调色板添加更多的选择性而添加更多的颜色。选择越多，系统越复杂，就越难实现对颜色的一致使用。从你所需要的开始，在它的基础上继续发展。

 

If you have more than two variations of the same color, it helps to specify a base value and then add additional shades and tints: 20% lighter than base, 20% darker than base, and so on. Base color values provide consistent defaults. When there are many options to consider, defaults and meaningful increments are easier to remember and work with. Specifying the base color and increments also works for other perceptual patterns, such as typography (base font size), spacing (base measurement unit), and animations, as we will see later.

如果同一个颜色有两个以上的变体，则可以指定一个基值，然后添加额外的阴影和色调：比基色亮20%，比基色暗20%，依此类推。基色值提供一致的默认值。当有许多选项需要考虑时，缺省值和有意义的增量更容易记住和使用。指定基色和增量也适用于其他感知模式，如排版(基字体大小)、间距(基度量单位)和动画，稍后我们会讲解到。