设计系统/组件库全面知识整合-旋风物语

前言

最近刚把自己手头工作上的设计系统整理了一遍，有蛮多自己的收获与总结。因此把我之前学习制作设计系统时搜索到的知识和自己的一些体会整合在这篇文章里，希望能给刚学习UI或正在制作设计系统的同学带来一点帮助。

讲解设计系统方面的优秀文章已经有不少了，但是关于设计系统构建的知识点非常多，而且随着时间与设计工具的变化，未来会更多。因此没有一篇文章能把所有的知识点涵盖，这篇文章的意义在于整合目前有价值的知识点与工作流，从理论、实战到资源三个维度重新梳理，把已有的优秀文章援引在相应的部分，让大家读完这篇文章后对设计系统构建有一定的了解，并通过我推荐的文章继续扩展。当大家吃透整个文章结构的同时，就相当于掌握了设计系统的构建，足以满足日常的设计工作。

先别急着往下，阅读在于专注。本文阅读时长大约15分钟，泡杯咖啡，放首轻音乐，调整好状态再继续吧~

理论篇

很多刚入门的新人会被以下几个名词搞混，设计系统、设计规范、组件库、视觉规范……那设计系统到底是什么呢，下面就对它们做一个描述与区分

一、设计系统是什么

设计系统在UI领域内，本质上而言是一个清晰、规范、可复用的组件库。没错，在绝大部分时候，设计系统与产品的组件库说的是同一个东西。一般来说，设计系统是为一个产品服务的，但是，也有部分设计系统是专门为了加快设计师的工作效率而建立的，这在后文会提到。那么，一般的设计系统长什么样呢？

(Material Design System)

上图是安卓设计系统的一部分。基本上我们能看到的使用画板从不同维度对产品中使用到的元素进行归纳整理后的文档就是一个产品的设计系统。

不同产品的设计系统会因为本身的载体、方向、规模等因素而有所区别，但总体而言，设计系统的组成结构与呈现形式差别不大，对于具体应该如何呈现以及结构划分会在后文提到。

设计系统与设计规范的区别

任何带有规范的的文档如视觉规范、产品使用规范等基本都是设计规范的不同叫法。我们先来看看设计规范一般长啥样呢？在这里还是拿大厂来举例

没错，UI设计师经常需要学习与参考的一份设计规范就是苹果的设计规范，它指导了全世界所有的iOS端的UI设计师进行设计。设计规范的重点在于指导性，描述不同组件在具体界面中的使用情景。简单来说，它是用来看的。而设计系统是可用的，这就是它们本质上的区别。关于设计规范如何构建的知识也非常多，在本文暂不赘述，如果你们想了解的话，欢迎在评论区留言，届时我会再出一篇关于设计规范的文章。

读到这里，相信大家已经能分辨出什么是设计系统了，那么接下来就要说一下我们为什么要建立它，它在实际工作的意义到底在哪里。

二、构建设计系统的意义

很多刚入行的设计师会认为做一份设计系统的意义仅仅是因为它看起来特别专业，特别有设计感，有条理性，是一个产品的形象工作。但实际上，它的作用远不止于此，它的功能性对于整个产品的设计工作而言是不可或缺的。

1、统一设计语言

建立设计系统最重要的一点在于统一整个产品在不同平台、不同设备上的设计语言。

设计语言简单来说就是视觉风格、交互方式、组件的综合描述。统一的设计语言能给用户带来始终如一的体验并加强用户对于自身的品牌记忆。

（1）苹果在不同平台的设计语言因为有相应的设计规范与设计系统支撑而非常统一。

（2）Netflix在不同终端的视觉风格是保持一致的

那好的设计系统是如何做到这一点的呢？我们知道，在实际工作中，一个中大型项目往往有多名设计师负责，这时候，设计系统起到的作用就是让不同的设计师使用相同的元素做设计。功能相同的组件使用设计系统中规定好的样式，页面之间的布局也使用已有的栅格系统。这样设计出的页面能保证一致的视觉风格。

2、减少开发成本

在工作中，如果我们每次设计一个新的页面都用不同样式的组件，那开发就要每次都重新写一遍代码，这样会增加大量的时间成本。而当我们使用设计系统的已有元素时，开发就可以直接调用已有的库。

3、快速设计与迭代

设计系统的的高效在于它易于复用，而一个产品许多页面会使用到相同的元素，使用设计系统能显著减少重复性设计时间。另外，出现新的需求需要改动页面时，也能快速完成需求进行迭代。目前，大多数成熟产品的设计团队的多数工作时间并不会投入在设计任务，而是管理与维护产品的设计系统。

一个优秀的设计系统能给整个团队带来的效益是巨大的，它有更多的优点只有在实际使用时才能真正体会到。当然，构建与维护一个设计系统也是需要花费不少的人力成本与时间成本，它的效益与重要性需要通过整个产品周期来体现。

Tips：产品周期即产品生命周期（product life cycle），指产品从进入市场到被市场淘汰的整个过程，会经历形成、成长、成熟、分裂、衰退等一系列过程。

设计系统的构建时间

构建设计系统与产品的页面设计是同时进行的，一般在产品的4到5张主要页面设计出来后就可以进行，随着产品的成长会不断对它进行添加与修改。另外，它与其它大部分文档的区别在于它是一个动态地文档，是随时可用的，只能不断完善，却没有最终完成的时刻。

现在，我们已经知道为什么要做一个设计系统了，那么在下一部分我们要讨论的是构建设计系统的理念，也可以说是一个方法论，有了理论性的指导，我们才能构建一个可用、易用、灵活的设计系统。

三、原子化构建

目前，构建设计系统的方法主要有两种，一种是穷举式构建，一种是原子化构建。第一种是把所有组件按分类直接穷举式排列出来并整理。第二种则是把每一个元素拆分到最小元素进行归纳。第一种方法需要的时间成本低，但是灵活性也低，无法实现嵌套式改变。第二种虽然需要花费比较大的时间成本，却拥有灵活的扩展性，易于管理，易于修改。原子设计系统是目前主流的设计系统构建理念，也是本文最核心的部分，下面的构建过程都将基于这个理念展开。

1、什么是原子化构建

原子化构建也称之为原子化设计、颗粒化管理等，通过它构建的设计系统统称为原子设计系统。所谓原子化设计就是把页面里的所有组件都拆解到最小元素即原子，如颜色、文字、形状等基本元素进行归纳，并据此不断组合成更复杂的组件如按钮、列表乃至整个页面。更详细的相关介绍可参阅以下链接文章，里面对原子化设计的概念及运用都有详细的讲解。

https://www.uisdc.com/atomic-design-theory

2、原子化构建的来源

原子化构建最早是由外国的一名设计师 Brad Frost 提出并定义的设计方法，概念来源于宇宙中的任何物质都可被拆解成最小元素原子，并将之引入到设计系统的构建方法。在很多年前，当原子化设计的概念还没出现时，设计系统更多地被理解成不同图形组成的图形库。当 Google 在2014年推出 Material Design 时，设计系统的概念才趋于成熟。现在，当很多不同的设计系统出现后，原子化设计的原则更多地作用于设计出一个能与开发及其开发库对接的设计系统。想了解更多关于原子化设计的来源，可以参考 http://atomicdesign.bradfrost.com/。

3、原子化构建的意义

在前面已经提到，原子设计系统最大的优点在于实现嵌套式改动，即修改最小元素时，能实现全局所有运用到此元素的组件。

类似这种修改其实经常发生在我们的日常工作中。例如前段时间，美团大改版，品牌色由绿变黄，我猜测也是通过设计系统完成的，不然将会产生大量的修改时间成本。

（美团改版前）

（美团改版后）

读到这里，关于设计系统的理论知识基本已经讲述完毕，相信大家对设计系统已经有了一个总体性的认知。在接下来的部分，会为大家介绍设计系统的构建过程。

实战篇

在这一篇章中，会为大家说明设计系统有哪几个子级系统，不同的子级系统又应该如何构建，最基础的五个子级系统分别是颜色、字体、图标、图层样式、以及栅格系统。基本上我们所有的页面都是由这5个子系统构成的，同时它们也是所有组件的最小元素即原子层，只要我们把这五个子系统构建好，组件系统的构建就是顺水推舟的工作。

另外需要注意的是，以下的构建过程都基于原子化设计的理念及Sketch的工作流展开，这也是目前较多数设计师、团队使用的设计方法，如果大家原来使用的是其它工具，建议还是要调整自己的工作流。

1、颜色系统

一般而言，构建设计系统的第一步就是构建颜色系统，也称作色板。因为系统中的所有元素都会用到颜色。正常来说，一个产品的颜色需要包括以下几种

灰度色：

微灰（0-5% Black）：用于背景

轻灰（5-20% Black）：用于分割线、分割区间、边界

中灰（20-60% Black）：用于副标题以及已点击按钮状态

重灰（60-90% Black）：用于标题、暗色背景

（在设计中应避免使用100% Black，因为自然界不存在全黑，会产生特别重的视觉感受）

主色：一般也是产品的品牌色，页面主面积颜色

辅助色：一般而言，2到3种足够，用于区分与强调

（主色与辅助色都需要使用透明梯度的同色系颜色作为层级区分颜色，一般会设置75%、50%、25%的梯度）

渐变色：目前的设计趋势会使用渐变色令产品更有活力以及更年轻

2、字体系统

在Sketch中，构建字体系统主要使用Appearance里的Text Style，在构建过程中，需要把字体名称、字体大小、字重、颜色、应用于何处等信息说明清楚，最好由大到小进行排列，易于寻找。大部分的正文及标题应该使用所属平台的默认字体，如iOS里的苹方（中文）、San Fransco（英文），安卓里的Noto（中文）、Roboto（英文）。如果用到其它字体，也需要整理出来。在这里为大家安利一个网站 https://type-scale.com/，能帮助你更快地找到你需要的字体大小。

3、图层样式

图层样式也就是按钮、卡片等组件的背景样式，一个图层样式应该包括颜色、形状大小、圆角、阴影几个属性。Sketch的形状都支持定义图层样式（Layer Style），而每个不同属性的样式，都应该在Sketch里单独定义一个 Layer Style，这样才能更有效地进行复用。另外，在构建图层样式的系统时，就可以使用在第一步中构建好的颜色系统。

4、图标系统

一个成熟的产品会用到的图标数量是非常庞大的，包括系统图标、标签栏图标以及运营区图标等。在实际工作中，对图标的调整与改版工作也是需求中占比较高的一项，因此，一个准确、清晰的图标系统能为我们节省大量工作时间。构建图标系统相对其他系统而言比较容易，需要注意的是图标的命名，要有清晰的父子级结构。

5、栅格系统

栅格系统使用于绝大多数的网页设计中，却经常在移动端的设计中被忽略。很多设计师在进行移动端页面设计时仅仅凭借着Sketch的对齐工具与测量工具。这会导致不同页面里不同组件的间距无法统一，这样设计出的页面是不专业也不规范的。因此，移动端的页面设计也应该使用相应的栅格系统进行规范与统一。

在初期，大家如果对栅格系统的感受还不清晰时，可以使用8pt的栅格系统，这是最稳妥也是最易于适配的方案。

6、组件系统

组件系统是整个设计系统的核心，也是需要花费最多时间进行管理与维护的一个部分。它的构建会使用到前面5个基础系统，而组件也可以细分为不同的类别进行归纳。具体应该如何分类会根据产品方向而定，不同的产品会有所差别。不过总体而言会包括基础控件、栏、按钮、卡片、列表等。简单来说，组件系统的构建就是基础元素的不同排列组合。

需要注意的是，一个组件有可能会有多种交互状态，在构建时也需要把所有的状态放进去。可以看到在下图的设计系统中，同一个按钮的不同交互状态就使用了颜色系统，图层样式系统。

小结

在这一篇章中，主要为大家介绍了设计系统的六个子系统是如何构建的，在这里也给大家推荐一篇文章 https://www.uisdc.com/use-sketch-libraries-build-design-systems，里面有更详细的关于使用Sketch构建设计系统的方法。相信大家掌握这部分知识后能对构建设计系统有一个初步的方向，但是设计系统的构建没有对错，上面所说的部分知识也有可能不适用于你的产品，因此大家也需要根据自己的实际工作灵活调整。

构建设计系统虽然很重要，但确实是一个过程特别枯燥的工作，那有没有办法更快捷地完成呢？答案是肯定的。在最后的一个篇章中，会为大家安利一些成熟的设计系统，提高大家的工作效率。

资源篇

从0到1构建一个设计系统需要的人力与时间成本是非常大的，因此，国外很早就有设计团队专门构建出一个通用的设计系统为所有的设计师服务，并以此盈利。设计师在拿到这个设计系统后，只需要做一些针对性的改动就能很快变成自己产品的设计系统，能大幅度提高工作的效率。例如大家熟知的国内蚂蚁金服团队出品的 Ant design System，安卓的 Material design system，Sketch内置的iOS组件库都属于这个类型。这种设计系统我称之为通用型设计系统。

当然，不是所有的通用型设计系统都是好的。只有符合原子化设计理念的系统才易于我们修改以及复用。具体可以参阅这篇文章 https://www.uisdc.com/authenticity-design-system?login=true，里面详细介绍了市面上的一些真伪设计系统。哪怕是上图中的Ant design system都不属于原子设计系统。

在这里，我会把目前最优秀，亲测好用的一些通用型设计系统作为资源安利给大家，里面有些是免费的，有些是付费的，大家可以按需选择。同时，也给大家推荐一个网站 https://designsystemsrepo.com/tools/，里面收录了几乎全部的通用型设计系统。

1、UX Power Tools

https://www.uxpower.tools/

这个设计系统盛名已久，包含了丰富的组件可供使用。唯一的缺点就是贵，而且是年订阅制，48美刀一年，不能一次性购买。当然，这也保证了它能不断更新。

2、Symbol 2 Library

https://symboldesign.co/

国外知名设计团队 Craftwork 出品的设计系统，整个系统的颜值很高，分类也很详细，独特的置入了一个插画系统。缺点还是贵，58美刀一次性购买。

3、Nested Symbols

https://janlosert.com/store/symbols-styleguides

组件没有之前两个那么丰富，但是足够工作使用，最重要的是它免费！而且官网有特别详细的使用说明，非常良心。

4、Frames

http://framesforsketch.com/

一个专门为网页设计服务的设计系统，最牛的是里面有140个网页模板可供调用，在做网页设计时真的能快速出图。48美刀一次性购买。

5、Prime

https://www.primedesignsystem.com/

与Symbol2差别不大，同样有丰富的种类，高颜值，但是是里面最贵的一个，68美刀一次性购买，因此不太推荐。

小结

目前市面上销量较高口碑也不错的通用型设计系统就是这五款，我个人比较喜欢第一和第三个，第一个是因为它组件真的很丰富，第三个是因为它免费。它们都有上文中提到的基础系统，本质上差别不大。有需要的酷友入手其中一款就足够使用了，最主要的还是花费时间改成自己产品的设计系统并持续维护。

总结

在文章的最后，通过一张脑图为大家总结复习一下整篇文章的脉络与知识。首先在理念篇为大家介绍了设计系统的概念重要性以及引入了原子化设计的构建方法。在实战篇，介绍了五个基础子系统颜色、字体、图层样式、图标及栅格系统，还有一个核心的组件系统。说明了构建时需要注意的地方以及呈现方式。在最后的资源篇，给大家安利了5个热门的通用型设计系统。

很开心第一次在站酷上与各位分享我自己在设计上的一些总结与感悟，第一次写文章，不足之处请多包涵，也希望各位在评论区给我留意见以及你们希望了解的知识方向。如果这篇文章能给你带来一点启发记得帮我点个赞，之后我也会持续在站酷上分享自己的设计知识，欢迎关注，也希望能与各位酷友共同进步。

设计系统/组件库全面知识整合

前言