设计系统搭建全流程：开始前的准备工作

扫一扫
官方手机版

扫一扫
AI创作程序

扫一扫
木子公众号

扫一扫
AI公众号

上一篇文章我们主要讲的是设计系统的必要性，接下来我将会继续用后续的文章详细讲解怎么搭建设计系统，希望可以帮助到有需要的人。

上篇回顾：

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

设计系统这个词，是近些年的一个热门话题，在初期的讨论关注点主要聚焦在是否有必要搭建？

在开始之前，我需要先解释一个问题：

为什么要制作自己的设计系统

很多团队一提到搭建设计系统，就会有人说，网上有很多公开的设计系统，我们直接使用现成的不好吗？为什么要费时费力的搭建自己的设计系统，真的有必要吗？

首先，网上公开的设计系统，一般是指该企业的设计语言，是该企业产品的设计基石。但是这并不适用于所有的团队，比如，笔者所在行业是 HMI 行业，但是网上的设计系统基本上都集中在 pc 端，那么就有很多的规则无法在 HMI 设计中使用，毕竟设计系统的建立是为了提高效率，不能使用或者不合适的设计系统很有可能对设计造成阻碍。

如果对网上公开的设计系统了解多的话，就会发现，很多的设计系统对研发更加友好，但是并不适合设计师使用，它更多是一个说明文档，让别人看的，但不能用。所以对于一定规模的团队来讲，搭建自己团队的设计系统就势在必行了。

一、如何搭建设计系统

1. 搭建重点

要有全局观，创建的设计系统要是可维护的，可迭代的，要保证设计系统的适应性。

凡事有度，不要追求大而全，要根据公司产品，创建合理的设计资产，毕竟设计系统为的是更好用，提高效率。

2. 搭建流程

由于设计系统搭建需要多角色、多部门协作，如果公司或者团队无法组建一个完整的设计系统团队，那么我们就需要循序渐进，慢慢扩展设计系统的边界，让设计系统逐渐成长，完善。

一般来讲，刚开始搭建设计系统的是设计师和开发人员，以设计师为主，梳理当前业务的完整页面，提炼相同的元素，构成初版的设计系统，并在构建期间，和开发紧密协作，及时沟通。对设计出的组件进行代码化，同步搭建研发的基础组件库。当完成以后，可以加入动效规范、声效规范、图标规范……逐步的去完善设计系统，最终形成团队的设计资产库。

3. 使用工具

由于笔者是 HMI 设计师，所以只针对设计师在用的工具进行简单描述，其他角色的工具就不进行缀续了。

对于目前的设计师来讲，用得最多的就是 Sketch 和 Figma 了，Sketch 对于 UI 设计师来讲大都非常熟悉，Figma 更是最近几年设计协同的利器，虽然这两个软件都是设计软件，但是由于这两个软件底层逻辑并不相同，所以在制作设计师的样式库和组件库时略有不同，如果后续有必要的话，我会专门出一篇文章来讲解怎么用 Sketch 和 Figma 创建 UI 控件组件库。

二、设计资产

随着设计系统逐步完善，设计资产也会越来越多，最开始是 UI Kit 和开发代码库。然后慢慢扩展设计系统边界，增加其他内容。总的来讲，包含以下内容：

1. 设计价值观及原则
2. 样式库
3. 控件组件库
4. 设计说明文档
5. 开发说明文档
6. 图标库
7. 动效
8. 声效
9. ……

三、设计语言

为了让设计系统可以保持统一性和延展性，那么必须要有一个统一的设计指导理念，让每一个使用者可以通过设计语言，明确我们的设计目标和方向，减少设计中出现的偏差。所以对于一个设计系统来讲，提炼自己的设计语言是必要且有效的。

下面可以先看一看一些公开的设计系统的设计语言：

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 行业做设计师的，所以很多内容是具有很强行业特性的，大家不必完全保持一致，可以根据自己具体的团队和实际情况进行适当调整。还是那句老话，设计系统是为了提高效率。所以好用、易用是我们的一切出发点。接下来我们就进入到设计系统的详细设计阶段了，敬请期待！