AntDesign变了，升级5.0圆润又轻透…
The following article is from 长弓小子 Author 元尧
Top2 互联网大厂高级体验设计师，分享设计工作经验，专注 B 端交互体验设计
蚂蚁集团的设计体系 Ant Design（以下简称 AntD）最近迎来了 5.0 版本的升级。不仅带来了新的设计风格和样式，也在组件的生产方式和消费效能上做了众多提升和优化。本文会从以下几个方面为你做介绍和分析：
组件的样式更新：有序 & 轻松
组件的生产规范：元规范
产研的效能提升：算法 & Token
协作的流程优化：低代码协作平台
Part 1
1. 更聚焦
“更聚焦”主要体现在色彩、字体和交互反馈上。
色彩：AntD 5.0 的主色 #1677FF 相较于过去的 #1890FF，纯度和对比度更高，在视觉上也显得更“崭新”：
字体：核心文字的色阶 Text 65% 更新至 Text 85%；部分标题的字重也做了调整，增强层次感，信息的传达更加清晰：
反馈：导航以及列表顶部的 icon 的交互反馈样式升级。相较于之前 icon 在鼠标悬停时只是简单的变色，新版本进行了热区变色和尺寸放大的处理，让用户注意力更易于聚焦：
2. 去干扰
“去干扰”主要体现在布局和去线框化的方式上。
布局：AntD 5.0 把顶导航与侧导航与背景融为一体。将底层背景抹平、弱化，降低对比度，让右侧核心内容区突显出来，做到 “内容向前，设计向后”：
去线框化：边框与分割线虽是 UI 设计的重要元素，但过多使用也会导致页面看起来散乱。AntD 对 60 多个组件分别进行了“大胆去线”、“转化去线”和“谨慎去线”，使单个组件乃至整个页面更加干净清爽，降噪去扰：
3. 轻松感
“轻松感”主要体现在形态和质感上。
以圆角为例，“让科技有温度”一直是蚂蚁集团的设计理念。AntD 5.0 采用了更大、更精细化的圆角来体现这一理念，对常规的外围圆角做了数值优化，也对形状衔接处的圆角做了整理和规范：
AntD 根据团队自身业务实践和社区的呼声，新增了 4 类组件和变体组件：
这些组件从开始构思到设计完成，都有着严谨的分析和推敲过程，并称之为“元规范”，也即“规范的规范”。
“元规范”的使用者是设计资产的生产者和建设者，其重要意义是能够用于：
1. 确定做什么组件
2. 评估组件的质量
1. 确定做什么组件
AntD 发展至今，其自身体系和派生出的子系统逐渐完善和丰富。那么这么多的组件是怎么被设计和扩展出来的？一个设计系统应该有多少组件？
在之前，我们的设计依据来源于历史数据、用户和业务等方面的信息和需求输入，这其实是一种相对“被动式”的生产方式。组件设计师自己无法定义设计资产的范围，用户和业务方说要加什么，我们就加什么。
而“元规范”作为一套新的设计视角，就是从设计资产的本身和本质出发，思考要解决什么的是问题，以此来确定和判断组件生产需求的合理性和发展方向。以这样的“主动式”思考方式作为基建建设的底盘，更具长远性和逻辑性，可使 AntD 资产及其衍生出的子系统拥有自我补充和健康迭代的能力：
这也很像柳冠中先生提出的设计事理学，主张设计的出发点是“事”，而非“物”。设计解决的是人的衣食住用行交流等等生活需求，而不是制作房子、车子、票子等物品：
2. 评估组件的质量
一个设计系统其实就是一款工具型产品。设计资产的质量达标，才能更好地支持业务需求，为业务注入更多设计价值。
* “元规范”这个概念相对比较抽象，内容也很丰富。本文先介绍至此，其余内容我会在日后的文章中给大家做进一步的详细拆解。
Part 3
AntD 5.0 升级的核心基础在于对算法和 Token 的应用，使得 Design 和 Coding 之间的关系更加紧密。本次优化及新增的算法包括：
圆角算法
AntD 5.0 重新定义了产品的圆角体系，圆角体系算法中包含了三个维度的探索和思考：
基准圆角是最基础的维度，用于定义产品整体视觉风格及感受。比如 AntD 设定通用基准圆角为 12px，那么算法会推荐偏向科技感的产品使用小圆角（12-2=10px）作为该产品的基准圆角，以突出硬朗的感觉；推荐偏向柔美感的产品使用大圆角（12+2=14px）作为该产品的基准圆角，以突出温暖的感觉。
这一维度用于定义每个组件的圆角使用规范。比如因组件的尺寸不同，输入框组件的圆角就与弹窗卡片的圆角大小不同。圆角算法会根据组件尺寸来处理圆角的大小，按照一定的美学原理生成适合每个组件的个性化圆角数值，并做好整套组件的圆角搭配。
这一维度用于定义组件中特殊局部的圆角使用规范。比如我们上面介绍过的气泡组件中的指向性小三角形和四方形之间的夹角，算法会对这种不规则形状及其衔接处做圆角数值设定。
可以说，圆角算法让产品的“美感”和“性格”成为一种可以被计算的理性表现方式：
色彩算法
在 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 页面级组件。我在之前的文章：详解｜页面级组件的意义和用法 也为大家介绍过相关概念。
ProLayout（高级页面布局）组件在页面设计中很常用，AntD 5.0 将这个组件和 Design Token 的配置能力相结合，将组件中的所有变量全部开放出来，比如行间距、组件高度等变量设置，做成“紧凑型”、“宽松型”等设计预设解决方案，并支持使用者做小范围定制修改。这些预设方案来源于设计规范和算法的结合。使用预设方案，设计师就不用自己去做大量的设计尝试、配置和寻找页面布局的最优解了：
Part 4
AntD 5.0 颇具前瞻性地提出：使用低代码协作平台，作为流程上的优化方案来解决各专业工种之间的认知问题和沟通的时效问题。我在文章：低代码平台对于设计的意义和影响 中介绍过低代码平台本质上解决的是“业务模型”、“界面设计”与“代码实现”三者之间的协同关系。
举个例子，设计师出稿子时，很多文案内容因为要过法务或其他原因而无法确定。在最终确定之后，设计再修改文件并通知前端做同步更新。这样的流程甚至会在一个需求中反复出现，是非必要的消耗。
对此，AntD 5.0 推出了 Sketch 插件 Kitchen 的新功能：ProTable Studio（内测）和帮助系统 ProHelper（内测），都是以流程提效为目的所做的低代码平台探索。
使用 ProTable Studio，产品经理可以从语雀文档里面复制一个表格，粘贴在插件中，直接去配置表格的内容和功能样式。表格的整个代码在完成后可以直接复制给前端进行开发使用。这样的协作方式比传统流程的效率提升了 3 倍：
而 ProHelper 帮助系统，则是针对产品帮助系统中的不同数据类型和内容提供组件渲染能力。产品经理可以直接在 ProHelper 中编辑帮助系统的功能排布和内容文案，并管理数据源，帮助系统就可以直接被渲染出来，所写即所得。除了提供简单、基础的设计指导建议，设计师和开发在整个帮助系统的产研工作中不需要再有更多参与：
说了这么多，不论怎样升级，Ant Design 始终坚持以人为本，认真生活，快乐工作。希望这是一个开始，呼吁行业设计多关注企业级产品，为产品注入更多的情感与关怀。
现在组件库已经更新，可以在底部点击阅读原文领取。