前边写了一些关于设计系统的文章,很多小伙伴却一直在问,到底什么是设计系统。今天这篇文章就来详细聊一聊,希望大家看完之后,对设计系统有一个全面的认识。
文章分为两个部分。第一部分是设计系统的发展历史,顺便聊一聊“Why”的问题;第二部分为设计系统的组成,也就是“What”。至于如何建立设计系统,“How”的部分,涉及到的知识较多,后边会专门写文章慢慢展开。
发展历史
20世纪60年代,软件行业进入爆发式的增长阶段,原始的开发模式已经无法满足大量的开发需求。为了应对这一问题,Douglas McIlroy在1968年的NATO软件大会上提出组件式开发的解决思路,从而提高工作效率,并产生更加规范的应用软件。
1977年,建筑设计大师Christopher Alexander在他的经典著作《A Pattern Language》中确立了设计模式(design pattern)的概念,同时提供了253个设计模式语言,他指出:
每种设计模式都针对某个在我们的环境当中反复发生的问题进行了描述,并提供了相应的解决方案。
设计模式的提出,是设计行业首次对组件式设计的思考,为设计的标准化和规模化提供了基础理论。
很快,软件行业就引进了设计模式,并成为界面设计的法则。2006年,Jenifer Tidwell在她的著作《Design Interface》中,对界面设计的模式进行了总结。界面设计模式是重复出现的设计元素的集合,它定义了这些元素的行为方式、外观以及代码构成。
2010年,随着移动互联网的爆发,各种设备层出不穷,界面设计面临着跨平台、多尺寸的自适应问题,原始的设计方法已经无法满足大量的设计需求。
2013年,一个叫做Brad Forst的前端工程师给出了他的解决方案。脑洞大开的Brad从高中化学知识中,提出了“Atomic Design”理论,即一种分层有条理的创建模式库的方法。原子设计理论融合了软件开发的组件式思想,设计领域的模式库和化学界的分子构成,完美的解决了模块化和规模化的问题。
很多公司开始运用原子设计的理论搭建自己的模式库,设计系统也即将问世。
2014年,Google的Material Design横空出世。它不仅有完整的模式库,还提出了自己的设计原则,这些原则由基本原理所构成,再搭配上风格指南,形成一套完整的设计语言系统。
由此,设计系统风靡全球,IBM,Airbnb以及SAP等公司,都按照这个思路搭建自己的设计系统。
2016年,蚂蚁金服技术体验部推出Ant Design,成为国内首个设计系统,从而在国内也掀起一股浪潮。
到今天为止,设计系统蓬勃发展,有网站专门进行了收集整理,全球已有500多家公司发布了自己的设计系统。
设计系统
系统是一组互相连接的事物,在一定时间内,以特定的行为模式互相影响,例如人,细胞,分子等。
任何一个系统都包括三种构成部分:要素,连接,功能或目标。

从 定义可以看出,不仅仅要关注系统是由哪些部分组成的,还要关注这些部分是如何连接在一起的,它们的关系是什么样的。
设计系统由设计语言和模式库构成,在设计原则的指引下,通过统一的协作语言和科学的管理方法组织起来,创建体验一致的用户界面。
构成:设计语言和模式库
连接方式:设计原则、协作语言和管理方法
-
设计语言
语言是我们用来交流的工具,设计语言其实就是产品与用户交流的工具。它是设计系统的基础,与品牌识别和情感相关的,包括颜色,文字,布局,图标和动效等等。





模式库
模式库,也叫做组件库。它包含了各种模式及其使用方法,代码构成等。模式库可以根据原子设计理论来进行分层,如组件,区块,模板等。

设计语言和模式库是设计系统的主要组成部分,目前市面上大多数设计系统都是由这两部分构成。然而这并不是全部,它们背后是如何连接的才是核心。
设计原则
设计原则在上一篇文章 你为什么需要设计原则? 中已经详细介绍,它为设计决策提供核心价值,为设计提供向导,从而明确设计方向,统一设计风格。
设计原则是设计系统的灵魂,Google的Material Design正是在其设计原则的加持下,才显得独一无二。

协作语言
协作语言可以帮助所有人以相同的方式理解设计原则、品牌愿景、产品目标及信息架构,并对设计模式的特质及使用方式形成共识的语言标准。
在《建筑的永恒之道》中,这样评价协作语言:
一个群体,像是共享着同一个头脑,通过遵从相同的模式化语言来协同作业,最终使那些宏伟的建筑拔地而起。
所以,团队中所有人都要使用相同的语言来进行交流。比如,所以的组件命名必须达成一致,这样在交流的时候,不同岗位之间,如产品经理,前端和后端,都能很好理解彼此的意思。
管理方法
管理方法主要包含三个方面:管理团队,反馈机制和维护流程。
管理团队是指由谁来管理设计系统?一些比较大的设计团队,比如salesforce,会设立团队来专门负责设计系统。小一点的团队没有那么多人,可能是由比较资深的设计师兼职负责。
无论是专业的团队还是兼职负责,你必须有一个完善的机制,来维护设计系统。因为一旦停止维护,设计系统就会失去其意义。
反馈机制要解决的问题是:用户是谁?设计系统是给谁用的?设计师、产品经理还是前端开发人员?他们如何学习设计系统?说明文档、视频教程还是定期培训?他们遇到问题如何反馈?有没有反馈库?或者论坛,实时通讯工具?
反馈机制是维持设计系统的必备因素。无论是前期推广还是后期维护,没有合理的反馈机制,就无法展开设计系统的应用。
维护流程是指设计系统在应用之后,如何维护更新,如何协同。
如何更改样式?修改样式的流程是什么?谁来提交修改申请?是否进行评审?谁来批准样式修改?
如何在产品经理,设计师和前端开发之间同步样式?样式修改之后如何同步给使用者?前端代码如何同步?已经应用了该样式的产品如何同步?
各个工作流之间如何协同?用sketch还是Xd,或者figma?产品经理是不是要单独维护一个Axure库?和前端之间如何协同?
维护流程是设计系统良好运转的基础,合理的维护流程会提高协作效率。
最后的话
在2010年移动互联网的爆发,带来了屏幕尺寸和界面尺寸的爆发式增长。为了解决一致性和效率的问题,由模式库逐渐发展成为设计系统。
设计系统由设计语言和模式库构成,在设计原则的指引下,通过统一的协作语言和科学的管理方法组织起来,创建体验一致的用户界面。
设计语言是设计系统的基础,与品牌识别和情感相关的,包括颜色,文字,布局,图标和动效等等。
模式库,也叫做组件库。它包含了各种模式及使用方法,代码构成等。
设计原则为设计系统提供向导,协作语言帮助所有人以相同的方式理解和交流,再通过科学地管理方法,包括团队,反馈机制和维护流程等,将设计语言和模式库连接起来,以实现系统的目标。
以上,是我对设计系统的总结,欢迎评论分享。与你共同进步!