《Design Systems》系列翻译 22 模式库 part2

 

写在前面------

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

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

Example
举例

A good example helps to enhance the understanding of the pattern’s purpose. In Marvel’s style guide, examples are self-documenting and show multiple variants and use cases. The UI copy in the pattern helps guide usage further.

一个好的例子有助于增强对模式目的的理解。在Marvel的风格指南中，示例是自描述的，并展示了多个变体和用例。模式中的UI案例有助于进一步指导使用方法。

 

 

                                              


In Marvel’s style guide, examples make it easy to see how different popovers behave.

在Marvel的风格指南中，通过示例可以很容易地看到不同的气泡弹窗是如何表现的。

 

A lesser example doesn’t help to communicate the purpose. Nothing in the way “Billboard” is presented in FutureLearn’s library suggests that it’s a “prominent promotional element.” Making small adjustments, such as changing the default copy and the background image could help express its purpose more clearly.
减少案例无助于传达目的。在futurelearn的模式库中，“公告牌”没有案例表明它是一个“突出的促销元素”。做一些小的调整，比如改变默认的案例和背景图像，可以帮助更清晰地表达它的目的。

 

 




“Billboard” in FutureLearn’s pattern library is less than inspiring.
“公告牌”在FutureLearn的模式库是不太令人兴奋的。

A living instance of a pattern, with component code alongside it, is usually preferred — it can show responsiveness, interactions and animation. But in some cases a static image or a GIF is more helpful, particularly when you need to show a specific behavior or a state that can’t be recreated in a living example.

模式的动态示例通常是附带组件的代码。--它可以展示响应性、交互方式和动画。但在某些情况下，静态图像或GIF更有帮助，特别是当您需要展示一个特定的行为或状态时，这些行为或状态无法在一个真实案例中重新创建。

 




Carbon uses a combination of live and static examples to illustrate specific behaviors.
carbon设计系统使用动态和静态的例子的结合的方式说明具体的行为。

 

Variants

变体

Presenting variants alongside one another, as a suite, makes it easier to see at a glance what is available within the purpose. Not only that, we need to know how the options are different from one another. Although Office Fabric helpfully presents all the variants, it doesn’t explain the differences between them.

作为一个套件，将变体并排呈现，您更容易一目了然地了解可以实现哪些目的。不仅如此，我们还需要知道这些选项之间的区别。虽然官方结构能够帮助展示所有的变体，但并不能解释它们之间的差异。

 

 




Variants in Office Fabric.

官方结构的变体

 

Compare it with Carbon’s presentation, which clearly states the purpose of each variant.
将其与carbon设计系统的表述方式进行比较，后者清楚地说明了每一种变体的目的。




Types of date pickers and the differences between them clearly explained in Carbon.
日期选择器的类型以及它们之间的差异在carbon设计系统中得到了清楚的解释。

 

Similarly, Atlassian’s design guidelines describe when to use each type of button (although, from my point of view, some of the copy, such as “Use when you have nothing to prove,” could benefit from being more precise).
与之类似的是亚特兰蒂斯的设计指南描述了每种类型的按钮应该在什么时候使用(在我看来，一些示例中可以从精确的描述中获益，比如“当你没有什么需要验证的场景使用”)。

 

 

Button variations explained in Atlassian’s design guidelines.

亚特兰蒂斯的设计准则中关于按钮变体的解释。

 

There are many other aspects that can be important to document, such as:
在文档中还有许多其他重要的影响因素，例如：

 

•Versioning of components. If products supported by a pattern library get major upgrades, some components can benefit from documenting changes in the API or UI elements, relative to previous versions. The same goes for obsolete elements and their replacements.

·组件的版本控制。如果基于模式库的产品获得了大幅的提升，可在文档中记录API或UI元素相对于以前版本的更改将对一些组件有益处。对于过时的元素及其替代物也是如此。

 

•Team members. Listing people involved in the creation of the pattern, like the Sky Toolkit²⁴ example below, can give people a sense of ownership, and also helps with future development.


·团队成员。列出参与创建模式的人员，如下面的SkyToolkit 24示例，可以给人一种主人翁感，也有助于将来的开发。
。

 

 

•Related patterns. Shopify Polaris²⁵ helpfully shows alternatives if the pattern is not quite what you’re looking for. This can reduce the chance of patterns being duplicated.


·相关模式。如果模式不是你想要的，Shopify Polaris 25可以帮助展示替代方案。这可以减少相似模式的机会。
。

 

 

Depending on your team’s needs, there are many other bits of information that can be included. In his article “Taking The Pattern Library To The Next Level” Vitaly Friedman shared two checklists: one for the patterns to document, and another for the things to include alongside each pattern.²⁶
根据您团队的需要，还可以包含许多其他信息。在Vitay Friedman的文章“将模式库提升到更高水平”中，他共享了两个检查清单：一个用于记录在文档的模式，另一个用于在每个模式所包含的内容。

 

Documenting Perceptual Patterns
记录感知模式。

 

When documenting perceptual patterns, the focus tends to be on the buildings blocks — color palette, typographic scale, and so on. But as we saw in the previous chapter, it’s also important to know how those properties are used and how they work together. Here are a few tips and examples.
当记录感知模式时，焦点往往集中在构成元素上--颜色调色板、排版体系等等。但是，正如我们在前一章中看到的，了解这些元素是如何应用以及它们是如何协同工作是很重要。下面是一些提示和示例。

 

Specify Usage, Not Only the Building Blocks

不仅要罗列构成元素，还要说明用途。

 

Representation of color doesn’t have to be limited to a list of variables. In its color palette, the GOV.UK style guide²⁷ helpfully specifies the usage of color for text, links, backgrounds, and other roles.
颜色的展示方式不必局限于展示变体列表。在GOV.UK Style Guide27 的配色方案中，贴心的指定了文本、链接、背景和其他角色的颜色用法。

 




Color palette shows patterns of usage in the GOV.UK style guide.
在GOV.UK风格指南中，展示了配色方案的应用方式。

 

The do‘s and don’ts format can also be useful, particularly when there’s an expected misuse. In Shopify Polaris²⁸, both indigo and blue are primary colors used for interactive elements. Stating explicitly that blue shouldn’t be used for buttons is helpful in this case, as it would be reasonable to assume otherwise.

可以做 和 不可以做的格式也是有用的，特别是当存在可能性的误用时。在Shopif y Polaris 28中，靛蓝和蓝色都是用于交互元素的原色。在这种情况下，明确地说明不应该将蓝色用于按钮是有帮助的，否则的话将很有可能将这么应用。

 

 

The typography section of theUS government’s web standards²⁹ shows type pairings and their recommended usage. Expandable examples demonstrate typographic treatments in context.

美国政府网站标准29的版式部分展示字体组合效果及其推荐的用法。附加示例演示了在上下文中的排版处理效果。

 




US government web standards include pairings and their recommended usage.
美国政府的网站标准包括文字样式组合及其推荐的用法。

 

Cross-Reference Styles
交叉参照风格。

 

Although we separate styles and components to make them easier to work with, in practice they’re closely interlinked. Even if there are duplications, referencing styles at the module level, as well as separately, is useful. A button has many styles that define what kind of button it is (color, shape, style of label, transitions, spacing, and so on). At the same time, some of those styles can be applied to other objects — menus, links, toggle controls. Sharing styles is what makes those objects feel like they belong to the same system.

虽然我们将样式和组件分开，使它们更容易使用，但实际上它们内部是紧密联系在一起的。即使存在重复，在模块级别以及单独引用样式也很有用。按钮有多种样式来定义它是什么样的按钮(颜色、形状、标签样式、渐变、间距等等)。同时，其中一些样式可以应用于其他对象上--菜单、链接、切换控件。共享样式使这些对象给人以属于同一系统的感觉。

 

In Carbon, the styles of a specific module, such as color, are shown on a separate tab. The usage of colors is also documented separately.
在“碳”中，特定模块的样式(如颜色)显示在单独的选项卡上。颜色的使用也被单独记录。

 




In Carbon, colors are referenced at both the module level and all together.
在碳设计系统中，颜色在所有级别的组件都被引用。

 

Take another example: interactive states. Typically, we see them documented only at the module level: here’s a button and its hover state. But it is also useful to see all the states together, at a glance. How does the hover state apply to secondary links? To icon buttons? To ghost buttons? To tab controls? Why in some cases does the outline change to solid, and in others the color value changes?
再举一个例子：交互状态。通常，我们只在模块级别看到它们：这里有一个按钮及其悬停状态。但是，一目了然地看到所有的状态也是有用的。悬停状态如何应用于次链接？图标按钮？幽灵按钮？选项卡控件？为什么在某些情况下，轮廓变成实心，而在其他情况下，改变了颜色值？

 

Showing interactive states for FutureLearn in one grid allowed us to define the overarching rules for interactive states and apply them consistently as more interactive elements were added.
通过将Futurelearn所设计到的交互状态在一个表格中展示出来，我们可以定义交互状态的总体规则，并将该规则应用到更多的交互元素中。

 




Some of the interactive states in FutureLearn’s pattern library³⁰ are shown together.
“FutureLearn”模式库30中的一些交互状态的总揽。

 

Show Relationships between the Elements
展示元素之间的关系。

 

To be effective, perceptual patterns should interconnect and work together. By showing the relationships (between colors, between typography and spacing, between voice and tone and the visuals), you help make the whole system more connected.
为了达到效果，感知模式应该相互关联并且共同作用。通过展示这些关系(颜色关系、排版和间距的关系、声音和语调以及视觉效果之间的关系)，您可以让整个系统更紧密地连接在一起。

 

The same color values can have entirely different effects when applied in different proportions. As Michael McWatters noted, with too much or too little red, TED can feel like a different brand. The color chips in the Open Table style guide³¹ make the hierarchy of colors clear.
在不同的比例下，相同的颜色值会产生完全不同的效果。正如迈克尔·麦克沃特斯(MichaelMcWatters)所指出的那样，用太多或太少的红色，TED可能会感觉像是一个不同的品牌。OpenTable样式指南31中的通过色块清晰的展示了结构层次。

 

 

Typography and spacing are also closely interlinked. Large, higher-contrast typography requires more white space. Smaller text can get lost in the same amount of space if you don’t compensate by reducing the padding. Even if you have a limited selection of predefined spacing options (such 8px or 16px units), different designers might have different preferences — some prefer more generous white space, others like it cosier. The values might be consistent, but that doesn’t mean that the visual density will be.

版式和间距也是密切相关的。大子，高对比度的文字需要更多的间距。如果不通过减少填充来补偿的话，在相同的空间中较小的文本可能就会看不到了。即使你有默认的间距值(如8px或16px单位)，不同的设计师可能有不同的偏好-一些喜欢更大的间距，而另一些设计师则喜欢更紧凑一些。这些值可能是一样的，但这并不意味着视觉密度是一致的。

 

To help guide the density and contrast across the product, in FutureLearn’s interface we tried to show the relationship between typography and spacing.
为了能够帮助指导整个产品的密度和对比度，在FutureLearn的界面中，我们试图展示排版和间距之间的关系。

 

 

•Spacious modules have high typographic contrast (large heading in proportion to the body font size) and generous spacing to balance out the high-contrast typography.
·大间距的模块具有高对比度排版(大标题与内容字体大小的比例)和较大的间距有助于与高对比度排版达成平衡。

 

•Regular modules form the majority of sections on FutureLearn. They have the default heading and spacing.

构成FutureLearn的大部分常规模块。它们采用默认的标题和间距。

 

•Compact modules have headings only slightly larger than the body copy.
·紧凑型单元的标题仅略大于正文部分。

 




Some of the section types for FutureLearn.
FutureLearn的部分排版类型。

Those settings also reflect the purpose of the modules. High-impact promotional sections benefit from high-contrast typography. On the other hand, modules with a supporting function tend to be more compact.
这些设置也反映了模块的目的。冲击力较强的宣传模块得益于高对比度的排版。另一方面，支持性功能的模块往往更紧凑。

 

Finally, in the vast majority of today’s pattern libraries, styles are displayed on separate pages. I see this as a limitation. Perhaps the next generation of pattern libraries can show them in more connected ways. Like mood boards or element collages, styles could be presented in a way that shows how they work together, and that highlights signature patterns and the relationships between various elements.

最后，当今的绝大多数模式库中，将风格样式单独展示出来。我认为有一定的局限性。也许下一代模式库可以更多关联的方式展示它们。与情绪板或元素拼贴一样，样式可以以一种展示它们如何协同工作的方式呈现，并突出显示签名模式和各种元素之间的关系。

 

Workflow
工作流。

 

Teams with effective pattern libraries have systematic approaches ingrained in their workflow. How, exactly, varies across companies. Some teams, like Airbnb, have strict and precisely specified processes with powerful tooling. Others are much more informal.
拥有有效模式库的团队在工作流程中有着系统性的方式。确切地说，不同公司的情况是不同的。有些团队，比如Airbnb，拥有严格而精确的流程和强大的工具。另一些则相对随意一些。

 

Process for Adding New Patterns
添加新模式的过程。

 

One of the foundational aspects to agree on is how the new patterns will be added to the system. The team at Nordnet follows a simple three step process:³²
如何将新模式引入到设计系统之中需要首先达成最基本的一致结论。Nordnet的团队遵循一个简单的三步过程：32。

 

1. Submit a design to the UI kit folder on Dropbox.
1.将设计内容提交到Dropbox上的UI Kit文件夹中。

 

2. Discuss the inclusion of the pattern as a team.
2.以团队讨论的形式讨论该模式的引入。

 

3. Document any included designs inside the UI kit. Add the new design to the Craft Library which will automatically roll out to the entire team.
3.记录包含有新设计模式的组件库变更内容。添加新的模式添加到craft library中，然后新的组件库将自动推广到整个团队。

The team meet every fortnight to discuss new submissions. They go through a Trello backlog and decide if a module should be approved for inclusion or archived.
小组每两周举行一次会议，讨论新的版本。他们检查Trello待办事项，并决定是否应批准新增或存档哪些模块。

 

 

A similar workflow is adopted by the teams at Shyp³³ (using GitHub for adding and reviewing the patterns), FutureLearn, and many others. The process doesn’t have to be strict but it’s important to have something in place that enforces, in some way, a regular review of patterns.
Shyp33(使用GitHub来添加和检查模式)、Futurelearn和其他许多项目的团队也采用相似的流程。这个过程不一定要严格，但重要的是要有恰当的方式推动定期审查模式。

 

To make sure the format of submissions is consistent, some teams find it useful to have a standard template with simple guidelines, such as name, description, author, and date. At FutureLearn, submissions come directly to the pattern library rather than the master design file, and there is an informal guide for writing a description for a pattern. It consists of three questions: What is it? What is it for? How does it achieve its purpose?
为了确保提交的格式是一致的，一些团队发现有一个具有简单指导原则的标准模板非常有用，比如名称、描述、作者和日期。在Futurelearn，提交直接进入模式库，而不是主设计文件，并且有一个非正式的模式描述参考案例。它由三个问题组成：它是什么？这是干什么用的？它是如何实现其目的的？