上一篇文章我们主要讲的是设计系统的必要性，接下来我将会继续用后续的文章详细的讲解怎么搭建设计系统，希望有机会能够帮助到有需要的人。在开始之前，我需要先解释一个问题：

  很多团队一提到搭建设计系统，就会有人说，网上有很多公开的设计系统，我们直接用现成的不好吗？为何需要费时费力的搭建自己的设计系统，真的有必要吗？首先，网上公开的设计系统，一般是指该企业的设计语言，是该企业产品的设计基石。但是这并不适用于所有的团队，比如，笔者所在行业是HMI行业，但是网上的设计系统大多数都集中在pc端，那么就有很多的规则无法在HMI设计中使用，毕竟设计系统的建立是为了更好的提高效率，不可以使用或者不合适的设计系统有很大的可能性对设计造成阻碍。如果对网上公开的设计系统了解多的话，就会发现，很多的设计系统对研发更加友好，但是并不适合设计师使用，它更多是一个说明文档，让别人看的，但不能用。所以对于一定规模的团队来讲，搭建自己团队的设计系统就势在必行了。

  要有全局观，创建的设计系统要是可维护的，可迭代的，要保证设计系统的适应性。凡事有度，不要追求大而全，要依据公司产品，创建合理的设计资产，毕竟设计系统为的是更好用，提高效率。

  由于设计系统搭建需要多角色、多部门协作，若公司或者团队无法组建一个完整的设计系统团队，那么我们就需要循序渐进，慢慢扩展设计系统的边界，让设计系统逐渐成长，完善。通常来说，刚开始搭建设计系统的是设计师和研发人员，以设计师为主，梳理当前业务的完整页面，提炼相同的元素，构成初版的设计系统，并在构建期间，和开发紧密协作，及时沟通。对设计出的组件进行代码化，同步搭建研发的基础组件库。当完成以后，能加入动效规范、声效规范、图标规范……逐步的去完善设计系统，最终形成团队的设计资产库。

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

  随着设计系统逐步完善，设计资产也会慢慢的多，最开始是UI Kit 和开发代码库。然后慢慢扩展设计系统边界，增加另外内容。总的来讲，包含以下内容：设计价值观及原则样式库控件组件库设计说明文档开发说明文档图标库动效声效……

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

  苹果的设计规范包括：完整性，一致性，直接操作，反馈，隐喻，用户控制等几个设计原则。

  Arco Design 基于「清晰」、「一致」、「韵律」和「开放」的设计价值观，试图建立务实而浪漫的工作方式。

  TDesign 为了在开源体系的基础上打造具有自身品牌特色且好⽤的产品，秉承包容、多元、进化、连接的价值观。

  通过对上述公开的设计语言的学习，我想大家都应该对设计语言的必要性和内容有一定的了解了，那么在开始做设计系统搭建之前，先为你的设计系统构建专属于你的设计语言吧。

  接下来我们就进入到设计系统的具体设计了，对于那么多的设计元素，我们该怎么进行分类呢？由于业务组件和元素划分完全取决于不同公司的实际的需求，并无定式，所以我这里说的组件库划分主要指基础组件库的划分。并且并不一定适合所有团队。仅供参考。接下来我们先来看下一些设计系统的组件划分：

  Ant Design的组件划分为：通用组件，布局组件，导航组件，数据录入和数据展示组件，反馈型组件、其他组件和重型组件。TDesign的组件划分为：基础组件、布局组件、导航组件、输入组件和数据展示组件、消息提醒组件。Arco Design的组件划分为：通用组件，布局组件，数据录入和数据展示组件，反馈型组件、导航组件和其他组件。……这些分类都是非常合理的划分，所以我们在设计组件库时可以借鉴或者直接用。不过这里我想提一些不同的意见，因为组件库的分类主要是为了好用，便于识别，虽然上述的分类标准很清晰，但是也出现了过于详细的问题，那么我们在找一些需要的控件组件的时候，就需要先去思考它属于哪个分类下，所以要团队内的成员对组件库的分类标准非常清晰，并且对于每个控件组件的归类也非常清晰。在我构建组件库的分类时，为了尽可能的减少使用者的学习成本，所以用最简单的分类方式来进行划分：全局样式、基础控件和系统组件三种分类。

  通过简单的进行分类，大家不要增加学习成本，可以越来越好的找到需要的控件组件，方便调用，也方便于资源库的推广。以上只是我这些年工作的经验之谈，仅供参考。

  本篇文章主要是想要和大家讲述下具体搭建设计系统之前的工作，不管是设计语言还是组件库分类，都是为了让我们的设计系统搭建的更具有逻辑性。所以还是很有必要的，但是由于笔者是在HMI行业做设计师的，所以很多内容是有着非常强行业特性的，大家不必完全保持一致，能够准确的通过自己具体的团队和真实的情况进行适当调整。还是那句老话，设计系统是为了更好的提高效率。所以好用、易用是我们的一切出发点。接下来我们就进入到设计系统的详细设计阶段了，敬请期待！