《设计体系》试读：译者序

互联网产品与研发团队里有一些常见的迷思。 (1) 产品经理和设计师需要懂技术吗？开发人员需要懂设计吗？(2) 应当先做设计再出规范，还是先出规范再做设计？ (3) 如果老板的意见与设计师自己的想法相左，设计师应该坚持己见吗？ 这些问题曾经困扰我们，时至今日它们也远远没有被彻底解决。不过，针对上面列举的这类问题，先进的互联网团队已经逐渐形成了一套新的方法论，并通过它大大地改进了互联网领域的设计实践。这套方法论就是设计体系（design system）。 设计体系的概念早已有之，不过，这一概念为互联网公司所用是在最近几年。经过短短几年的发展，这一理念已被国外互联网团队广泛接受，相关的方法论也成了用户体验设计领域的最佳实践。主流的产品设计杂志（如 Smashing）有了稳定的设计体系专栏。多个地方有了专门以设计体系为主题的会议，如美国的 Clarity 设计体系会议自 2016 年起每年举办一届。新兴的设计软件，如 Figma、InVision、UXPin，引入了专门用来管理设计体系的功能模块，并将其作为重要亮点进行宣传。设计师的招聘开始要求掌握设计体系相关技能，有的公司甚至设立了专门负责维护设计体系的岗位。 尽管设计体系的概念在国外已广为使用，在国内却鲜有讨论。你手里的这本书，是国内出版的第一本以设计体系为主题的图书。作为译者，我也希望通过这本书将设计体系这一概念带到国内的互联网圈，让更多的产品经理、设计师和前端开发人员了解它，并在实际工作中使用它。 那么，什么是设计体系呢？当我跟其他人解释设计体系的概念的时候，经常从设计实践的三个层级开始讲起。 第 1 层级：组件库。即便最初级设计师也懂得统一样式的重要性。如果你将网站的主要按钮定义为蓝色、小圆角的样式，你大概不会在下一个用到主要按钮的界面将其设为绿色，或改为大圆角。如果产品界面中出现不统一的情况，很容易让用户怀疑这家公司的设计团队不够专业。为了统一样式，设计师很容易想到做一个组件库，陈列所有界面中被复用的组件，如按钮、文本框、标签页等。组件库不仅可以指导设计师的工作，还可以为前端开发人员提供参考。 第 2 层级：设计语言。组件库提供了对同一类元素的约束，却没有指出不同类元素之间的联系。这时，我们需要引入设计语言的概念。一个产品的设计语言是塑造该产品独特且统一的风格的一套法则。一辆奔驰车即便摘去标志也很容易让人认出它是奔驰，这是因为所有的奔驰车都遵从相同的设计语言。Google 旗下众多产品线共享同一套设计语言，其中任何一个界面都不会让人感觉出自 Apple 或 Microsoft 之手。好的产品都打造了属于自己的设计语言。是设计语言统一了整个产品的风格，并让产品有了区别于其他产品的个性。 第 3 层级：设计体系。组件库和设计语言定义了产品该是怎样，却没有解答为什么是这样以及如何做到这样。为了回答这些问题，有人引入了设计体系的概念，用以指代产品团队内部形成的用于指导其设计工作的一系列共享的最佳实践。简单地说，设计体系是以下这些内容的集合：设计目的、设计原则、组件库、样式指南，以及用于提高设计师和开发人员沟通效率的工作流程和实用工具。建立有效的设计体系可以提高设计决策、设计与开发沟通等工作的效率，并减小出错的可能性。此外，建立设计体系也是团队知识管理的一部分，有助于为新加入团队的成员提供指导，同时确保团队的工作不会因为某位关键成员的离开而蒙受损失。 如果你对设计体系概念的理解还停留在抽象的层面，不妨现在就去看看下面列举的这些具体案例，从而对设计体系形成一个直观的认识。 一、平台级设计体系。Apple、Google、Microsoft 三家公司各自都有流行的操作系统（Apple 有 iOS、macOS 等，Google 有Android，Microsoft 有 Windows）。为了指导各自生态下应用软件的设计，它们都推出了完整的设计体系。 (1) Apple 的 Human Interface Guidelines：https://developer.apple.com/design/human-interface-guidelines/ (2) Google 的 Material Design：https://material.io/ (3) Microsoft 的 Fluent Design System：https://www.microsoft.com/design/fluent/ 二、公司级设计体系。有的公司为自身产品或同类产品打造了设计体系，并将它们发布到网上。以下是有名的几个案例。 (1) Atlassian 的设计体系：https://atlassian.design/ (2) IBM 的 Carbon 设计体系：https://www.carbondesignsystem.com/ (3) 蚂蚁金服的 Ant Design：https://ant.design/ 设计体系在国内还没有取得广泛的认知，而本书正是国内介绍设计体系的第一本图书。为了在国内推广设计体系的理念，我建立了一个以设计体系为题的微信公众号，欢迎读者朋友们关注（微信号：designsystem）。此外，如果你想跟我交流，可以给我发邮件（wang@weakow.com），也可以通过微博找到我（@weakow）。