《Design Systems》系列翻译 18 系统化功能模式 part2
一本关于如何打造属于动态设计语言指导手册
写在前面------
因为工作内容的因素，最近这3年一直在探索如何打造一个高度灵活性的设计规范体系，在能够维持自身设计积累的基础之上，也能够配合项目需要快速的产出高质量的定制化交付件，偶然之间看到了这本书，看过之后感觉很有启发，就利用业余的时间翻译成中文，水平有限，还请大家多多指教。
***********************************
Take the library website again. Say you’ve ended up with these items in your “View book” group.
再拿图书馆网站举例。假设您最终在“查看书籍”组中找到了这些项目。
Grouped book items: candidates to define as patterns.
归档图书项目：候选定义为模式。
You might decide that items A and B share the same purpose: they both appear in lists and allow people to view a book and learn about it. They also share the same content structure:
您可能会认为A项和B项有相同的目的：它们都出现在列表中，并允许人们查看和了解一本书。它们还具有相同的内容结构：
Content structure for book item.
图书项目的内容结构。
Although actions and thumbnail are missing from item B, there’s no obvious reason for that. Thumbnails are useful for scanning the books and you should be able to reserve one without having to leave your wish list.
但是B项中缺少操作按钮和缩略图就显得很说不通了。缩略图是有助于扫视书籍，并且你不必离开你的愿望清单就可以订阅书籍。
On the other hand, items D and E are different. Their main purpose is focused on providing inspiration and showcasing new and noteworthy items. If we draw their structure, it might look like this:
另一方面D项和E项是有差异的。他们的主要目的是给人提供灵感以及展示值得注意的元素。如果我们画出他们的结构，将是如下的所示：
Content structure for book showcase.
书籍展示的内容结构。
You can check this by thinking about how you expect changes to happen. Ask yourself: if I change this module, do I want the others to change in the same way? For instance, even though “cover” and “thumbnail” look similar we might decide to treat them as entirely different things. Perhaps the design of the discovery pages involves some specific interactions and animation to draw attention to the showcased books. We don’t want the same effect to apply to a standard book item in a list.
您可以通过考虑您预期发生的怎样的变化来检查这一点。自问一下：如果我改变了这个模块，我想让其他人也以同样的方式改变吗？例如，尽管“封面”和“缩略图”看起来很相似，但我们可能会决定将它们视为完全不同的东西。也许发现页面的设计涉及到一些特定的交互和动画，以吸引人们注意到所展示的书籍。我们不希望同样的效果出现在列表中的标准图书项目。
Now let’s take a look at item C. It is similar to A and B and shares their content structure. But it is more prominent because of its context: the discovery and showcase parts of the site. It is also more detailed and provides more information than a book item in a list. In this situation it would make sense to make this element a variant of the book item.
现在让我们看一看C项。它类似于A和B并有着相同的的内容结构。但在整体中它更突出：链接地址的展示。它还比列表中的图书项目更详细，提供了更多的信息。在这种情况下，将这个元素作为图书项目的变体是有意义的。
With variants, you would normally have a default pattern with the core styles. Variants would have additional styles. It’s important to know which features are core to the pattern, and which are specific to the variants. Then you can predict how a change in one of them will affect the others.
对于变体，您通常会有一个具有核心样式的默认模式。变体将具有附加的样式。知道那些事模式的核心特征哪些是变体的特征是非常重要的。然后，您可以预测其中一个将如何影响其他的模式产生什么影响。
In the example above, some of the elements in the core default pattern vary in scale, making the pattern feel quite different:
在上面的示例中，核心默认模式中的一些元素在尺寸上有所不同，这使模式感觉非常不同：
•large title
·大标题。
•large thumbnail
大缩略图。
•more spacious layout
·更大间距的布局。
We know that we can change the title without affecting the book item, but if we change the author style, for instance, the change will apply in both places.
我们知道，我们可以在不影响图书项的情况下更改标题，但如果我们更改作者样式，则会对图书项和标题都有影响。
Looking at the relationship between the content structure and styles can increase the reuse of more patterns. Try going through all your patterns and match the underlying content (“book title”) with style names (“large title,” “small title,” “small metadata”). Similarly, this would be a good place to start looking at character counts or image sizing variations. A pattern will work with more content types if different sizes are standardized.
查看内容结构和样式之间的关系可以增加模式的重用。尝试浏览所有模式，并将底层内容(“书名”)与样式名称(“大标题”、“小标题”、“小元数据”)匹配。同样，这也可以用来研究字符计数或图像大小变化。如果对不同的大小进行了标准化，则模式将适用于更多的内容类型。
Naming
命名。
As we discussed in chapter 5 on shared language, names affect how patterns are used. A well-chosen name is a powerful tool for shaping your design system.
正如我们第5章中关于共享语言的讨论，名称会影响模式的使用方式。一个精心选择的名字是塑造您的设计系统的有力工具。
Try to find a name that reflects a pattern’s position on the specificity scale. If in doubt, start with a more specific name. For example, we used to see the process of learning on a course on FutureLearn as a special kind of experience, which came with its own set of modules, specific to the course area.
试着找出能够体现一个模式在特定规格的名字。如果有疑问，从一个更具体的名字开始。例如，我们曾经把在FutureLearn课程上的学习过程看作是一种特殊的体验，具体针对课程区域有自己的一组模块。
Course tabs on the course overview area on FutureLearn.
“FutureLearn”课程概述区域的“课程”选项卡。
In this case it made sense to use the name “Course tabs” — we didn’t want to reuse them anywhere else. This name also signalled to the rest of the team that they weren’t just any generic tabs — they were specific to the course area. Later we decided that this module could also be useful in other places and changed the name to “Page tabs.” The new name was more generic, and again signaled to the team that it was now available to be used in other areas.
在这种情况下，使用“课程选项卡”的名称是有说得通的--我们不想在其他任何地方重用它们。这个名字也向团队的其他成员发出信号，他们不是普通的标签--他们是特定于课程区域的。后来，我们决定该模块也可以在其他地方使用，并将名称更改为“页面选项卡”。新名称更加通用，并再次向团队发出信号，表明它现在可用于其他区域。
Sometimes modules are named in the front-end but naming is also a UX decision and should be made collaboratively at the design stage. Names need to take the content type into consideration but shouldn’t be based solely on the content. Effective names guide usage and reduce the chances of duplicate patterns.
有时模块是由前端命名的，但是命名也是一个UX决策，应该在设计阶段协同进行。名称需要考虑内容类型，但不应仅仅基于内容。有效的名称指导使用方法并减少重复模式的可能性。
Repeat The Process At A Smaller Scale
在较小的范围内重复该过程。
Once you group the self-contained parts, repeat the process with other elements. Typically, this would involve several sessions: one to discuss big-picture user behaviors, and separate ones to look at more granular patterns such as:
将独立部件编组后，在其他元素上继续重复此过程。通常，这将涉及几个部分：一个是讨论用户行为的大画像，以及更小颗粒度的角度拆分模式，例如：
•buttons and links
按钮和链接。
•headings
标题。
•lists
列表
•tabs and menus
标签和菜单。
•radio buttons, toggle buttons and checkboxes
·单选按钮、切换按钮和复选框。
•feedback messages
反馈信息。
•navigation
导航
•images
图片
•icons
图标
If you have elements with similar purposes, think of them in relation to each other rather than independently. How are buttons different from links? How is tabbed navigation different to a list menu? How is a dropdown different from a set of buttons? How is a checkbox different from a toggle button?6
如果您的元素具有类似的用途，请将它们之间关联在一起考虑，而不是独立地考虑它们。按钮和链接有什么不同？选项卡式导航与列表菜单有何不同？下拉菜单和一组按钮有什么不同？复选框与切换按钮有何不同？
Here are some points to consider when auditing links and buttons.
下面是检查链接和按钮时要考虑的一些要点。
Consistency of Actions
行动的一致性。
Buttons and Links
Traditionally in web development, links and buttons are different. A link navigates the user away from the current page. A button submits an action and toggles something in the interface.7 But in practice, it’s not easy to make design decisions based on this criterion alone.
传统上，在Web开发中，链接和按钮是不同的。链接使用户远离当前页面。按钮提交一个动作并在界面中切换某些东西。但是实际上，设计决策并不会仅仅应为这个因素而轻易作出结论。
Suppose we have a book item with a “View book” button. Clicking the button expands the module, revealing more information about the book. Now imagine that the same information opens on a different page instead. Does this mean that the action should be presented as a link?
假设我们有一个带有“ViewBook”按钮的图书项目。单击该按钮将扩展该模块，显示更多有关该书的信息。现在，假设相同的信息在不同的页面上打开。这是否意味着这个动作应该作为一个链接来呈现？
As with many other things, the confusion often lies in the language. Some people (developers, often) define a button as a trigger that submits data. So a link marked up as a button wouldn’t be considered a true button by them. Others (often designers) view a button as a distinct, standalone call to action. They would refer to a standalone element “View book” as a button, even if it’s marked up as link.
与许多其他事情一样，混淆通常在于语言。有些人(通常是开发人员)将按钮定义为提交数据的触发器。因此，他们不会认为一个看起来像按钮的链接是一个真正的按钮。其他人(通常是设计师)把一个按钮看作是一个独特的、独立的动作触发。他们会将一个独立的元素“ViewBook”称为按钮，即使它看起来像一个链接。
Different systems also approach this differently. In IBM’s Carbon8, links are a navigational element. Buttons are only used if the user’s action will change or manipulate data. In Shopify Polaris9, on the other hand, buttons can represent any type of action, including navigation. Links are used both for embedded actions and for navigation.
不同的系统对此也有不同的处理方式。在IBM的Carbon8中，链接是一个导航元素。只有当用户的操作将更改或操作数据时，才会使用按钮。另一方面，在ShopifyPolaris 9中，按钮可以表示任何类型的操作，包括导航。链接既用于嵌入操作，也用于导航。
Use of links in IBM’s Carbon.
To me, the most important aspect is a consistent expression of purpose. Users (both those who access the interface visually and via screen readers) need to know what to expect. If buttons are always used only for submitting data, then it would be confusing to have one situation where they behave as links. But if there’s a consistent use of links styled as buttons (such as for standalone calls to action) throughout the interface, then it would be appropriate.
对我来说，最重要的是始终如一地表达自己的目的。用户(包括直接观看和通过阅读器访问界面的用户)需要知道应该期待什么。如果按钮总是只用于提交数据，那么有一种情况下按钮充当链接就会令人迷惑。但是，如果在整个界面中一致使用链接样式作为按钮(例如独立的动作触发操作)，那么这将是合适的。
To avoid confusion and misuse of these essential elements, it’s important to agree on their definitions. What are the shared meanings of “button” and “link” in your team? What are the basic guidelines for their usage?
为了避免混淆和误用这些基本元素，将它们的定义达成一致就非常重要。在你的团队中，“按钮”和“链接”的共同含义是什么？使用它们的基本准则是什么？
One of the simplest and most effective distinctions I’ve come across was suggested by Heydon Pickering in Inclusive Design Patterns10. The idea is to differentiate between links and calls to action (CTAs), rather than buttons and links. An important standalone action can be presented as a button, but be marked up either as a link or a button, depending on the interaction. The question of whether it’s a link or button is a matter of variants — first and foremost it’s a CTA.
我遇到的最简单和最有效的区别之一是Heydon Pickering在“包容性设计模式”10中提出的。其想法是区分链接和行动召唤操作(CTA)，而不是按钮和链接。一个重要的独立动作可以表示为按钮，但可以由链接或按钮来充当，具体取决于交互逻辑。它是一个链接还是一个按钮的问题是一个变体的问题-首先，它是一个CTA。
An example of a classification of buttons and links. Additionally, it helps to make a subtle difference in the style of CTAs, to indicate a difference in the interaction.
按钮和链接分类的示例。此外，它有助于使CTA的风格发生微妙的变化，从而表明交互的差异。
If the action occurs on the current page, use a CTA button. If the action takes the user away from the current context, use a CTA link. Calls to action are different from standard links, which represent pathways to optional information and are typically embedded in the content: body text, titles, images.
如果该操作发生在当前页上，请使用CTA按钮。如果该操作使用户离开当前也面，则使用CTA链接。调用操作不同于通常的链接，链接表示可选信息的路径，通常嵌入在内容中：正文、标题、图像。
Making a distinction in this manner allows you to meet the design need for keeping the important calls to action prominent, while at the same time keeping the code simple and accessible.
以这种方式进行区分可以让您满足设计需要，使重要的操作调用保持突出，同时保持代码的简单性和可访问性。
Visual Hierarchy
视觉层次。
Most interfaces have equivalents of primary and secondary buttons. But what does “primary” mean exactly? Does it signify the most important action in the context of the whole interface, or a specific screen or section? For example, should a “Reserve book” button always be a certain style because of the importance of the action on a library website?
大多数界面类似于主要按钮和次要按钮的元素。但是“主要”到底是什么意思呢？它是否表示整个界面或特定屏幕或局部部分内容中最重要的操作？例如，因为“预定书籍”是图书馆网站中重要的操作，是否就需要这个按钮始终需要一个特定的风格？
In Marvel’s design system11, “flat” buttons are used to signify “necessary or mandatory actions”; “ghost” buttons are used to signify “optional, infrequent or subtle actions.” Flat buttons can be used alongside each other, when actions are equally important. I like this distinction because it’s simple, clear, and specific to the button’s purpose.
在Marvel的设计系统11中，“扁平的”按钮用于表示“必要或强制的操作”；“幽灵”按钮用于表示“可选、不频繁或微妙的操作”。当操作同样重要时，可以同时使用扁平按钮。我喜欢这个区别，因为它简单，清楚，并具体到按钮的目的。
But for more complex interfaces with a larger number of buttons, it’s hard to keep their functions so specific. You may also need to see how buttons relate to each other when used together. In Atlassian’s system12 and Shopify’s Polaris13, primary buttons represent “the most important actions in any experience” and therefore should only appear once per screen.
但是对于拥有更多按钮的更复杂的界面来说，很难保持它们的功能如此明确。当他们在一起使用时，您可能还需要知道按钮之间的关系。在亚特兰蒂斯的设计系统12和Shopify的北极星设计系统13中，主按钮代表“任何环节中最重要的动作”，因此每个屏幕只能出现一次。
Some of the button types in Polaris, arranged by the level of prominence.
在北极星设计系统中的一些按钮类型，按突出的程度排列。
They have a “basic” button, used by default. Other styles are used only “if a button requires more or less importance.” Think of it this way: if the interface were read out by a voice, which action would be read out first? Which actions would be announced more loudly or with a different intonation?
他们有一个“基本”按钮，默认情况下使用。其他样式只使用“如果一个按钮需要增加或减少的重要程度。”这样想一想：如果将界面读出来，那会先读出那个行为？哪些行动将被更大声或以不同的语调读出来呢？
Special Cases
特例。
There will always be special cases. In the library website example, the “Reserve” button could be treated differently. It could include states specific to the action; for instance, its label could change to “Cancel reservation” if the book hasn’t been collected yet.
总会有特殊情况的。在图书馆网站的例子中，“储备”按钮可以被区别对待。它可以包括特定的操作状态；例如，如果尚未收藏图书时，其标签可能更改为“取消预订”。
FutureLearn’s “Progress toggle” button can also be seen as a special case. It is only used on learning steps, to indicate if a step is complete. A bouncy animation and a tick icon popping up are designed to give it a celebratory feel. It’s not meant for anything else.
FutureLearn的“进度切换”按钮也可以看作是一种特殊情况。它只用于以指示当前学习阶段是否完成。一个有弹性的动画和一个勾选图标弹出来是为了给它一个庆祝的感觉。它不适合其他任何场景。
Progress toggle button.
进度切换按钮。
Perhaps this specificity is why we struggled so much to name it — we tried to come up with a generic name (“Progress toggle”) when in fact it could have had a name specific to its function — even “Mark complete” could have been a more appropriate and memorable name in this case.
也许这就是为什么我们很难给它命名的原因--我们试图想出一个通用名称(“进度切换”)，而实际上它本来可以有一个符合于其功能的名称--在这种情况下，即使是“MarkComplete”也可能是一个更合适和更令人难忘的名称。
Both the “Progress toggle” button and the library “Reserve” button are things we might want to make more memorable. They are key functions of the brand, and perhaps opportunities for signature moments. Equally special cases like this should be occasional, both so they appear distinct but also so the general pattern rules are maintained.
“进度切换”按钮和图书馆中的“保留”按钮都是我们可能希望使组件能够更容易记住。它们是品牌的关键功能，也许是体现签名时刻的好时机。类似的像这样的特殊情况应该是少数的，所以他们看起来很特殊，也还是需要和其他通用模式保持在一起。
Summary
摘要。
In this chapter we looked at systemizing a small section of an interface. After following this process in your team, you’ll have a better knowledge of your system and the areas that need attention.
在本章中，我们研究了如何将界面的一小部分系统化。在您的团队中遵循这个过程之后，您将对您的系统和需要注意的领域有更好的了解。
For the next steps, teams can dive into code and Sketch to work on finalizing designs for the patterns — making sure it works for all required use cases, defining states and behaviors, refactoring code.
在接下来的步骤中，团队可以深入代码和利用Sketch来完成模式的设计--确保它适用于所有的用户场景案例，定义状态和行为，重构代码。
The first time you do this exercise you might be overwhelmed by the number of elements and patterns. You don’t have to do it all in one go. Start with core patterns, fundamental to the experience, then move to another area. Most importantly, this exercise needs to be done regularly, as your system evolves. It’s a bit like gardening — the longer you leave it, the harder it is to get it into a good shape.
当您第一次做这个工作时，您可能会被大量的元素和模式所淹没。你不必一蹴而就。从核心模式开始，积累经验，然后完成剩余的部分。最重要的是，随着系统的发展，这项工作需要定期进行。这有点像园艺--你离开它的时间越长，就越难把它变成一个好的造型。
Now, let’s look at perceptual patterns.
现在，让我们来看看感知模式。
1.Equally, design patterns can be used to create behaviors that hijack user attention or manipulate people to spend time and money on something they’ll regret later (https://darkpatterns.org/). Remaining conscious of behaviors can help make sure that user interests are always at the heart of the design.
1.同样，设计模式可以用于创建劫持用户注意力的行为，或者操纵人们将时间和金钱花在他们以后会后悔的事情上(https：//Darkpatterns.org/)。保持对行为的意识可以帮助确保用户的兴趣始终是设计的核心。
2.http://smashed.by/interfaceinventory
3.As an aside, if you have too many pages in the same segments supporting similar behaviors, it’s an indication that your information architecture might need work.
3.除此之外，如果有过多的页面中有相同的部分的支持类似的行为，这就表明您的信息体系结构可能发挥作用。
4.The example pages are taken from the New York Public Library website, for illustrative purposes.
4.示例网页取自纽约公共图书馆网站，以供说明之用。
5.Successful businesses join user goals with business goals. If you really struggle to join the two together, your product might have deeper issues a design system won’t be able to solve.
5.成功的企业将用户目标与商业目标结合在一起。如果你真的很难将两者结合在一起，你的产品可能有设计系统无法解决的更深层次问题。
6.There are general guidelines and best practices (for an excellent resource see Designing Web Interfaces by Bill Scott and Theresa Neil; and Designing Interfaces: Patterns for Effective Interaction Design by Jenifer Tidwell), but some things might be specific to your situation. Even if they’re common knowledge for some people, it is worth verbalizing them so the rest of the team can learn.
6.有通用的的指导规则和最佳实践(有关优秀资源，请参见Bill Scott和Theresa Neil设计Web界面；和设计界面：JenferTidwell的有效交互设计模式)，但有些事物可能需要根据您的情况而定。即使这些知识对某些人来说是常识，也值得分享给团队的其他成员参考学习。
7.See “Links vs. Buttons in Modern Web Applications” by Marcy Sutton and “Proper Use of Buttons and Links” by Dennis Lembrée.
7.参见Marcy Sutton的“链接与现代Web应用程序中的按钮”和Dennis Lembrée的“正确使用按钮和链接”。
10.http://smashed.by/inclusivedesignpatterns
12.http://smashed.by/atlassian
