关于作者

Alla Kholmatova是一位在以 web 产品为主的公司工作了 9 年时间的UX&交互设计师。最近，她以高级产品经理的身份跳槽去了开放教育平台FutureLearn。

Alla Kholmatova is a UX and interaction designer with a nine-year experience of working on the web, for a range of products and companies. Most recently she was a senior product designer at the open edu- cation platform, FutureLearn.

她对设计系统，语言和协作工作方式特别感兴趣。在过去的两年中，她花费了大量时间研究这个课题。她经常与人分享她观点的文章，研讨会和项目。她为这本书做出了很大的贡献，甚至为此专门列出了一份需要在世界各地演讲的清单。

She’s particularly interested in design systems, language, and collaborative ways of working. In the last two years she spent an enormous amount of time working on and researching the subject. She’s been sharing her insights with people through articles, workshops, and projects. Alla contributes to design publications, such as A List Apart,and speaks at conferences around the world.

关于审稿人

在过去的20年中，Karen McGrane通过用户体验设计和内容策略的力量帮助企业创建了更好的数字产品。她是Bond Art + Science的管理合伙人，Bond Art + Science是她于2006年成立的UX顾问公司，并且曾是Razorfish用户体验的副总裁和国家主管。凯伦（Karen）在曼哈顿视觉艺术学院的交互设计课程的MFA中教授设计管理。她与Ethan Marcotte共同主持了一个响应式Web设计播客，她的第一本书《移动内容策略》 2由A Book Apart于2012年出版。

Karen McGrane_ _has helped businesses create better digital products through the power of user experience design and content strategy for the past twenty years. She is Manag- ing Partner at Bond Art + Science,1 a UX consultancy she founded in 2006, and formerly VP and national lead for user experience at Razorfish. Karen teaches design management in the MFA in Interaction Design program at the School of Visual Arts in Manhattan. She co-hosts A Responsive Web Design Podcast with Ethan Marcotte, and her first book, Content Strategy for Mobile,2 was published in 2012 by A Book Apart.

杰里米·基思（Jeremy Keith）是位于英国布莱顿的数字设计工作室Clearleft（3）的联合创始人兼技术总监。当他不制作网站时，他在会议上谈论制作网站。有时，他甚至写有关制作网站的书，例如ResilientWebDesign.com上的网络书。您可以免费获得。但是他主要花时间度过互联网，在他一直在写的网站adactio.com上记录他的时间浪费
超过十五年。

Jeremy Keit_h _is co-founder and technical director at Clearleft,3 a digital design studio based in Brighton, UK. When he’s not making websites, he talks at conferences about making websites. Sometimes he even writes books about making websites, like the web book at ResilientWebDesign.com that you can have for free. But he mostly spends his time goofing off on the internet, documenting his time-wasting on his website adactio.com where he has been writing for over fifteen years.

1 http://bondartscience.com/
2 http://smashed.by/contentmob
3 https://clearleft.com/

前言

如果你有时间的话，回顾艺术家艾米丽·加菲尔德（Emily Garfield）的工作。她用水彩创造出精美，绘制复杂的详细地图-每张地图都令人叹为观止，即使每张地图描绘的地方甚至都不存在。而不是描绘一个城市的真实，真实风景，她开始通过创建一个单一的，复杂的模式—一条打结的道路或曲折的河流，或者紧凑城市网格块-并重复进行。加菲尔德（Garfield）迭代该模式，稍微改变一下每次都螺旋上升直到没有映射完成。结果是，她的作品具有类似分形的生成特质：从模式上来说，是的，但是感觉是一个整体的一部分。
如果你有时间，可以看看艺术家艾米丽·加菲尔德的成就。她用水彩创造出精美、错综复杂的地图-并且每一张都令人叹为观止。不仅仅是真实的描绘现实场景，她通过创建逐个复杂交错的道路或河流，

If youhave a moment, look up the work of artist Emily Garfield. She creates exquisite, intricately detailed maps in watercolor — each of them stunning, and each of them depicting a place that doesn’t exist. Instead of depicting a city’s real, actual landscape, she begins by cre- ating a single, complex pattern — a knotted road or twisty river, or a compact grid of city blocks — and repeating it.Garfield iterates on that pattern, changing it slightly each time, spiraling out until her not-map is finished. As a result,her art has a generative, fractal-like quality: it’s built from patterns, yes, but feels part of a cohesive whole.

实际上，加菲尔德曾说过这样一句话：“我把我的成长过程类比是一幅图的绘画过程，当我在看这本书的时候，我想到的是绘图过程中的那条线。或许你也会如此。“

In fact, Garfield once said, “I describe my process as grow-ing the drawing.” While reading this wonderful book, I thought about that line a lot. Maybe you will, too.

近几年来，网页设计师以及开始拥抱更多模版化模式驱动的设计实践。有充分理由相信：我们需要为有史以来最多的屏幕尺寸、设备、场景以及用户创造更多引人入胜的体验。结果，我们开始至上而下的拆解界面元素以找到可复用的小模块，并且用这些模式快速的构建产品、功能和界面，取得了前所未有的高效。但是仅仅靠设计模式还不够。他们需要在更大的项目中，确保这些小功能模式具有统一、凝聚力并却相互联系。换句话说就是，他们需要一个能持续发展的设计系统——这也就是为了我们需要 Alla 的书。

In recent years, web designers have started embracing more modular, pattern-driven design practices. And with good reason: we’re being asked to create compelling experiences for more screens, more devices, more places, more people than ever before. As a result, we’ve started to break our inter- faces down into tiny, reusable modules, and begun using those patterns to build products, features, and interfaces more quickly than ever before.But by themselves, design patterns aren’t enough. They need to live within a larger process, one that ensures these little interface modules feel unified, cohesive, connected. Part of a whole. In other words, they need a design system to thrive — and that’swhere Alla’sbook comes in.

在这些内容里，Alla 向我们展示了如何创建能够只是数字设计的设计系统。Alla 用清晰描述、案例研究和详细的案例为我们展现了如何建立一套通用，并且可在团队中共享的语言，并以此进行设计提效；他会讲述不同团队如何创造他们的设计系统并且付诸于实践；她还会讨论不同模式下这些系统如何随着时间而变化。

In these pages, Alla shows us precisely how to create systems to support our digital designs. With clear writing, case studies, and detailed examples, Alla shows us how to establish a common, shared language among our teams, which allows us to more effectively collaborate; she’ll tell stories of how different organizations have created their design systems, and put them into practice; and she’ll discuss different models for evolving these systems over time.

换句话说，这不仅仅是一本书，Alla 为我们描绘了清晰且可见的地图，概述了更可持续发展的数字设计模型。如果我们按照她为我们绘制好的道路去做，我们将会发展的更好——与之相关的设计。
— __伊森马可特

In other words, this isn’t just a book. Alla has drawn a clear, bright map for us, one that outlines a more sustainable model for digital design. And if we walk the paths she’sdrawn for us, we’ll learn to grow better design systems — and with them, better designs.
— Ethan Marcotte

主要内容

随着网络的不断发展且变得越来越复杂，只考虑静态页面已经站不住脚了，我们中的许多人开始以一种更加系统的方法去看待它。

As the web continues to change rapidly and become more complex, thinking of it in terms of static pages has become untenable, and many of us have started to approach design in a more systematic way.

但设计系统个有利弊。有些能贯穿于所有用户体验的环节，有些则只会造成混乱的拼接设计。有些鼓励团队为此进行共建，有一些则是忽略共建。有一些会随着时间的推移有更好的凝聚力和更好的功能，而其他的则会变得更糟糕，变得更加臃肿。

And yet not all design systems are equally effective. Some can generate coherent user experiences, others produce confusing patchwork designs. Some inspire teams to contribute to them, others are neglected. Some get better with time, more cohesive and better functioning; others get worse, becoming bloated and cumbersome.

一个运作良好，经久不衰的设计系统的关键品质是什么？这个问题引起了大家的兴趣，我花了很久的时间去研究和思考这个问题。而我的研究为这本书奠定了基石。

What are the key qualities of a well-functioning, enduring design system? This question intrigued me so much I spent a huge amount of time researching and thinking about it. My research and thoughts provide the basis of this book.

通过借鉴很多公司在不同规模和建设方法上的经验，我着手确定到底是什么因素使得有效的设计系统可以让团队创建优秀的数字产品。

Drawing on the experience of companies of various sizes and approaches to design systems, I set out to identify what makes an effective system that can empower teams to create great digital products.

主要目的

本书主要针对试图基于企业文化去整合设计系统思维的小型和中性产品团队。产品团队的所有人都可以从中获益，特别是视觉/交互设计师、UX从业人员以及前段开发人员。

This book is aimed mainly at small and medium-sized product teams trying to integrate design systems thinking into their organization’s culture. Everyone in the productteam could benefit from reading this book, but particularlyvisual and interaction designers, UX practitioners and front-end developers.

覆盖范围

本书介绍了我作为动效视觉设计师的角度如何看待设计系统。不会涉及其他的相关领域，比如信息架构、内容策略或设计研究。而且，这也不是一本技术讲解，尽管会有很多跟前段实践直接相关的讨论，但是你不会找到任何代码示例或对开发工具和技术的深入分析的内容。

This book presents a perspective on design systems based on my experience as an interaction and visual designer.I don’t touch on other related areas, such as information architecture, content strategy or design research. Equally, this is not a technical book.You won’t findany code samples or in-depth analysis of development tools and techniques, although there will be plenty of discussion directly related to front-end practices.

这是一本设计书籍，但与设计内容无关，也不是尝试创建一个全面的设计指南。它是关于如何以一种更系统的方式来帮助处理你的设计流程，以达到你的产品目的并且跟团队文化相契合。

This is a design book, but it isn’t about what to design. Neither is it an attempt to create a comprehensive guide to designing digital products.1 It is about how to approach your design process in a more systematic way, and ensure your design system helps to achieve the purpose of your product and fits with the culture of your team.

1 为此，我特别推荐Alan Cooper的《交互设计精髓》；Jeff Gothelf的《精益设计：设计团队如何改善用户体验》；KimGoodwin.的《数字时代设计：如何创造人性化产品和服务》

结构

主要分为两部分

第一部分：基础

在第一部分我们将要讨论是关于设计系统的基础部分——模式和实践。设计模式是界面中每个可复的的元素，具体取决于功能（例如按钮和文本字段），以更具描述性（如肖像风格，颜色和版式）。相互关联的模式共同构成了产品界面的设计语言。

In the first part we’ll talk about the foundations of a design system – patterns and practices. Design patterns are repeatable, reusable parts of the interface, from the concrete and functional (like buttons and text fields) to the more descriptive (like iconography styles, colors and typography). Patterns interconnect, and together they form the language of your product’s interface.

共创练习是我们如何选择创建、抓取、共享并使用这些模式通过遵循一系列原则或者维持一个模式库。

Shared practices are _how _we choose to create, capture, share and use those patterns – by following a set of principles, or by keeping a pattern library.

第二部分：提炼

设计系统不可能一夜之间就建立起来，而是随着产品逐渐发展起来的。但是我们可以通过遵循一些原则和实验来确保系统正在朝着正确的方向发展，并且给我们提供一些指导以对方向进行控制。这本书的第二部分着重于建立和维护设计的实际步骤和设计系统，涵盖了：规划工作；创建接口清单；建立模版库；记录、发展和维护设计模式库。

A design system cannot be built overnight it evolves gradually with your product. But there are certain principles and practices that we can follow to make sure the system develops in the right direction and provide us some degree of control over it. The second part of the book focuses on practical steps and techniques to establish and maintain a design system, including: planning the work; conducting an interface inventory; setting up a pattern library; creating, documenting, evolving and maintaining design patterns.

术语

在我们深入探讨这个主题之前，让我们先建立全文通用的术语。

Before we dive into the topic,let’s establish the terms we’ll use throughout the book.

模式或设计模式

我使用模式（pattern）一词来指代界面中任何可重复使用的部分（例如按钮、文本框、图标样式、颜色和版式、用例、交互动作）可以重复使用并且解决不同的设计问题，满足用户需求，或者唤起一种情感。在本书中，我将会区分与行为相关的功能模式与品牌和美学相关的感知模式。

I use the word _pattern _to refer to any repeating, reusable parts of the interface (such as buttons, text fields, iconog- raphy styles, colors and typography, repeating user flows, interactive behaviors) that can be applied and repurposed to solve a specific design problem, meet a user need, or evoke an emotion. Throughout the book, I distinguish between _functional _patterns related to behaviours, and _perceptual _patterns related to brand and aesthetics.

功能模式或模板

这些术语在全本书可互换使用，指代建筑学中的建筑块，比如按钮、标题、表单元素、目录。

These terms are used interchangeably throughout the book, to refer to tangible building blocks of the interface, such as a button, a header, a form element, a menu.

感知模式或样式

设计模式更多的是描述性并且不可见的，比如肖像样式、颜色和版式，通常用户创造某种美学来加强与产品的情感联系。

These are more descriptive and less tangible design patterns, such as iconography styles or colors and typography,typically used to create a certain kind of aesthetic and strengthen an emotional connection with a product.

图形或设计语言

一组相互联系，可共享的设计模式构成了产品界面的设计语言。一种模式语言结合了功能和感知模式以及特定领域的模式（比如汉堡包菜单），域模式（例如电子商务专用的模块）网站，财务软件或社交应用，UX和有说服力的模式，以及在一个产品界面中交织在一起的很多模式。

A set of interconnected, shareable design patterns forms the language of your product’s interface. A pattern language combines functional and perceptual patterns, as well as platform-specific patterns (such as the hamburger menu), domain patterns (such as modules specific to an e-com- merce site, or finance software, or a social app),UX and persuasive patterns, and many other types meshed together in an interface for a specific product.

设计系统或系统

网上并没有“设计系统”的标准定义，人们以不同的方式使用该术语——有时可以跟“样式指南”或者“模式库”互换使用。在本书中，我将“设计系统”定义为一组相互连接的模式并共享一致组织服务并以实现数字化为目的的产品。

There isn’t a standard definition of “design system” within the web community, and people use the term in different ways – sometimes interchangeably with “style guides” and “pattern libraries.” In this book, by design system I mean a set of connected patterns and shared practices, coherently organized to serve the purposes of a digital product.

样式库和样式指南

样式库的作用是用于抓取、收集并分享设计模式和准则。创建模式库是一个（不错）的设计实践的案例。传统意义上，风格指南聚焦于样式，比如

A pattern library is a tool to capture, collect and share designpatterns and guidelines for their usage. Creating a pattern library is an example of a (good) design practice. Traditionally, a style guide focuses on styles, such as iconography styles, colors and typography, while a pattern library includes a broader set of patterns.

设计系统洞见

本书基于对现实世界产品的见解。其中大多数来自于我在伦敦的开放式教育公司 FutureLearn 工作的经验。在那儿担任设计师的三年中，我有机会观察并影响设计系统从最初的概念到成熟系统的演变。

This book is based on insights from real-world products. Most of them are drawn from my experience of working at FutureLearn, an open education company in London. During my three years working there as a designer, I havehad an opportunity to observe and influence how a design system evolves, from initial concepts to a mature system.

我还密切关注了其他物价设计规模和方法不同的公司：Airbnb，Atlassian，Eurostar，Sipgate和TED。在过去的 18 个月中，我一直在采访他们的团队成员，以了解他们在系统发展过程中面临的挑战。

I also closely followed five other companies of different sizes and approaches to design systems: Airbnb, Atlassian, Eurostar, Sipgate, and TED. Over the course of 18 months I’ve been interviewing members of their teams, to under- stand the challenges they face as their systems evolve.

爱彼迎2

Roy Stanfield（主交互设计师）为我提供了有关 Airbnb 设计语言系统（DLS）大量详细信息。DLS 的区块在于其严格性。精确制定和使用模式，并严格遵循规则。团队已经采用了许多实践和工具来实现这一目标。他们仍然在采用，集成新模式的速度以及保持美术指导和工程同步方面面临一些挑战。

Roy Stanfield (principal interaction designer) gave me plenty of detail about the Design Language System (DLS)3 at Airbnb. The distinguishing aspect of DLS is its strictness. Patterns are specified and used precisely, and rules are followed closely. The team has placed a number of practices and tools in place to achieve that. They still have some chal- lenges with adoption, speed of integrating new patterns, and with keeping art direction and engineering in sync.

2 https://www.airbnb.com/
3 http://smashed.by/airbnblanguage

ATLASSIAN4

2016年11月，JürgenSpangl（设计负责人），James Bryant（首席设计师）和Kevin Coffey（设计经理）分享了他们对ADG（Atlassian设计准则）的看法。尽管有专门的团队负责策划模式，一个开源的贡献模型。公司中的每个人不仅被允许，而且被鼓励为系统做出贡献。该模型的挑战是要在给人们足够的自由做出贡献的同时，又要确保系统保持管理和管理之间的平衡

Jürgen Spangl (head of design), James Bryant (lead designer), and Kevin Coffey (design manager) shared their perspectives on ADG (Atlassian Design Guidelines)5 in November 2016. While there’s a dedicated team which curates the patterns, they also have an open source model for contributions. Everyone in the company is not only allowed, but encouraged to contribute to the system. The challenge with this model is to find a balance between giv- ing people enough freedom to contribute, yet making sure the system stays managed and curated.

EUROSTAR6

Dan Jackson（解决方案架构师）非常想知道他们在 Eurostar 所做的事情。在撰写本文时，团队正在构建其第一个模式库。他们最初遇到了一些挑战，特别是在确定项目优先级并鼓励团队中的每个人做出贡献的方面。一年后，他们获得了专项小组的资源，该小组负责系统的工作。

Dan Jackson (solutions architect) was very forthcoming about what they’ve been doing at Eurostar. At the time of writing, the team was in the process of building their first pattern library.7 They initially experienced some challenges, particularly with prioritizing the project and encouraging everyone on the team to contribute. After a year, they were given the resources to allocate a dedicated team, which is now leading the work on the system.

4 https://www.atlassian.com/
5 https://atlassian.design/
6 http://www.eurostar.com/
7 https://style.eurostar.com/

SIPGATE8

Tobias Ritterbach（经验所有者）和 Mathias Wegener（网络开发人员）都使我对他们的工作有了很多了解。 Sipgate 模式库于 2015 年建立，但一年后，团队发现模式太多，主要是由于产品团队之间缺乏沟通。最近，他们正在开发一个新的模式库，目的是在多个产品网站上统一设计语言。

Tobias Ritterbach (experience owner) and Mathias Wege- ner (web developer) both gave me a lot of insight into their work. The Sipgate pattern library9 was established in 2015, but after a year the team found that there were too many patterns, mainly due to a lack of communication between the product teams. More recently, they were in the process of working on a new pattern library, with a goal to unify the design language across several product websites.

TED10
2016年秋季，Michael McWatters（UX架构师），Aaron Weyenberg（UX主管）和Joe Bartlett（前端开发人员）都为讨论提供了投入。负责设计系统决策。团队对他们的模式有很深的共享知识，可以通过简单的方式将其记录下来。到目前为止，他们还没有必要建立一个全面的模式库。

Michael McWatters (UX architect), Aaron Weyenberg (UX lead) and Joe Bartlett (front-end developer) all provided input into discussions in fall 2016. Among the people who supportTED.com, a small handful of UX practitioners and front-end developers are responsible for design system decisions. The team has a deep shared knowledge of their patterns, which are documented in a simple way.11 So far they haven’t felt a need to establish a comprehensive pattern library.

8 https://www.sipgate.de/
9 https://design.sipgateteam.de/ 10 http://www.ted.com/
11 http://ted.com/swatch

致谢

我要感谢 FutureLearn 的所有人对本书的支持，尤其是：露西·布莱克韦尔（Lucy Blackwell），回顾了早期的草稿，并指导和启发了我尽我所能；迈克·夏普尔斯（Mike Sharples），提供了有关初稿的发人深省的反馈以及对我的挑战； GaborVajda，帮助我塑造了本书中描述的许多想法； Jusna Begum，为我的混乱思想带来了一些秩序和结构；和Sam McTaggart，Dovile Sandaite，Kieran McCann，Storm MacSporran，Katie Coleman，Nicky Thompson，James Mockett，Chris Lowis和Matt Walton抽出宝贵的时间倾听并分享了他们的反馈。

I want to thank everyone at FutureLearn for theirsupport of this book, in particular: Lucy Blackwell, for reviewing the early drafts and for guiding and inspiring me to do my best work; Mike Sharples, for the thought-provoking feedback on the early draft and for challenging me; GaborVajda, for helping me to shape manyof the ideas described in the book; Jusna Begum, for bring- ing some order and structure to my chaotic thoughts; and Sam McTaggart, Dovile Sandaite, Kieran McCann, Storm MacSporran, Katie Coleman, Nicky Thompson, James Mockett, Chris Lowis and Matt Walton, for taking the time to listen and for sharing their feedback.

非常感谢 Smashing 团队和所有帮助我塑造本书并实现它的人。特别感谢 Karen McGrane，Jeremy Keith和 Vitaly Friedman 的周到和建设性的反馈，使本书更加出色。 Owen Gregory，用于编辑这本书；致伊桑·马可特（Ethan Marcotte）作为前言；以及 Espen Brunborg 的精美封面设计。

Huge thanks to the Smashing crew and everyone who helped me shape this book and make it happen. Special thanks to Karen McGrane, Jeremy Keith and Vitaly Fried- man, for the thoughtful and constructive feedback which made this book so much better; Owen Gregory,for editing the book; to Ethan Marcotte for the foreword; and Espen Brunborg for the beautiful cover design.

我要特别感谢许多同意分享他们的经验和观点的人，其中许多人对本书的内容有所贡献：Design Systems Insights中提到的团队，以及Sarah Drasner，Laura Elizabeth，Matt Bond， Trent Walton，Geri Coady，Joel Burges，Michal Paraschidis，Heydon Pickering，LéonieWatson，Bethany Sonefeld和Chris Dhanaraj（IBM），Amy Thibodeau（Shopify）和Joe Preston（Intuit）。

I would particularly like to thank the many people who kindly agreed to share their experiences and perspectives, many of which contributed to the material in the book: the teams mentioned in Design Systems Insights, as well as Sarah Drasner, Laura Elizabeth, Matt Bond, Trent Walton, Geri Coady, Joel Burges, Michal Paraschidis, Heydon Picker- ing, Léonie Watson, Bethany Sonefeld and Chris Dhanaraj (IBM), Amy Thibodeau (Shopify), and Joe Preston (Intuit).

最后，我要感谢我的家人：我的丈夫 Hakan 和我的小女儿 Alyona 的耐心和理解，他们花了18个月才给我定稿。在从事全职工作的同时写一本书是一项巨大的工作，如果没有我丈夫的支持，这是不可能的。很抱歉，Alyona，因为我一直在忙着工作，所以一直无法和你一起玩。我爱你，我保证要弥补！

Finally, I want to thank my family: my husband, Hakan, and my little daughter, Alyona, for the patience and understand- ing they gave me in the 18 months it took to reach a final draft. Writing a book while having a full-time job was an enormous amount of work and it wouldhave been impos- sible without my husband’s support. I’m sorry, Alyona, for all the times I couldn’t play with you because I was busy working. I love you and I promise to make up for it!