设计系统简史

本文共6749个字，预计阅读时间15分钟。

我第一次听说“设计系统”这个概念是在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”这种“模式库分享平台”。

Yahoo Design Pattern Library