41. 精读《Ant Design 3.0 背后的故事》

精读《Ant Design 3.0 背后的故事》

引言

2018 年初，蚂蚁金服 See Conf 上第一个分享《Ant Design 3.0 背后的故事》给很多人带来了启发。主题精彩又深刻，值得反复咀嚼。

内容概要

设计体系

Atomic Design 书中提到模块化思路以及原子级的模块抽象的方法启发了很多设计师。而解读者中较为说法较作者认同。设计体系是一个具包容性且充满生命力的东西。包容性指的是从组件库到设计语言到设计方法等所有和产品设计相关的方面。而生命力指的是它并非静态的内容，而是可以应对不断变化的环境，是一个不断进化的过程。

Ant Design System

蚂蚁的设计体系中设计语言、设计资产以及体验策略是设计体系最核心的三块内容，分别对应的解决设计体系中的 Consistency、Efficiency 以及 Better UX 的目标抽象成三个关键词。接着对这三部分有详细的解说。

1. 设计语言 设计语言的核心是设计价值观，最初的版本是微小、确定以及幸福感，分别指代我们的细节微创新、模块化思路以及在研发体验上的追求。而 3.0 版在保留 『确定』的基础上，又发掘出了『自然』。Ant Design 认为，一切看似自然的事物在背后都是有数学/物理规律可循的。

• 主字号、字阶和行高 提出两个问题：多大的主字号是自然的？多大的行高是自然的？

第一个问题来源于肉眼到物体之间的距离，物体的高度以及这个三角形的角度，构成了一个三角函数的关系。我们把实际的数值传入得出 14px 这个标准字号。字阶的生长规律来源于经典的字阶和古典音阶具备韵律上的相似性，因此用幂函数的字体计算公式来表达之间的关系。由 14px 这个基础再乘上一个系数。第二个问题来源于字阶函数的反增长。得到了一组原始的行高数组。

基于此再进行一定的调整。最终得出每一个字号之间的间隔都为 16px，行高和字体之间都相差 8。

• 布局与色彩 布局 3.0 也是基于和字体相似的思路完成的，来源于斐波那契双数组的启发。帮助设计师在布局设计决策中更好的实现动态的秩序感。

色彩相对于字体以及布局来说更加会偏向与感性，但依然可以通过搭建三维模拟空间的方式，通过大量观察和调试，掌握了不同颜色在自然光照下对应的 HSB 的变化规律，最终形成了我们 3.0 的色板。

1. 设计资产 设计资产是以 『模块化』为核心思路展开的。在过去的一年 AntD 在 Atomic Design 以及 GE predix design 的启发上，形成了符合自己特点的 E (examples)、T (template)、C（components）、G（global styles） 的抽象思路。
2. 体验策略 体验策略的核心思路是以任务为导向的。主要通过四个方面去构建体验策略：流程与方法、度量体系、运营活动和最佳实践。

精读

整个分享感受颇深，但就『自然』这个关键词才生了我自己的疑问。主字号、字阶和行高是否存在关系

在梳理的这层关系上，缺少了对字体的讨论，而字体又是非常关键的因素。我在之后，断断续续查阅了不少资料。写下关系背后还要考虑的问题。

1. 字体 我在查阅资料的时候，发现 x-height 在西文字体中的概念。在英文字体的设计中，字体的高度体包含三部份，以基线 (baseline) 为中央，以上称之上行区域 (ascender area)，基准线内称之为 x-height，以下称为下行区域 (descender area)。小写西文字母中的核心部件都位于 x-height 位置中，这一位置也被称为排版的核心位置，是引导视线流动的关键。放一张在 wikipedie 上的图：

[image:CCC0E19B-0E90-4989-BD91-A2B33D38E8CD-6272-000031C10BD416C0/820px-Typography_Line_Terms.svg.png]

每一种西文字体的 x-height 是不一样的。非常幸运，Jukka Korpela 做了一网站专门可以测量 web 上字体的 x-height。其中，Arial 的 X-HEIGHT RATIO 是 0.519，而 Tahoma 是 0.545，Times New Roman 是 0.448。Arial 和 Times New Roman 之间的比例差距大概 17%。

西文字体在正文中很少用全大写字体排版也是因为小写字体有一种错落的美感，但问题是每一种字体在同一字号下的字体大小有一定差距的。这里就带出了一些问题，我们常常在英文排版中遇到多种字体混排的情况，为了体现不同的信息，比如 code，比如特殊信息等等。

这是第一个问题，第二个问题是中文字体没有 x-height，也就是说中文字体就等同于西文字体的全大写，错落的美感都没有。而且中文有一个问题是因为字形之前的差异，每个字之间的留白都不尽相同，看上去又会差一些。一般情况下，靠行间距来弥补视觉差，但总体上要排版达到西文字体的效果要花一些功夫。

1. 屏幕 我们的字体大小使用的是 points(pt)，points 是一个物理衡量，它的标准是 72 points per inch（PPI）。但我们不同设备的 PPI 都是不一样的，那么造成了同样的设定在不同屏幕下看到的字体也会有差异。

Macbook Pro 的 PPI 是 220，Dell XPS 的 PPI 是 165，iPhone 7 有 326，但 iPhone 7p 的 PPI 有 401，而一般 HDTV 的 PPI 是 30。其中，iPhone，Macbook 都是 retina 屏。

在目前这个时代，越来越多的设备在 web 化，那么我们所接触到的设备会越来越多。PPI 的不同造成了我们所需要基准字体的不同，一套设计语言是否考虑更普适的情况，还是考虑不同设备之间的情况，这是一个问题。

目前来看，我们的确可以根据不同 PPI 去设定，但这个设定自然带来极高的成本。

1. 视觉角度

我们虽然定义了一个 14px，但在不同的视觉角度下看到的 14px 其实也是不一样的。这个 14px 的原始值是基于人与设备一定的角度下算出来的。我们知道，人对于不同设备，甚至在不同环境下看到屏幕的距离和角度都是不同的，因为字体物理大小不等视觉大小。

基于此，我认为普适的字体基准是不存在的，只能在很多条件的约束下给定的一个值，对于公式也是一样的。我们在一定的范围内，公式表达出一种自然的特征，但这种自然是有范围的。

总结

曾经有国外的设计师有写文用黄金比例来构建字号与行高的关系，在一片喝彩中看到了资深设计师的反对，主要也是从以上和一些其它因素来说关系是比较难设定。

今天看到我们的设计与理性之间建立的关系，我还是比较坚信建立这种关系背后带来的是更大的价值。