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

2026-07-21 19:01:35/探索/5 阅读

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

在开始之前,我需要先解释一个问题 :

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

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

首先,网上公开的设计始前设计系统,一般是系统指该企业的设计语言,是搭建的准该企业产品的设计基石 。但是全流这并不适用于所有的团队  ,比如 ,程开笔者所在行业是备工 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 行业做设计师的 ,所以很多内容是具有很强行业特性的 ,大家不必完全保持一致 ,可以根据自己具体的团队和实际情况进行适当调整。还是那句老话 ,设计系统是为了提高效率 。所以好用、易用是我们的一切出发点。

#免责声明#

本站提供的一切资源、教程和内容信息仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络收集整理,版权争议与本站无关。