转载Ant Design 3.0 的设计体系简介

Posted 2021-04-24 OHMY设计

本文转自知乎专栏蚂蚁金服体验科技

前段时间，首届蚂蚁金服体验科技大会 SEE Conf 2018 成功召开，共有十几位讲师及特邀嘉宾亲临现场，与大家分享体验科技的那些事儿。

其中，第一位分享的嘉宾是 Ant Design 的负责人它山，揭秘了 Ant Design 3.0 设计语言背后细节以及数理逻辑。

它山老师

分享视频

作为蚂蚁金服推出的 UI 设计语言，Ant Design 经过近 3 年的打磨渐趋成熟。在 1 月 6 日当天，Ant Design 3.0 正式发布，从 UI 组件库的概念升级至面向企业级的设计体系的概念。

Ant Design 3.0 的设计体系是怎样的呢？一起来看看吧：

小编粗略地把它山老师的讲稿整理为如下思维导图

（点开可看高清大图）

由思维导图可看到，Ant Design 3.0 的设计体系由设计资产、体验策略和设计语言三部分组成。为了保证设计体系的完整有效，需要有一个 System Operation Team 的团队模型合力维护这三部分核心内容。

团队模型

“一个设计体系对应的需要有一个团队去维持它的运作。”

Ant Design 有一个大约十几个人的核心团队、名为 System Operation Team，由工程师和设计师组成。除了维护着设计体系中的三个核心内容外，还兼顾着 PD 以及运营的职责。

但 Ant Design 的核心小组并没有完全脱离业务线，而是同时参与在具体的产品设计中。

“这样的方式可以保证我们所沉淀的设计模式始终来自于实际的场景，同时新产生的内容可以快速的在实际场景中的得以验证。”

此外，所有业务线的设计师都被分成小组，有定期的团队沟通机制，内部开放的设计资产池以及小组间的合作项目来保证核心团队同业务团队的紧密性。同时，除了几个关键人员之外，核心团队定期会有人员的流入和流出。

“目的是保证团队的活性，这也是维持设计体系生命力的一种方式。”

设计体系-设计资产

设计资产是 Ant Design 整个设计体系的起点，也是设计和技术结合最为紧密的一个部分，包括 design+coding 的 UI 资产以及与之对应的设计文档、技术文档，各类资源包等内容。Ant Design 设计资产的核心思路是 『模块化』，抽象思路是E (examples)、T (template)、C（components）、G（global styles） 。

目前 Ant Design 网站上的基础组件以及 Ant Design Pro 这两块内容都是基于 ETCG 的思路一步一步抽象出来的，这些内容也是 Ant Design 在企业级业务场景中抽象出来的最为稳定以及复用程度最高的部分。

设计体系-体验策略

有了设计资产作为基础后，体验策略是往前的一步，以任务为导向。在这一思路的带领下，Ant Design 主要通过四个方面去构建体验策略。

• 流程与方法：在产品前期就开始大量的推行用户体验地图，确保用户需求能够在产品前期就明确被整个团队所感知。

• 度量体系：着重于 task sucess 核心任务进行度量。

• 运营活动：当然体验不是设计师一种角色的事，我们还会通过 体验一起造 活动将产品的各方人员 involve 进来，共同关注产品体验发掘产品问题。

• 最佳实践：是体验策略的最终目标，过程中产出模块化的解决方案可以反哺给 UI 资产，而核心流程与方法再沉淀之后又可以帮助到更多的产品。

设计体系-设计语言

Ant Design 3.0 设计价值观是『自然』。

Ant Design 认为，一切看似自然的事物在背后都是有数学/物理规律可循的。映射到我们的设计中，从自然的数理规律中寻找启发，理性的看待我们设计决策的过程，将设计结果、影响结果的变量、以及他们之间的规律发掘出来，就是我们的方向。而这个理性思考，感性表达的过程和我们团队的技术基因也是非常匹配的。

对于『自然』这个新的价值观，Ant Design 3.0 进行了字体、布局以及色彩三方面的诠释。

设计体系-设计语言-字体

设计师在字体设计过程中需要关注非常多的方面，而 Ant Design 3.0 在字体领域着重于其中三个方面：主字号、字阶段以及行高。“这三者之间在设计决策时存在一个递进关系，”同时，Ant Design 3.0 在每个方面都考虑到了『自然』这一新的价值观。

1. 多大的主字号是自然的？

Ant Design 3.0 主字号的确定主要根据下图：

肉眼到物体之间的距离，物体的高度以及这个三角形的角度，构成了一个三角函数的关系。而公式中的 h 的值和我们要解决的核心问题『主字号』有着很大的关系。关于这个 a 的角度，有机构和团队做过研究，当大于 0.3 度时的阅读效率是最好的。同时我们在操作电脑时，一般来说眼睛距离电脑屏幕的平均值大概会在 50 厘米左右。然而，公式中的距离和高度的单位都是厘米，字体的单位是 pixel。因此我们还需要将二者之间做一轮转换，完成转换所需的两个数值分别是 2.45（cm 到 inch）和 PPI（inch 到 pixel）。

我们假定 PPI 为 120。通过计算便可以得出在显示器的 PPI 为 120 的情况下，理论上大于 12px 的字体能够满足用户的最佳阅读效率。基于这样的思路，确定主流 PPI 的范围，就很容易锁定主字体的大小了。根据网络上的数据来源，我们发现只有大约 37.6% 的显示器 PPI 是小于 120 的，而 PPI 在 120－140 的显示器的占比大约为 40%。换句话说 12px 的字体只能满足 37.6% 用户的阅读体验，但如果我们将字体放大到 14px，就可以保证大约 77% 的显示器用户处于比较好的阅读体验。因此在 3.0 我们将主字号进行了升级，从原本的 12px 调整至 14px。

在这个问题的解答过程中，我们遵循的规律是一个三角函数，决定这个三角函数结果的变量分别是 a 角度、d 距离、以及显示设备的 PPI。 根据这样的思路我们同样可以非常简单的推导出手机客户端的主字体大小。

2. 怎样的字阶是自然的？

Robet Bringhurst 在他的字体样式元素一书中有提出过，定义有规律的字阶是构建设计秩序感的基础。同时他又提出经典的字阶和古典音阶具备韵律上的相似性。在这个思想的基础之上，有个叫做 Spencer 的人提出了一个幂函数的字体计算公式。用图形化来表达就是这样的。有了这一个公式，让一粒 14px 的字体种子种发芽的想法就变得不是那么的天马行空了。

f0 我们可以理解成为起始字号，也就是主字体，我们前面有推导出来为 14px。r 的值决定了这条曲线的趋势，可以理解成字阶的生长一个趋势。这个数值的启发来源于自然常数 e，这是一个无理数，大约等于 2.71828。n 则代表了我们如何在曲线上取对应的数字，决定这个数值大小的关键在于我们希望相邻的两个字号之间的差距是大还是小。Spencer 在他的文章中有提到过，建议 n 在选择上可以参考音律的规则，比如说 3 音阶、4 音阶、5 音阶、7音阶等等，这样可以令字阶呈现出一种自然的节奏感。在做了大量的页面落地试验之后我们将这个数值定成 5。映射到音乐的世界中，正好是 5 音阶。5 声音阶是很多古典乐遵循的规律，比如我国古代的宫商角徵羽。

我们将三个数值代入到前面公式之后，可以得到一组关于字阶的原始数组。它们是基于 14px 的字体，以自然常数的生长律，同时用 5 声音阶的单元切分方式得出来的。

3. 多大的行高是自然的？

行高大家都知道指的是一个字体外框的肉眼不可见的部分。在 Ant Design 的第一版行高计算思路中，我们用字体乘一个固定的倍数去定义行高。但在实际设计中，我们发现这样的方式会有一个问题，当字体越大，行高也会越来越大。在字体 2.0 的时候，我们在字阶上做了一个分水岭，超过某一个字号的字体行高一律乘以一倍。但以上这两种做法会增加我们在排版布局层面的规则复杂度，同时不便于计算和记忆。在 3.0 这个阶段，我们决定尝试用『自然』来解决这一问题。首先，我们需要定义出行高的计算规律，除了字阶的计算公式之外，我们还有另外两个信息的输入：

设计师希望字体高度和行高之间能从静态黄金比出发。

但是基于设计经验，同时不给布局造成压力，我们希望行高的增长速度能够随着字体的增长逐渐趋向于缓慢，并且最终不要超过 1 倍。

借由这样的思路。我们在字号的基础之上将增长率做了一个自然律反相的负增长，从而定义了行高的计算公式。根据这一公式，同样的我们得到了一组原始的行高数组。

现在我们拥有了两组基于 14px 的原始字号。

基于上面这两组字号，我们还需要微调让它们可以进一步落地应用，这两个原则分别为：偶数原则和简化记忆原则。经过调整之后，右边这一组字号就是这一次的字体 3.0。所有的字体以及行高都符合偶数原则，并且行高和字体之间都相差 8，更加便于记忆。

现在，我们将这 10 个字号带行高从小到大依次进行排列，每一个字号之间的间隔都为 16px。然后，我们将之前两个版本的字号带行高按照同样的间隔排列。让我们看一下三个版本之间的差别。可以明显的感受到第三个版本的字体排列起来更为自然，同时更有秩序感。

当然，新的字号还需要进一步落地到实际页面中进行可行性验证。大家都知道实际的设计过程中有非常多的因素会影响我们设计对于一个页面结果的判断，为了让字体更好的被感知，我们通过去色去图形的方式来加强字体的被感知度。设计师用这样的方式一共反复尝试了近 200 多张页面的设计，覆盖了后台大部分类型的场景。得到的结果是：

• 新的字阶在落地中可以实现更为和谐的界面结果。

• 设计师在使用这一套字阶的时候明显感觉到设计决策的过程变的轻松很多。

• 不同的设计师产出页面一致性都比以前有了明显的提升。

总结一下：整个字体的推导过程就是发掘结果和变量间的规律的过程，并且自然的数理规律在这当中起到了很大的作用。借由这样的过程，我们将原本感性的设计思考通过理性的方式呈现出来，让设计者可以更为自信的去应对不断发生的变化，这就是可控性。

设计体系-设计语言-布局

基于『动态、体系化』角度出发，以『秩序之美』为原则。

统一的画板尺寸

统一设计板的尺寸可减少沟通与理解的成本。蚂蚁中台设计团队统一的画板尺寸为 1440。

适配方案

一、左右布局的适配方案

常见的做法是将左边的导航栏固定，对右边的工作区域进行动态缩放。

二、上下布局的适配方案

常用做法是对两边留白区域进行最小值的定义，当留白区域到达限定值之后再对中间的主内容区域进行动态缩放。

网格单位

Ant Design 通过网格体系来实现视觉体系的秩序。网格的基数为 8，不仅符合偶数的思路同时能够匹配多数主流的显示设备。

栅格

Ant Design 采用 24 栅格体系。以 1440 上下布局的结构为例，对宽度为 1168 的内容区域进行 24 栅格的划分设置，如下图所示。Ant Design 为页面中栅格的 Gutter 设定了定值，即浏览器在一定范围扩大或缩小，栅格的 Column 宽度会随之扩大或缩小，但 Gutter 的宽度值固定不变。

常用模度

为了达到界面布局上的一致性和韵律感，统一设计到开发的布局语言，减少还原损耗，Ant Design 提出了 UI 模度的概念。通过大量的实践，Ant Design 提取了一组可以用于 UI 布局空间决策的数组，他们都保持了 8 倍数的原则、具备动态的韵律感，可以在一定程度上帮助设计师更快更好地实现布局空间上的设计决策。

设计体系-设计语言-色彩

色彩模型

Ant Design 的设计团队倾向于采用 HSB 色彩模型进行设计，该模型更便于设计师在调整色彩时对于颜色有明确的心理预期，同时也方便团队间的沟通。

系统级色彩体系

Ant Design 系统级色彩体系同样源于『自然』的设计价值观。设计师通过对自然场景的抽象捕捉，结合蚂蚁的技术基因，形成了特有的 12 色。进一步又通过大量的观察，捕捉不同色彩在自然光下的变化规律，借助美术中素描的思路，对 12 个颜色进行了衍生，并平衡了可读性、美感以及可用性，从而得出中性色板的定义。

基础色板

Ant Design 的基础色板共计 120 个颜色，包含 12 个主色以及衍生色。这些颜色基本可以满足中后台设计中对于颜色的需求。

中性色板

中性色包含了黑、白、灰，可见于蚂蚁中后台的大部分网页设计中。合理选择的中性色能够令页面信息具备良好的主次关系，有助于提升用户的阅读体验。Ant Design 的中性色板一共包含了从白到黑的 10 个颜色。

数据可视化色板

数据可视化色板是在基础色板以及中性色板的基础上，融合 AntV 『有效、清晰、准确、美』的原则产生的。

色板生成工具

如果上面的色板不能满足你的需求，你可以选择一个主色，Ant Design 的色彩生成算法会为你生成完整的色板。

网址：https://ant.design/docs/spec/colors-cn

产品及色彩体系

品牌色

品牌色是体现产品特性和传播理念最直观的视觉元素之一。在色彩选取时，需要先明确品牌色在界面中的使用场景及范围。在基础色板中选择主色，Ant Design 建议选择色板从浅自深的第六个颜色作为主色。

功能色

功能色代表了明确的信息以及状态，比如成功、出错、失败、提醒、链接等。功能色的选取需要遵守用户对色彩的基本认知。Ant Design 建议在一套产品体系下，功能色尽量保持一致，不要有过多的自定义干扰用户的认知体验。

中性色

Ant Design 的中性色常用于界面的文字部分，此外背景、边框、分割线、等场景中也非常常见。产品中性色的定义需要考虑深色背景以及浅色背景的差异，同时结合 WCAG 2.0 标准。

它山老师的分享到这里就结束啦，看完之后是不是对Ant Design 3.0 的设计体系有了更多认识呢？想要了解它山老师的详细分享内容，可戳阅读原文。

图片 | 网络

转载请在后台留言，谢谢

-END-

▼