设计系统（Design System），设计和开发之间的“DevOps”

 

最近，我们网站的上新增了几个新功能，比如通过导航栏的QR Code可以下载App；通过Carousel的方式，显示多条信息。

以往这样的功能可能需要2-3个Sprints完成，但是现在这些功能都是在一个Sprint内完成了所有功能的开发和测试。之所以我们能高效的完成开发和测试，主要归功于我们对设计系统（Design System）的成功应用。

什么是设计系统？

对于设计系统，大家已经不太陌生，业界已经有很多成功的案例，比如像Google的Material Design，蚂蚁金服的Ant Design，抖音的Semi Design等等。这些公司借助他们的设计系统，成功的改变了他们设计和开发产品的方式，通过一组可重用的组件，以及一套指导这些组件使用的规范，可以快速的完成设计和开发工作。

设计系统和普通的UI组件的一个主要差别，就是使用设计系统完成的产品，其结果总是一致的。就像Google的所有产品，你都可以看到Material Design的影子，完全符合其设计规范。但是像BootStrap这样的UI库，可以搭建出风格完全不一样的网站。

所以通常我们说的设计系统，就是一组可重用的组件，以及一套指导这些组件使用的规范。基于设计系统的组件和规范，可以组合出来任意数量的应用。

对于我们公司来说，由于涉及多个品牌和多个平台终端，如果有一套统一的设计系统，将可以极大的提升我们的设计和开发效率，并且可以保证我们设计开发的结果和品牌形象保持一致。

所以从去年底开始，由设计部门最初提出构想，Web开发部门参与实施，我们一起构建了公司的设计系统。

我有幸参与其中，负责其项目管理和架构设计工作。项目之初，我也认为设计系统不过是一套设计规范加上一套组件库，并不是什么新鲜的概念。

等到今年上半年系统初步实施完成，开发团队和设计团队都开始使用这套系统，我才逐渐发现，设计系统其实不仅是一套设计规范和组件库，更为设计人员和开发人员之间带来一种新的协作模式，甚至是一种文化的改变，就像我们常说的开发和运维之间的DevOps一样。

设计系统在帮助构建设计和