详解｜Ant Design 5.0 更新！设计升级内容全面盘点！

     关注「长弓小子」看更多设计干货！

Hi，我是元尧。长按下图二维码加我微信，带你进设计师交流群，与上万名小伙伴一起交流成长！

「👇 添加好友请备注：设计交流」

   全文共 4227 字，阅读需要 12 分钟

‍蚂蚁集团的设计体系 Ant Design（以下简称 AntD）最近迎来了 5.0 版本的升级。不仅带来了新的设计风格和样式，也在组件的生产方式和消费效能上做了众多提升和优化。本文会从以下几个方面为你做介绍和分析：

• 组件的样式更新：有序 & 轻松

• 组件的生产规范：元规范

• 产研的效能提升：算法 & Token

• 协作的流程优化：低代码协作平台

Part 1

组件的样式更新

「有序 & 轻松」

AntD 的组件常被用户吐槽太“土”，感觉“跟没设计过一样”。这次升级，AntD 重新定义了企业级产品“美”的标准：

更美的企业级应用 = 更舒适的办公体验

企业级产品要“美”，就要为用户提供一个更加轻松、舒适的线上虚拟办公空间，使其能够享受其中，快乐工作。由此 AntD 便推演出 5.0 设计升级的指导原则：

信息有序，认知轻松。

根据这个原则，进一步确定了三个设计目标：

- 更聚焦

- 去干扰

- 轻松感

有了这三个目标之后，接下来就由设计师从形式制作的层面将这三个目标落地实现：

1. 更聚焦

“更聚焦”主要体现在色彩、字体和交互反馈上。

   色彩：AntD 5.0 的主色 #1677FF 相较于过去的 #1890FF，纯度和对比度更高，在视觉上也显得更“崭新”：

   字体：核心文字的色阶 Text 65% 更新至 Text 85%；部分标题的字重也做了调整，增强层次感，信息的传达更加清晰：

   反馈：导航以及列表顶部的 icon 的交互反馈样式升级。相较于之前 icon 在鼠标悬停时只是简单的变色，新版本进行了热区变色和尺寸放大的处理，让用户注意力更易于聚焦：

2. 去干扰

“去干扰”主要体现在布局和去线框化的方式上。

   布局：AntD 5.0 把顶导航与侧导航与背景融为一体。将底层背景抹平、弱化，降低对比度，让右侧核心内容区突显出来，做到 “内容向前，设计向后”：

   去线框化：边框与分割线虽是 UI 设计的重要元素，但过多使用也会导致页面看起来散乱。AntD 对 60 多个组件分别进行了“大胆去线”、“转化去线”和“谨慎去线”，使单个组件乃至整个页面更加干净清爽，降噪去扰：

3. 轻松感

“轻松感”主要体现在形态和质感上。

以圆角为例，“让科技有温度”一直是蚂蚁集团的设计理念。AntD 5.0 采用了更大、更精细化的圆角来体现这一理念，对常规的外围圆角做了数值优化，也对形状衔接处的圆角做了整理和规范：

Part 2

组件的生产规范

「元规范」

AntD 根据团队自身业务实践和社区的呼声，新增了 4 类组件和变体组件：

这些组件从开始构思到设计完成，都有着严谨的分析和推敲过程，并称之为“元规范”，也即“规范的规范”。

“元规范”的使用者是设计资产的生产者和建设者，其重要意义是能够用于：

1. 确定做什么组件

2. 评估组件的质量

1. 确定做什么组件

AntD 发展至今，其自身体系和派生出的子系统逐渐完善和丰富。那么这么多的组件是怎么被设计和扩展出来的？一个设计系统应该有多少组件？

在之前，我们的设计依据来源于历史数据、用户和业务等方面的信息和需求输入，这其实是一种相对“被动式”的生产方式。组件设计师自己无法定义设计资产的范围，用户和业务方说要加什么，我们就加什么。

而“元规范”作为一套新的设计视角，就是从设计资产的本身和本质出发，思考要解决什么的是问题，以此来确定和判断组件生产需求的合理性和发展方向。以这样的“主动式”思考方式作为基建建设的底盘，更具长远性和逻辑性，可使 AntD 资产及其衍生出的子系统拥有自我补充和健康迭代的能力：

这也很像柳冠中先生提出的设计事理学，主张设计的出发点是“事”，而非“物”。设计解决的是人的衣食住用行交流等等生活需求，而不是制作房子、车子、票子等物品：

2. 评估组件的质量

一个设计系统其实就是一款工具型产品。设计资产的质量达标，才能更好地支持业务需求，为业务注入更多设计价值。

AntD 5.0 建立了元规范组件评估模型。就如同一款产品需要进行用户体验度量监测一样，设计系统也需要建立起清晰的检测体系，来衡量组件资产的质量优劣，提升组件自身的易用性和设计水准，让资产更加高质和稳定：

* “元规范”这个概念相对比较抽象，内容也很丰富。本文先介绍至此，其余内容我会在日后的文章中给大家做进一步的详细拆解。

Part 3

产研的效能提升

「算法 & Token」

AntD 5.0 升级的核心基础在于对算法和 Token 的应用，使得 Design 和 Coding 之间的关系更加紧密。本次优化及新增的算法包括：

   圆角算法

AntD 5.0 重新定义了产品的圆角体系，圆角体系算法中包含了三个维度的探索和思考：

1. 确定基准圆角

基准圆角是最基础的维度，用于定义产品整体视觉风格及感受。比如 AntD 设定通用基准圆角为 12px，那么算法会推荐偏向科技感的产品使用小圆角（12-2=10px）作为该产品的基准圆角，以突出硬朗的感觉；推荐偏向柔美感的产品使用大圆角（12+2=14px）作为该产品的基准圆角，以突出温暖的感觉。

2. 延展其他尺寸

这一维度用于定义每个组件的圆角使用规范。比如因组件的尺寸不同，输入框组件的圆角就与弹窗卡片的圆角大小不同。圆角算法会根据组件尺寸来处理圆角的大小，按照一定的美学原理生成适合每个组件的个性化圆角数值，并做好整套组件的圆角搭配。

3. 特殊场景优化

这一维度用于定义组件中特殊局部的圆角使用规范。比如我们上面介绍过的气泡组件中的指向性小三角形和四方形之间的夹角，算法会对这种不规则形状及其衔接处做圆角数值设定。

可以说，圆角算法让产品的“美感”和“性格”成为一种可以被计算的理性表现方式：

   色彩算法

在 5.0 之前 AntD 已有色板算法，这次对所有主题色优化了暗黑模式的处理方案，并新增了“知识协作”和“桃花缘”等多款定制化主题：

AntD 5.0 色板算法会基于对视觉层级的研究，根据页面内容结构和用户的注意力分层模型来构建中性色的设计语义，以此构建出色彩和页面元素层级之间的梯度变量关系：

这样可以确保页面的卡片层级不会因为更换色彩模式而产生视觉层级的混乱排布，使组件和页面层级在亮色模式和暗色模式下可以流畅转换：

结合 Google 在业界提出的 HCT 色彩空间，AntD 也正在内测 Color Studio，使用色彩算法定制功能，使用户在更换主题色时，能够让页面元素保持正确的视觉层级效果：

   Token 算法

我曾经在 Design Token 在设计系统中的意义与应用 一文中介绍过 Token 的价值和意义。AntD 5.0 在 Token 的应用上更进一步，将 Token 拆分为三个层次：基础变量（Seed Token）、梯度变量（Map Token）和别名变量（Alias Token），三者之间层层递进和绑定，使得 Token 在遇到业务优化需求时，有了更多的灵活性：

举个例子，如果你想一键优化产品的全局主题颜色，那就更改“基础变量（Seed Token）”；而如果你想一键只更改产品的所有弹窗中的按钮颜色，那就更改“别名变量（Alias Token）”，这样就不会影响到其他组件的按钮颜色。

对于设计侧与前端开发的 Token 交付，AntD 5.0 提供了 Sketch 插件新功能 Kitchen Measure 交付工具，开发可以直接在该工具中查到设计师使用的 Token，一键复制相应前端代码直接使用在产品开发过程中，以此减少设计与前端之间的对接损耗：

AntD 5.0 也提供生成和拓展 Token 的框架和模型算法。这意味着开发者可以选择一个现成的算法，再加上自己拓展的部分算法，来生成一套适合业务组件风格的全量的 Design Token：

   ProComponents 算法（内测）

早在 5.0 之前，AntD 就有 ProComponents 页面级组件。我在之前的文章：详解｜页面级组件的意义和用法 也为大家介绍过相关概念。

一个 ProComponent 相当于一整个页面，可以帮助开发做产研提效，无需设计师的参与也能做出质量合格的产品页面。但由于这类页面级别组件的应用规则相对复杂，最终体现在产品中的页面效果并不理想：

那么，如何提升设计师和开发在使用这类复杂组件时的产出质量呢？AntD 5.0 首先在设计层面做了大量的设计研究，对 ProComponents 的设计规范进行整体升级，然后将升级后的规范写入算法，作为开发使用时的指导方案，让算法理性地计算和指导开发的工作，以此提升产研质量。

举个例子，基于用户的“视觉层次模型”和“视线流”的研究，AntD 5.0 对 ProLayout （高级布局组件）做了使用规范的升级：

ProLayout（高级页面布局）组件在页面设计中很常用，AntD 5.0 将这个组件和 Design Token 的配置能力相结合，将组件中的所有变量全部开放出来，比如行间距、组件高度等变量设置，做成“紧凑型”、“宽松型”等设计预设解决方案，并支持使用者做小范围定制修改。这些预设方案来源于设计规范和算法的结合。使用预设方案，设计师就不用自己去做大量的设计尝试、配置和寻找页面布局的最优解了：

不过 AntD 并不希望这些预设成为设计师发挥创造力和主动性的阻碍。所以 ProLayout 会把组件中所有的构件拆解，分成不同模块，让设计师可以自行配置每个模块的视觉风格，甚至支持手写代码，加入你自己设计的动态效果，让页面的样式更加丰富、细腻：

Part 4

协作的流程优化「低代码协作平台」

AntD 5.0 颇具前瞻性地提出：使用低代码协作平台，作为流程上的优化方案来解决各专业工种之间的认知问题和沟通的时效问题。我在文章：低代码平台对于设计的意义和影响 中介绍过低代码平台本质上解决的是“业务模型”、“界面设计”与“代码实现”三者之间的协同关系。

举个例子，设计师出稿子时，很多文案内容因为要过法务或其他原因而无法确定。在最终确定之后，设计再修改文件并通知前端做同步更新。这样的流程甚至会在一个需求中反复出现，是非必要的消耗。

对此，AntD 5.0 推出了 Sketch 插件 Kitchen 的新功能：ProTable Studio（内测）和帮助系统 ProHelper（内测），都是以流程提效为目的所做的低代码平台探索。

使用 ProTable Studio，产品经理可以从语雀文档里面复制一个表格，粘贴在插件中，直接去配置表格的内容和功能样式。表格的整个代码在完成后可以直接复制给前端进行开发使用。这样的协作方式比传统流程的效率提升了 3 倍：

而 ProHelper 帮助系统，则是针对产品帮助系统中的不同数据类型和内容提供组件渲染能力。产品经理可以直接在 ProHelper 中编辑帮助系统的功能排布和内容文案，并管理数据源，帮助系统就可以直接被渲染出来，所写即所得。除了提供简单、基础的设计指导建议，设计师和开发在整个帮助系统的产研工作中不需要再有更多参与：

说了这么多，不论怎样升级，Ant Design 始终坚持以人为本，认真生活，快乐工作。希望这是一个开始，呼吁行业设计多关注企业级产品，为产品注入更多的情感与关怀。

——————

以上就是元尧为你总结的 AntD 5.0 更新内容，篇幅所限，未及详尽，更多设计细节和实践经验我会在日后的文章中为你做拆解，欢迎关注 👇👇👇

最后贴一张偏右大佬在 AntD 5.0 发布会上使用的图，内有彩蛋，相信读过元尧这么多文章的你，一定能找得到 😄：

---

如果你有其他与设计系统和组件相关的问题，也欢迎向我提问，带你加入设计师交流群，识别二维码👇👇👇添加我的微信。添加好友请备注：设计交流。

👇 关于设计系统，更多内容日后为你精解 👇

- END -

欢迎长按图片👇👇👇加我微信

带你加入设计师社群

了解更多设计理念和设计方法

期待与你的交集！

「添加好友请备注：设计交流」