因为工作内容，最近2年一直在探索如何打造一个高度灵活性的设计规范体系，在能够维持自身设计积累的基础之上，也能够配合项目需要快速的产出高质量的定制化交付件。偶然之间看到了这本书，看过之后感觉很有启发，就利用业余的时间翻译成中文，希望对大家有帮助。
一、简介
1. 本书的内容
随着互联网的快速发展并且变得越来越复杂，将网站设计看作成静态页面集合的角度已经变得站不住脚了，很多的设计师已经开始以一种更系统化的方式来思考如何设计。
然而，并非所有的设计系统都同样有效。有些可以带来流畅的用户体验，另一些则是胡乱拼凑的设计。有些设计系统能够激励团队持续完善，另一些则会被忽视掉。有些设计系统会随着时间的推移而变得更好，更有凝聚力和运行良好；另一些则会变得更糟和臃肿。
一个运作良好、经久不衰的设计系统的关键品质是什么？这个问题引起了我的极大兴趣，我花了大量的时间研究和思考这个问题。我的研究和思想的结论为这本书奠定了基础。根据不同规模的公司的经验和设计系统的经验，我尝试探索能够创造一个高效的设计系统的关键因素，从而增强团队有能力创造出伟大的数字产品。在本书中，我将分享我工作中的一些方法。我希望这些方法也能够对你的工作有帮助。
2. 本书的目标人群
本书主要面向于尝试将设计系统的思想整合到他们组织的文化中的中小型产品团队。产品团队中的每个人都可从书中受益，尤其是视觉和交互设计师、用户体验从业者和前端开发人员。
3. 本书的讨论范围
本书阐述了以我做为一名交互和视觉设计师的经历提出的设计系统观点。我不涉及其他相关领域，如信息架构、内容策略或设计研究。同样，这不是一本技术书。尽管会有大量与前端实践直接相关的讨论，但你不会看到任何代码示例或对开发工具和技术的深入分析。
这是一本设计书，但不是要讲述设计什么。它也不是试图创建一个设计数字产品的全面指南。1它是关于如何以更加系统化的方式处理设计过程，并确保你的设计系统有助于实现你的产品目的的同时符合你的团队的文化。
4. 本书的内容结构
这本书包含两部分。
第一部分：基础
在第一部分中，我们将讨论设计系统的基础——patterns 和 practices（做法）。设计模式是界面的可重复的、可重用的部分，从具体和功能（如按钮和文本字段）到表述性更强的部分（如图像样式、颜色和版式）。模式是相互关联的，它们共同构成了产品界面的语言。Shared practices（做法）是我们通过遵循一组准则，或者维持模式库，指导如何创造、获取、共享和应用这些 patterns。
第二部分：过程
设计系统不可能一夜之间就建立起来，它会随着你的产品而逐渐发展。但是，我们可以遵循某些原则和做法，以确保设计系统朝着正确的方向发展，并为我们提供对设计系统在一定程度上的把控能力。本书的第二部分重点介绍了建立和维护设计系统的所需要的具体步骤和技术，包括： 安排工作计划；梳理界面清单；建立 pattern library 模式库；创建、记录、优化和维护设计模式。
5. 术语
在我们深入讨论这个主题之前，让我们先确定我们将在整本书中使用的术语。
模式或设计模式
我使用 pattern 这个词来指界面中任何重复的、可重用的部分（例如按钮、文本字段、图标样式、颜色和版式、重复用户流程、交互行为），pattern 可以被应用和修改用途来解决特定的设计问题，满足用户的需求，或者唤起用户的情感。在整本书中，我将 pattern 分为了与行为相关的功能模式 functional patterns，以及与品牌和美学相关的感知模式 perceptual patterns。
功能模式或模块
这两个术语在整本书中可以互换使用，指用于构成用户页面整体的具体单元，例如按钮、标题、表单元素、菜单。
感性模式或风格
这些是描述性较强而不太具体的设计模式，通常用于强调某种审美风格和增强与产品的情感关联。例如，图标样式或颜色以及版式。
模式语言或设计语言
一套相互关联、可共享的设计模式构成了产品界面的语言。模式语言结合了功能模式和感知模式，同时包含了具有于平台特征的模式（比如汉堡包菜单）、行业领域模式（比如电子商务网站、金融软件或社交应用程序的特定模块）、UX（用户体验）和 引导模式（persuasive patterns），以及其他众多影响元素结合在一起产品的用户界面中。
设计系统或系统
目前在互联网领域中还没有「设计系统」的标准定义，人们对该术语有多种不同的理解——有时与「样式指南」和「模式库」互换使用。在本书中，设计系统指的是一套关联的模式 connected patterns 和共享的做法 practices，一致地组织起来，为数字产品的目的服务。
模式库和样式指南
模式库是能够按照设计模式和使用指南的作用将其获取、收集和共享的工具。创建模式库是（良好）设计做法 design parctice 的案例。传统的理解上，样式指南侧重于样式风格，例如图标样式、颜色和版式，而模式库包含更多类型的模式集。
设计系统洞察力
这本书是以现实世界的产品的实际见解为基础的。其中的大多数产品是从我在 FutureLearn 工作的经历中获得的，FutureLearn 是英国的一家中等规模的从事开放式教育公司。我在公司的三年中从事设计师的岗位，从而有机会观察和打造一个设计系统是如何从最初的概念发展到一个成熟的系统。
为了能够在设计系统方面有更深度和多样性研究，我还密切关注了其他五家不同规模和采用不同设计方法的公司：Airbnb、Atlassian、Eurostar、Sipgate 和 TED。在过去的18个月里，我一直在采访他们的团队成员，从而直观的理解这些团队在随着系统的发展所面临的挑战。以下是愿意分享他们对设计系统方面见解的公司。
- Airbnb：在2016的采访中，RoyStanfield（首席交互设计师）给了我很多关于 Airbnb 的 Design Language System 的细节。DLS 的亮点在于严密， patterns 的定义和用法明确，使用规则（rules）需要严格遵循。为实现这一目标该小组采用了需求 practices 工具。他们在采用新模式、整合新模式 patterns 的速度以及保持艺术方向与工程同步方面仍有一些挑战。
- Atlassian：2016年的11月份 Jürgen Spangl（设计主管），James Bryant（首席设计师）和 Kevin Coffey（设计经理）分享了他们对 ADG（Atlassian Design Guidelines）观点。虽然有一个专门负责管理 patterns 的团队，但他们也提供了一个可以共同打造的开源模型。公司里的每个人不仅被允许能看到，而且公司积极地鼓励大家为这个系统做出贡献。这个模型的挑战是在给人们提供足够的贡献自由度的同时，确保设计系统保持在可管理和策划之间找到平衡。
- Eurostar：2016年的8月份和9月份以及2017年3月份，Dan Jackson（解决方案架构师）非常坦诚的交流了他们在 Eurostar 所做的事情。在撰写本书时，团队正在构建他们的第一个模式库。他们最初遇到了一些挑战，特别是在确定项目的优先次序和鼓励团队中的每个人做出贡献方面。一年后，他们获得了分配一个专门小组的资源，该小组目前正在负责该系统的工作。
- Sipgate：2016年8月份和11月份的交流中，Tobias Ritterbach（经验所有者）和 Mathias Wegener（网络开发工程师）都给了我很多关于他们在的工作中的见解。sipgate 模式库建立于2015年，但一年之后，团队发现由于产品团队之间缺乏沟通而导致加入了太多的组件。最近，他们正在开发一个新的模式库，以实现在多个产品网站上统一设计语言的目标。
- TED：2016年的8月和9月，Michael McWatters（UX架构师）、Aaron Weyenberg（UX主管）和 Joe Bartlett（前端开发人员）在讨论中发表了意见。在众多人支持的 TED.com，设计系统是由几个UX设计师和前端开发人员组成的小团队负责。团队对他们的 patterns 理解有着深刻的共识，这些模式 patterns 以一种简单的方式整理出来。到目前为止，他们还没有觉得有必要建立一个全面的模式库。
二、设计系统
在网络社区中，「设计系统」没有一个标准的定义，人们以不同的方式使用这个术语。在本章中，我们将定义什么是设计系统以及它由什么组成。
设计系统是一组相互关联的模式和共享的做法 practices，它们以一致的方式组织起来，为数字产品的目的服务。模式是我们为创建用户界面而重复组合的元素：诸如用户流程、交互方式、按钮、文本字段、图标、颜色、版式、显微拷贝。实践是我们如何选择创建、获取、共享和使用这些模式，这一点在团队协作中尤为重要。
看看这两个不相关产品的截图。一个来自 Thomson Reuters 用于交易和市场分析的名为 Eikon 应用程序；另一个来自开放式教育社交学习网站 FutureLearn。
△ 左边是Thomson Reuters的 Eikon，右边是FutureLearn
在每个示例中，这些模式一起工作以实现不同的用途。对于 Thomson Reuters，它目的是数据处理、实用、快速扫描和多任务处理；对于 FutureLearn，它目的是让用户深思熟虑的阅读、非正式的学习、反思以及以及结识志同道合的人。产品的用途决定了它所采用的设计模式。
Thomson Reuters 的布局是基于面板和挂件，允许用户执行多任务。紧凑的设计，以适合展示大量的信息在屏幕上。密度是通过选择狭小的间距、紧凑的控制方式、灵活的布局和排版，例如更小字体和相对较小的标题。而与之相反，FutureLearn