《Design Systems》系列翻译 23 模式库 part3
一本关于如何打造属于动态设计语言指导手册
写在前面------
因为工作内容的因素，最近这3年一直在探索如何打造一个高度灵活性的设计规范体系，在能够维持自身设计积累的基础之上，也能够配合项目需要快速的产出高质量的定制化交付件，偶然之间看到了这本书，看过之后感觉很有启发，就利用业余的时间翻译成中文，水平有限，还请大家多多指教。
***********************************
Criteria for Adding New Patterns
添加新模式的标准。
A common problem teams have is a lack of agreement on what constitutes a design pattern. A way to manage this is to have shared criteria for adding (and also updating and removing) patterns.
团队中常见的问题是对于构成设计模式的元素缺乏一致意见。处理这歌情况的一种方法是共享一个添加(以及更新和删除)模式的标准。
The two most common approaches are:
最常见的两种方法是：
•Every new element on the site is also automatically added to the pattern library. This works if you’re strict with accepting patterns to the system. There should be a process which checks if a similar pattern exists already, or if an existing one can be modified (such as regular review of new patterns as a team). Without those processes, the risk is ending up with duplicated patterns.
·网站上的每个新元素也会自动添加到模式库中。如果您严格要求从设计系统中引用模式库，就可以这样做。应该增加一个检查是否已经存在类似模式的环节，或者是否可以修改现有模式(例如，定期核查新模式并将其归组至已有分类中)。缺少这些过程的话，将会出现分支版本的风险。
•Elements are added only when they’re reused. Some teams add modules only on the second, or even third use. The idea is that an element has to prove itself as a pattern before being added to the system, which helps to keep the pattern library lean. With this approach it’s important to have visibility of everything being created and effective communication across teams. A log of undocumented patterns should also be kept, so the team has full visibility of what’s available, even if it’s not in the pattern library.
·元素只有在重用时才会添加。有些团队只在第二次甚至第三次使用时才添加模块到设计库。其思想是，元素在添加到系统之前必须证明自己是一个模式，这有助于模式库保持精简。使用这种方法的核心在于大家都能看到产出物，并且团队需要有效的沟通。未被归档的模式也有一个记录日志，这样团队就可以充分知悉可以使用哪些模式，即使它不在模式库中。
It’s also possible to base your decision on potential reuse. At FutureLearn, the specificity of a component’s purpose is used as a criterion. If an element is defined in a generic way, it is more likely to be reused in the future. In this case, it is added to the pattern library. If a new component has a specific purpose (such as a seasonal promo, a module related to a specific event, and so on), it can be treated as a one-off.
基于判断上可能存在复用的模块也是可行的。在FutureLearn中，组件目的的差异性背作为标准之一。如果一个元素是以常规的方式定义的，那么它将来更有可能被重用。在这种情况下，它被添加到模式库中。如果一个新组件有特定的用途(比如季节性促销、与特定事件相关的模块等)，则可以将其视为一次性组件。
When following this rule, the whole team should take care in how they define components and not make something specific unless absolutely necessary. If someone introduces a one-off, they should share it and explain why it is specific. Occasionally someone else will find the module useful for their needs. In this situation, we’d redefine the pattern as more generic and add it to the library.
在遵循这一规则时，整个团队应该注意如何定义组件，除非绝对必要，否则不要增加特殊案例。如果有人引入一次性的组件，他们应该通知大家，并解释为什么它是特例。有时，其他人会发现组件对他们的需求很有用。在这种情况下，我们将重新定义模式为其更通用，并将其添加到库中。
People and Responsibilities
人员和责任。
Another aspect to consider is the practicalities of updating documentation, particularly if there’s no dedicated team.
另一个需要考虑的方面是更新文档的可操作性，特别是在没有专门的团队的情况下。
If contributions come from everyone, you have to be strict at making sure they’re added to the library. For instance, adding a component can be a part of the story for creating it. The designer and developer who create a pattern are responsible for adding it to the pattern library. As we saw in chapter 6, this model doesn’t work for every team. Sometimes you need a person or group of people responsible for curating and maintaining the pattern library, even if everyone contributes to it.
如果贡献来自每个人，您必须严格确保它们被添加到库中。例如，添加组件可能是创建组件历程的一部分。创建模式的设计人员和开发人员对添加到模式库中组件负责。正如我们在第6章中看到的，这个模型并不适用于每个团队。有时，即使每个人都可以补充组件库，仍需要一个人或一群人负责管理和维护模式库。
If there’s a dedicated design systems team, it’s important to agree on their role, as well as the process for managing contributions. A systems team can have the role of a curator or a producer, and many companies use a combination of both.
如果有一个专门的设计系统团队，重要的是要认同他们的角色以及管理贡献的过程。设计系统团队可以扮演馆长或制作者的角色，许多公司通常会将其合并。
•Curator. Contributions for new patterns come from all over the organization. The systems team defines the ways in which internal teams contribute, including setting requirements and the review process. If a submitted pattern doesn’t meet the standards, the team encourages the designers and developers who created it to change it, rather than making the change themselves. The team at Atlassian follow this model.
·馆长。对新模式的贡献来自整个组织。系统团队定义了内部团队贡献的方式，包括设置需求和评审流程。如果提交的模式不符合标准，团队鼓励创建该模式的设计人员和开发人员对其进行更改，而不是自己进行更改。亚特兰蒂斯的团队遵循这个模式。
•Producer. With this approach the design systems team creates the majority of patterns. They’d typically work closely with the product designers in different teams and hold open meetings where others can ask questions, give feedback, or propose missing patterns.The systems team accept submissions from across the company, but they have the final say over what is included, adjusted or removed. Airbnb uses this approach.
生产者。这种方法是设计系统团队创建了大多数模式。他们通常会与不同团队中的产品设计师密切合作，并举行公开会议，其他人可以提出问题、获得反馈或提出缺少的模式。系统团队接受来自整个公司的提交，但他们对包含、调整或删除的内容拥有最终决定权。Airbnb采用了这种方法。
When choosing a direction, consider your organizational structure, team culture, and specific product needs. The curator role is usually suited to distributed teams with looser system structures, whereas producers are more common in stricter and more centralized systems.
在选择哪个方案时，要考虑你的组织结构、团队文化和特定的产品需求。馆长的角色通常适用于系统结构更松散的分布式团队，而生产者更常见于更严格和更集中的系统中。
In both cases it’s important that the systems team are seen as partners, rather than police.
在这两种情况下，重要的一点是将设计系统团队视为合作伙伴，而不是监督。
“We want to collaborate with teams as early as possible when they’re thinking about developing new patterns and components. Our relationship with product teams should be a partnership, rather than a situation where someone goes away and does a bunch of work and then we either approve or veto it. If that happens, we’re not doing our jobs very well.” — Amy Thibodeau, UX lead, Shopify
“当团队考虑开发新的模式和组件时，我们希望尽早与他们协作。我们与产品团队的关系应该是一种伙伴关系，而不是某个人单独区做一堆工作，然后我们选择批准还是否决它。如果发生这种情况，说明我们的工作做得不到位。“
-AmyThibodeau，UX领导，Shopify。
Aligning Facets of the System
系统的各个方面保持一致
Code, design and the pattern library are facets of the same system. Treating it that way makes it more robust, because the system is supported from multiple angles. This doesn’t necessarily mean that the patterns must be fully synchronized. What’s important is that the team practises the same approach across the facets — to naming, structure and understanding of the purpose.
代码、设计和模式库是一个系统的三个构成方面。这样的处理方式会使它更健壮，因为系统是从多个角度支持的。这并不一定意味着模式必须完全同步。重要的是，团队在各个方面使用一致的方法--命名、结构和对目的的理解。
The Carbon design team tries to be as consistent as possible across their Sketch design kit, component library and the code.
carbon设计团队试图在他们的Sketch设计工具包、组件库和代码中尽可能保持一致。
In the Carbon design system, names and folder structure are consistent across the three facets of the system.
在carbon设计系统的中，名称和目录结构在设计系统的三个方面是一致的。
Designers at Nordnet use atomic design to organize folders in their Sketch kit. They even follow BEM naming conventions for their design files, to help developers and designers talk the same language.34
Nordnet的设计人员使用原子设计来组织他们的Sketch工具包中的文件夹。他们甚至在设计文件中遵循BEM命名协议，以帮助开发人员和设计人员使用相同的语言。
When design and code are aligned conceptually, synchronization between them is easier to achieve. It’s also easier to find the tools that fit with your workflow.
当设计和代码在概念上一致时，它们之间的同步更容易实现。找到适合您的工作流程的工具也更容易。
Tools
工具
Keeping the pattern library in sync with production code is one of the main challenges. Teams use different approaches — from manual copy-and-paste, to making a pattern library part of the production environment (Lonely Planet’s Rizzo is an example of the latter). Many tools help to achieve it. Here are some of the most popular ones.
使模式库与生产代码保持同步是主要的挑战之一。团队使用不同的方法--从手动复制和粘贴，到使模式库成为生产环境的一部分(LonelyPlanet的Rizzo就是后者的一个例子)。许多工具有助于实现这一目标。下面是一些最受欢迎的。
Keeping the Pattern Library Up To Date
保持模式库最新。
Some of the easiest to implement are CSS documentation parsing tools, such as KSS35. They all work in a similar way: comments in the CSS provide a description (which is pulled into the documentation programatically); running a script generates the markup for the pattern library. Parsing tools are relatively simple but limited in functionality. They can also lead to duplicate markup, which can make maintenance more time-consuming.
一些最容易实现的是CSS文档解析工具，如KSS 35。它们都以类似的方式工作：CSS中的注释提供了描述(通过编程方式被推送到文档中)；运行脚本将生成模式库的标记。解析工具相对简单，但功能有限。它们还可能导致重复标记，这会使维护更加耗时。
Among more powerful tools are style guide generators, such as Pattern Lab36 by Brad Frost, Dave Olsen and Brian Muenzenmeyer. Pattern Lab comes with many useful features, such as responsive preview and support for multiple languages. It’s predominantly suited to larger sites with multiple templates, particularly those that practice atomic design methodology.
更强大的工具包括样式规则生成器，如布拉德·弗罗斯特(BradFrost)、戴夫·奥尔森(DaveOlsen)和BrianMuenzenmeyer设计的模式实验室（pattern lab）36。模式实验室提供了许多有用的特性，例如响应性预览和对多语言的支持。它主要适用于具有多个模板的大型站点，特别是那些实践原子设计方法的站点。
Fractal37 by Mark Perkins is one of the more lightweight and flexible tools which is gaining popularity. Fractal helps build and document a pattern library, and integrate it into your project. One of its main advantages is that it’s flexible and unopinionated — Fractal can work with any templating language and organizational structure.
马克·珀金斯(MarkPerkins)的Fractal37是一款更轻巧、更灵活的工具，它越来越受欢迎。分形帮助构建和记录模式库，并将其集成到项目中。它的主要优点之一是它的灵活性和不偏不倚-fractal可以与任何模板语言和组织结构。
Full synchronization between the pattern library and the code is extremely difficult to achieve, and companies manage it with varying degrees of success. The ways teams prioritize synchronization also varies:
模式库和代码之间的完全同步是极其困难的，不同的公司把控的程度各不相同。团队同步的方式也各不相同：
“It’s always slightly off-sync. If it’s too perfect, it’s not going to work. Our design language, as any language, is constantly evolving. We change details and patterns and we add patterns. We constantly build products. So at any given time there are many versions of the design language. We embrace this fact and design a system which can deal with these imperfections.” — Jürgen Spangl, head of design, Atlassian
“它总是有点不同步。如果太完美了，就不管用了。我们的设计语言，就像任何语言一样，在不断地演变。我们改变细节和模式，添加模式。我们不断地制造产品。因此，每一刻，都有许多版本的设计语言。我们接受这一事实，并设计出一个能够处理这些缺陷的系统。“
-Jürgen Spangl，亚特兰蒂斯 设计总监。
In stricter systems and centralized organization it is more important, whereas companies with looser structures are more tolerant to having it out of sync.
在更严格的系统和集中式组织中保持同步时很重要的，而结构更松散的公司则更容易让它不同步。
Keeping Master Design Files Up To Date
保持主设计文件最新。
Designers practicing a systematic approach currently tend to use Sketch38 as their main tool (largely thanks to the features such as text styles, symbols and artboards, which seem to be well suited for a design system workflow). Teams typically have a master file which contains a UI kit with some or all of the core components and styles. Product designers tend to work from their own files, pulling elements from the master as needed.
目前，采用系统化方法的设计师倾向于使用Sketch 38作为他们的主要工具(这在很大程度上要归功于文本样式、符号和画板等特性，这些特性似乎非常适合设计系统的工作流程)。团队通常有一个主文件，其中包含一个包含部分或全部核心组件和样式的UI工具包。产品设计者倾向于在他们自己的文件中工作，根据需要从主文件中提取元素。
The challenge is making sure that the master kit always has the latest patterns. There are many tools to help achieve that — from the lightweight to more comprehensive solutions.
挑战在于确保主设计文件始终具有最新的模式。有许多工具可以帮助实现这一点--从轻量级到更全面的解决方案。
Abstract39 is a version-controlled hub for your design files. You can create branches, commit explorations, and merge changes. Abstract makes it easier to keep one single source of truth for your design files, including a master UI kit. Another popular tool is Invision’s Craft40. Craft is a set of plug-ins for Sketch which syncs the UI kit to anyone who has the plug-in installed. A Craft library can be saved on Dropbox.
abstract 39是设计文件的版本控制中心。您可以创建分支、提交探索和合并更改。Abstract 使您更容易为您的设计文件保留唯一一个有效版本，包括一个主UI工具包。另一个流行的工具是InVision的Craft 40。craft是用于同步的UI套件的插件，任何人都可以安装这个插件。craft库可以保存在Dropbox上。
More comprehensive options include UXPin41, Brand.ai42 and Lingo43. These tools allow you to create and manage a pattern library without having to use code. Naturally, they don’t provide as much flexibility as a custom-built pattern library, but many of them have useful features, such as interactivity of components, Sketch plug-ins44 for keeping files up to date, integration with Slack that pings a channel when the library is updated, and more.
更全面的选项还有UXPin 41、Brand.ai 42和Lingo 43。这些工具允许您无需使用代码就可以创建和管理模式库。当然，它们没有自定义构建的模式库提供那么大的灵活性，但是它们中可以提供有帮助的特性，例如组件的可交互性、用于更新文件的Sketch插件44、在库更新时会在slack的频道中推送通知，等等。
Pattern Library as the Source of Truth
模式库作为真理之源。
With pattern libraries gaining the “source of truth” status, in some companies it has become somewhat less important to keep master UI kits perfectly up to date. At FutureLearn, the master Sketch file (updated and shared via GitHub) only contains the core granular elements that don’t tend to change (typography, buttons, navigation, and so on). Designers use the pattern library as the main reference for up-to-date patterns, Sketch or Photoshop are used mainly for exploratory work. Because the majority of the components are defined and named, more and more often the team can get by with paper sketches, without needing detailed design specs.
随着模式库获得了“真理之源”的地位，在一些公司中，保持主UI套件的完美更新变得不那么重要了。在“FutureLearn”中，主素描文件(通过GitHub更新和共享)只包含不会更改的核心粒度元素(版式、按钮、导航等)。设计师使用模式库作为最新模式的主要参考，sketch或Photoshop主要用于探索性工作。由于大多数组件都完成了定义和命名，所以团队越来越多地在纸上绘制原型，而不需要详细的设计环节。
Thanks to design systems and pattern libraries, design and engineering workflows are moving toward each other. There are a lot of experiments in this area45, such as tools for generating Sketch files directly from a web page, and importing real data. In the near future we may not have to worry about keeping UI kits in sync, as they could be generated any time from the pattern library.
由于设计系统和模式库，设计工和开发工作流程正朝着彼此的方向发展。在这方面有很多尝试，例如直接从网页生成sketh文件和导入真实数据的工具。在不久的将来，我们可能不必担心保持UI kis的同步，因为它们可以随时从模式库生成。
The Future Of Pattern Libraries
模式库的未来。
Tools should accommodate the natural workflow of the whole team. Only then will everyone take ownership, and contributions to the pattern library will be evenly distributed. FutureLearn’s library didn’t have the capability for designers to update descriptions of modules, which in some way reduced their responsibility. Front-end developers were under more pressure to keep the documentation updated, which at times felt like a burden. In the future I hope to see pattern libraries accommodate multidisciplinary workflow. They could become environments where all disciplines could contribute to discussions around design patterns and help define their purpose.
工具应该适应整个团队原有的工作流程。只有这样，每个人都将拥有所有权，并且对模式库的贡献将被平均分配。Futurelearn的库没有能力让设计者更新模块的描述，这在某种程度上减少了他们的责任感。前端开发人员承受着更大的压力来保持文档的更新，这有时感觉是一种负担。在将来，我希望看到模式库适应多学科工作流程。他们可能成为所有学科都可以围绕设计模式进行讨论并帮助确定其目的的环境。
With tools getting better, pattern libraries and a systematic approach to design will continue affecting designers and developers deeply. Many teams are seeing the changes already. Something that used to take days of manual work can be done in minutes — no more detailed design specs, no more reinventing the same solutions again and again. At first, this might seem threatening (Will we have jobs in years to come? Does it take away from the creativity and craftsmanship on the web?). But perhaps the opposite is the case. Design systems free our time and energy to solve bigger and more meaningful problems, like understanding our users better and making design languages more inclusive.
随着工具的不断完善，模式库和系统设计方法将继续对设计人员和开发人员产生深远的影响。许多团队已经看到了这些变化。过去需要数天手动工作的事情可以在几分钟内完成--不再需要更详细的设计说明，也不再需要一次又一次地重新发明相同的解决方案。起初，这可能看起来很危险(我们在未来几年还会有工作吗？网络不再需要创造性和工匠精神？）。但也许情况恰恰相反。设计系统让我们腾出时间和精力去解决更大更有意义的问题，比如更好地理解我们的用户，使设计语言更具包容性。
1.There are many other types of design documentation, such as brand identity documents, front-end style guides for clients, and so on. In this chapter we’re only talking about pattern libraries created by in-house teams to support a design system.
1.还有许多其他类型的设计文档，如品牌识别文档、客户前端样式指南等。在本章中，我们只讨论内部团队为支持设计系统而创建的模式库。
5.http://smashed.by/atlassianpl
7.http://carbondesignsystem.com/
10.http://smashed.by/officefabricpl
11.https://www.lightningdesignsystem.com/
12.https://polaris.shopify.com/
13.http://smashed.by/skycomponents
14.https://style.eurostar.com/
15.http://smashed.by/atomicdesign
16.http://smashed.by/ceasefire
17.http://smashed.by/clearfractal
19.https://medium.com/@lewisplushumphreys
21.https://www.futurelearn.com/pattern-library
22.From email correspondence with Amy Thibodeau, UX lead at Shopify, August 2017
22. 摘自于在2017年与Shopify的UX总监Amy Thibodeau在邮件交流的内容
23.https://design.sipgateteam.de/
24.http://smashed.by/skytoolkit
25.http://smashed.by/polarisnav
26.http://smashed.by/pattern2doc
28.http://smashed.by/polariscolor
31.http://smashed.by/opentable
32.See “Super easy Atomic Design documentation with Sketch app” by Ross Malpass.
34.See “An Atomic workflow for design & development at Nordnet” by Ross Malpass.
39.https://www.goabstract.com/
44.https://www.lingoapp.com/sketch/
