设计系统搭建全流程 ：开始前的准备工作
在开始之前 ，我需要先解释一个问题 ：
为什么要制作自己的系统设计系统
很多团队一提到搭建设计系统 ，就会有人说 ，搭建的准网上有很多公开的全流设计系统 ，我们直接使用现成的程开不好吗 ？为什么要费时费力的搭建自己的设计系统 ，真的备工有必要吗？
首先 ，网上公开的设计始前设计系统 ，一般是系统指该企业的设计语言 ，是搭建的准该企业产品的设计基石。但是全流这并不适用于所有的团队 ，比如 ，程开笔者所在行业是备工 HMI 行业 ，但是设计始前网上的设计系统基本上都集中在 pc 端 ，那么就有很多的系统规则无法在 HMI 设计中使用，毕竟设计系统的搭建的准建立是为了提高效率 ，不能使用或者不合适的设计系统很有可能对设计造成阻碍 。
如果对网上公开的设计系统了解多的话 ，就会发现 ，很多的设计系统对研发更加友好 ，但是并不适合设计师使用，它更多是一个说明文档 ，让别人看的 ，但不能用。所以对于一定规模的团队来讲 ，搭建自己团队的设计系统就势在必行了 。
一 、如何搭建设计系统
1. 搭建重点
要有全局观 ，创建的设计系统要是可维护的 ，可迭代的 ，要保证设计系统的适应性 。
凡事有度 ，不要追求大而全，要根据公司产品 ，创建合理的设计资产 ，毕竟设计系统为的是更好用，提高效率 。
2. 搭建流程
由于设计系统搭建需要多角色、多部门协作 ，如果公司或者团队无法组建一个完整的设计系统团队 ，那么我们就需要循序渐进，慢慢扩展设计系统的边界 ，让设计系统逐渐成长 ，完善。
一般来讲 ，刚开始搭建设计系统的是设计师和开发人员 ，以设计师为主 ，梳理当前业务的完整页面，提炼相同的元素 ，构成初版的设计系统 ，并在构建期间 ，和开发紧密协作 ，及时沟通 。对设计出的组件进行代码化 ，同步搭建研发的基础组件库 。当完成以后 ，可以加入动效规范 、声效规范 、图标规范……逐步的去完善设计系统 ，最终形成团队的设计资产库 。
3. 使用工具
由于笔者是 HMI 设计师 ，所以只针对设计师在用的工具进行简单描述 ，其他角色的工具就不进行缀续了 。
对于目前的设计师来讲 ，用得最多的就是 Sketch 和 Figma 了 ，Sketch 对于 UI 设计师来讲大都非常熟悉，Figma 更是最近几年设计协同的利器 ，虽然这两个软件都是设计软件，但是由于这两个软件底层逻辑并不相同，所以在制作设计师的样式库和组件库时略有不同 ，如果后续有必要的话 ，我会专门出一篇文章来讲解怎么用 Sketch 和 Figma 创建 UI 控件组件库 。
二 、设计资产
随着设计系统逐步完善 ，设计资产也会越来越多，最开始是 UI Kit 和开发代码库 。然后慢慢扩展设计系统边界 ，增加其他内容 。总的来讲 ，包含以下内容 ：
- 设计价值观及原则
- 样式库
- 控件组件库
- 设计说明文档
- 开发说明文档
- 图标库
- 动效
- 声效
- ……
三、设计语言
为了让设计系统可以保持统一性和延展性 ，那么必须要有一个统一的设计指导理念 ，让每一个使用者可以通过设计语言 ，明确我们的设计目标和方向 ，减少设计中出现的偏差。所以对于一个设计系统来讲 ，提炼自己的设计语言是必要且有效的 。
下面可以先看一看一些公开的设计系统的设计语言：
1. Microsoft Design
Fluent Design System 组成构件的设计理念就是 ：Light, Depth, Motion, Material, Scale.
2. Apple Design
苹果的设计规范包括 ：完整性 ，一致性 ，直接操作 ，反馈，隐喻，用户控制等几个设计原则。
3. Ant Design
Ant Design 设计价值观包括自然、确定性、意义感 、生长性 。
4. Arco Design
Arco Design 基于「清晰」 、「一致」 、「韵律」和「开放」的设计价值观 ，试图建立务实而浪漫的工作方式 。
5. TDesign
TDesign 为了在开源体系的基础上打造具有自身品牌特色且好⽤的产品，秉承包容 、多元 、进化 、连接的价值观 。
通过对上述公开的设计语言的学习，我想大家都应该对设计语言的必要性和内容有一定的了解了 ，那么在开始进行设计系统搭建之前 ，先为你的设计系统构建专属于你的设计语言吧。
四、组件库分类逻辑
接下来我们就进入到设计系统的具体设计了 ，对于那么多的设计元素 ，我们该怎么进行分类呢 ？由于业务组件和元素划分完全取决于不同公司的实际需求 ，并无定式 ，所以我这里说的组件库划分主要指基础组件库的划分。并且并不一定适合所有团队。仅供参考 。
接下来我们先来看下一些设计系统的组件划分 ：
Ant Design 的组件划分为：通用组件 ，布局组件 ，导航组件 ，数据录入和数据展示组件 ，反馈型组件 、其他组件和重型组件 。
TDesign 的组件划分为：基础组件 、布局组件 、导航组件、输入组件和数据展示组件 、消息提醒组件 。
Arco Design 的组件划分为 ：通用组件 ，布局组件 ，数据录入和数据展示组件 ，反馈型组件、导航组件和其他组件 。
……
这些分类都是非常合理的划分 ，所以我们在设计组件库时可以参考或者直接使用 。不过这里我想提一些不同的意见 ，因为组件库的分类主要是为了好用 ，便于识别 ，虽然上述的分类标准很清晰 ，但是也出现了过于详细的问题 ，那么我们在找一些需要的控件组件的时候 ，就需要先去思考它属于哪个分类下 ，所以需要团队内的成员对组件库的分类标准非常清晰，并且对于每个控件组件的归类也非常清晰 。
在我构建组件库的分类时，为了尽可能的减少使用者的学习成本 ，所以用最简单的分类方式进行划分 ：全局样式、基础控件和系统组件三种分类 。
通过简单的进行分类 ，大家不需要增加学习成本 ，可以更好的找到需要的控件组件 ，方便调用 ，也方便于资源库的推广 。以上只是我这些年工作的经验之谈 ，仅供参考 。
总结
本篇文章主要是想要和大家讲述下具体搭建设计系统之前的工作 ，不管是设计语言还是组件库分类 ，都是为了让我们的设计系统搭建的更加具有逻辑性。所以还是很有必要的 ，但是由于笔者是在 HMI 行业做设计师的 ，所以很多内容是具有很强行业特性的，大家不必完全保持一致 ，可以根据自己具体的团队和实际情况进行适当调整 。还是那句老话 ，设计系统是为了提高效率 。所以好用 、易用是我们的一切出发点 。