写在前面------

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

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

Chapter 1

Design Systems

设计系统

There isn’t a standard definition of “design system” within the web community and people use the term in different ways. In this chapter, 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 serve the purpose of a digital product. 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, particularly when working in a team.

设计系统是一组相互关联的模式和共享的做法practices，它们以一致的方式组织起来，为数字产品的目的服务。模式是我们为创建用户界面而重复组合的元素：诸如用户流程、交互方式、按钮、文本字段、图标、颜色、版式、显微拷贝。实践是我们如何选择创建、获取、共享和使用这些模式，这一点在团队协作中尤为重要。

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 open education social learning site.

看看这两个不相关产品的截图。一个来自Thomson Reuters 用于交易和市场分析的名为Eikon应用程序；另一个来自开放式教育社交学习网站FutureLearn。

A screen from Thomson Reuters Eikon (left) and a screen from FutureLearn (right).

左边是Thomson Reuters的 Eikon，右边是FutureLearn的截图

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

在每个示例中，这些模式一起工作以实现不同的用途。对于Thomson Reuters，它目的是数据处理、实用、快速扫描和多任务处理；对于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. 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 completing 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.¹

Thomson Reuters的布局是基于面板和挂件，允许用户执行多任务。紧凑的设计，以适合展示大量的信息在屏幕上。密度是通过选择狭小的间距、紧凑的控制方式、灵活的布局和排版，例如更小字体和相对较小的标题。而与之相反，FutureLearn的布局要宽敞得多。每个屏幕通常都集中在一个任务上，例如阅读文章、参与讨论或完成互动练习。页面的布局大多是单列，有高对比度的排版：包含大个头的标题，粗大的控件，以及大量的留白空间。

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-commerce 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, iconography 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.

产品的道德观(或品牌，取决于你对品牌的定义) 也形成了模式，这些模式共同塑造了一个产品是如何被感知的；在本书中，我将把它们称为感知模式perceptual。我指的是声音的声调，排版和颜色的选择，图标的样式，间距和布局，指定的形状，交互方式，动效和声效。去除感知模式，你感觉不出同类型、功能相似的产品之间有什么差异 。

Although HipChat and Slack have similar purposes and functionality, they feel quite different, largely due to how brand is expressed throughout their interfaces.

尽管HipChat和Slack有着相似的用途和功能，但它们感觉很不一样，主要是源于产品界面中传达了品牌的形象 。

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

模式还受平台共识的影响。由于特定于平台的设计语言，产品需要有明显的 web的样子或app的样子。例如iOS平台的产品的与Android在操作方式和使用感受上会有很大的差异。

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

在创造数字产品时，是由很多种模式共同影响的 。这就是为什么设计起来很难。模式需要互动、相连的同时，还仍然可以无缝地一起工作。让我们深入研究下。

Design Patterns

The idea of design patterns was introduced by the architect Christopher Alexander in his seminal books, The Timeless Way of Building and 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.

设计模式的概念是建筑师克里斯托弗·亚历山大(Christopher Alexander)在他的开创性著作“永恒的建筑方式以及设计模式”(The Time Way Of Build And A Pattern Language)中提出的。贯穿全书的的一个问题是为什么有些地方感觉如此生机勃勃并且感觉很棒，而有些地方却感到沉闷和死气沉沉。亚历山大认为，地方和建筑带给我们的感觉不仅仅是因为主观情绪。同时是某些有形的和特定的模式的结果。即使是普通人也可以借鉴和使用它们来创造人性化的建筑。

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

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

“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

“每个模式都描述了在我们的环境中反复出现的问题，然后描述了该问题核心解决方案。”
-Christopher Alexander，《A Pattern Language》

A Pattern Language contains 253 architectural design patterns, 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.

模式语言包含253种建筑设计模式，大到城市的布局和道路系统，小到民居室内的光线和家具。

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

同样，在新建页面是时，我们使用设计模式来解决常见问题：我们使用选项卡将内容分成几个部分，并指出当前选择了哪个选项；我们使用下拉列表显示的选项列表来响应用户的请求。

Some of the patterns from Bootstrap, a front-end framework for developing responsive websites.

图例Bootstrap的模式，Bootstrap是一个响应式的前端开发框架

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

我们使用模式来提供反馈， 展示流程中还剩多少的步，允许人们与其他人互动，查看和选择项目。设计模式可以激发和鼓励用户，使任务更容易，创造一种成就感或满足用户的控制感。


Example of persuasive pattern “recognition over recall” on UI Patterns³.

在UI Patterns上的一个很棒的案例“recognition over recall”

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 require users to learn and adopt them first — they are relatively rare.⁴ 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. 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 and why they work. Designers and developers might know it instinctively, but intuition is not always reliable or scalable. In his article “Researching Design Systems,”⁷ 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 coherently, patterns need to be articulated and shared.

当我们开发一个产品的时候，就会随之产生设计语言。我们并不总是指导设计语言是什么。有时候，有效而有趣的设计是建立在直觉的基础上的，我们很难准确地阐明它们是如何工作的，以及为什么会起作用。设计师和开发人员可能本能地知道这一点，但直觉并不总是可靠的或发散的。设计师Dan Mall在他的文章“设计系统研究”中指出，设计系统的主要目标之一是“拓展创意方向”。如果你需要让一群人始终如一地、可靠地、连贯地遵循一个创意方向，那么就需要把模式整理出来并且团队共享。

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 guide⁶ by Tom Osborne is an example of how buttons and links can be approached systematically. Instead of listing them individually, they are presented as a suite, each one having a different “volume” corresponding to its intended visual prominence.

当你清晰地表达出你的设计语言时，它就具有了可操作性和可重复性。你开始接近带着系统性思维做设计的阶段。例如，与其讨论可以做那些调整从而能够让一个选项更加突出 ，你可以使用一组不同等级视觉冲击力的促销模块。汤姆奥斯本（Tom Osborne）的视觉响度指南（visual loudness guide）是一个如何系统地处理按钮和链接的例子。它们不是单独列出，而是作为一个套件呈现，并且根据每个元素的视觉冲击力会相应的拥有一个“响度”值。


The visual loudness guide by Tom Osborne.

汤姆奥斯本（Tom Osborne）的视觉响度指南（The visual loudness guide）

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 dropdown 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 digital products. In particular, we’ll look at two types of design patterns: functional and perceptual. Functional patterns are represented as concrete modules of the interface, such as a button, a header, a form element, a menu. Perceptual patterns are des criptive styles that express and communicate the personality of the product visually, such as color and typography, iconography, shapes and animations.

 在整本书中，我们将讨论很多关于数字产品的模式语言的表达、共享和文档化。因此，我们将研究两种设计模式：功能部分和情感部分。功能模式具体表现为用户界面中具体的模块，例如按钮、标题、表单元素、菜单。情感模式是一种展现和传达产品个性风格的视觉表达方式，如颜色和版式、图标、形状和动画。

To extend the analogy with language, functional patterns are a bit like nouns or verbs — they are concrete, actionable parts of the interface; whereas perceptual patterns are similar to adjectives — they are des criptive. 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 perspective, modules always have a basis in HTML, and perceptual patterns are typically CSS properties.

参照语言的语法，功能模式有点像名词或动词--它们是界面的具体的、可操作的部分；而情感模式类似于形容词--它们是描述性的。例如，按钮是具有明确功能的模块：允许用户提交操作。但是按钮标签中的排版样式、它的形状、背景色、那边距、交互状态和动效都是属于样式的范畴，而不是模块；它们描述按钮长什么样子。从前端的角度来看，模块总是基于HTML语言，感知模式通常是CSS属性。

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.

设计系统还包含许多其他类型的模式：用户流(例如表单提交的流程中，其中包含了错误和成功消息的状态页面)、面向领域的设计模式(比如EdTech系统的学习模式和电子商务模式和引导用户体验模式)。这本书的重点是功能模式和情感模式，功能模式和情感模式是设计系统的核心组成部分。

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

当然，重点不只是模式本身，而是它们是如何进化、共享、相互关联和使用的。

Shared Language

 共享语言

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 will have 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?

 共享语言是协作的基础。如果你在团队中工作，你的设计语言需要分享给其他参与产品设计的人员。没有共享语言的话，大家就不能有效地在一起协作—因为每个人对于他们想要达到的目标都会有不同的思维模式。让我们回到按钮这里案例。即使是界面中这样一个基本的组件也可能有不同的理解。按钮到底是什么？是一个可以点击的线框区域吗？页面上可以链接到某个地方的交互元素？允许用户将表单数据提交的元素？

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 the day-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.

AbbyCovert在她的书“理清乱麻”（How to Make Sense of Any Mess）”中建议，在考虑界面设计之前，首先应该先建立一种共享语言，共享语言是通过讨论、审查和记录我们的语言决策逐步建立的。这个想法既可以用来描述高层次的概念，也可以用于日常谈论设计决策的语言。拥有共享语言意味着我们有相同的方法来命名界面元素和定义设计模式，或者在设计文件和前端架构中使用相同的名称。

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 expressively, 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 contexts, and the purpose a button can serve.

 即使这样也可能不够。有时，一个群体中的人自认拥有相同的词汇并表达性地使用就算是达成了共识。但他们在理解上仍然保持着根本的差异。例如，在项目中使用“场景（Scenario）”这个术语一年后，您可能会发现不同的人以完全不同的方式解释它。这不仅是为了需要共享语言--我们还需要发展一套共享语言的使用方法。仅仅对按钮达成一个共识是不够的。人们还必须知道为什么用按钮以及如何使用按钮，在什么情况下需要一个按钮，以及需要按钮达成什么目的而服务。

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

 假设我们在界面中使用一个名为“Sequence”的元素。通过将其表示为“序列”，我们的目标是向用户传达使用的步骤应该按照怎样的特定的顺序来查看。

Example of “Sequence” module.

“Sequence”模块举例

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.⁷ The stronger this shared knowledge is, the higher the chances that it will be used appropriately. Designers and front-end developers should have this knowledge, but it helps if people from other disciplines (content, marketing, product management) have some idea too.

理想情况下，参与产品研发的每个人都应该知道这个元素是什么：它的名称和用途，为什么这样设计，以及如何和何时使用它。7这种共享知识越强，正确使用元素的机会就越大。设计师和前端开发人员应该拥有这些知识，也会对其他岗位(内容、营销、产品管理)并且有一些想法的人有所帮助。

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 interpret 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 model of the interaction that doesn’t fit with the system image provided by the design team, then the user will be continually challenged by unexpected behavior from the system. An effective design language bridges the gap between the system image and the (assumed) user model.

 每个人都应该知道这个元素的名字叫“序列”，而不是“向导控制”或“幻想泡泡”。如果设计人员将其称为“花哨泡沫”，开发人员将其称为“向导控件”，并且用户将其解释为一组可选选项卡，那么你会意识到您的语言失效了。为什么用户说明很重要？我们可以一起回忆下唐·诺曼的开创性工作--“日常事物的作品（The Design of Everyday Things）”，他在书中谈到了系统映像(界面)和用户模型(用户通过与界面交互形成的对界面的感知)之间的鸿沟。如果用户的交互心理模型不符合设计团队提供的系统映像，系统的通过出乎意料的行为不断的挑战用户。有效的设计语言则可以在系统映像和(假设的)用户模型之间的搭建一座沟通的桥梁。

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

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