设计系统指南（一）：带你了解设计系统的发展史

当产品业务不断迭代，设计产出的不确定性越来越高，一套具有包容性和多元化的设计系统，可以帮助设计师将不确定性控制在一定范围内，从而真正的释放重复劳动，让更多的设计者有机会去触及更好的产品体验。

为了更深入了解设计系统，接下来的系列文章就来围绕设计系统来跟大家分享一下。

在深入探讨设计系统之前，我们需要先来了解一下设计系统的概念是怎么形成的。

设计系统最早的概念来自于建筑设计领域，著名建筑大师帕拉迪奥（Palladio）在 1570 年出版了「建筑四书」，是最重要和最有影响力的建筑书籍之一。

这本书也是最早的系统性文档示例之一，帕拉迪奥从古罗马建筑中汲取灵感，在书中提出了设计和建造建筑物的规则和词汇，包含了原则和模式，并详细地说明和解释了这些建筑物是如何使用的。

《建筑四书》是最早的系统文档示例之一

例如在楼梯部分就对不同功能的楼梯进行了分类：螺旋楼梯、椭圆形楼梯和直道楼梯。同时描述了不同楼梯应该在什么样的建筑物及场景中使用，比如螺旋楼梯适用于「空间狭小的位置」因为螺旋楼梯占用的空间比直楼梯少，但螺旋楼梯上楼花费的体力会更多。

在 1919 年包豪斯运动时期，现代主义先驱路易斯沙利文所提出了“形式追随功能”的著名现代主义设计名言。

他创新来自于把之前的装饰元素融入到了 19 世界后期新出现的高层建筑里，通过装饰来强化建筑的竖直分格。这样的原则才促成了他著名的信条 "形式总是追随功能"。

以这句话为出发点，他根据每个项目的功能需求，在必然的结构演变中加以模仿，从而将组件与模块的概念运用在了工业与建筑设计当中。

1975 年发布的「美国宇航局图形标准手册」就是现代 style guide 的早期代表作，它提供了颜色、字体、图形、用法和示例，以及明确的设计原则，直到现在的品牌/样式视觉规范依然没有跳出这个范围。

在现代平面设计史中，从包豪斯设计原则到排版和网格系统，都在围绕如何通过规则指南去统一“设计语言”。它们对现代平面设计、网页设计的演变都产生了根本性的影响，同时也为“设计系统思维”建立了雏形。

20 世纪 90 年代中期，在互联网的早期发展阶段，当时的 web 网页是由 HTML 技术实现的，在这种技术背景下网页的设计有非常大的局限性，非常限制网页设计师的设计发挥。

早期网站的外观更像是经过美化后的 Word 文档。而各个浏览器也是以满足功能来决定网页应该是怎么展示的。

随着越来越多的人使用互联网和电脑，在 1994 年出现了关于 CSS 的第一个提案。提案很大一部分是在讨论页面应该如何展示、 是否需要考虑用户是如何浏览页面的，以及关注页面字体大小的排布等。

这些讨论推动了万维网联盟（W3C）的成立，并制定了结构化标准语言、表现标准语言等，对互联网技术的发展网页交互设计提供了良好的发展的空间。

在 2002 年，随着 Java 技术的出现，开发可以基于组件来进行页面，这大大地提高了网页布局的灵活性。设计师可以尝试各种有创意性和复杂性的页面布局，同时也提高了网页的美观度和用户体验。

在这里就出现了设计系统中的组件概念，每个组件就像是乐高积木，可以通过移动来创建个性化界面。

2005 年，交互设计师泰德维尔撰写了《界面设计模式》，泰德维尔效仿上文提到的的设计模式概念，总结出交互设计中的“模式”，以现有理论为基础，将交互设计中经验性的东西提炼出来并将其系统化。书中收集并分析了很多常用的用户体验界面设计模式，帮助大家理解各种交互设计中常用的解决方案。

2006 年雅虎推出了 Yahoo Design Pattern Library 设计模式库，模式库给网页设计和研发都带来了效率上的提升，当时的模式库中包含一些常用的控件和视觉设计说明，以及组件的代码片段。

在下图中，我们可以清楚地看到在雅虎的模式库中提供了组件的开发技术文档，而模式则提供了如何使用组件的建议。

在 2007 年也出现了像“ui-patterns”这种“模式库分享平台”。

用户体验领域设计系统的这些早期尝试，主要是通过收集设计范例来不断扩展 UI 模式。而模式库也可以帮助团队统一内部冗杂的设计语言，提供一致的体验，减少重复的设计开发工作。

前端工程师 Brad Frost 在 2013 年提出了 Atomic Design（原子设计），一种分层级有条理地创建设计系统的的方法。

感兴趣的同学可以点击链接阅读原子设计这本书： https://atomicdesign.bradfrost.com/chapter-5/

中文版的学习指南：

他从自然界中的化学方程式中受到启发，原子元素结合在一起形成分子，这些分子可以进一步结合形成相对复杂的生物体，通过这个思维模型我们可以将界面拆解为基础元素，使用分层的方式来创建设计系统。

原子 Atoms：为页面构成的基本元素。例如文字、颜色、图标等。

分子 Molecules：由原子构成的简单 UI 组件。例如，一个标签，搜索框，图标共同打造了一个搜索框组件。

组织 Organisms：由原子及分子组成的相对复杂的 UI 组织，例如商品列表、内容卡片等 。

模版 Templates：将 UI 内容进行布局，形成基础的页面结构，也可以称之为原型。

页面 Pages：将实际内容（图片、文字等）进行填充，从而形成高保真页面。

在 2012 之后陆续出现了一批软件巨头的设计系统：像微软的 Microsoft Design Language、SAP 的 UX3 和 Fiori 1.0、IBM 的 Carbon 以及苹果推出的 iOS HIG 人机交互设计指南等。

谷歌在 2014 年推出 Material Design 后，设计系统的概念终于成熟了。“iOS HIG” 和 “Google Material Design” 也形成了设计系统界的两座大山。

在这里值得一提的是，Material Design 中“从目标到结果、从抽象到具体、从整体到局部”的“设计系统性”，是非常值得每位设计师去学习的。

MD 所定义的设计目标是创造一种视觉语言，能够将经典的设计原则与创新的科学技术结合起来；开发一个能够跨平台使用的底层系统，使 Google 旗下的电脑、穿戴设备、电视等设备都可以使用 MD，看看为了这个目标 MD 都做了什么：

• 为了适应不同的屏幕分辨率，规定了 dp 作为基础尺寸单位；
• 为了适应不同产品内容，采用“卡片式设计”来作为信息组织的方式；
• 为了更容易被用户理解，从物理现实中学习了诸如质感、投影、加速度、纸张的模拟等隐喻方法。

MD 将这些巧妙的设计总结为“材质即隐喻”、“模仿印刷物”、“有意义的动效”的设计原则。

在 2105 年之后随着移动互联网的迅速发展，各大软件公司相继发布了自家的设计系统，像 BBC、IBM、Shopify、Salesforce、Gitlab、Airbnb、Uber、蚂蚁金服 Ant Design 等。

前不久字节跳动也发布了最新的设计系统：

至此，设计系统越来越被广泛的应用，设计系统的框架也更加细化和清晰：

设计系统通常作为网站（公共或内部）在线托管，可以把它想象成一个庞大的知识库。设计系统为公司的各种产品提供了基石和指导，是需要不断维护和改进的一个有机体。

设计系统涉及到视觉、品牌、交互等大量内容，后续也会继续来分享设计体系的系列文章，欢迎小伙伴们关注。

欢迎关注作者微信公众号：「UX实验室」