（截图自蚂蚁金服SEE Conf 2019，说明中后台的需求正在变得越来越多。）

近几年来，人们对中后台产品的要求越来越高。从最开始的能用就行，到后来逐渐开始重视设计和体验，到现在谋求体验一致性和更高的效率。企业级产品的设计系统就是帮助企业体系化加速中后台产品产出的一套整体解决方案。设计师和工程师能直接参与制作的项目十分有限，但是通过设计系统重塑工作流，可以间接完成“无限多”的项目。我在参与构建设计系统的工作中时常在想，如果设计系统做到极致会怎么样？可能就像现在全自动生产的流水线一样，设计系统自动提取组件拼搭页面，转化为代码上线，然后设计师和工程师就有新的职能了。

一个企业发展到一定阶段，必然需要许多中后台产品来支撑前台产品安全稳定的运行。例如IM即时通讯、ERP流程管理系统等保障公司内部运转和方便公司管理的平台，例如进销存系统等保障公司业务运营的平台，可以说数量和体量都很庞大。

庞大就容易产生混乱和臃肿。如何统一整个公司的产品体验，避免重复工作优化工作流程就成为当务之急。设计系统的意义在于减少了许多设计师和工程师从0-1的工作量。设计师设计了一份组件样式，开发工程师用代码实现了一遍，之后只要不断复用优化即可。项目的数量越多，节约的工作量就越多。一套良好的设计系统可以使产品用组件快速搭建原型，快速响应用户需求；使设计师不再重复绘制页面，而是有更多的精力放在用户调研，提升体验，情感化设计上；工程师不再重复敲代码，而是有更多时间去优化性能，梳理业务逻辑。

规范指南只有随着项目更新优化才有价值。但是规范指南这种静态文档的形式，很容易被版本的迭代，人员的流动，技术革新导致用户体验方式的改变等因素阻碍更新。甚至一些设计师在设计界面的时候并没有更新优化设计规范的意识，而是把重心放在完成当前的任务。随着时间的推移，规范指南和项目的差距越大，重整规范指南的工作量和阻力也越大，规范指南就越来越没用了。

设计系统的风格指南一般会更严谨，定义的更全面，包含的组件更丰富。同时，设计系统有一套组织架构和工作流程来保证，设计系统随着项目的进展在不断的进化。“设计系统指导我们进行产品设计，我们的产品设计也反过来告诉我们如何完善设计系统。”

（截图自bootstrap的组件库，前端框架和设计系统的区别在于，前端框架让用户直接使用，而设计系统还会教育用户，告诉用户为什么这么干。）

早期的中后台产品都不需要设计师，而是由前端工程师直接实现。

在我刚毕业的时候，做过一段时间的前端。当时我是用bootstrap搭建页面。用bootstrap的框架已经默认适配大部分浏览器，并且他的响应式布局还可以自适应多端。但是在使用的过程中，发现他的组件库不全，样式也比较丑。而我就要不断的修改验证他的组件，不仅麻烦还容易报错。多年后我在参与组件设计中时时感觉，我们其实在和工程师做一个更好的UI框架。

是的，相对于其他产品，企业级产品更需要设计师和工程师通力合作。而不是设计师画好页面，丢给工程师让他们无损还原。因为中后台产品的体量一般都比较大，一个组件多一行代码，那整个产品就会多出无数行代码。代码冗余必然会影响性能。所以纵观各家中后台产品，在设计感的体现上都非常克制，可以用代码直接写的都尽量用代码写。设计师和工程师要从美观、体验、性能上平衡出一套最优的方案。

（在这里提一下《原子设计》这本书。“ 作者Brad Frost把由原子、分子、有机体、模板和页面共同协作以创造出更有效的用户界面系统的一种设计方法。 ”大部分后来产品的设计系统的构建，都有用到这种模块化的设计思路。）

上图是我根据自己的理解对设计系统做一个简单的示例。其实根据公司的规模和目标不同，每个设计系统包含的内容可能都不一样。但是只要设计系统能够解决实际问题，提升一致性和效能，就是有意义的。

1.设计语言

（截图自lightning design system的设计原则，这个系统是服务于Salesforce的 SaaS平台类产品，他们的目标就是为客户提供高效率，高质量的服务，所以他们把清晰的，高效的，一致的作为他们的核心设计原则。 ）

在前期的准备工作中我们要明确设计系统服务的项目的特点和目标。然后收敛出最能体现项目特质的关键词和原则，像道家中说的：一生二，二生三，三生万物一样，指导后续设计开发等一系列工作。也就是说确定设计语言等于确定接下来工作的决策依据，也决定了设计指南最后呈现的形态。

其实设计系统从大的分类上可以分成两种，一种是像Material Design，他是面向所有行业，所有领域的。比如Material Design的设计原则之一：Material is the metaphor。（材料是隐喻）。看起来又高深又抽象。只有立意高远才可以包容各行各业。Material Design从物理中抽象出了投影、加速度、质感搭建了他们独特的材料世界。而用户利用这个材料世界做出来的产品也是各式各样的。还有一种就像我们企业级产品的设计系统一样，面对具体的业务，例如金融行业，教育行业，有非常明确的行业特性。那我们在制定设计语言的时候就简单很多，从优先级最高的项目目标，用户痛点中就可以提炼出设计原则了。

2.设计风格

（截图自Ant Design Pro ，一键换主题色，生动形象的展示了配色对产品整体气质的影响。  ）

设计风格就是设计产出给人带来直观的视觉感受，是从其他竞品脱颖而出的明确气质。在中后台产品中，配色、布局、字体字号等就奠定了整个界面的风格基调。那我们就可以根据项目的业务属性，通过改变配色、布局、字体字号等来给项目定制独特的视觉效果。通过Design Token（设计变量）进行快速全局视觉迭代。

3.组件库

（截图自Ant Design 的sketch组件库，对组件进行合理有序的排列方便用户查找服复用也是很有必要的。  ）

web发展了这么多年，人们对基础组件的样式和功能已经非常熟悉了。基础组件，例如按钮，开关，单选框，复选框，标签等等，是组成页面最基础的元素。

业务组件是把基础组件根据具体的业务需求进行组合，在页面中呈区块级展示。比如内容编辑器，卡片组展示。

而功能模版则是从实际项目中抽象出来的常见功能，例如dashbord，详情页，表单页。

业务场景是从实际项目中抽象出来的典型流程，例如登陆注册流程，购买流程等。

组件（包括基础组件和业务组件）要尽量全面可以覆盖所有项目。组件设计不要局限于具体页面，而要从整个项目全局来设计。而模式（包括功能模版和业务流程）一方面启发用户如何用组件搭建模版，给老板展示用组件搭建的效果。另一方面提供了一类问题的解决方案。这非常考验设计师的抽象能力，对多场景兼容性的优化能力。比如详情页，一个公司可能有十种不同布局的详情页，设计师要考虑如何梳理详情页的信息架构，让详情页模板尽可能兼容不同场景。

如果组件库中的每部分都是经过深思熟虑斟酌过的，那即使是没有设计基础的工程师用组件库来搭建页面，质量都不会差。

4.工作流

设计指南是一堆sketch 源文件，PDF，开发文档。而工作流则保证在这些物料优质产出后，能提供一个环境，让设计指南能够保持实时更新状态。a）设计系统的周期非常长，而且无法像具体项目一样短期可以看到回报。根据公司的体量合理配置人员。虽然说设计系统需要专职人员去构建和维护，但是专职设计师也需要深入项目，一方面是保证设计指南是来自实际项目，一方面又可以在实际项目中快速验证新的产出。b）设计系统的产出是依靠工具得以沉淀。一个是设计师和工程师各自在工作时所用的提高效率的工具，一个是设计师和工程师跨部门合作所用的共享平台。例如阿里就投入时间精力来研发设计辅助工具和前端开发工具。c）在前期就要制定好产出和审核的流程来保证质量。

对想要参与企业级产品的设计师，我总结了几个关键词。

1.沉淀

中后台产品的设计应该是规整严谨的。这种规整来自深思熟虑每个像素。往往视觉冲击力强的作品会掩盖细节，而制作一个规整精良的按钮也是足见功力。

基础知识沉淀，例如有哪些组件，这些组件的使用场景，出现异常情况应该如何表现，有没有极限情况。用户体验沉淀，有较强的用户体验意识，可以准确判断产出是否合理。

累计了一定的经验，沉淀了一定的深度思考，就可以作出正确的决策，在体验层面上达到一定的水平。并且设计指南的各个环节是层层推进的，一个环节的失误都会导致很大的返工工作量。

2.下定义

为了跨部门识别和运用，设计师需要给每个组件模板场景命名。还要一一描述他们的使用场景，给他们写说明书。这需要有精准概括的能力。用尽量少的篇幅，让用户立刻理解他们面对的是什么，要如何使用。

3.抽象归纳

中后台实际项目的量级非常大，要从浩瀚的页面中收集同类的组件和模板，再从中抽象出可以兼容各个场景的新的布局和功能。需要对整体信息结构的逻辑，以及每个元素存在的意义有清晰理解。如果抽象出的组件和模板使用率很低就比较尴尬，如果需要项目方进行较大的改动也很尴尬。

4.协作

中后台系统是一个多人合作不断迭代的产品。设计师的设计源文件经常要给其他同事继续使用。那么源文件的图层及命名应该清晰有条理。跨部门沟通也是常有的事。设计师要逻辑清晰的表达自己的设计观点，锻炼自己说服他人的能力，让其他同事理解，赞同，配合工作。

5.工具

中后台系统需要一个对团队协作友好，避免重复性工作的工具。目前sketch是设计软件中最适合的。sketch有sketch cloud可以和团队成员共享最新文件。在Sketch 中可以把组件创建为Symbol，在迭代的时候直接修改symbol就可以实时全局更新。Sketch还有很多功能强大的插件来提高团队效率。甚至阿里的中后台Fusion都把组件库搭载在Sketch 的插件中。设计指南本身有大量的重复性工作，如果能通过工具来降低创建和迭代的阻力，就可以使整个系统更好的保持活力。

6.英语

在国外的设计系统发展的相对比较成熟，很多大厂都构建了非常优质的设计系统，像IBM（Carbon Design），Google（Material Design），SAP（Fiori Design）。还有很多相关英文书籍也都干货满满，但是目前好像连《Design System》都还没有中译本。如果能把这些都学透了，一定会有巨大的收获。以及设计系统发展到后期，可能会升级到国际版。掌握英语也会是一个优势。

就我个人的体验来说，我觉得参与设计系统的构建是很有意义的。一方面是放大了设计师的价值，一个优质的设计系统可能被成千上万个项目使用，未来还有可能改变生产关系；一方面是设计师如果养成体系化思考问题的思维能力，看世界都更深刻了呢。在这个浮躁的社会中生存，希望我们都能耐得住寂寞，潜心耕耘。加油鸭～