「人人都是产品经理」了解 Design System，看这篇就够了

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

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

本文插图
相信今天从事互联网产品设计的朋友们听说过，尤其是UI设计师、前端工程师。不过如果你打算举手并交出你的sketch控件库，那么可能还是需要进修一下。成功建立有效的设计系统并持续维护之已经是业内一个组织是否在创新文化方面成功/及格的标志。在不同的产品属性、生命周期导致的不同语境之下，设计系统的定义可以非常不一样，我以能够对产品团队输出实际价值的角度去定义设计系统的关键组成的话，它至少应该起到以下作用：对于统一的、不断补充、丰富甚至修正的设计语言有完整的描述保证高质量产出的前提下，能够为设计流程、代码落地过程提速把设计样式和代码对应到一起的系统结构
二、制作design system的意义何在?
从2017年开始接触并且在一家全球五百里面瞎弄过些（对~不止一个所以是“些”）设计系统。因为有吐槽嫌疑就不明言了，毕竟学习、试错过程谁都可以有，个人也罢部门也罢公司也罢。之前在微软也参与过Bing的new branding refresh ，不过如果用现在的设计系统标准看，那仅仅是设计层面的设计语言总结、控件规范的那一部分，再强调一次，这些还不算是设计系统，去面试的时候别拿一套控件库出来就瞎比比，专业领域里面有术语的变化肯定是有原因的，而且那个原因极少是“逼格更高” ，认清这一点才算有了持续进步的门票。
相信很多团队对于设计系统都经历过因为“人有我有”的根本原因而发起过甚至建成了形形色色的设计系统，有个内容丰富的网站，满满的小字号文案、分门别类的控件库、页面模板以及不管用不用反正这里有的对应代码。对了，还需要有个trendy的名字。
没有实际意义的设计系统一般有特征如下：建立完成了之后，一直就岁月静好地躺着，没有更新；流量不大，展示时会被打开一下，但是鲜有设计师点开（可能刚到岗下载完控件库文件就没有然后），团队里面的前端工程师更甚可能连网址都记不住。好了吐槽完毕，以下净说好话。
其实设计系统的意义从一开始被提出概念时就已经非常明确。整体设计有所沉淀之后，设计样式抽象出复用性、前端根据所用框架制作可复用（并真实被一直复用）代码，达到省却设计、前端重复用力，从最终落地效果去保证设计一致性。理论基础是atomic design ，出色例子有air BnB的驰名国内外设计系统、salesfoce的Lightning Design System ，当然还有国粹Ant Design ，这些你都知道了。
至于行业环境基础，我自己的总结是任何一个在某垂直做大做精的产品，都会有许许多多类似但是又有那么丁丁点点的必要差异化需要照顾，参照一下中台功能带来的变革就是为了避免重复造轮糟蹋人力一样，难道作为设计师/前端工程师的你真希望人力在无尽的岁月里头，把精力耗在“改个字段”、“加个输入框”之类的需求当中？你乐意养老，公司还不愿意养会用sketch的流水线工人。
所以致亲爱的领导们，如果你的百人团队做出来的产品，怎么老会出现类似同是一个确认键但是在这和在那总是有点什么不一样，然后明明人已经那么多了还是天天要加班，设计师/前端工程师还天天黑眼圈脸泛黄一副欲求不满的鬼样，估计是设计系统没有做好也没有用起来。