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

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

设计系统指南(一):带你了解设计系统的发展史

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

设计系统最早的概念来自于建筑设计领域,著名建筑大师帕拉迪奥(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实验室」

设计系统指南(一):带你了解设计系统的发展史

收藏 64
点赞 21

复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。