了解 Design System，看这篇就够了

成功建立有效的设计系统并持续维护已经是业内一个组织是否在创新文化方面成功/及格的标志。本文作者从自身工作经验出发，结合实际案例，对设计系统的意义、具体设计方法和注意要点进行了总结，希望对你有用。

Design System是不可能一篇讲完的，实际上根本不可能讲完。因为design system相关技术、建设方法、对应要求等都在一直变化，各位看官容小弟在这里浅谈一下算了。

一、什么是design system（设计系统）?

相信今天从事互联网产品设计的朋友们听说过，尤其是UI设计师、前端工程师。不过如果你打算举手并交出你的sketch控件库😐，那么可能还是需要进修一下。成功建立有效的设计系统并持续维护之已经是业内一个组织是否在创新文化方面成功/及格的标志。在不同的产品属性、生命周期导致的不同语境之下，设计系统的定义可以非常不一样，我以能够对产品团队输出实际价值的角度去定义设计系统的关键组成的话，它至少应该起到以下作用：

1. 对于统一的、不断补充、丰富甚至修正的设计语言有完整的描述
2. 保证高质量产出的前提下，能够为设计流程、代码落地过程提速
3. 把设计样式和代码对应到一起的系统结构

二、制作design system的意义何在?

从2017年开始接触并且在一家全球五百里面瞎弄过些（对~不止一个所以是“些”）设计系统。因为有吐槽嫌疑就不明言了，毕竟学习、试错过程谁都可以有，个人也罢部门也罢公司也罢。之前在微软也参与过Bing的new branding refresh，不过如果用现在的设计系统标准看，那仅仅是设计层面的设计语言总结、控件规范的那一部分，再强调一次，这些还不算是设计系统，去面试的时候别拿一套控件库出来就瞎比比，专业领域里面有术语的变化肯定是有原因的，而且那个原因极少是“逼格更高”，认清这一点才算有了持续进步的门票。

相信很多团队对于设计系统都经历过因为“人有我有”的根本原因而发起过甚至建成了形形色色的设计系统，有个内容丰富的网站，满满的小字号文案、分门别类的控件库、页面模板以及不管用不用反正这里有的对应代码。对了，还需要有个trendy的名字。

没有实际意义的设计系统一般有特征如下：建立完成了之后，一直就岁月静好地躺着，没有更新；流量不大，展示时会被打开一下，但是鲜有设计师点开（可能刚到岗下载完控件库文件就没有然后），团队里面的前端工程师更甚可能连网址都记不住。好了吐槽完毕，以下净说好话。

其实设计系统的意义从一开始被提出概念时就已经非常明确。整体设计有所沉淀之后，设计样式抽象出复用性、前端根据所用框架制作可复用（并真实被一直复用）代码，达到省却设计、前端重复用力，从最终落地效果去保证设计一致性。理论基础是atomic design，出色例子有air BnB的驰名国内外设计系统、salesfoce的Lightning Design System，当然还有国粹Ant Design，这些你都知道了。

至于行业环境基础，我自己的总结是任何一个在某垂直做大做精的产品，都会有许许多多类似但是又有那么丁丁点点的必要差异化需要照顾，参照一下中台功能带来的变革就是为了避免重复造轮糟蹋人力一样，难道作为设计师/前端工程师的你真希望人力在无尽的岁月里头，把精力耗在“改个字段”、“加个输入框”之类的需求当中？你乐意养老，公司还不愿意养会用sketch的流水线工人。

所以致亲爱的领导们，如果你的百人团队做出来的产品，怎么老会出现类似同是一个确认键但是在这和在那总是有点什么不一样，然后明明人已经那么多了还是天天要加班，设计师/前端工程师还天天黑眼圈脸泛黄一副欲求不满的鬼样，估计是设计系统没有做好也没有用起来。

设计系统真做起来了之后怎么办？多出来的人力怎么办，难道裁掉吗？在这一步之前，还有很多让员工如沐春风朝气蓬勃并且对产品有大裨益的事可以做的，例如多出来的设计人力做用户调研，前端技术日新月异随时掌握了个降维打击的新展现层技术让你的产品鹤立鸡群也不是没可能。

但是设计系统不是一个解决了有和无就完事儿了的组织层面任务，如果不因地制宜去做肯定是无用功。我保证牢骚发到这一行字为止。

这几年新的UI设计技术手段，我自己的总结都是在两方面发展与用力：做出比真产品还要真（这是个笑话，当然）的prototype变得越来越容易；设计协同（设计师 与 设计师、设计师 与 开发工程师）越来越科学理性与流程化。而设计协同方面，各大工具作出的一个个努力（或者说一些让你觉得一定要买买买的feature们）最终沉淀下来都必将指向一套真正有效的design system。不管你是否有意识而为之。

三、一个设计系统包含了什么

网上找来的绝世武功的目录。所谓该有不该有都有了。每一个具体的话题你都可以无止境地深挖，而且每一个类别认真做的话都有无穷尽可以做的事。但是我们实际要做的结合自己产品、组织之中的实际需要，再参考别人的总表去规划自己的设计系统边界是什么。

规划设计系统范围的重点是：保持关键无赘肉。我始终认为判定一个设计系统成功与否的关键是，它是不是真的最终能够成为设计师、前端的工作工具，是不是真的简化了他们的工作流程，他们是不是真的喜欢用这个工具。

很多时候出于组织原因要去汇报，对标行业标杆设计系统的完整目录去依葫芦画瓢无可厚非。但是除非真的像ant design那样具有对外输出企业价值的产品使命的话，真没必要。

四、Design System可能牵涉到的工具

那我就献丑也说说最近也许和建立设计系统有关的工具的理解。真的很不喜欢提及工具，因为太多设计师都是盲目的工具控了，喜欢不停去“知道”新工具而非真正把工具当成成就自己的手段，还会时不时在别人提起xxx新工具的时候跳出来说那个yyy也可以云云。

（编辑：核心网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!