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

设计系统的构建时间

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

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

三、原子化构建

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

1、什么是原子化构建

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

http://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（英文）。如果用到其它字体，也需要整理出来。在这里为大家安利一个网站 http://type-scale.com/，能帮助你更快地找到你需要的字体大小。 

3、图层样式

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

4、图标系统

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