设计系统（第二部分：设计语言）

什么是设计语言？

如何建立一种设计语言？

在第一部分中，我们了解了设计系统的基础知识。如果你还没读过，我建议你去看看！

在这篇文章中，我们将深入探讨设计系统的基础：设计语言。

“设计语言是设计的共享词汇。”

• IBM

什么是设计语言？

设计语言是一套指导品牌旗下产品系列创作的标准。我喜欢将设计语言视为品牌或产品的个性及其相应的视觉设计资产。

设计语言由三个方面组成：

• 指南
• 元素
• 成分

你可能在设计语言或 UI Kit 中看不到元素和组件之间的区别。我在这里做出区分是为了说明某些组件是由其他组件（元素）构成的。我喜欢将这些组件称为复合组件。

指南

指南是描述如何利用设计语言来构建产品的原则。它包括以下内容：

• 可访问性
• 品牌
• 排版
• 颜色
• 网格
• 运动
• 图标

元素

元素是可用于构建更复杂组件的基本元素。元素的一些示例包括：

• 按钮
• 下拉菜单
• 输入字段
• 单选按钮

成分

组件比元素更复杂，实际上可以由许多元素组合而成。以下是一些组件的示例：

• 情态动词
• 工具提示
• 导航
• 分页

如何建立一种设计语言？

如果你是从零开始构建设计语言，那么你很幸运；从一张白纸开始要容易得多！但现实情况是，大多数公司都试图结合现有产品构建设计语言。

构建设计语言并维护一套产品的一般流程如下：

• 进行 UI 审计
• 建立组件优先级
• 巩固您的品牌形象
• 制定指导方针
• 构建 UI 工具包

让我们更深入地探讨一下这些问题。

UI审计

UI 审核是对应用程序所有区域、所有状态的所有元素进行可视化盘点。例如，按钮有多少种不同的变体？它们的悬停状态在整个产品中是否有所不同？

你可以简单地截取每个组件的屏幕截图，然后将其添加到 Sketch 的画板上。如果我们为 Airbnb 进行 UI 审核，它看起来可能像这样：

确定优先级

完成 UI 审核后，就可以开始对组件进行优先级排序了。我们可以将每个组件绘制在一致性/频率图和可行性/影响图上。

一致性/频率图表根据组件在整个 UI 中的一致性与其在整个产品的使用频率来绘制组件。

正如我们在上文 Airbnb UI 审核中看到的，按钮的风格相当不一致，但它们在整个产品中被大量使用。相比之下，手风琴折叠面板使用得并不多（可能只在一两个地方），因此总体上是一致的。

可行性/影响图表根据组件设计/开发的可行性以及对整体产品凝聚力的影响程度来绘制组件。

回到 Airbnb 按钮，与手风琴（有很多活动部件）相比，它们的设计和开发相当容易，而且对产品一致性的影响要大得多。

一旦产品中的所有组件都绘制在这两个图表上，我们就可以开始创建优先待办事项。

我们希望重点关注位于两个图表右上象限的组件：这些组件虽然不一致且使用频繁，但设计/开发起来相当可行，并且会产生很大的影响。这些组件将带来最大的投资回报。

根据我们的 Airbnb 结果，从按钮组件开始是一个好主意。

一旦解决了位于右上象限的组件，您的团队就可以决定最佳的推进方式。

您可能希望转向可行、影响力大、在整个 UI 中经常使用但可能比其他组件更一致的组件。

巩固您的品牌形象

在构建设计语言之前，你需要对品牌有强烈的感知。你希望用户在使用你的产品时有什么样的感受？这些情感需要融入你的系统。

为了建立强大的品牌形象，您可能需要问自己以下几个问题：

• 我们希望用户在使用我们的产品时体验到什么样的情感（例如信任、冒险）？
• 我们的使命是什么？
• 我们为什么要做我们所做的事情？

制定指导方针

一旦你确定了品牌标识，你就可以开始定义你的设计语言指南了。以下是一些你需要定义的指南示例：

• 可访问性：您的系统必须符合哪种级别的 W3C 标准？我们如何在系统中构建这种兼容性（例如颜色对比度、字体比例）？
• 品牌：你的品牌标识是什么？你在上一步中已经定义了它。
• 排版：我们应该使用什么类型的比例和字体系列来强化我们的品牌形象？
• 颜色：什么颜色最能唤起我们希望用户感受到的情感？例如，蓝色表示值得信赖。
• 动作：我们如何利用产品中的动画和动作来传达我们的品牌？
• 插图：我们可以在产品的哪些地方使用插图来传达我们的品牌？哪种插图风格符合我们的品牌形象？
• 内容：什么样的语调/角色最能体现我们的品牌形象？
• 图像：什么风格的图标最适合我们的品牌？
• 间距：为了创建一致的 UI，我们要采用什么样的间距范例（即填充、边距）？

构建 UI 工具包

最后，我们准备开始构建 UI 套件。这只是一套包含你的设计语言的视觉设计/原型资源。

该套件将允许设计师在其高保真设计中利用您的系统。Sketch 是一款流行的 UI 套件创建工具。

为你的套件创建强大且井然有序的层次结构至关重要。你可能需要将不同类型的组件（例如通知、表单元素等）分成不同的页面。或者，你可能希望利用符号来保持一致性。

在设计您的套件之前，请务必与您的团队创建一份“工作合同”，以确保在套件组织和工作流程方面大家达成共识。

希望第一部分能成为设计语言的良好入门。第三部分将介绍组件库。欢迎在下方留言，分享你对设计系统的看法。

所有图形均由unDraw提供。