我第一次听说“设计系统”这个概念是在2016年初,契机是在某设计师招聘要求的栏目中看到了“熟悉至少一种设计系统,例如 HIG 或者 Material Design”。
然后我就认认真真把 Material Design Guideline 看了一遍,记下来什么是 dp 单位,什么是 FAB 按钮,toast 和 snackbar 有什么区别……就跟现在很多第一次听说这个概念的设计师一样,我当时觉得 “卧槽设计系统太牛x了,未来必成大器”。
一晃也这么些年了,似乎每个月都能听到有关设计系统的新闻或者是争论,也不断有新的设计系统诞生或者是衰落,但是现在当我重新点开一个设计师招聘要求的时候,还是那句“熟悉至少一种设计系统,例如 HIG 或者 Material Design”,可能有时候会再加一个Lightening Design System。
我很惭愧,在瞬息万变的 IT 领域,设计系统比我还抗衰老。
所以我花了一些时间,看了看设计系统的过去和现在,也想了想设计系统的未来。
过去 | 设计系统作为一种“文档”
按照现在的主流模式,一个设计系统主要由三部分构成:设计原则 (design principle)、风格规范 (style guide)和模式/组件库 (pattern lib / component lib)。
这三个部分分开来看,都是非常古早的概念了。
我没有考证到“设计原则”最早出现在什么时候,但是20世纪初的“格式塔理论”已经是个极为规整的设计原则了,它所提出的“亲密性”、“连续性”和“闭合性”等原则已经成为了图形设计的美学基石,在无数设计师的博客里一次又一次地被提及。
“风格规范”也不新。60年代的《美孚品牌手册》和70年代的 《NASA 图形使用规范》就是现代style guide的早期代表作,已经包含“颜色、字体、图形、用法和示例”等内容,直到现在的各类风格规范依然没有跳出这个范围。
《1975 NASA Graphics Standards Manual》
“模式/组件库” 原本是两个分离的概念,即“模式库”和“组件库”。简单来说,“模式库”是给设计师看的,介绍在什么情况下应该用什么设计方案;而“组件库”是给工程师看的,介绍各种组件的代码和定制规则。但后来大家慢慢发现模式库和组件库的目录长得差不多,就干脆把两者合并起来了。
Pattern Library 与 Component Library 的区别
那么,最早把上述三个部分合起来,从而创造出符合现代定义的设计系统的是什么公司?
根据我所能查到的资料,应该是 Sun Microsystems (后来被甲骨文并购) 。
它的设计系统叫 Web Design Standards。感谢 archive 网站的收录,在其2005年的版本中,我们就已经可以看到 “Design System” 的叫法,其 Style Guide 部分和现在流行的设计系统相差无几,而且组件库模式库一应俱全。得想想那才是2005年!北京奥运会都得3年后再开。
Web Design Standards 的组件列表 (2005 年的存档)
接下来,在2006年雅虎推出了Yahoo Design Pattern Library,在2007年也有了像“ui-patterns.com”这种“模式库分享平台”。