编辑导语：随着互联网行业的发展，产品体验的一致性和开发的效率越来越被重视，设计系统的出现就是为了解决这样的问题。一套优秀的设计系统有利于帮助产品在各个平台保持一致的设计语言和风格，给用户一致的产品体验。本文将从设计系统的概念、来源、作用和具体搭建4个方面，对设计系统进行梳理分析，与大家分享。

相信很多互联网设计师在近几年慢慢的接触到聊“设计系统”这个词，且这个词也一直在“进化”，设计系统在企业运用中被越来越重视，随着互联网行业的聚变式发展，网站 UI 构建也经历了“体验一致性”、“设计效率”、“UI系统构建/应用效率”、“多端适配” 等诸多问题。许多人认为构建一套设计系统（Design System） 是解决企业级用户体验规模化问题的关键。

我们需要从体验工程视角将设计与前端看成一个整体系统化的制定设计系统。

而当业务演进到 “平台化、垂直市场、采购市场” 阶段时，UI 也面对了更多的问题和挑战：“周期性业务的品牌更新”，“不同品牌的多种垂直业务同期构建”，“众多相似的后台系统构建”，“跨业务/部门的设计、前端协作问题”。

面对这些问题，体验工程的建设已经远远不止于一套设计规范或一套组件库，他需要一套完整的系统来支撑，解决内部协作的一致性问题，解决设计系统更新的周期性问题，解决一群设计师与工程师如何规模化的生产各种业务 UI 的问题，从而最终解决用户体验一致性的问题。

01 设计系统是什么？

我们先来看下百度是怎么描述设计系统的？

“系统设计是根据系统分析的结果，运用系统科学的思想和方法，设计出能**限度满足所要求的目标 (或目的) 的新系统的过程。系统设计内容，包括确定系统功能、设计方针和方法，产生理想系统并作出草案，通过收集信息对草案作出修正产生可选设计方案，将系统分解为若干子系统，进行子系统和总系统的详细设计并进行评价，对系统方案进行论证并作出性能效果预测”

还是不太理解？

简单点说：设计系统包括完整的设计价值观和原则、设计标准、场景定义 以及一套工具包，用于搭建和组合产品与服务。它是一套解决方案。

02 设计系统的来源？

2013brad frost发表的ATOMIC DESIGN：

Atomic design来源于我们之前学过的化学元素表，我们肉眼所见的东西都是由这些原子（atoms）构成，然后原子在构成分子（Molecures），分子再组成更复杂的组织(Organisms)。不让带认为界面也是如此，有一个最小元素，一层层组合出新的、更大的单元。

举个例子：

模块：商标+住导航模块+搜索+个人信息 =页眉

了解了基本的原子理论，我们再来看下蚂蚁金服的设计系统：

可以看到；

蚂蚁金服的设计系统可分解成：设计资源+体验策略+设计价值观和原则+工具化，这些基本的元素组成了强大的蚂蚁金服设计系统。

03 设计系统有什么作用？

设计系统包括完整的设计价值观和原则、设计标准、场景定义以及一套工具包（UI 模式库和代码），用于搭建和组合产品与服务。鼓励岗位之间的合作，减少沟通障碍。一个好的风格指南可以帮助设计人员和开发人员了解他们工具箱的工具，并为如何正确使用他们提供规则和最佳实践。学会理性的方式来做设计，养成良好的设计习惯。

1）设计高效率：快速了解产品设计全貌（包括设计原则、风格，样式、组件）多人协作如Google docs共享的方式高效。

2）协作高效率：对齐研发的实现距离单位，高还原度，及跨学科跨岗位间的高效沟通。共享的词汇表，有用的文档使测试更容易，并作为未来协作友好的基础。

04 如何搭建设计系统？