理解设计体系

weakow

互联网产品与研发团队里有一些常见的迷思：

  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
  2. Google 的 Material Design
  3. Microsoft 的 Fluent Design System

二、公司级设计体系。有的公司为自身产品或同类产品打造了设计体系，并将它们发布在网上。以下是有名的几个案例：

  1. Atlassian 的设计体系
  2. IBM 的 Carbon 设计体系
  3. 蚂蚁金服的 Ant Design

需要指出的是，设计体系不只是组件库，不只是样式指南。当你浏览上面这些案例内容的时候，你固然会看到组件库和样式指南，但更值得关注的是它们陈述的设计目的、设计理念、设计原则、设计模式、设计与工程同步的方法等等。

目前，上述案例除了最后一项蚂蚁金服的 Ant Design，其他都是英文内容。网上可以找到一些对它们的中文介绍，但没有完整的中文翻译，如果想要对它们的深入的理解，还是需要阅读英文原文。为了方便大家的理解，本公众号将来也会推出一些对设计体系经典案例的解读，敬请关注。

设计体系学习资源

除了访问上面列举的案例的网站，还可以找到以下关于设计体系的学习资源。(如无特殊说明，以下资源均为英文。)

图书

第一本以设计体系为主题的图书是由 Smashing 杂志推出的 Design Systems (《设计体系》，作者 Alla Kholmatova)。如果你的英文够好，可以访问 Smashing 网站购买其电子版。否则，可以期待一下这本书的中译本 (即将由人民邮电出版社出版)。

在设计体系概念引入互联网圈之前，已经有很多关于设计模式的图书 (模式库是设计体系的主要输出物)，其中最经典的当数 Designing Interfaces (作者 Jenifer Tidwell)，该书最新中译本为《界面设计模式》(电子工业出版社，2013)，尽管不是最新的图书，现在仍然值得阅读。

软件

上文已经提到，新兴的设计软件都引入了专门针对设计体系的功能模块。试用这些软件，并查看相关的文档，也是一种不错的学习方法。

Figma 可以说是继 Sketch 之后最耀眼的明星设计工具，它在其官网首页就指出 Figma 能很好地创建和管理设计体系，并推出了一系列文章和视频帮助用户学习这些功能。

InVision 是另一款很受欢迎的新兴设计软件，它甚至为设计体系打造了独立的功能模块，并称之为 Design System Manager (DSM)。为了宣扬以设计体系为代表的新兴设计实践，它还将这些最佳实践组织成了多本电子书，放在一个名为 DesignBetter 的独立网站上面。

UXPin 是一款新的设计工具，它从推出的第一天起就强调协作，强调设计与工程的同步，因此它是天然的设计体系管理工具。为了推广设计体系的概念，它还在其官网上推出了一系列免费的电子书和网络研讨会。

国产软件 Mockplus 在去年推出了一套专门用来定制设计规范的工具，并将其命名为 DS (为设计体系一词英文缩写)。如果你想为自己的团队构建设计体系，该工具便为你提供了一个不错的起点。

网刊 / 博客

Figma 团队做了一个专门以设计体系为题的网刊，域名为 designsystems.com。该网站有大量围绕设计体系的文章、教程及代码库。

近几年，著名的设计杂志 Smashing 上面已经有越来越多的关于设计体系的文章。

Airbnb 的设计团队是设计体系实践的先驱，他们也将他们的探索过程与心得放到了团队官网的博客文章里。

设计体系在国内还没有取得广泛的认知，但国内外的这个差距一定会很快填补起来的，一定会有越来越多的国内互联网团队开始将设计工作系统化，会有越来越多的国内互联网人了解设计体系的概念并将这套方法论用到实际工作中去。