多维度理解设计体系

by weakow
2019/9/13

近年来,设计体系 (design systems) 已经成了国外 UI/UX 领域一个很火热的概念。Twitter 上讨论设计体系这一话题的热度是下面这样的:

Design Systems on Twitter

主流的产品设计杂志 Smashing 有了稳定的设计体系专栏:

设计师的招聘开始要求掌握设计体系相关技能,Spotify 甚至设立了专门负责维护设计体系的岗位:

什么是设计体系呢?即便是在国外互联网圈子里面,也没有对它形成统一、公认的定义。不过,如果不苛求准确定义,是可以从多个维度去了解这一概念的。最简单的,便是从了解设计实践的三个层级开始,去理解设计体系的概念。

通过设计实践的三个层级理解设计体系

第 1 层级:组件库。即便是最初级的设计师也懂得统一样式的重要性。如果你将网站的主要按钮定义为蓝色、小圆角的样式,你大概不会在下一个用到主要按钮的界面将其设为绿色,或改为大圆角。如果产品界面中出现不统一的情况,很容易让用户怀疑这家公司的设计团队不够专业。为了统一样式,设计师很容易想到做一个组件库,陈列所有界面中被复用的组件,如按钮、文本框、标签页等。组件库不仅可以指导设计师的工作,还可以为前端开发人员提供参考。

Bootstrap 是有名的开源的组件库

第 2 层级:设计语言。组件库提供了对同一类元素的约束,却没有指出不同类元素之间的联系。这时,我们需要引入设计语言的概念。一个产品的设计语言是塑造该产品独特且统一的风格的一套法则。一辆宝马车即便摘去标志也很容易让人认出它是宝马,这是因为所有的宝马车都遵从相同的设计语言。Google 旗下众多产品线共享同一套设计语言,其中任何一个界面都不会让人感觉出自 Apple 或 Microsoft 之手。好的产品都打造了属于自己的设计语言。是设计语言统一了整个产品的风格,并让产品有了区别于其他产品的个性。

所有的宝马车都遵循相同的设计语言

第 3 层级:设计体系。组件库和设计语言定义了产品该是怎样,却没有解答为什么是这样以及如何做到这样。为了回答这些问题,有人引入了设计体系的概念,用以指代产品团队内部形成的用于指导其设计工作的一系列共享的最佳实践。简单地说,设计体系是以下这些内容的集合:设计目的、设计原则、组件库、样式指南,以及用于提高设计师和开发人员沟通效率的工作流程和实用工具。建立有效的设计体系可以提高设计决策、设计与开发沟通等工作的效率,并减少出错的可能性。此外,建立设计体系也是团队知识管理的一部分,有助于为新加入团队的成员提供指导,同时确保团队的工作不会因为某位关键成员的离开而蒙受损失。

Airbnb 有专门的团队负责其设计体系的构建和维护

通过了解设计体系的构成去理解设计体系

除了通过上述维度,还可以通过了解设计体系的构成,去理解这一概念。

基于 UXPin 发布的研究,综合其他多方观点,可将设计体系的结构划分如下:

设计体系的框架

在这套模型下,设计体系分为理念、模式和实践三个层面的内容。

第一个层面,理念。包括设计目的、设计原则、设计语言等,它们是设计决策的基础。

第二个层面,模式。界面上所有可复用的东西都可以构建成模式 (pattern)。模式可分成两大类,功能性模式和感知性模式。功能性模式 (functional pattern) 是界面中有型的部件,如按钮、文本框、菜单等,也就是通常所说的组件 (component) 和模块 (module)。感知性模式 (perceptual pattern) 则是描述性的、无形的设计模式,如颜色、字体、图标样式等,也就是通常所说的样式 (style)。

模式和模板不是一个概念。模板 (template) 特指页面模板,即可复用的页面结构与要素,如博客文章页模板。

样式和格式也不是一个概念。狭义的样式仅指视觉样式,广义的样式还包括听觉上的风格、语言风格等。感知性模式等价于广义的样式。格式 (format) 特指文字格式,例如,选择字体、字号属于样式问题,标点符号的全角半角问题属于格式问题。

第三个层面,实践。设计体系除了理念、模式这样的理论性质的内容,还包括一系列实践,如规范、指南、工具等。如果要将实践细分,可分为创建设计体系的实践、维护和共享设计体系的实践,以及使用设计体系的实践等三方面内容。

通过案例理解设计体系

实际上,很多公司已经将成型的设计体系文档放在网上,通过查看这些文档,可以对设计体系形成直观的认识,也有助于加深对设计体系概念的理解。

IBM 推出了一个开源的设计体系,叫做 Carbon。它是一份高质量的设计体系。访问它的网站,浏览其内容,甚至基于该设计体系尝试做一些产品,可以很好地理解设计体系的概念和作用。类似的案例还包括 Atlassian、Shopify、Salesforce 等公司推出的设计体系。

蚂蚁金服的 Ant Design 和有赞的 Zan Design,是国内公司推出的最佳案例。

通过试用相关软件理解设计体系

如今,很多新兴的设计软件都引入了专门针对设计体系的功能模块,试用这些软件,并查看相关的文档,也是理解设计体系概念的一种方法。

Figma 可以说是继 Sketch 之后最耀眼的明星设计工具,它在其官网首页就指出 Figma 能很好地创建和管理设计体系,并推出了一系列文章和视频帮助用户学习这些功能。

InVision Studio 是另一款很受欢迎的新兴设计软件,它甚至为设计体系打造了独立的功能模块,并称之为 Design System Manager (DSM)。为了宣扬以设计体系为代表的新兴设计实践,它还将这些最佳实践组织成了多本电子书,放在一个名为 DesignBetter 的独立网站上面。

UXPin 是一款新的设计工具,它从推出的第一天起就强调协作,强调设计与工程的同步,因此它是天然的设计体系管理工具。为了推广设计体系的概念,它还在其官网上推出了一系列免费的电子书和网络研讨会。

其实,设计体系不是一个单一的概念,它的核心价值在于将数字产品设计工作系统化的理念,以及基于这一理念而构成的一系列实践。理解设计体系,抠定义没有意义,重要的是用起来,用设计体系的方法论指导实际工作,将设计体系的工具用到实际工作中去。