《Design Systems》系列翻译 20 系统化感知模式 part2
一本关于如何打造属于动态设计语言指导手册
写在前面------
因为工作内容的因素，最近这3年一直在探索如何打造一个高度灵活性的设计规范体系，在能够维持自身设计积累的基础之上，也能够配合项目需要快速的产出高质量的定制化交付件，偶然之间看到了这本书，看过之后感觉很有启发，就利用业余的时间翻译成中文，水平有限，还请大家多多指教。
***********************************
Make Sure Color Contrast Is Accessible
确保颜色对比度满足可用性。
Test the color contrast between text and background. Adjusting or removing the values as needed will limit your palette. For example, among several variations of light gray used for supporting links on the library site, one of the frequently used values passes WCAG 2.0 standards. This would make it an obvious choice for the default value of supporting links.
测试文本和背景之间的颜色对比。根据需要调整或删除值从而控制好您的调色板。例如，在图书馆站点中的几种浅灰色链接变体中，经常使用的值之一通过了WCAG2.0标准。这将使它成为支持链接默认值的优先选择。
There are plenty of tools to check color contrast, such as Lea Verou’s Contrast Ratio7, which is quick and straightforward to use.
有很多检查颜色对比的工具，例如LeaVerou的对比度工具（Contrast Ratio 7），它使用起来既快又简单。
Lea Verou’s Contrast Ratio checker.
LeaVerou的对比度工具检查器。
It’s worth mentioning that adjusting color values needs careful balancing within the overall aesthetic. Change the blue to a darker shade, for instance, and the whole interface can suddenly feel different, perhaps less vibrant. If your color palette was created without considering color accessibility in the first place, getting the balance right will require some finessing.8
值得一提的是，调整色彩值需要在整体美感中进行仔细的平衡。例如，将蓝色更改为较暗的阴影，整个界面可能会突然感觉到不同，也许不那么有活力。如果您的调色板是在不考虑颜色可访问性的情况下创建的，那么要实现平衡就需要一些技巧。
You can introduce different accent colors for light and dark backgrounds, or change text on colored backgrounds from light to dark, or vice versa. There are also plenty of tools for generating contrast-compliant color combinations, or for finding accessible alternatives to the original color, such as Color Safe9 and Tanaguru Contrast Finder10.11
您可以为亮背景和暗背景引入不同的强调色，也可以将彩色背景上的文本从浅色更改为声色，反之亦然。还有很多工具可以生成符合对比度的颜色组合，或者寻找原始颜色的可访问替代，如安全色 9和Tanaguru对比度查找器10.11。
Agree on the Guiding Principles
符合指导原则。
Finally, agree on a few basic principles for color usage. Guiding principles help you approach color holistically, and they can be referred to when something doesn’t quite work. Some principles can be general (such as “always use accessible color contrast”); others will be more more specific to your brand (and can be defined during the signature patterns exercise).
最后，就颜色使用的一些基本原则达成一致。指导原则可以帮助你保持颜色的整体性，当某些东西不太起作用时，可以参考它们。有些原则可以是通用的(例如“总是使用可访问的颜色对比”)；其他原则则是针对您的品牌的(并且可以在签名模式练习中定义)。
For example, in Sky’s toolkit12 the team explains the reasons for a minimal color palette:
例如，在SKY的Toolkit 12中，团队解释了最小颜色调色板的原因：
“We allow our great content to be the color that brings the page to life. We do not color code our sites, or sections within our sites.”
“我们允许我们伟大的内容成为使页面活跃起来的点缀色。我们不对我们的站点或站点中的某一部分进行彩色编码。“。
The University of Oxford13 explains clearly how and why to use its colors:
牛津大学13清楚地解释了如何和为何使用这些颜色：
“The (dark) Oxford blue is used primarily in general page furniture such as the backgrounds on the header and footer. This makes for a strong brand presence throughout the site. Because it features so strongly in these areas, it is not recommended to use it in large areas elsewhere. However it is used more sparingly in smaller elements such as in event date icons and search/filtering bars.”
“牛津深蓝色主要用于一般的页面修饰，如页眉和页脚的背景。这使得一个强大的品牌在整个网站的存在。因为它在这些区域传达了很明显的品牌特征，所以不建议在其他的区域大范围使用。不过，可以更多的在如事件日期图标和搜索/筛选栏等较小的元素中应用该颜色 “。
Animations
动画。
Even with more complex patterns, such as animations, we can follow the same process: start with the purpose, collect and group existing styles, define patterns and building blocks. Let’s take FutureLearn as an example this time.
对于更复杂的模式，例如动画，我们也可以遵循相同的过程：从目的开始，收集和分组现有的样式，定义模式和构建模块。这次让我们以FutureLearn为例。
Purpose and Feel
目的与感受
Specify the roles animation plays. For example:
指定动画所扮演的角色。例如：
•Soften transitions between interactive states, such as hover states.
·交互状态之间的微变化，例如悬停状态。
•Add emphasis to specific information or an action; for example, a nudge to encourage users to progress to the next step.
·增加对具体信息或行动的强调；例如，推动鼓励用户向下一步迈进。
•Hide and reveal extra information, such as a menu being hidden to the side, a dropdown, or a popover.
隐藏和显示额外的信息，例如菜单被隐藏在侧边、下拉菜单或弹出窗口。
The feel of the animation is another important aspect to consider. In Designing Interface Animation14, Val Head explains how adjectives describing brand qualities can be used for defining motion. A quick, soft, bouncy motion can be perceived as lively and energetic, whereas steady ease-in-outs feel certain and decisive. To be meaningful and effective, animations should have a purposeful feel across the interface.
动画个人的感受是另一个需要重点考虑的方面。在界面动画14的设计中，瓦尔海德解释了如何江品牌品质形象化来定义动效。一个快速，柔软，有弹性的动效可以被认为是活泼和充满活力的，而舒缓的渐进渐出动效则给人以明确和确定的.。在整个页面中，动效应该有给人以有一定的目的性，从而让用户认为这个动效是有意义和作用的。
Audit Existing Animations
审核已有的动画。
Once you have an idea of the role animation plays in your interface, and how it should feel, the next step is to audit existing animations. Collect the animations and group them into categories, as we did with color earlier. The examples can be captured with QuickTime or another screen recording application.
一旦你对与动效应该在界面中扮演什么样的角色以及应该给人以什么样的感觉有了一定的了解，下一步就是审核现有的动画。收集动画并对它们分组，就像我们之前对颜色所做的那样。可以使用QuickTime或其他屏幕记录程序捕获这些示例。
The “State Change” page from FutureLearn’s animation audit, conducted in a Google doc15.
“状态改变”页面来自Futurelearn的动画审核，在Googledoc15中进行。
Define Patterns
定义模式。
Define patterns of usage based on the purpose and feel. In FutureLearn’s interface we noticed that emphasis animations typically feel more playful, and that state change transitions are more subtle and calm.
根据目的和感觉定义模式的使用方式。在“FutureLearn”的界面中，我们注意到强调动画通常会更有趣，而状态转换更微妙、更平静。
If these are the tones you want to strike throughout the system, try aligning all the animations to them. Like the signature patterns exercise, take the examples that work well (that is, achieve the purpose effectively and have the right feel) and try out their properties with other animations from the same category. You’ll end up with a handful of patterns:
如果你想让整个产品给人留下印象，试着将所有的动画向这个方向靠齐。就像签名模式练习一样，拿出能很好地发挥作用的例子(即，有效地达到目的，并且个人恰当的感觉)，然后用来自同一类别的其他动画来测试它们的属性。你会得到一些模式：
Purpose |
Animation effects |
Feel |
Interactive state change |
Color, 2s ease Opacity, in: 0.3s; out: 1.1s ease Scale, 0.4 ease |
Calm, soft |
Info reveal |
Slide down, 0.4 swing Slide up, 0.7s ease FadeInUp, 0.3 ease Rotate, 0.3 ease |
Calm, soft |
Emphasis |
Energetic pulse, 0.3s ease-in Subtle pulse Wiggle, 0.5s ease-in-out |
Energetic, playful |
Animation patterns on FutureLearn, grouped by purpose and feel.
FutureLearn上的动画模式，按目的和感受分组。
Specify Building Blocks
定义构成模块。
There are two important concepts in animation, which go hand in hand: timing and easing. Timing is how long an animation takes. In combination with distance, it determines speed. Easing defines how something is animated: does it start out slow and build up speed (ease-in), or does it start out fast and gradually slow down (ease-out)? Additionally, we would define the properties that are being animated, such as color, opacity, scale, and so on.
动画有两个相互紧密关联的重要概念：时间和运动曲线。时间是动画需要多长时间。距离决定了速度。运动曲线定义了物体是如何运动的：是开始时速度很慢然后速度加快 (渐进)，还是开始时速度很快然后逐渐减速 (渐出)？此外，我们将定义动画的其他属性，如颜色、不透明度、缩放比例等。
Timing, especially, is crucial in animation. Getting the timing right is not so much about perfect technical consistency as making sure that the timing feels consistent. Two elements animated at the same speed can feel completely different if they are different sizes or travel different distances.
动效中时间长度非常关键的。合适的时间长度和使用什么样的技术关系不大，但是和给人的感受一致性关系很大。两种元素以相同的速度运动，如果它们的大小不同或运动的距离不同，它们的感觉就会完全不同。
I like Sarah Drasner’s16 idea to deal with animation timing like we deal with headings in typography.17 Instead of just a single value, start with a base and provide several incremental steps. For example, if the base time is 0.5 seconds, smaller items that travel a shorter distance (such as an icon scaling up) would take less time. Items that travel longer distances (such as a menu popping up) would require more time. A full-screen transition would be one or two increments above the base value.
我喜欢莎拉·德拉斯纳(SarahDrasner)提出的16种处理动画时序的想法，就像我们在排版中处理标题一样。17不只是一个单一的值，而是从一个基准开始，并提供几个增加值。例如，如果基准时间为0.5秒，则距离较短的较小项目(如图标放大)所需时间较短。行程较长的项目(如弹出菜单)将需要更多的时间。全屏转换将比基值高出一到两个量级。
Agree on the Guiding Principles
达成一致的指导原则
If your team is not yet confident with animation, it may be worth defining general principles, such as “Reserve animation for the most important moments of the interaction,” and “Don’t let animation get in the way of completing a task.” But the most helpful principles are usually specific to how your team approaches animation. For example, the Salesforce Lightning Design System18 principles advise keeping the timing short and the motion subtle.
如果您的团队对动画还没有信心，那么可能需要定义一些一般原则，比如“为交互过程中最重要的时刻保留动画”和“不要让动画妨碍任务的完成”。但是，最有用的原则通常是特定于您的团队如何处理动画。例如，Salesforce闪电设计系统18原则中建议时间简短而有细腻的动效。
Guiding principles can also include spatial metaphors, which can provide a helpful mental model to animators. Google’s Material Design19 is a great example of how viewing an interface as physical materials can provide a common reference for designers and developers when thinking about motion in their applications.20
指导原则也可以包括空间隐喻，它可以帮助动画师提供一个有效到心理模型。Google的MaterialDesign19就是一个很好的例子，说明了将界面视为现实材料如何能够为设计人员和开发人员在他们的应用程序中考虑运动时提供共同的参考。
Voice And Tone
语音和语气
Voice and tone in UI copy play a fundamental role in how a product is perceived. This is particularly the case in voice-based interfaces but also for people who experience digital products through senses other than sight. In a recent conversation withLéonie Watson21, an accessibility expert who is also a screen reader user owing to blindness, she noted that her experience of digital products “often comes through in the form of style of writing.”22
语音和语气在在UI产品的感知方面同样扮演着底层作用。在基于语音的界面上尤其如此，对于那些通过视觉以外的感官体验数字产品的人来说也是如此。在最近与无障碍专家莱昂妮·沃森21(Léonie Watson 21)的一次谈话中，她指出，她对数字产品的体验“往往体现在写作风格上”。沃森21是一名无障碍专家，也是因失明而使用读屏软件的用户。
However, team members who define the interactions and patterns are often not the same people who will be working on voice and tone. This can lead to a patchy and thoughtless style of writing across the experience. To make sure voice and tone are expressed consistently and purposefully, design, brand and marketing teams need to coordinate their efforts when defining patterns.
但是，定义交互方式和模式的团队成员通常不是从事语音和语气工作的人。这可能会导致产品体验过程中总是给人以零碎和轻率的写作风格。为了确保语音和语气表达一致和有目的地，设计，品牌和营销团队需要协同确定模式。
Audit Voice and Tone Patterns
评审语音和语气模式。
In addition to collecting all the UI copy in a Google doc, there are more creative ways to audit voice and tone. In her blog post23, content strategist Ellen de Vries, shared how she “harvested” the language patterns during Clearleft’s24 voice and tone refresh: from phrases people use in meetings and pitch presentations, to informal conversations with the founders. They even made a mood board to see how language and imagery work together across Clearleft’s website.
除了在Google文档中收集所有UI副本外，还有更有创意的方法来评审声音和音调。内容策略师EllendeVries在她的博客Post23中分享了她是如何在ClearLeft 24语音和语气刷新期间“收获”语言模式的：从人们在会议和演讲中使用的短语，到与创始人的非正式交谈。他们甚至制作了一个情绪板，看看语言和图像是如何在ClearLeft的网站上协同工作的。
Inventory of voice and tone patterns for Clearleft.
清点的语音和语气模式清单。
Define Patterns
定义模式。
Once the copy and other materials have been gathered, define the patterns and formulate guidelines for how they can be applied in the interface. MailChimp’s Voice & Tone25 is one of the most effective examples of how language patterns can be defined. The tone shifts to respond to the emotional condition of the user: when it’s appropriate to be humorous and lighthearted (“Fine piece of work”), and when the copy needs to take a serious practical tone (“We’re expecting a problem at one of our data centers”).
一旦收集了产品副本和其他材料，就可以定义模式并为如何在界面中应用这些模式制定指导方针。MailChimp的Voice&Tone 25是如何定义语言模式的最有效示例之一。语气是配合对用户的情绪状态作出反应：什么使用使用幽默和轻松的语气(“完成的好棒”)，以及什么时候采取严肃的实际语气(“我们预计数据中心出现了一些问题”)。
Similarly, Salesforce gives a breakdown of common use cases and suggests patterns of copy to use with each one. The goal of the message affects the emotional tone, such as “suggest a solution using lighthearted language”.
类似地，Salesforce给出了常用用例的分类，提供了相互之间组合使用的推荐模式。信息的目的会收到有情绪的语气影响，例如“使用轻松语言的提示一个解决方案”。
Example of voice and tone patterns in Salesforce voice and tone guidelines.
Salesforce语音和语气指南中的语音和语气模式示例。
Agree on the Guiding Principles
指导原则达成一致。
Like the overarching design principles (see chapter 2), guiding principles for individual styles shouldn’t be vague and general. Not only Intuit’s Harmony26 lists the voice and tone principles (“Lead the way,” “Keep it simple,” “Have fun”), they also explain how to do all those things.
与总体设计原则(见第2章)一样，个人风格的指导原则不应该是模糊和笼统的。不仅Intuit的协调26列出了语音和语气的原则(“引导方向”，“保持简单，”“有乐趣”)，他们还解释了如何做所有这些事情。
Intuit’s voice and tone guidelines explain how to apply the principles.
Intuit的语音和语调指南解释了如何应用这些原则。
Summary
摘要。
Each style should be approached as a system in its own right — typography system, layout system, color system, and so on. They should be interconnected and directed towards achieving a larger purpose — to help shape how a product is perceived.
每一种风格都应该作为一个系统，在它自己的权利-排版系统，布局系统，颜色系统，等等。它们应该相互关联，并旨在实现更大的目标--帮助塑造产品的感知方式。
To do that, look at the big picture first. Capture the aesthetic qualities as a whole and identify the patterns that are particularly effective at expressing it. Then you can follow a similar process for all the styles: start with the key roles a style has in the context of your product, audit existing instances, and then define patterns and building blocks. The guiding principles help to connect everything together and link it back to the purpose.
要做到这一点，首先要看大局。从整体上把握美学品质，并找出在表达美学品质方面特别有效的模式。然后，您可以对所有样式遵循类似的流程：从样式在产品上下文中的关键角色开始，审核现有实例，然后定义模式和构建块。“指导原则”有助于将一切联系在一起，并将其与目的联系起来。
Let’s now look at pattern libraries as a tool for documenting and sharing the patterns.
现在让我们来看看模式库，它是记录和共享模式的工具。
—
2.See chapter 4.
4.http://smashed.by/coloraudit
5.As explained in chapter 8.
6.http://smashed.by/colorinventory
7.http://smashed.by/contrastratio
8.And conversely, in a project where color accessibility was a factor right from the start, you wouldn’t end up with such widely different palettes.
相反，在一个从一开始就将颜色可访问性作为一个因素的项目中，您不会最终得到截然不同的调色方案。
9.http://colorsafe.co/
10.http://smashed.by/contrastfinder
11.For further reading on color accessibility and balance with aesthetics, I highly recommend Color Accessibility Workflows by Geri Coady.
11.为了进一步阅读关于颜色可访问性和与美学的平衡，我强烈推荐Geri Coady的“颜色可访问性工作流程”。
12.http://smashed.by/skytoolkit
13.http://smashed.by/oxfordstyle
14.http://smashed.by/designingia
15.http://smashed.by/animationaudit
16.https://sarahdrasnerdesign.com/
17.http://smashed.by/animationdesignsys
18.http://smashed.by/salesforcemotion
19.http://smashed.by/materialmotion
20.For a more detailed overview of the process, see my article “Integrating Animation into a Design System”.
20.有关过程的更详细概述，请参阅我的文章“将动画集成到设计系统中”。
22.Interview with Léonie Watson, August 2017
22.采访莱昂尼·沃森(Léonie Watson)，2017。
23.http://smashed.by/voicetoneinventory
