本篇文章主要聚焦在控件组件的具体搭建过程，希望通过本文可以让大家对设计系统的搭建有一个基本的认知，了解大致的流程。

如果看过我之前文章的朋友应该知道，一套设计系统的资产，包括了样式库、控件组件库、设计说明文档、开发说明文档等不同的内容，那么我们在具体的搭建过程中应该怎么做呢？

在开篇之前，我想先在这里和大家明确下上述不同的设计资产是什么，包括哪些内容。

不同设计资产的区别

我想应该有很多的朋友一直以来都有一个困惑，看过很多设计系统，不管是网上公开的设计系统，还是在工作中接触到的设计规范之类的，总感觉他们很详细，很有用，但是又缺少点什么，导致无法更好地使用。这里存在的一个问题就是它不是你真正需要的那部分内容，很多人一直在追求“All in One”，但是结果往往事与愿违，最后导致输出的设计系统不好用，无法达到提效的目的。

所以我们在制作设计系统的时候，首先要去了解不同的角色需要的是什么，然后针对性的制作所需的资产，这才是一个良性的开始。所以我们这里首先来说明下样式库、控件组件库、设计说明文档、开发说明文档等不同的内容具体是什么。

样式库和控件组件库

这个是专门为设计人员制作的设计资产，主要目的是提供给设计师一套统一的通用组件，帮助设计师快速的完成界面设计工作。一般来讲，它是Sketch文件、Figma文件或是其他设计类软件文件形式，采用云端库的方式与设计团队进行协作。

这一部分资产，一般叫做UI Kit，它最大的特点就是方便调用、易于拓展。从这个角度出发大家就会明白为什么Figma等设计软件的出现会迅速的获取大批设计师的喜欢。

设计说明文档

这个是专门给设计师或者说是团队阅读的文档，里面主要是对每个控件组件进行了定义和说明，可以让别人了解每一个控件组件。知道是什么和怎么用。很多的团队喜欢制作guide就属于这个的一部分，但是会发现制作的文档很大很全，但是设计师很多都不喜欢用，最后得出设计系统没什么用的结论。原因就是设计说明文档是让人看的，不是用的，里面包含了太大的没用的设计内容，除了让设计文档又大又卡，没有什么其他的作用。

开发说明文档

这个是专门为研发人员制作的设计资产说明文档，里面主要是对使用到的控件组件进行说明，标注，比如：字体用什么，颜色用什么，边距是多少等等内容，这是研发人员关注的重点。

所以通过上面的描述，我想大家应该可以明白，尽管都是控件组件，但是不同的文档侧重点并不同，根据不同的使用者我们应该有侧重的制作相应的设计资产，如果我们秉持着“All in One”的原则，最终只会沦为自我的自嗨，而对于使用者来讲这无异是巨大的灾难。

控件组件库搭建

针对我们设计中使用到的元素进行汇总，形成一套控件组件，在之前的文章中我已经就为什么这么分类进行了说明，需要的朋友可以查看《开始搭建设计系统》，这里我就不再缀续了。

接下来就针对具体的控件组件进行说明怎么搭建控件组件库，这里需要说明的是我使用的Sketch版本为96.1，因为Sketch版本在94以后进行了大的优化，特别是在字体上， 所以这里先提前说明下。

搭建流程

接下来我将以按钮为例，详述控件组件的搭建流程：

作为界面设计中不可或缺的一部分，按钮在用户与系统对话中起到了主要作用。是用户界面中主要的交互形式。为用户提供触发即时操作的方法。

在HMI设计中，我通常习惯把按钮按照类型、等级、状态、样式和尺寸五个维度分类，详见下图：

这里提供的是一种构建按钮体系的框架逻辑，这样子有助于我们构建出来的按钮能够涵盖所有场景，做到算无遗漏，但是当你去审视系统全量界面的时候，就会发现，我们不一定使用了上述所有的按钮类型，基本上用到一半类型就足够了，所以这就要求我们把上述分类作为指导，去构建我们的按钮体系，但是也需要结合实际情况有的放矢。毕竟构建的控件组件库是为了方便使用，里面存在大量从来不会出现的视觉样式只会增加使用成本，得不偿失。

比如在我的工作中，构建按钮样式，一般包含：品牌按钮、次级按钮、危险按钮、描边按钮、文本按钮、通用按钮。这基本上就够完成一个系统的全部按钮类型了，那么剩下的类型组合就没有体现在控件组件库中。

当按钮构建完成以后，就需要对使用到按钮的组件进行构建了，比如对话框、列表等组件，以对话框为例，根据有无标题、承载内容不同、按钮的数量三个维度进行分类。详见下图：

基于上述三个维度，对对话框进行构建，当有标题出现和无标题的情况下，layout布局显然是不一样的，所以需要定义好。针对文本，当出现单行、双行、多行等情况，是否进行对齐关系的变化，在实际使用中，为了界面视觉美观，一般会对尺寸进行一定的定义，比如设置大、中、小三个尺寸，尽可能的减少不统一的现象。按钮直接调用上面构建好的按钮控件，是否区分主次，通过上述一系列的考量，构成出我们的对话框组件。

其他的控件组件构建大同小异，根据上述的方法可以帮助大家快速的搭建出一套控件组件库。剩下的部分就教给大家实践了……

Sketch和Figma的区别

那么我们该怎么使用设计软件构建控件组件呢？选用按钮为例：

在Sketch中我们把需要的按钮类型枚举出来，创建按钮体系。

在Figma中，同样如此，但是因为组件集（Variants）的存在，我们可以更加方便的进行多维度创建。

当我们把按钮创建完成，并且进行了合理的命名以后，在调用方式上不同的软件就会出现极大差别

在Sketch中，因为采用递进式的逻辑，所以需要一级一级的往下选择，直到找到我们需要的按钮样式。尤其是在进行按钮样式替换时候，也需要一级一级的选择。

但是在Figma中只需要选中按钮，右侧有按钮相关的各种属性，进行选择即可。这就是为什么很多人接触了Figma以后会觉得比Sketch好用很多。

通过在具体的设计软件中构建完整的控件组件，完成控件组件库的搭建，生成一份可以协同的设计文件，就可以供团队内小伙伴进行设计协同了。

设计说明文档搭建

设计说明文档主要是给设计师或者说是团队阅读的文档，里面主要是对每个控件组件进行了定义和说明，让人了解每一个控件组件。知道是什么和怎么用。

所以在搭建设计说明文档的时候，首先要定义每个控件，说明它是什么，然后基于我们的设计系统，描述控件的设计原则、用法和分类逻辑，让读者可以对这个控件有一个具体的认知，知道怎么用。比如下图是我针对按钮这个控件搭建的一个设计说明文档，可以让一个不懂的人清晰的知道，是什么，有什么，怎么用，以及当我发现现有的控件无法满足使用需要拓展的时候，提供一个设计指导方向。

开发说明文档搭建

不同于上述设计说明文档，这里主要说明的是构成控件元素的规则定义，以及对于一套设计系统来讲，不同的控件组件之间的关系。

如下图的按钮控件来讲，需要说明图标的大小、文本的选择、边距以及图标和文本的间距等不同的参数，这些不同的参数为的是保证代码对于视觉的还原度以及拓展性。

另外这份文档展示了控件之间的联系，比如文本和颜色，使用的是ID，通过这样的说明，加强不同的控件之间的联系，当有一个控件变化以后，可以及时的同步到调用了该控件的所有控件。

总结

本篇文章主要聚焦的是控件组件的搭建过程，并且通过具体的例子讲述了不同文档的具体搭建流程，希望可以帮助到你。

通过这一系统的文档的搭建，设计系统已经初具规模了，接下来我们要做的就是不断的完善我们的内容，强化彼此的关联，并且在实际使用过程中，查缺补漏，让这套设计系统更加的完备，更加的好用。

推荐阅读

如果对设计系统前面的内容有兴趣的读者可以点击下面的链接查看本人之前的文章，将会帮助你对设计系统有一个整体的认知。如果对相关话题有兴趣或者对内容有任何疑问，欢迎评论区留言、探讨，谢谢观看。

设计系统搭建全流程-认识设计系统

设计系统搭建全流程-开始搭建设计系统

设计系统搭建全流程-全局样式