写在前面------

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

Introduction

简介

What This Book Is About
本书的内容

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. Throughout the book I’ll share an approach that helps me every day with my work. I hope this will help with your work, too.

一个运作良好、经久不衰的设计系统的关键品质是什么？这个问题引起了我的极大兴趣，我花了大量的时间研究和思考这个问题。我的研究和思想的结论为这本书奠定了基础。根据不同规模的公司的经验和设计系统的经验，我尝试探索能够让那些创造一个高效的设计系统的关键因素，从而能够增强团队有能力创造出伟大的数字产品。在本书中，我将分享我工作中的一些方法。我希望这些方法也能够对你的工作有帮助。

Who This Book Is For
本书的目标人群

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 product team could benefit from reading this book, but particularly visual and interaction designers, UX practitioners and front-end developers.
本书主要面向于尝试将设计系统的思想整合到他们组织的文化中的中小型产品团队。产品团队中的每个人都可从本书中受益，尤其是视觉和交互设计师、用户体验从业者和前端开发人员。

Scope Of The Book
本书的讨论范围

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 find any 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.¹ 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它是关于如何以更加系统化的方式处理设计过程，并确保你的设计系统有助于实现你的产品目的的同时符合你的团队的文化。

How This Book Is Organized
本书的内容结构

The book has two parts.

这本书包含两部分    

Part 1: Foundations

第一部分，基础

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 des criptive (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.

在第一部分中，我们将讨论设计系统的基础- patterns和practices（做法）。设计模式是界面的可重复的、可重用的部分，从具体和功能(如按钮和文本字段)到表述性更强的部分(如图像样式、颜色和版式)。模式是相互关联的，它们共同构成了产品界面的语言。Shared practices（做法）是我们通过遵循一组准则，或者维持模式库，指导如何创造、获取、共享和应用这些patterns。

Part 2: Process
第二部分：过程

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.

设计系统不可能一夜之间就建立起来--它会随着你的产品而逐渐发展。但是，我们可以遵循某些原则和做法，以确保设计系统朝着正确的方向发展，并为我们提供对设计系统在一定程度上的把控能力。本书的第二部分重点介绍了建立和维护设计系统的所需要的具体步骤和技术，包括： 安排工作计划；梳理界面清单；建立pattern library模式库；创建、记录、优化和维护设计模式。

Terminology
术语

Before we dive into the topic, let’s establish the terms we’ll use throughout the book.
在我们深入讨论这个主题之前，让我们先确定我们将在整本书中使用的术语。

Pattern or design pattern

模式或设计模式

I use the word pattern to refer to any repeating, reusable parts of the interface (such as buttons, text fields, iconography 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 behaviors, and perceptual patterns related to brand and aesthetics.

我使用pattern这个词来指界面中任何重复的、可重用的部分(例如按钮、文本字段、图标样式、颜色和版式、重复用户流程、交互行为)，pattern可以被应用和修改用途来解决特定的设计问题，满足用户的需求，或者唤起用户的情感。在整本书中，我将pattern分为了与行为相关的功能模式functional patterns，以及与品牌和美学相关的感知模式perceptual patterns。

Functional patterns or modules


功能模式或模块

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.

这两个术语在整本书中可以互换使用，指用于构成用户页面整体的具体单元，例如按钮、标题、表单元素、菜单。

Perceptual patterns or styles


感性模式或风格

These are more des criptive 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.

这些是描述性较强而不太具体的设计模式，通常用于强调某种审美风格和增强与产品的情感关联。例如 图标样式或颜色以及版式。

Pattern language or design language

模式语言或设计语言


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

一套相互关联、可共享的设计模式构成了产品界面的语言。模式语言结合了功能模式和感知模式，同时包含了具有于平台特征的模式(比如汉堡包菜单)、行业领域模式(比如电子商务网站、金融软件或社交应用程序的特定模块)、UX（用户体验）和 引导模式（persuasive patterns），以及其他众多影响元素结合在一起产品的用户界面中。

Design system or system


设计系统或系统


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.

目前在互联网领域中还没有“设计系统”的标准定义，人们对该术语有多种不同的理解--有时与“样式指南”和“模式库”互换使用。在本书中，设计系统指的是一套关联的模式connected patterns和共享的做法practices，一致地组织起来，为数字产品的目的服务。

Pattern library and style guide

模式库和样式指南



A pattern library is a tool to capture, collect and share design patterns 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 such as iconography styles, colors and typography, while a pattern library includes a broader set of patterns.

模式库是能够按照设计模式和使用指南的作用将其获取、收集和共享的工具。创建模式库是(良好)设计做法 design parctice 的案例。传统的理解上，样式指南侧重于样式风格，例如图标样式、颜色和版式，而模式库包含更多类型的的模式集。

Design System Insights
设计系统洞察力。

The book is based on practical insights from real-world products. Most of them are drawn from my experience of working at FutureLearn², a medium-sized open education company in London. During my three years working there as a designer, I have had an opportunity to observe and influence how a design system evolves, from initial concepts to a mature system³.
这本书是以现实世界的产品的实际见解为基础的.。其中的大多数产品是从我在FutureLearn工作的经历中获得的，FutureLearn是在英国的一家中等规模的从事开放式教育公司。我在公司的三年中从事设计师的岗位，从而有机会观察和打造一个设计系统是如何从最初的概念发展到一个成熟的系统3。

To have more depth and diversity in the research, 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 understand directly from the team, the challenges they face as their systems evolve. The companies who have kindly agreed to share their insights are as follows.

为了能够在设计系统方面有更深度和多样性研究，我还密切关注了其他五家不同规模和采用不同设计方法的公司：Airbnb、Atlassian、Eurostar、Sipgate和TED。在过去的18个月里，我一直在采访他们的团队成员，从而直观的理解这些团队在随着系统的发展所面临的挑战。以下是愿意分享他们对设计系统方面见解的公司：

Airbnb⁴

When interviewed in August 2016, Roy Stanfield (Principal Interaction Designer) gave me plenty of detail about the Design Language System⁵ 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 challenges with adoption, speed of integrating new patterns, and with keeping art direction and engineering in sync.

在2016的采访中，RoyStanfield(首席交互设计师)给了我很多关于Airbnb 的Design Language System的细节。DLS的亮点在于严密， patterns 的定义和用法明确，使用规则（rules）需要严格遵循。为实现这一目标该小组采用了需求practices工具。他们在采用新模式、整合新模式patterns的速度以及保持艺术方向与工程同步方面仍有一些挑战。

Atlassian⁶

Jürgen Spangl (Head of Design), James Bryant (Lead Designer), and Kevin Coffey (Design Manager) shared their perspectives on ADG (Atlassian Design Guidelines⁷) in November 2016. While there’s a dedicated team who curates the patterns, they also have an open source model for contributions. Everyone in the company is not only allowed, but actively encouraged to contribute to the system. The challenge with this model is to find a balance between giving people enough freedom to contribute, yet making sure the system stays managed and curated.

2016年的11月份 Jürgen Spangl(设计主管)，James Bryant (首席设计师)和Kevin Coffey (设计经理)分享了他们对ADG(Atlassian Design Guidelines)观点。虽然有一个专门负责管理patterns的团队，但他们也提供了一个可以共同打造的开源模型。公司里的每个人不仅被允许能看到，而且公司积极地鼓励大家为这个系统做出贡献。这个模型的挑战是在给人们提供足够的贡献自由度的同时，确保设计系统保持在可管理和策划之间找到平衡。

Eurostar⁸

Dan Jackson (Solutions Architect) was very forthcoming in August and September 2016 and in March 2017 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⁹. 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.

2016年的8月份和9月份以及2017年3月份，Dan Jackson (解决方案架构师)非常坦诚的交流了他们在Eurostar所做的事情。在撰写本书时，团队正在构建他们的第一个模式库。他们最初遇到了一些挑战，特别是在确定项目的优先次序和鼓励团队中的每个人做出贡献方面。一年后，他们获得了分配一个专门小组的资源，该小组目前正在负责该系统的工作。

Sipgate¹⁰

Tobias Ritterbach (Experience Owner) and Mathias Wegener (Web Developer) both gave me a lot of insight into their work in August 2016 and November 2016. The Sipgate pattern library¹¹ 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.

2016年8月份和11月份的交流中，Tobias Ritterbach (经验所有者)和Mathias Wegener (网络开发工程师)都给了我很多关于他们在的工作中的见解。sipgate模式库建立于2015年，但一年之后，团队发现由于产品团队之间缺乏沟通而导致加入了太多的组件。最近，他们正在开发一个新的模式库，以实现在多个产品网站上统一设计语言的目标。

TED¹²

Michael McWatters (UX Architect), Aaron Weyenberg (UX Lead) and Joe Bartlett (Front-End Developer) all provided input into discussions in August and September 2016. Among the many people who support TED.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¹³. So far they haven’t felt a need to establish a comprehensive pattern library.

2016年的8月和9月，Michael McWatters (UX架构师)、Aaron Weyenberg (UX主管)和Joe Bartlett (前端开发人员)在讨论中发表了意见。在众多人支持的TED.com，设计系统是由几个UX设计师和前端开发人员组成的小团队负责。团队对他们的patterns理解有着深刻的共识，这些模式patterns以一种简单的方式整理出来。到目前为止，他们还没有觉得有必要建立一个全面的模式库。

Acknowledgements
鸣谢。

I want to thank everyone at FutureLearn for their support 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; Gabor Vajda, for helping me to shape many of the ideas described in the book; Jusna Begum, for bringing 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.

我要感谢在未来学习的每一个人对这本书的支持，特别是：Lucy Blackwell，回顾早期的草稿，引导和激励我做我最好的工作；Mike Sharples，对早期草稿的发人深省的反馈和挑战我；Gabor Vajda，帮助我形成书中描述的许多想法；Jusna Begum，帮我梳理混乱的思路。Sam McTaggart, Dovile Sandaite, Kieran McCann, Storm MacSporran, Katie Coleman, Nicky Thompson, James Mockett, Chris Lowis and Matt Walton，感谢他们花时间倾听并分享他们的反馈。

Huge thanks to the Smashing crew and everyone who helped me shape this book and make it happen. A special thanks to Karen McGrane, Jeremy Keith and Vitaly Friedman, 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.

非常感谢Smashing杂志的工作人员和每一个帮助我打造这本书并使之能够出版的人。特别感谢Karen McGrane、Jeremy Keith和Vitaly Friedman，感谢他们的深思熟虑和建设性的反馈，使这本书变得更好；感谢Owen Gregory编辑这本书；感谢Ethan Marcotte特担任前言；感谢Espen Brunborg的漂亮封面设计。

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, and Geri Coady, and Joel Burges, Michal Paraschidis, Heydon Pickering, Léonie Watson, Bethany Sonefeld and Chris Dhanaraj (IBM), Amy Thibodeau (Shopify), and Joe Preston (Intuit).

我要特别感谢许多人愿意分享他们的经验和观点，其中许多人为这本书中的材料做出了贡献：“设计系统洞察力”中提到的团队，以及莎拉·德拉斯纳(Sarah Drasner)、劳拉·伊丽莎白(Laura Elizabeth)、马特·邦德(Matt Bond)、特伦特·沃尔顿(Trent Walton)和格里·科迪(Geri Coady)，以及乔尔·伯格斯(Joel Burges)、米哈尔·帕拉斯基迪斯(Michal Paraschidis)、海登·皮克林(Heydon Pickering)、莱昂尼·沃森(Léonie Watson)、贝萨尼·索菲尔德(Beany Sonefeld)和克里斯·达纳拉杰(Chris Dhanaraj)(IBM)、艾米·蒂博多(Amy Thibodeau)(Shopify)和Joe Preston (Intuit)。

Finally, I want to thank my family: my husband, Hakan, and my little daughter, Alyona, for the patience and understanding 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 would have been impossible 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!
最后，我要感谢我的家人：我的丈夫哈坎和我的小女儿阿利奥娜，他们在18个月的时间里给了我耐心和理解，让我完成了最终草案。在全职工作的同时写一本书是一项巨大的工作，如果没有我丈夫的支持，这是不可能的。抱歉，艾丽奥娜，一直以来我都不能和你一起玩，因为我忙于工作。我爱你，我保证会补偿你的！

---------------------------------------------

1.For that I recommend About Face: The Essentials of Interaction Design by Alan Cooper; Lean UX: Applying Lean Principles to Improve User Experience by Jeff Gothelf and Josh Seiden; and Designing for the Digital Age: How to Create Human-Centered Products and Services by Kim Goodwin.

为此我推荐About Face：交互设计的基本要素（艾伦库珀）;精益UX：应用精益原则改善用户体验Jeff Gothelf和Josh Seiden;和数字时代的设计：如何创建Kim Goodwin数字时代的设计，如何创建的以人为本的产品和服务。

2.https://www.futurelearn.com/

3.https://www.futurelearn.com/pattern-library

4.https://www.airbnb.co.uk/

5.https://smashed.by/airbnblanguage

6.https://www.atlassian.com/

7.https://atlassian.design/

8.https://www.eurostar.com/

9.https://style.eurostar.com/

10.https://www.sipgate.de/

11.https://design.sipgateteam.de/ 

12.https://www.ted.com/

13.https://ted.com/swatch