如何开发设计语言

设计是一种交流形式。图形用户界面使用几十个独立的元素与用户交谈。颜色、排版、形状、图案，所有这些前端样式都会直接影响用户对产品的理解。

设计语言是一种交流工具，可以帮助设计师创建视觉上和谐一致的设计，并赋予产品独特统一的外观。本文将带你了解设计语言的概念、创建设计语言的理由、以及如何正确创建设计语言。

定义设计语言

术语「设计语言」描述了数字产品的整体视觉设计。它在线框图和视觉设计之间建立起了一座桥梁。设计语言系统的功能作用是不仅帮助用户感知和理解可识别的标志，而且还会直接影响到用户与产品交互时的整体体验。

设计语言与设计系统

设计语言和设计系统是一回事吗？答案是否定的。定义明确的设计系统是基于实现细节（工具和技术）、设计语言和文化（价值观、原则和实践）的。设计语言是设计系统不可或缺的一部分，它不仅能帮助团队理解如何一起使用组件和样式来创建一致的用户界面，而且还能传达为什么他们首先需要使用这些组件和样式。

因此，当团队使用视觉设计语言时，不仅要从全局了解产品或品牌本身，更重要的是要知道你想向用户传达的信息，以及你希望这些用户如何理解品牌。

设计系统金字塔包括实施工具以及技术、设计语言和文化。图片来源：SAP(https://blogs.sap.com/2019/03/28/our-design-system-part-1-introduction/

设计语言的要素

通常，对设计语言的定义并不是严格的，但仍然有一些共同的元素，包括：

• 一系列UI组件和模式。这些可重复使用的构建块可用于创建用户界面。
• 样式指南。有关设计的视觉属性（例如颜色、字体和空白区域）的信息，以及如何在设计中使用它们的说明。
• 语义文档。这有助于定义设计元素（例如颜色、形状和字体）以及各个样式和组件的命名约定背后的含义和意图。

为什么要创建设计语言系统？

一致性

当用户与一致的设计（而不是零散的设计）进行交互时，他们将获得更愉快的体验。对于小型团队和项目而言，创建一致的内容界面并不是什么大问题，但是随着项目和团队的不断发展，交付变得越来越困难。产品团队引入了设计语言来解决这个问题，并帮助项目整体推进和扩展。

品牌识别和真实性

品牌是客户如何看待公司或产品。设计语言是设计师可以用来进行有效品牌宣传的最牢固的纽带之一，因为它有助于使设计变得真实，而真实性可以使产品在人群中脱颖而出。独特的视觉设计决策可以创造个性和让人过目不忘。考虑一下Google Doodles，这是一个真实可靠的设计决策，为品牌带来了即时的可识别性。

Google Doodles是Google在其首页上使用的一系列插图。图片来源：Google(https://www.google.com/doodles/ireland-general-elections-2020)

效率和成本

有了视觉设计语言，产品团队就能在不损失产品质量的前提下快速迭代产品设计。它可以让设计师使用定义明确、可重复使用的组件，以及在将样式应用于其设计时应遵循的明确规则。

创建和使用设计语言系统的步骤

就像所有伟大的事物一样，一种伟大的设计语言很少是偶然发生的。它是长时间努力工作的结果。以下五条规则将有助于高效创建视觉语言。

1. 进行UI审计

设计元素重复会导致碎片化，而碎片化会导致不一致。识别设计元素的重复性有助于避免团队成员从头开始构建元素，并在一段时间后发现该元素的版本已经存在了。这就是为什么视觉设计语言的创建应从UI审计开始的原因。

你应该对你的产品进行UI审计，以清楚地了解目前使用的颜色、字体和形状。这是一个相对简单的过程。对组成你的产品的每一个组件进行截图，并将它们分成不同的类别。在UI审计结束时，你应该有一个分类明确的组件集合，以使设计中的不一致之处显而易见。

当你在同一文档中拥有所有设计变型时，很容易发现不一致之处。图片来源：Brad Frost(https://bradfrost.com/blog/post/interface-inventory/

从利益相关者那里获得任何品牌指南也是很有必要的。这样做可以帮助你了解公司品牌的总体观感。

2. 为设计语言创建词汇表

就像口语始于单词及其含义一样，设计语言始于定义视觉单元及其含义的字典。这本字典应该清晰地定义可重复使用的视觉单元。你的视觉设计语言字典应该包括一个模式库（可以进行分类和分组的可重用构建基块）和一个样式指南。

用明确的目的和意义来映射设计元素是很有挑战性的，但可以通过棱镜沟通来评估每个元素的意义。设计师Nate Baldwin建议的以下句子结构将帮助你识别、定义和传达每个单元的含义：

[模式/库]中使用的[设计元素]有助于传达[目的和意义]。

每当你评估一个视觉单元时，请使用此技术。例如，如果你要为注册表单中的错误信息选择一种颜色，你可以说：「注册表单错误消息中使用醒目的红色有助于向用户传达该信息的重要性。」

3. 建立指导性设计原则

如何定义好的设计？你怎么知道什么时候可以发布？当需要评估一个设计的质量时，设计师往往会依赖自己的一套标准。但随着团队的发展，遵循这样的方法会给产品设计过程带来很多混乱，因为每个设计师都会有自己的主观理解。

这就是设计原则可以节省时间的地方。设计原则定义了各个设计师在开发特定产品时必须遵循的基本且强制性的准则。它们作为参考，简化了决策过程。Magera Moon的「创建Etsy的设计原则」这篇文章对此进行了详细介绍。

设计原则的制定为思考如何在设计中传达个性或目的提供了绝佳时机。例如，流行的博客平台Medium的设计原则之一就是「方向大于选择（Direction Over Choice）」。Medium团队提供了以下描述：「我们在设计Medium编辑器的时候，经常提到这个原则。我们特意使用交换布局、字体和颜色来提供方向。方向更适合产品，因为我们希望人们专注于写作，而不是因为选择而分心。」

4. 制定规则并坚持执行

就像任何一种口头语言都有允许一个人与另一个人进行交流的规则一样，设计语言也具有使产品开发人员可以与他们的用户进行交流的规则。

这些规则的目的是为设计人员创造约束条件。「约束」这个词通常具有负面含义（听起来像是对创造力的限制），但是规则可以让设计师更高效地工作。通过建立明确的规则，产品团队可以防止团队成员创造不良的UX。可以定义两种类型的规则：

• 严格的规则，即应严格遵循的精确规则。例如：「带有此十六进制代码的红色仅应用于错误消息。强烈禁止在用户界面的其他部分使用该颜色。」
• 宽松的规则，即推荐的规则，设计人员可以跳过这些规则以创建更好的品牌感觉或具有实用价值的页面。例如：「如果可能，请尝试将品牌颜色用于UI的功能元素。」

一旦产品团队为设计语言制定了一套约定俗成的规则，就必须严格遵守这些规则。在建立视觉设计语言时，最大的失误就是不一致性，当团队成员不遵守规则时，就会出现这种情况。用户体验经理应该引入一个设计审核的程序，在此程序中，设计师要根据规则来验证设计。

5. 将视觉语言视为一种活的有机体

因为文化的影响，口语往往会随着时间的推移而改变。视觉语言也是一样的。新的趋势每天都会出现，像谷歌和苹果这样的大公司经常更新他们的设计准则，以使它们的产品看起来具有新鲜感。

视觉语言不应该是一套一成不变的静态规则，而应是一个不断发展的生态系统，与产品一起成长。这个生态系统应该很容易适应变化。要设计一个设计语言系统，就要熟悉当前的趋势，并尝试在你的语言中引入最有价值的变化。

总结

创建美观且易用的设计语言需要花费时间。你可能不会在第一次迭代时就拥有一个强大的视觉语言，这完全没有问题。投入时间为该语言打下坚实的基础，并确保它与你的团队一起成长和成熟，这一点至关重要。

---

英文原文：https://xd.adobe.com/ideas/principles/web-design/how-to-develop-design-language
原文作者：Nick Babich
编译作者：微博/公众号@设计吐司

以上译文仅代表原作者观点。如需转载请遵循CC版权协议正确标明出处。