前言

第一次接触设计系统，是一次去某公司面试，在我大谈我的设计作品时，设计主管耐心地听完，然后问我：“你听过设计系统吗？”然后拿出这本英文原版书《Design Systems》，问我看过没有。这本书出版于2017年，直到现在 (2020年) 还没有官方授版权的中文版。那时的我真是一脸黑人问号，设计系统？？而且是全英文的讲述设计系统的原版书？？你在面试设计总监🐎？？ (我在打这段文字时回忆起当时的情景，我想可能对方不满意，故意找些刁难的问题劝退吧......)

我当时只能非常诚实地说自己不知道，并且书也没看过。对方接着说他们公司的设计需要设计系统，设计系统对公司的系统化设计很有帮助等等，最后让我回去好好看看这本书。

我精神恍惚地回到家，各种百度谷歌搜索，凭着书的英文名字和记忆中的封面，终于找到它的 介绍网站，找到 站酷的民间翻译[1]，然后在某宝找到了电子书下载 (现在可能没有了) 。下载了电子书后，配合着民间翻译 (无限感激翻译者 wvi987) ，一段一段地读着，并用 MarginNote 做着笔记 (安利一下 MarginNote 这个应用，太伟大了) 。

随着深入研读《Design Systems》，发现「设计系统」确实事情并不简单。上面说的关于设计系统、设计语言、模式的整理归纳、构建设计系统的方法等等，都对UI设计有相当大的帮助。而如果只是在这里把这本书翻译一遍的话，网上其实已经有至少两个翻译版本了，站酷上也有一个，所以单纯再翻译一遍意义不大，我的英语水平也没有高到能翻译英语原版专业书的地步，所以我写本文定义为自己学习设计系统的一个过程。希望籍着撰写此文，向大家分享我从中学到的一些东西。

费曼说过，输出是最好的输入。把知识重新梳理整合组织并输出，有利于进一步巩固知识。并希望在这个基础上能有系统地，有条理地把《Design Systems》的思想结合自己的思考用更通俗易懂的语言表达出来。

本文核心思想脱胎于《Design Systems》，并参考了大量国内外资料和案例。本文将会从介绍设计系统及它对产品的重要性、设计系统的不同种类、以及怎么构建和后期维护，这3个角度去阐述设计系统。

目录

一、什么是设计系统？UI设计为什么需要它？

   1、定义

   2、例子

   3、为什么需要设计系统？

       (1) 更加高效省时

       (2) 加强品牌统一性

       (3) 设计系统能成为公司的技术资产

       (4) 体验一致性

       (5) 团队协作

二、设计系统的不同种类

   1、按组织方式划分

       (1) 按层级 (原子设计)

       (2) 按⽬的或结构

       (3) 字母顺序

   2、按严谨程度划分

       (1) 严谨程度高

       (2) 严谨程度低

       (3) 严谨程度适中

三、如何建立设计系统的核心——模式库

   1、准备工作

       (1) 工具

       (2) 选择适合你公司的设计系统模型

   2、构建模式库

       (1) 记录功能模式

       (2) 记录感知模式

       (3) 代码、设计和模式库保持同步

   3、后期维护

       (1) 以设计系统的产品化作为维护方向

       (2) 添加新模式的标准与流程

       (3) 更新日志

一、什么是设计系统？UI设计为什么需要它？

首先在这一部分中，将会对设计系统作一个总体的介绍。根据《Design Systems》，和其它权威网站对设计系统的描述，将从设计系统的定义、设计系统典型案例、它对UI设计的重要性，3个层面层层递进来谈设计系统。

1、定义

我们先看书中对设计系统的定义：“设计系统是一组组相互关联的模式和共享的组件，它们以一致的方式组织起来，为数字产品服务。”

说得接地气一点就是，设计系统是把一个或多个已经或将会多次复用的模式、组件 (包括颜色、交互状态、动效、排版、间距、图标样式、形状和描边、插画、图片素材、语音和语调、声音和音频提示) ，整理好并组织起来，为界面应用服务。

设计系统 (Design System) 一般来说包括两个部分：模式库 (Pattern Library) 和样式指南 (Style Guide) 。 [2]

模式库 (Pattern Library) ：根据译法不同，有的译作样式库。模式库是设计系统的核心部分，它集中并整理了产品的元素，特别是可复用的元素。通常包含代码示例，设计准则和用例。完整的模式库不仅仅是 Axure 元件库、Sketch Symbol 等设计软件的元素，而是要深入到开发层 [3]。特定元素被整理进模式库后，被称为模式。

模式 (Pattern) ：指界⾯中可以解决特定设计问题、满足用户需求、激发情感的，且重复的、可复⽤的部分(例如按钮、⽂本字段、图标样式、颜⾊和版式、重复的⽤户流程、交互⾏为)。

样式指南 (Style Guide) ：或者叫设计指南 (Design Guideline) ，类似公司视觉识别系统 (VI) ，定义颜色，版式，品牌，Logo等，甚至有网格系统。但一般不会出现组件和元素。

而在《Design Systems》中有这样一句原话：“⽬前业内还没有「设计系统」的标准定义，⼈们对该术语有多种不同的理解——有时与「样式指南」和「模式库」互换使⽤。” 而且有相当多的公司把样式指南从设计系统独立出来成为公司的VI系统，使得设计系统只有模式库一个部分。所以在相当多的情况下，「模式库」基本等同于「设计系统」 (事实上模式库和设计系统是有区别的 [4])。

有的公司会把模式库称作组件库，把模式 (Pattern) 称作组件 (Component)  (事实上模式和组件也是有区别的 [5]) ，或者有的把样式指南称作设计指南，这都没有关系，这完全取决于你们公司的规准和文化，只要你的团队内都使用相同的叫法即可。

另外需要特别注意的地方是，Sketch 库并不是设计系统。(Your Sketch library is not a design system. [6])

关于设计系统的定义，是不是有被这些苦涩概念弄得有点懵圈的感觉？《Design Systems》对很多概念并没多作解释，我自己是要花了很长时间在网上找了很多资料才弄清头绪。不过没关系，概念说完，下面来点例子就清晰多啦。

2、例子

我们首先来看看国内外大公司的设计系统是什么样子的。

下图是苹果 iOS 的设计系统。iOS 作为一个应用平台，它用相当多的篇幅来指导第三方开发者在 iOS 平台上开发应用的规范👇。

下图是 IBM 的设计系统 Carbon 的网格部分，如图展示了网格系统，对各元素的长宽、间距都作了详细要求👇。

下图是 Googel 的设计系统 Material Design 的截图，对界面的各个部件都作了详细说明，其中还提供开发人员文件，调用代码等👇。

可以看到设计系统呈现的内容包括界面元素部件，元素大小，排版间距，等等 (当然还有更多，下文会详说) ，还包括提供元素下载，开发人员文件。而且，产品的特性决定了设计系统的内容结构，有的侧重于说明产品作为平台的应用规范，如 iOS 和 安卓的设计系统；有的侧重于体现产品的可靠性，如 IBM 的 Carbon 设计系统。

3、为什么需要设计系统？

看到了前面的案例，几乎所有成熟的公司都有自己的设计系统，那么UI设计为什么需要设计系统？设计系统对公司的产品有什么好处呢？或者换句话说，怎样说服不懂设计系统的上司支持你去构建设计系统？下面我们来讲讲一个良好成熟的设计系统的价值。

(1) 更加高效省时

一个设计系统在构建初期，往往需要投入不少时间，比如让它具有一定的兼容性和灵活性以兼容不同的用例，为它定义名字，撰写能让其他同事都看得懂的模式说明，甚至还要为一些特殊的交互模式制作 GIF 图，然后后期还要不断花时间维护和更新。

但同时当你花心思构建好一个良好的设计系统后，却能在三个方面为你的项目大大节省时间。

· 在不同地方使用同一元素时，能够直接复用模式库中的模块，大大缩短开发流程。新同事来公司后立即可以快速调用模式和上手设计，就算有同事离职，也不会对产品的开发进度造成太大压力。

· 全局调整时，只需要在模式库中修改一次，即可在所有使用该模块的地方自动更新。大大加快调试效率，这种效果在需要频繁改稿的情况下尤为显著。

该文章同时收录在：