设计系统

网络社区中没有“设计系统”的标准定义，人们以不同的方式使用该术语。在本章中，我们将定义什么是设计系统及其组成。

There isn’t a standard definition of “design system” within the web community, and people use the term in different ways. In this chap- ter, __we’ll define what a design system is and what it consists of.

设计系统是为实现数字产品的目的而一致组织的一组互连模式和共享实践。模式是我们组合在一起以创建界面的重复元素：诸如用户流程，交互，按钮，文本字段，图标，颜色，版式，复印件之类的东西。实践是我们选择创建，捕获，共享和使用这些模式的方式，特别是在团队合作中。

A design system is a set of interconnected patterns and _shared practices _coherently organized to achieve the purpose of digital products. Patterns are the repeating elements that we combine to create an interface: things like user flows, interactions, buttons, text fields, icons, colors, typography, microcopy. Practices are _how _we choose to create, capture, share and use those patterns, par- ticularly when working in a team.

看一下这两个脱离产品的显示内容。一个是来自汤姆森路透 Eikon 的交易和市场分析应用程序。另一个来自开放学习的社交学习网站 FutureLearn（请参阅对面页面）。

Take a look at these two screens of unrelated products.One is from Thomson Reuters Eikon, a trading and market analysis application; the other is from FutureLearn, an openeducation social learning site (see facing page).

在每个示例中，这些模式协同工作以实现不同的目的。对于汤森路透而言，它涉及到处理数据，实用程序，快速扫描和多任务处理；对于FutureLearn，它涉及周到的阅读，非正式的学习，反思以及与志趣相投的人的联系。产品的目的决定了我们该采用何种设计模式。

In each example the patterns work together to achieve different purposes. For Thomson Reuters, it’s about han- dling data, utility, quick scanning and multitasking; for FutureLearn, it’sabout thoughtful reading, informal learn- ing, reflection and connecting with like-minded people.The _purpose _of the product shapes the design patterns it adopts.

汤森路透Eikon的屏幕（左）和FutureLearn的屏幕。

汤森路透的布局基于面板和小部件，以允许用户执行多任务。设计密集，可在屏幕上显示大量信息。通过紧密的间距，紧凑的控件，灵活的布局和印刷选择（例如，浓缩的字体和相对较小的标题）可以实现高密度。

The Thomson Reuters layout is panel- and widget-based, to allow users to multitask. The design is dense, fitting large amounts of information on the screen. Density is achieved through tight spacing, compact controls, flexible layouts and typographic choices, such as a condensed typeface and relatively small headings.

另一方面，FutureLearn 的布局要宽敞得多。每个屏幕通常专注于单个任务，例如阅读文章，进行讨论或完成交互式练习。这里的布局大部分是单列；高对比度的字体带有大标题，粗大的控件和宽敞的空白。

On the other hand, the FutureLearn layout is much more spacious. Each screen is typically focused on a single task, such as reading an article, engaging in a discussion, or com- pleting an interactive exercise. The layout here is mostly a single column; there’s high-contrast typography with large headings, chunky controls, and generous white space.

选择FutureLearn上的模式支持反思性学习。学习者需要专注于手头的任务，而不被变化的内容分心。目的是要营造一种平静而又沉思的氛围。

1 The patterns on FutureLearn are chosen to support reflective learning. The learner needs to focus on the task at hand and not be distracted by displacement activities. The goal was to create an atmos- phere that feels calm and contemplative.

设计模式的选择受许多因素影响。其中一些来自产品所属的领域，以及其核心功能：这些是功能模式。例如，要使用交易和市场分析软件，您需要习惯于任务栏，数据字段和网格，图表以及数据可视化工具。对于在线学习站点，它可能是文章，视频，讨论线程，进度指示器和交互式活动。电子商务站点很可能包括产品展示，列表过滤器，购物车和结帐。

The choice of design patterns is influenced by many factors. Some of them come from the domain the product belongs to, and from its core functionality: those are functional patterns. To use trading and market analysis software, for instance, you’d need to be accustomed to task bars, data fields and grids, charts and data visualization tools. For an online learning site, it could be articles, videos, discussion threads, progress indicators and interactive activities. An e-com- merce site would most likely include a product display, list filters, shopping cart and a checkout.

产品（或品牌，取决于您对品牌的定义）的精神也形成了共同塑造产品感知方式的模式。在本书中，我将它们称为感知模式。我的意思是说诸如语气，版式和颜色选择，象形文字样式，间距和布局，特定形状，交互作用，动画和声音之类的东西。如果没有感知模式，您将不会感觉到来自同一域中具有相似功能的产品之间的巨大差异。

The ethos of a product (or the brand, depending on your definition of a brand) also forms patterns which together shape how a product is perceived; throughout this book I’ll refer to them as perceptual patterns. By that I mean things like tone of voice, typography and color choices, iconogra- phy styles, spacing and layout, specific shapes, interactions, animations, and sounds. Without perceptual patterns you wouldn’t feel that much difference between products from within the same domain, which have similar functionality.

尽管HipChat和Slack具有相似的目的和功能，但是它们的感觉却大不相同，这主要是由于在整个界面中如何表达品牌。
_

模式也受平台约定的影响。由于特定于平台的设计语言，产品可以感觉像是网络或应用。适用于的iOS应用程序 产品的行为和感觉与Android产品完全不同。

Patterns are also shaped by platform conventions. A product can feel distinctly web-y or distinctly app-y because of aplatform-specific design language. An iOS application for a product can behave and feel entirely different from its Android equivalent.

在创建数字产品时，有多种模式在起作用。这就是为什么设计很难。模式需要交互，连接，但仍然可以无缝地协同工作。让我们仔细看看它们。

There are many kinds of patterns at play when it comes to creating digital products. That’s why design is hard. Patterns need to interact, connect, yet still work seamlessly together. Let’s take a closer look at them.

设计模式

设计模式的想法是由建筑师克里斯托弗·亚历山大（Christopher Alexander）在他的开创性著作《建筑的永恒方式和模式语言》中提出的。书中贯穿的一个问题是，为什么有些地方感觉如此生动活泼，很棒，而另一些地方却感到沉闷和毫无生气。根据亚历山大的说法，位置和建筑物给我们的感觉方式不仅仅是主观情感。这是某些切实和特定模式的结果。即使是普通人也可以学习和使用它们来创建人性化的建筑。

The idea of design patterns was introduced by the architect Christopher Alexander in his seminal books, The Timeless Way of Buildingand A Pattern Language. One question that runs through the books is why some places feel so alive and great to be in, while others feel dull and lifeless. According to Alexander, the way places and buildings make us feel is not due to subjective emotions merely. It’s a result of certain tangible and specific patterns. Even ordinary people can learn and use them to create humane architecture.

模式语言包含253种建筑设计模式，从较大的模式（例如城市和道路系统的布局）到最小的模式（例如家庭住宅中的照明和家具）。

A Pattern Language contains 253 architectural design pat- terns, starting from the larger ones, such as a layout of a city and road systems, down to the smallest ones, such as lighting and furniture in a family house.

模式是一种可重复使用的可重复使用的解决方案，可用于解决设计问题。

A pattern is a recurring, reusable solution that can be applied to solve a design problem.

每个模式都描述了一个在我们的环境中反复发生的问题，然后描述了该问题解决方案的核心。”
— Christopher Alexander，一种模式语言

Each pattern describes a problem that occurs over and over again in our environment, and then describes the core of the solution to that problem.” — Christopher Alexander, A Pattern Language

同样，在创建界面时，我们使用设计模式来解决常见问题：我们使用选项卡将内容分为几部分，并指出当前选择的选项；我们使用下拉菜单根据用户要求显示选项列表。

Similarly, when creating interfaces we use design patterns to solve common problems: we use tabs to separate con- tent into sections and indicate which option is currently selected; we use a dropdown to display a list of options at the user’s request.2

Bootstrap的一些模式，Bootstrap是用于开发响应式网站的前端框架。

我们使用模式来提供反馈，以显示流程中还剩下多少步骤，允许人们彼此互动，查看和选择项目。设计模式会引起人们的兴趣和鼓励，使工作更轻松，创造成就感或控制感。

We use patterns to offer feedback, to show how many steps are left in a process, to allow people to interact with each other, to view and select items. Design patterns can intrigue and encourage, make tasks easier, create a sense of achieve- ment or an illusion of control.

http://ui-patterns.com/是常见设计模式的重要来源，可以按目的和解决的设计问题进行分组。为了全面了解UIpatterns，我还建议设计接口：Jenifer Tidwell的有效交互设计模式。

http://ui-patterns.com/ is a great sourceof common design patterns, groupedby purpose and thedesign problemit solves. For a compre- hensive read on UIpatterns, Ialso recommend Designing Interfaces: Patterns for Effective Interaction Desig_n _by Jenifer Tidwell.

UI模式上具有说服力的模式“对召回的识别”的示例。__3

大多数设计模式都是被创建并让人了解学习的。它们利用人们的思维模式，让设计师可以直观地理解设计。全新的模式要求用户首先学习和采用它们，所以相对来说这样的系统并不多。使产品与竞争对手不同的原因不是它使用的模式的新颖性，而是如何执行和应用这些模式，以及它们是如何相互链接以达到设计目的。

Most of the design patterns are established and familiar.They make use of people’s mental models and allow design to be understood intuitively. Entirely new patterns requireusers to learn and adopt them first — they are relatively rare.4 What makes a product distinct from its competitors is not the novelty of patterns it uses, but how those patterns are executed and applied, and how they interconnect to achieve a design purpose.

3、 http://smashed.by/patternsrecognition
在滑动手势成为一种通用移动端交互方式，没人知道如何使用。而现在，我们可以看到基于此模式构建的整个产品（例如Tinder）。从常识去探索新事物的过渡非常微妙，因为产品的生死取决于何时以及如何做到。

4、Until the swipe gesture had emerged as a mobile pattern, no one would have known how to engage with it. Now we see whole products built on this pattern (such as Tinder). The transition to using what people know and exploring something new is very delicate; products live and die based on when and how they do this.

一组相互关联的模式构成了产品界面的设计语言。

A set of interconnected patterns forms the design language of your product’s interface.

设计语言随着我们设计的产品而产生，我们并不能第一时间就知道这个语言是什么。有时候，有效、有趣的设计是基于直觉的，我们很难确切说明他们的工作方式和原因。

A design language emerges as we work on a product.We don’t always know what this language is. Sometimes, effective and interesting designs are based on intuition, and we struggle to articulate exactly how andwhy they work.

设计师和开发人员可能本能地就知道，但是直觉并不总是可靠或可扩展的。设计师Dan Mall在他的文章“研究设计系统”中指出，设计系统的主要目标之一是“扩展创意方向”。如果您需要一群人始终如一，可靠且连贯地遵循创新方向，则需要阐明和共享模式。

Designers and developers might know it instinctively, but intuition is not always reliable or scalable. In his article “Researching Design Systems,”5 designer Dan Mall noted that one of the main goals of a design system is “extending creative direction.” If you need to get a group of people to follow a creative direction consistently, reliably and coher-ently, patterns need to be articulated and shared.

当您表达设计语言时，它得是可行且可复制的。设计系统开始于你的脑海构思。例如，您无需讨论如何调整项目以使其更加突出，而是可以拥有一套促销模式，每个促销模式都旨在实现不同的视觉突出度。Tom Osborne 的视觉响度指南是如何系统地处理按钮和链接的一个示例。除了将它们单独列出之外，它们还作为套件显示，每个都有对应于其预期视觉突出度的不同“体积”。

When you articulate your design language it becomes actionable and reproducible. You start approaching design with a system in mind. For example, instead of discussing how to tweak an item to make it stand out more, you can have a suite of promotional patterns, each one targeted to achieve a different level of visual prominence. The visual loudness guide6 by Tom Osborne is an example of how buttons and links can be approached systematically. Insteadof listing them individually, they are presented as a suite, each one having a different “volume” corresponding to its intended visual prominence.

5 http://smashed.by/researchingsystems
6 http://smashed.by/visualloudness

Tom Osborne的视觉响度指南。资料来源

准备表达设计语言可以让您更好的控制系统。比起微小的调整，通过此方法你可以更好的控制整个系统。如果你发现一个设计的改动可以对用户体验带来积极影响，你可以将此沉淀在设计系统而不仅仅是在一个产品中。你可以花很多时间跟用户和领域专家讨论是否需要一个下拉列表，而不是在设计这个组件上。当设计语言是共享知识时，你可以停止专注模式本身，更多的关注用户。

Articulating your language allows you to gain more control over the system. Rather than making small tweaks, you can affect it in much more profound ways. If you discover a small design change which made a positive impact on user experience, you can apply it to the pattern across the system rather than to one place. Instead of spending hours on designing a dropdown, you can spend that time with the users and domain experts, finding out if a dropdow is needed in the first place. When the design language is shared knowledge, you can stop focusing on the patterns themselves and instead focus more on the user.

我们将在本书中讨论很多关于如何阐明、共享和记录数字产品的设计语言。指的注意的是，我们将研究两种类型的设计模式：功能性和感知性。功能模式表示为界面的具体模块，例如按钮、标题、表单元素、菜单。感知模式是一种描述性样式，可以直接地表示和传达产品的个性，例如颜色和字体、图标、形状和动画。

Throughout the book we’ll talk a lot about articulating, sharing and documenting a pattern language for a digital product. In particular, we’ll look at two types of design patterns: functional and perceptual. Functional patterns are represented as the concrete modules of the interface, such as a button, a header, a form element, a menu. Perceptual patterns are descriptive styles that express and communi- cate the personality of the product visually, such as color and typography, iconography, shapes and animations.

为了拓展语言的类别，功能模式有点像名次或动词，是界面具体可操作的部分。而感知模式，类似于形容词，它们是描述性的。例如，按钮是具有明确功能的模块：允许用户提交动作。但是按钮标签中的印刷样式，其形状、背景颜色、填充、交互状态和过渡不是模块，这些是风格描述。他们描述了它是什么样的按钮。从前端的角度来看，模块始终以 HTML 为基础，而感知模式通常是 CSS 属性。

To extend the analogy with language, functional patterns are a bit like nouns or verbs — they are concrete, actiona- ble parts of the interface; whereas perceptual patterns are similar to adjectives — they are descriptive. For example, a button is a module with a clear function: allow users to submit an action. But the typographic style in the label of the button, its shape, background color, padding, interactive states and transitions are not modules. They are styles; they describe what _kind _of button it is. From a front-end perspec- tive, modules always have a basis in HTML, and perceptual patterns are typically CSS properties.

设计系统包含许多其他类型的模式：用户流（例如带有错误和成功消息的表单的完成），面向领域的设计模式（例如 EdTech 系统的学习模式和电子商务模式）以及具有说服力的 UX 模式。本书的重点是作为设计系统核心组成部分的功能和感知模式。

A design system contains many other kinds of patterns: user flows (such as completion of forms with errors and success messages), domain-oriented design patterns (like learning patterns for EdTech systems, and e-commerce patterns),and persuasive UX patterns. The focus of this book is on the functional and perceptual patterns as the core building blocks of a design system.

但是，重要的不仅是在于模式本身，还在于模式的演变、共享、连接和使用方式。

But, of course, what matters is not only the patterns themselves, but how they are evolved, shared, connected and used.

共用语言

语言是协作的基础。如果你在团队中工作，则需要在参与产品创建的人员之间共享您的设计语言。如果没有共同的语言，一群人就无法有效共创，因为每个人对自己要实现的目标有不同的思维模式。让我们回到按钮示例。基于界面的这种基本但愿也可以具有不同的含义。按钮到底是什么？您可以单击轮廓区域？界面上的超链接？允许用户提交一些数据的表单元素？

Language is fundamental to collaboration. If you work in a team, your design language needs to be shared among the people involved in the creation of the product. Without a shared language, a group of people can’t create effectively together — each person willhave a different mental model of what they’re trying to achieve.Let’s return to the button example. Even such a basic unit of the interface can have different meanings. What exactly is a button? An outlined area that you can click on? An interactive element on a page that links somewhere? A form element that allows users to submit some data?

Abby Covert在她的书《如何理解混乱》中建议，在讨论界面之前创建设计语言，通过讨论，审核和记录它。这个想法可以应用于描述高级概念以及我们用来讨论设计决策的日常语言。拥有一种共享语言将意味着我们使用相同的方法来命名界面元素和定义设计模式，或者在设计文件和前端体系结构中使用相同的名称。

In her book How to Make Sense of Any Mess, Abby Covert suggests that a shared language should be established before you think about interfaces, by discussing, vetting and documenting our language decisions. This idea could be applied to describing high-level concepts as well as theday-to-day language we use to talk about design decisions. Having a shared language would mean that we have the same approach to naming interface elements and defining design patterns, or that the same names are used in design files and front-end architecture.

靠这些可能还不够，有时小组中的人们认为他们已经达成了共识，因为他们共享相同的词汇并广泛的使用它，但是他们仍然在理解上存在根本差异。例如，在使用术语“场景“作为项目中的关键概念一年之后，你可能会发现不同人对他的解释完全不同。这不仅是开发一种语言，我们还需要开发一种可共享的语言使用方式。对术语按钮有共同的理解是不够的。人们还必须真的为什么以及如何使用按钮，在什么情况下以及按钮可以服务的目的。

Even that might not be enough. Sometimes, people in a group think they have reached a mutual understanding because they share the same vocabulary and use it expres-sively, but they still retain fundamental differences in understanding. For example, after a year of using the term “Scenario” as a key concept in a project, you might discover that different people are interpreting it in entirely different ways. It’s not only about developing a shared language — we need also to develop a shared use of language. It’s not enough to have a shared understanding of the term button. People must also know why and how to use a button, in what con- texts, and the purpose a button can serve.

假设我们在界面中使用了一个名为“序列”的元素。通过将其表示为“序列”，我们旨在与用户沟通，应按特定顺序查看步骤。

Suppose we use an element called “Sequence” in the inter- face. By presenting it as “Sequence” we aim to communicateto users that the steps should be looked at in a specific order.

“顺序”模块的示例

理想情况下，参与产品创建的每个人都应该知道该元素是什么：其名称和目的，为什么以这种方式设计，如何使用以及何时使用它。这种共享的只是越强，机会就越大。它被适当地使用，设计师和前端开发人员都应该具有这一知识，但是如果其他学科（内容、市场营销、产品管理）的人也有一些想法，这将有所帮助。

Ideally, everyone involved in the creation of the product should know what this element is: its name and purpose,why it’s been designed that way, and how and when it should be used.7 The stronger this shared knowledge is, the higher the chances that it will be used appropriately. Designers and front-end developers shouldhave this knowl- edge, but it helps if people from other disciplines (content, marketing, product management) have some idea too.

每个人都应该将其称为“序列”，而不是“向导控制”或“花式气泡”。如果设计人员将其称为“奇特泡沫”，开发人员将其称为“向导控件”，并且用户将其解释为一组可选选项卡，那么您知道您的语言不起作用。为什么用户的解释如此重要？我们可以在这里记住Don Norman的开创性著作《日常事物的设计》，他在其中谈到系统映像（界面）与用户模型（用户对界面形成的感知）之间的鸿沟通过与之互动。如果用户的思维模型与设计团队提供的系统图像不符，那么用户将继续受到系统意外行为的挑战。有效的设计语言弥合了系统映像和（假定的）用户模型之间的鸿沟。

It should be known to everyone as “Sequence,” not “Wizard control” or “Fancy bubbles.” If designers refer to it as “Fancy bubbles,” developers call it “Wizard control” and users inter- pret it as set of optional tabs, then you know your language doesn’t work. Why is the user’s interpretation important?We can remember here Don Norman’s pioneering work, The Design of Everyday Things, where he talks about the gulf between the system image (the interface) and the user’s model (the perception of the interface formed by the user through interaction with it). If the user has a mental modelof the interaction that doesn’t fit with the system image provided by the design team, then the user will be contin- ually challenged by unexpected behavior from the system. An effective design language bridges the gap between the system image and the (assumed) user model.

随着您的语言变得越来越丰富和复杂，您需要一种有效的方法来沉淀并共享它。在当今的网络上，模式库是支持设计系统的良好实践的关键示例之一。

As your language becomes richer and more complex,you need an efficient way to capture and share it. On today’sweb, a pattern library is one of the key examples of good practice in supporting a design system.

7.挑战也不是强加“顺序”的一种定义或概念，而是理解和使用其使用环境，例如，UX团队可以支持不同类型的顺序（对于FutureLearn，课程顺序） ，运行，步骤，用户操作等。

7.The challenge is also not to impose one definition or conceptionof “Sequence,” but to understand and work with its context of use so that, for example, the UX team can support different types of sequenc- ing (for FutureLearn, sequencing of courses, runs, steps, user actions, etc.) within a coherent framework.

模式库及其局限性

设计系统不仅包括模式，还包括创建，捕捉，共享和发展这些模式的技术和实践。模式库是一种用于收集，存储和共享您的设计模式的工具，以及有关如何使用它们的原理和指南。尽管模式库相对较近地在网络上变得流行，但是以各种形式记录和共享设计模式的概念已经存在了很长时间。

A design system consists not only of patterns, but also techniques and practices for creating, capturing, sharing and evolving those patterns. A pattern library is a tool to col- lect, store and share your design patterns, along with the principles and guidelines for how to use them. Even though pattern libraries have become popular on the web relatively recently,the concept of documenting and sharing design patterns in various forms has existed for a long time.

帕拉第奥（Palladio）的《建筑四书》（1947）在威尼斯首次出版，是最重要，最有影响力的建筑书之一。它也是最早的系统文档示例之一。帕拉第奥从希腊罗马建筑中汲取灵感，提供了设计和建造建筑物的规则和词汇，包括原理和图案，并详细说明了其工作原理。

Palladio’s The Four Books of Architecture, first published in 1570 in Venice, is one of the most important and influential books on architecture. It is also one of the earliest examples of system documentation. Drawing inspiration from Greco- Roman architecture, Palladio provided rules and vocabulary for designing and constructing buildings, including princi- ples and patterns, with detailed illustrations and explana- tions of how they work.

楼梯类型：螺旋形，椭圆形和直形。 Palladio描述了如何以及何时使用每种类型。例如，螺旋楼梯适用于“非常受限制的位置，因为它比直梯占用的空间少，但上起来比较困难”。

在现代图形设计中，从早期的印刷和网格系统到包豪斯的设计原理，系统早已被记录在案。在过去的几十年中，公司以品牌手册的形式记录了它们的视觉识别，其中最著名的例子就是1975年的NASA的《图形标准手册》。

In modern graphic design, systems have also long been documented, from early typography and grid systems, to Bauhaus design principles. For the last few decades, com- panies have documented their visual identities in the form of brand manuals, with NASA’s Graphics Standards Manual from 1975 being one of the more well-known examples.

NASA的《图形标准手册》中的布局指南
_
在网络上，模式库从扩展的品牌标识文档开始，专注于徽标处理，企业价值和品牌样式，例如版式和调色板。9然后，它们扩展为包括接口模块及其使用准则。雅虎的模式库是文档界面模式的首批示例之一。

On the web, pattern libraries started as extended brand identity documents that focused on logo treatments, corporate values and brand styles, such as typography and color palettes.9 They then extended to include inter- face modules, as well as guidelines for their use. Yahoo’s pattern library was one of the first examples of docu- mented interface patterns.

8 也许这就是我们如何区分样式指南和样式库的方式。传统上，样式指南着重于样式，例如颜色和版式。模式库可以包括样式，功能模式和设计原则等。

8 http://smashed.by/nasastandards 9 Perhaps this is how we can distinguish style guides from pattern li- braries. Style guides traditionally focused on styles, such as colour and typography. Pattern libraries can include styles, as well as functional patterns and design principles, among other things.

雅虎的模式库是记录的界面模式的首批示例之一。

对于比Yahoo少一些资源的公司而言，模式库通常会存在于PDF或Wiki中，这意味着它是静态的并且很难保持最新。今天，许多设计人员和开发人员都希望拥有一个更加动态或“活跃”的模式库，其中包含设计模式以及用于构建它们的实时代码。生活方式指南或样式库不只是参考文档，它是用于为数字产品创建界面的实际工作模式。

For companies less resourceful than Yahoo, a pattern library would typically live in a PDF or a wiki, which meant that it was static and difficult to keep up to date. The aspiration for many designers and developers today is a more dynamic or “living” pattern library that contains the design patterns, as well as the live code used to build them. A living style guide or pattern library is more than a reference document — it’s the actual working patterns used to create an interface for a digital product.

MailChimp的模式库是网络上最有影响力的实时模式库示例之一

模式库的局限性

模式库有时被认为可以与设计系统互换。但是，即使是最全面，最实用的模式库也不是系统本身。它是有助于使设计系统更有效的工具。

Pattern libraries are sometimes thought of as interchangea- ble with design systems. But even the most comprehensiveand living pattern library is not the system itself.It’s a tool that helps to make a design system more effective.

模式库不能保证设计的凝聚力和一致性。它可能有助于纠正微小的矛盾或使代码库更健壮，但仅靠工具本身对用户体验的影响就很小。

A pattern library doesn’t guarantee a more cohesive and consistent design. It might help to correct small inconsist- encies or make a codebase more robust, but a tool alone will have very little impact on the user experience.

10 http://smashed.by/mailchimppatterns

没有任何模式库可以解决错误的设计。 TED仍然可能被错误地设计，误用或以无法整体使用的方式进行组合。正如 TED 的 UX 设计师 Michael McWatters 在一次采访中指出：“即使是 Squarespace 模板也可能因草率的设计思维而被破坏。”相反，无需全面的模式库即可创建具有一致用户体验的产品（如 TED 设计系统示例中第6章所示）。

No pattern library will fix bad design. Patterns can still be badly designed, misused or combined in ways that don’t work as a whole.As Michael McWatters, UX architect at TED, noted in an interview: “Even a Squarespace template can be ruined by sloppy designthinking.” And conversely, a product with a coherent user experience can be created without a comprehensive pattern library (as we will see in chapter 6 in the example with TED’s design system).

活跃的模式库往往伴随着更好的协作方式。但是，您可能最终会遇到只有一小部分人使用它的情况，或者由于团队之间缺乏通信而导致太多断开连接的模式。更新时，模式库是共享语言的词汇表。但这并不意味着就没有解释的余地。围绕解释的讨论通常是模式库成功或失败的关键。

A living pattern library is associated with better collaboration. Yet you might end up in a situation where only a small group of people uses it, or there might be too many disconnected patterns as a result of a lack of communica- tion between the teams. When up-to-date, a pattern library is a glossary for the shared language. But that doesn’t mean there isn’t still room for interpretation. It’s the discussionsaround the interpretation which are often the key to a pat- tern library’s success or failure.

另一方面，模式库有时因扼杀创造力而受到指责，从而导致外观通用的网站。但是，模式库再次反映了其背后的设计系统。如果您的系统从根本上是严格的且受限制的，则模式库可以显示并强调其刚性。如果它可以进行大量创造性的实验，那么好的模式库可以使实验更加容易。

On the other hand, pattern libraries are sometimes blamed for stifling creativity, leading to generic looking websites. But again, a pattern library reflects the design system behind it. If your system is fundamentally rigid and restrict- ing, the pattern library can reveal and emphasize the rigid-ity.If it allows plenty of creative experimentation, a good pattern library can make the experimentation easier.

使用当今可用的所有自动化工具和样式指南生成器，可以比过去更快地完成组件库的设置。但是，如果没有建立一个整合了模式和实践的统一设计系统的基础，其影响将是有限的。当模式库用于支持扎实的设计语言基础时，它就成为功能强大的设计和协作工具。在此之前，它是网页上模块的集合。

With all the automated tools and style guide generators available today, setting up a library of components can be done much quicker than in the past. But without a founda- tion of a coherent design system that integrates the patterns and practices, its impact will be limited. When a pattern library is used to support a solid design language founda- tion, it becomes a powerful design and collaboration tool.Until then, it’s a collection of modules on a web page.

如何打造高效的设计系统

设计系统的有效性可以通过其不同部分协同工作以帮助实现产品目的的程度来衡量。例如，FutureLearn的目的是“激发所有人在任何地方的终生学习。”我们可能会问，界面的设计语言如何有效地帮助我们实现这一目标，团队的实践有多有效？如果界面令人困惑并且人们没有实现他们的目标，那么设计语言就无效。如果由于每次都必须从头开始重新创建模式而花费太多时间来构建站点的新区域，那么我们知道可以改进我们的做法。

The effectiveness of a design system can be measured by how well its different parts work together to help achieve the purpose of the product. For example, the purpose of FutureLearn is “to inspire lifelong learning in everyone,any- where.”We could ask, how effective is the design language of the interface to help us achieve this, and how effective are the practices of the team? If the interface is confusing and people don’t achieve their goals, then the design language is not effective. If it takes too long to build a new area of the site because patterns have to be recreated from scratch every time, then we know our practices can be improved.

当一个设计系统结合了设计过程中的成本效益，以及与产品目的相关的用户体验的效率和满意度时，就可以认为是有效的。

A designsystem can be considered effective when it com- bines cost-effectiveness in the design process, and efficiency and satisfactionof the user experience in relation to the product’s purpose.

共享目的

Donella Meadows在《系统思考》中解释说，系统的最重要品质之一就是它们如何连接和组织子系统被聚集到大的系统中，而大的系统又构成了更大的系统的一部分。肝脏中的细胞是器官的一部分，也是有机体的一部分。没有孤立的系统。您的设计系统中可能有一个较小的子系统：用于控制页面布局的编辑规则；或者它可能包括一种以某种方式响应性地缩放徽标的方法。同时，它也是其他大型系统的一部分：您的产品，您的团队，您的公司文化。

In Thinking in Systems, Donella Meadows explains that one of the most important qualities systems have is how they’re connected and organized: subsystems are aggregated into larger systems, which in turn form part of something larger. A cell in your liver is part of an organ, which is a part of you as an organism. No system exists in isolation. Your design system might have a smaller subsystem within it: editorial rules to control the layout of the page; or it might include a method for scaling your logo responsively in a certainway. At the same time, it is also part of other larger systems: your product, your team, your company culture.

惠特尼美国艺术博物馆的徽标“dynamicW” 本身就是一个简单而又非常适用的系统。 W响应周围的艺术品和文字，从而提供了多种灵活的布局可能性
11 http://smashed.by/whitneyidentity

在高效的系统中，我们看到子系统相互连接并朝着一个共同的目标对齐：设计方法反映在前端体系结构中；设计模式遵循指导原则；模式语言在设计，代码和模式库中被一致地应用。我们看到这些系统的运作方式是和谐的：它们的工作流程更高效，并且它们产生的用户体验更加有意义和连贯。

In highly effective systems, we see that subsystems are connected and aligned toward a shared purpose: a design approach is mirrored in the front-end architecture; designpatterns follow the guiding principles; the pattern languageis applied consistently in design, code and the pattern library. We see harmony in the way those systems function: their workflow is more efficient, and the user experiences they generate feel more meaningful and coherent.

识别问题

我们需要快速并准确的发现不足。碎片化的设计系统导致零碎的用户体验，充满了相互冲突的消息。我们希望用户注册我们的新闻通讯，但是我们也希望他们签出我们的最新产品。我们希望他们逐步完成这些步骤，但是我们还需要确保他们对每个配方都评分。 “顺序”用于预览站点某一区域中的步骤；在另一种情况下，它突然变成了选项卡式导航。接口充满了相同颜色的各种阴影和相同按钮的多个版本。团队的生产力也受到影响：由于代码混乱而混乱，进行最小的更改既费时又费力。设计师花时间复制像素并为相同的问题重新发明解决方案，而不是了解和解决实际的用户需求。

When there are gaps, it’s also easy to see them. A frag- mented design system leads to a fragmented user experi- ence, full of conflicting messages. We want the user to sign up for our newsletter, but we also want them to check out our latest products. We want them to progress through the steps, but we also need to make sure they rate each recipe. “Sequence” is used to preview the steps in one area of the site; in another, it is suddenly a tabbed navigation. The inter- face is full of various shades of the same color and multiple versions of the same button. The team’s productivity is also affected: making the tiniest change is time-consuming and fiddly because of the confusing, tangled up code. Designers spend their time copying pixels and reinventing solutions to the same problems, instead of understanding and solving real user needs.

我们如何缩小差距并使我们的设计系统更有效？通过了解它是什么以及它如何工作。我们以一个简单的虚构的十分钟食谱网站为例，开始研究模式语言在新产品中的发展方式。

How do we reduce the gaps and make our design system more effective? By understanding what it is and how it works. We’llstart by looking at how a pattern language evolves in a new product, by taking a simple fictional ten-minute recipe website as an example.

示例：十分钟的食谱站点

想象一下，我们正在创建一个网站，与喜欢健康食品但不想花很多时间做饭的人共享食谱。如果我们要考虑系统问题并尽早定义设计模式，那么我们将从何处开始？在开始之前，我们先做一些假设。我们了解烹饪领域，并且已经进行了足够的研究来为我们的设计决策提供依据。因此，我们要尝试做的并不是弄清楚应该经历什么，而是要了解如何为这个新网站建立设计系统。

Imagine we are creating a website for sharing recipes with people who love healthy food but don’t want to spend a lot of time cooking. If we were to approach it with a system in mind and define design patterns early on, where would westart? Before we begin, let’s make some assumptions. We understand the domain of cooking, and enough research has already been done to inform our design decisions. So what we’re trying to do is not figure out what the experi- ence should be, but see how we can establish design system thinking for this new website.

目的和价值观

我们要做的第一件事就是尝试了解我们的用户，他们的目标，需求和动机。为了保持其有效性，我们要知道他们是忙碌的专业人员，他们的目标是要获得美味，健康的餐食，却不用花费很多时间和精力进行烹饪。我们可以通过多种方式帮助他们实现这一目标：将他们与厨师联系起来，将食物送到他们家门口，建立一个对话式应用程序。但是我们想通过一个包含十分钟食谱的网站来实现。如果我们要用一个句子来表达目的，那就是这样的：激励和授权人们在不超过十分钟的时间内烹饪美味健康的饭菜，这是产品的核心，它应该为设计提供信息和发展决定。团队应该认识到这一目标并相信它-不应感到被迫。

One of the first thingswe’d do is try to understand who our users are, their goals, needs and motivations. To keep itsimple, let’s say that we know they are busy professionals and their goal is to get a tasty, healthy meal without hassle and hours spent cooking. There are many ways we can help them achieve this goal: connect them with chefs, deliver food to their doorstep, build a conversational app. But we want to do it through a website with ten-minute recipes. If we were to express the purpose in a single sentence, it would be along the lines of: Motivate and empower people to cook delicious healthy meals in no more than ten minutes.This purpose is the core of the product, and it should inform design and development decisions. The team should recog- nize that purpose and believe in it — it shouldn’t feel forced.

另一个重要元素是精神，它捕捉了我们试图在网站上描绘的价值观和精神。对我们来说，它可以是简单的健康食品，也可以尝试使用常见成分。对于其他烹饪场所，它可以是高级美食和精通烹饪技能。

Another important element is the ethos that captures the values and spirit we try to portray through the site. For us it can be simple healthy food and experimentation with common ingredients. For other cooking sites it can be haute cuisine and mastery of culinary skills.

设计原则

为了确保通过我们所做的每件事都能清楚地表达产品的目的，我们需要建立一些基本的原则和价值观。可以非正式地讨论它们，也可以将它们写成宣言。重要的是，参与产品创建的人员必须同意这些价值观并致力于这些价值观。

To make sure the purpose of the product is expressed clearly through everything we do, we would need to establish a few grounding principles and values. They might be discussed informally or written as a manifesto — what’s important is that the people involved in the creation of the product agree on those values and commit to them.

例如，十分钟烹饪食谱站点团队中的每个人都了解时间的价值。他们通过在配方上设置时间限制来进行激励，因此，他们都在努力使现场互动变得简短，简单，快速和流畅。

For example, everyone on the ten-minute cooking recipe site team understands the value of time. They are moti- vated by having a time limit on the recipes, and as a result they all strive to make interactions on the site short, simple, fast and smooth.

不仅要通过设计模式来表达这一原则，还要通过网站的性能，语调甚至团队的运作方式来表达这一原则。

This principle will be expressed not only through design patterns, but the performance of the site, its tone of voice, and even how the team operates.

这些原则不一定是官方的，甚至不一定是书面的。但是，在团队中达成共识并认识到什么是至关重要的，这对于使每个人的工作和优先事项保持同步至关重要。它还可以帮助决策：从首先构建哪个功能，使用哪种方法，计算出UX流程，按钮的外观和字体选择。

These principles might not necessarily be official or even written down. But having an agreement and awareness in the team on what they are is essential to keep everyone’s effort and priorities in sync. It can also help with deci- sion-making: from which feature to build first and which approach to use, to working out UX flows, or how buttons should look and the choice of typeface.

行为和功能模式

我们将制定一些我们希望鼓励或启用的关键行为，以帮助实现他们的目标。

We’d work out some of the key behaviors we want to encourage or enable in our users that will help themachieve their goals.

• 我们希望人们总是选择健康的家庭烹饪食品，而不是快餐或微波食品。这意味着我们的饭菜需要看起来美味又健康，并且比微波食品更诱人。令人难以抗拒的美味却外观简单的食物的图片可以在这里为我们提供帮助。
• 我们希望让人们在十分钟之内取得良好的成绩。这意味着我们需要通过几个简单的步骤来介绍食谱。步骤应该简短，清晰和重点突出。也许我们可以在每个步骤上都有一个计时器，以确保我们遵守十分钟的承诺。
• 我们希望鼓励人们自发，感觉他们可以随时准备一些东西。从已经拥有的东西开始，而不是从获得的东西开始-无需购买奢侈的成分。就用户界面而言，这可以通过带有清晰标签的易于选择的成分缩略图来支持。
• 我们希望鼓励人们发挥创造力和自发性，并从中获得乐趣。显示哪些成分是可选的以及可以替换哪些成分。显示出可能很有趣的意外组合。

  • We want people to always choose a healthy home- cooked meal over fast or microwaved food. This means that our meals need to look delicious and healthy,and be more enticing than microwaved food. Good imagery with irresistibly delicious yet simple-looking food can help us here.
  • We want to enable people to achieve good results in under ten minutes. This means that we’ll need to present the recipes in a few simple steps. The steps should be short, clear and focused. Perhaps we could have a timer on each step, to make sure we keep to the ten-minute promise.
  • We want to encouragepeople to be spontaneous and feel like they can prepare something whenever they like. Start with what you have already,rather than with whatyouneed to get — no need to shop for extravagant ingre- dients. In terms of UI, this could be supported by easily selectable ingredient thumbnails with clear labels.
  • We wantto encouragepeople to be creative and spon- taneous, and to have fun. Show which ingredients are optional and what they can be replaced with. Show unex- pectedcombinations that could be interesting to try.

自然，随着我们在站点上工作，设计细节将发生变化，但是那些关键行为将保持不变。这些行为将通知站点的核心功能模块和交互作用：配料缩略图，配方卡，步骤顺序，计时器。

Naturally, the design details will change as we work on the site, but those key behaviors would remain the same. Those behaviors will inform the core functional modules and inter-actions of the site: ingredient thumbnails, recipe cards, step sequence, timer.

12 在下一章中，我们将更详细地研究有效设计原则的质量以及它们如何构成您的设计语言的基础。
13 有关了解人们的需求以及塑造新产品愿景的进一步阅读，请参阅 Slack 首席执行官 StewartButterfield 的“我们在这里不卖马鞍”（http://smashed.by/saddles）。

12 In the next chapter we will look in more detail at the qualities of effective design principles and how they can form a foundation of your design language. 13 For further reading on understanding what people want, and shap- ing a vision for a new product, see We Don’t Sell Saddles Here by StewartButterfield, CEO of Slack (http://smashed.by/saddles).

美学和知觉模式

大约在同一时间，我们需要弄清楚使用十分钟烹饪食谱网站的人如何看待我们。我们是简单而扎实，还是魅力四射？是认真还是嬉戏？大胆还是温柔？功利还是情感？哪些美学可以捕捉我们想要通过界面描绘的个性和精神？我们将开始考虑品牌。

Around the same time,we’d need to work out how we want to be perceived by someone using the ten-minute cooking recipes site. Are we simple and down-to-earth or glamor- ous and sophisticated? Are we serious or playful? Bold or subdued? Utilitarian or emotional? What are the aestheticsthat capture the personality and ethos we want to portraythrough the interface? We’d start thinking about the brand.

我们对健康食品充满热情，因此我们希望它能通过网站传播。也许会有一种有机，温暖，有益健康的感觉。我们还认为，烹饪不需要太多的计划和准备工作；它既可以自发又有趣，并且您可以在十分钟的时间限制内尝试并发挥创造力。

We’re passionate about healthy food, so we want it to come through the site. Perhaps it would have an organic, warm, wholesome feel. We also believe that cooking doesn’t need to take a lot of planning and preparation; it can be spontane- ous and fun, and you can experiment and be creative in the ten-minute time limit.

在这一点上，我们可能会放在一起一些情绪板，并开始尝试视觉效果，直到品牌感觉正确为止。一旦实现这一目标，我们就可以定义核心视觉品牌元素，例如版式，调色板，语气以及任何与众不同的功能。品牌；例如，插图，图像样式，特定形状，独特的交互作用可以捕捉我们服务的本质并以最佳方式呈现内容。

At this point we would probably put together some mood boards and start experimenting with visuals until the brandfeels right. Once we achieve this, we can define core visual brand elements such as typography, color palette, tone of voice, and any distinguishing features of the brand; for example, illustrations, image styles, specific shapes, unique interactions that capture the essence of our service and present content in the best way.

14 More about the process of defining perceptual patterns in chapter 4.

假设我们提出了一个温暖的，泥土色的调色板，手绘图标，着重于可读性的版式，健康食品的优质摄影以及一些简单的界面元素和控件。这些样式将成为我们的感性模式。

Let’s say we come up with a warm, earthy color palette, hand-drawn icons, typography with a focus on readability, quality photography of healthy food, and a few simple inter- face elements and controls. These styles will become our perceptual patterns.

共享语言

除此过程外，我们还将通过选择以某些方式引用概念来做出语言决策。什么是“食谱”？我们所说的“步骤”是什么意思？是什么使“异常简单”的交互作用？我们选择的词语会影响团队的想法。间接地，它们将影响设计。

Alongside this process we will be making language deci- sions by choosing to refer to concepts in certain ways. What is a “recipe”? What do we mean by “steps”? What makes a “delightfully simple” interaction? The words we choose will influence how the team thinks. And indirectly, they will shape the design.

首先，将非正式地共享模式和语言的选择。但是随着我们团队和产品的增长，语言也会随之增长。最终，我们需要一种更有条理的方法来捕获，共享和组织我们的设计词汇。

At first, the patterns and language choices will be shared informally. But as our team and the productgrow, so will the language. Eventually we’ll need a more structured way to capture, share and organize our design vocabularies.

既然我们已经使用一个虚构的网站简要地介绍了设计过程，那么我们将使用来自现实世界的数字产品和公司的示例来研究系统如何演变。

Now that we’ve looked at the design process in a nut- shell using a fictional site, we can look at how systemsevolve, using examples from real-world digital products and companies.

15 In chapter 5, we will see how effective names and a collaborative naming process can become part of the foundation of a design lan- guage system. In chapter 10 we will look at pattern libraries as a way to capture language choices and establish a shared vocabulary.