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

2023-03-27 08:42:51

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

设计系统这个词，是近些年的一个热门话题，在初期的讨论关注点主要聚焦在是否有必要搭建？能否创造商业价值？毕竟这里面存在巨大的工作量，到现在被大多数公司和团队所接受，并且把一套完整的设计系统作为品牌宣传的重点，或是直接把设计系统作为商业变现的一种手段。看起来好像大家都已经接受了设计系统是必要的这一事实，但在实际工作中，笔者接触到的很多设计系统还是存在着这样或者那样的问题：

有的是为了规范而规范，一味的追求大而全，一眼看起来，哇，好多好细啊！但是在使用的时候就犯了难，两个控件都可以，比如：Switch 和 tab button 都可以表示开关，那么用哪个呢？或者两个颜色样式比较相近，用哪个都合适，这时就会发现，使用者因为无法确定使用哪个组件，陷入到无限纠结中，尽管用了设计系统，但是不仅没有提高效率，反而隐隐有种越来越慢的趋势。或者因为不同的组件用起来大差不差，那就随便用，反而造成了不统一的情况出现。

有的是设计系统不具有很好的拓展性，或者说当初在搭建设计系统的时候没有考虑全面，造成组件具有太多的限制而不能满足一些业务的需求，组件不适用的情况出现，或是设计师设计被设计系统所束缚的情况出现。那么设计师就会抛弃设计系统，让设计系统形同虚设，无法发挥作用。

不管是上述哪种问题的出现，都指向了一个事实：设计系统不好用。所以怎么搭建设计系统，并且可以让设计系统好用又易用，真正达到提高效率的目的。是需要把握一个"度"的。笔者想要通过这个设计系统搭建全流程的专题，和各位探讨怎么搭建一个"好"的设计系统。

接下来我们开始进入本专题第一篇的内容：认识设计系统。

一、设计系统提出的背景

当今社会，社会发展越来越快，我们每天不停的在汲取着各种信息，这就要求提供给用户的产品可以跟上用户的脚步，能够对需求快速响应，直达用户。

对于公司来讲，当公司发展到一定的阶段：

公司有不同的产品，且都需要长期的开发和迭代；
业务需求变动频繁，需要设计和研发快速响应；
越来越多的设计师加入公司。

当设计团队越来越大，大家分工越来越细，想法越来越多，就会发现，为了保证设计统一性，通过简单的复制粘贴 guide 的方式，已经无法满足团队的发展了，经常出现组件不能满足使用的情况，或者是组件相似但不知道怎么选择等问题。

并且因为没有统一的流程，会发现不同的业务对于同一功能交互逻辑的不统一现象，比如：搜索是很多业务都会使用的功能，因为没有统一定义，有的业务会采用即时搜索模式，有的业务必须点击搜索以后才可以进行搜索，并且这些问题，前期很难发现，只有到了中后期走查的时候才会发现。只能在后期针对每一个差异点进行统一，全流程重新梳理一遍，费时费力。

那么怎么做才可以避免这种情况的发生呢？答案就是构建设计系统。

二、设计系统是什么

简单来讲，设计系统就是一套行为规范，它包含了：设计理念、逻辑、设计指南、组件、图标、动效、音效、代码等多种内容，对于一个团队来讲，这更像是一个团队共享资源库，包罗万象，帮助公司各种产品的构建提供基准。

通过建立设计系统，让设计模块化、规模化，继而进一步强化系统的统一性，同时为设计师在做设计时提供一个很好的指导方向，让团队内不同成员的设计在风格上保持一致，提升设计团队的专业度。同时保证公司产品的统一性。通过产品让用户形成对公司的品牌印象，达到宣传公司的目的。

三、设计系统理论依据

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

1. 原子设计理论

由于设计系统是一套规则统一，架构严谨的规范，所以需要一个理论基础作为搭建的依据，而这就是我们今天要说的原子设计理论了，在网上有很多的关于原子设计理论的描述，在这里我就不再进行赘述了：

这里我简单概括一下原子设计理论就像化学元素组合一样：原子构成分子、分子构成组织，组织构成模版、模版构成页面。换句话说，该理论的重点就是通过最小的元素不停的进行组合，构成一些我们常用的组件、布局，满足设计师或是开发快速搭建界面的需求。而不需要每次都从最小的元素进行设计，最终的目的是为了提高设计的效率。

四、设计系统的价值

1. 设计规范化

由于公司的发展壮大，团队人员也会越来越多，那么每个设计师必然无法涉及到所有的业务线，设计师都专注于自己负责的业务模块，比如，有人负责系统设置，有人负责账号体系，有人负责商业化业务……这很容易导致不同的业务有不同的设计语言，尽管单个业务看起来没有什么问题，但是对于一个系统来讲，不同的业务之间差异巨大，就显得很不专业了。

所以通过设计系统的搭建，一方面使用统一的设计语言对每个设计师进行设计约束，通过使用统一的样式和组件库，让每个人的设计变得统一，极大的提升了团队的专业性。

同时由于搭建了统一的样式组件库，设计师和开发可以快速调用需要的组件或是代码，而不用进行重复设计。对于设计变更来讲，只需要进行样式组件库的更新，团队设计师就可以及时的进行同步更新，而不需要每个人都进行设计变更，极大的提升了设计效率。

2. 保障设计统一性，提供好的用户体验

因为设计系统建立了样式组件库、图标库等一系列规范，一致可复用的标准规范让设计变得更加统一，也更加的容易理解，同时因为规范的建立，不会再出现同一个搜索，两套不同的逻辑这种情况，增强了设计的可预测性，用户不用为了不一致的交互逻辑而增加学习成本。也可以让相关人员更加的专注于为用户提供更好的用户体验。而非视觉样式的调整。

3. 让设计得以传承

设计是需要延续的，对于一个团队来讲，人员变动也是难免的，所以经常会出现业务模块交接等情况，那么有一套完善的设计系统，可以让新接手的同学快速的了解我们的设计理念，设计语言，帮助新同学尽快的融入到团队中。同时也可以减少因为某一个人的离开，而导致的整个团队工作的无法开展。

4. 提高设计开发效率，快速迭代

通过设计系统的搭建，同时有了设计资源库和开发资源库，因为组件的可复用性，而不需要设计人员从头开始设计界面，开发人员也不需要从头开始开发界面。设计系统的存在，极大的减少了相关人员的重复工作量。尤其在版本迭代或者是样式迭代中，设计系统的好处更加的显而易见。

五、关于设计系统的思考

尽管看起来设计系统有那么多的好处，但是很多团队在推进时也遇到了不少的阻力。主要集中在以下这几个方面：

1. 限制太大，让设计师缺乏创造性

这个需要分为两方面来讲，一方面认为设计系统让设计师无法发挥创意，因为每个设计师，每个业务都期望去探索一些新的样式和交互逻辑，那么开发那里就充斥着各种不同的代码。如果使用了设计系统，设计系统的组件相互关联，那么对于视觉样式迭代或者是需求迭代，可以很容易的进行同步，并且保证软件稳定发版。但是如果每个业务代码都是不同的，那么这件事将会变的异常艰难，任何小的迭代都需要相关视觉和开发进行修改，由于代码逻辑的变更，很容易引起一些莫名的 bug，导致快速迭代变得不再可能。对于现在的商业环境来讲，得不偿失。请记住：设计的最终目的是为了解决问题，而不是艺术创作。所以设计系统可以快速的解决问题。

另一方面，对于某一些特定业务期望有一些特定的布局或者交互逻辑，我们可以进行评估，形成新的设计资产，通过反哺设计系统，生成新的组件模版，或者是优化当前的组件，让我们的设计系统变的越来越好用，越来越易用。不断的增强设计系统能力，也有助于形成一套完整的素材库。

2.设计系统由设计师独立完成

设计系统不止包含了样式组件，同时还有动效、音效、代码等很多内容，这是需要不同团队紧密协作的，比如：产品、交互、开发、动效设计师……越多的角色参与其中，那么搭建的设计系统就越完善，越好用。比如：button，设计师定义它的样式和类型：分几种，各是什么颜色；交互设计师定义button的交互逻辑：是点击响应还是按压抬起响应；动效设计师定义button得按压动效；声效设计师定义是否需要声音反馈等，然后开发根据形成的文档进行代码化，那么实现出来的button就包括了完整的样式、逻辑，动效、声效。那么使用者直接调用就可以了，不需要添加任何逻辑，那么未来迭代只需要底层代码进行样式的更新、动效风格的更新、声效的更新，业务开发不再需要进行任何操作，可以极大的节省迭代时间。

3. 设计系统是一次性的

设计系统应该是动态的，变化的，随着搭建完成，就需要根据需求或者反馈不断的进行维护，要知道设计系统的目的是为了让提高效率，所以设计系统要不时的进行更新，要多与各个业务、不同部门，不同角色进行沟通，或者对市面上的其他产品进行竞品分析等，通过不断的推陈出新，让设计系统更好的服务于产品。同时也更加容易规模化和品牌化。