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

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

上篇回顾:

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

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

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

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

收藏 165
点赞 42

复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。