本文是蚂蚁集团体验设计师闻冰（社区称呼：空谷）在 Ant Design 5.0 发布会上的分享内容文字版，《Ant Design 5.0 设计工程化》，从设计工程化的角度，和大家聊聊 Ant Design V5 中为整个消费链路所带来的灵活性变革。
前言
大家好，我是蚂蚁集团的体验设计师闻冰，来自数字科技设计团队，也是 Ant Design 的设计师与 Kitchen 的开发者。在外网的昵称是空谷，偶尔在知乎语雀等平台活跃。我的分享会从设计工程化的角度，和大家聊聊 Ant Design v5 中为整个消费链路所带来的灵活性变革。
如今在蚂蚁，Ant Design 不再仅仅是一个服务于设计消费者的设计系统，它也在服务于设计生产者产出业务设计系统，业务设计师再基于业务设计系统进行业务设计。在这样架构下，之前传统的设计协同方式已经不太能很好的满足我们对于品质与效率的诉求。
V5 消费全链路的灵活性变革
因此 Antd Design 在这样的设计协同模式下，势必会变成一个通用设计系统。那么基于这样的一个消费结构，我们在 v5 中实施了从下到上的全链路升级改造，最终为终端的业务设计师带来了极好的灵活性消费能力。
1. 业务设计系统：可视化主题编辑器
首先是业务设计系统的环节，我们在 v5 中提供了一个可视化的主题编辑器，能够帮助业务设计系统灵活定制业务的主题。
其实在 V4 以及之前的时候，我们其实也有所谓的变量，但它都是以代码的形式存在。设计师看不懂，也不知道修改完之后会是一个什么样子的，能定制的内容也相对来说非常有限。
那在 V5 中，我们在 Ant Design 官网上提供了主题编辑器，能够帮助大家更加可视化地看到 Antd Design 当中能定制的部分。然后定制完成之后，我们可以完整的预览相应的页面效果。
2. 业务资产消费：C2D 组件 + 自定义主题 = 无限设计资产
在资产消费层面，在其实 v4 以及之前，业务设计师要在Sketch、 Figma 这样的设计工具中去定制一套业务设计组件库资产。那业务的设计系统设计师要去维护成百上千个 symbol 、 component 。一旦设计规范发生了调整，比如说改个主色，改个圆角，甚至改个间距，改个阴影，加个描边，那 symbol 基本上全部都要从头来做一遍。所以对于业务来说，之前定制业务设计系统的成本是非常非常高的。
正是因为业务设计系统的定制成本过高，业务设计组件的变体不会很全，那这也就会使得业务设计师在做业务设计时，可能仍然会耗费时间重复绘制一些基础组件的变体，而这样的过程中就又会出现重复劳动、样式一致性等问题。
而在 V5 中，我们结合了 C2D 与 antd 自定义主题的能力。通过自定义主题的方式，我们能够非常高效的去生成业务的设计组件资产。同时由于组件的变体也是通过 c2d 方式生成，所以样式变体的完备性可以得到一个很好的保障。最后结合 kitchen 的配置面板也会以更加贴合组件的变体形态来承载，使用体验将远超 sketch、Figma 现有的组件配置。
3. 通用设计系统：Token System 构建完善的设计语义模型
而实现上述两大功能的核心，得益于我们在底层为 antd v5 构建了一个非常完备的 Token System 设计模型。从色彩、圆角到尺寸、阴影等等都会在这个 Token System 的框架下成型与生长。
Design Token System
接下来第一趴和大家详细展开聊聊的，也就是我们在 And Design V5 当中为通用设计系统这一层提供的 Design Token System。
Design Token 的“花”与“刺”
Design Token 这个概念可能会有设计师或者开发同学还不知道，所以我在这边也再简单介绍一下。它其实是和是前端同学去沟通设计语义的一些样式变量。
在具体实现上，将 Token 的「值」与组件进行关联。这些「值」可以是颜色、圆角、投影等。那这样的好处包含两点：1）灵活性：无需修改组件代码，修改 token 值 即可改变组件样式；同时设计和前端可以通过 token 的形式去达成更高效的沟通；2）一致性：使用 Token 可确保产品视觉样式具有一致性；
但 Token 的实际落地中可能没有那么简单，在 ant design v4 当中，token 的定义完全是从开发的视角去制定的。所以也就会导致上千行的变量，对于设计师来说不可用，也难以消费，灵活性也有很大的限制，相比很多熟知 token 的同学都深有体会。
V5 全新的 Token System
那在 V5 中，我们从设计工程化的视角，带来了全新的 Design Token System，它包含三个部分：
- 命名规范：基于命名空间的规范产出易读易用的 token 分层命名；
- 结构框架：基于不同 token 的特性与从属的范围，我们定义了一个 seed 到 map 到 alias 的框架，实现兼具灵活性与可维护性的特点；
- 设计语义模型：基于界面内容分层，去构建了界面元素的一个设计语义，进而实现对设计语义的精准描述；
鉴于时间关系，关于命名规范和分层框架这一趴会在后续相关的文章中详细展开。在本次发布会当中，我想重点和大家聊聊比较有有意思的「设计语义模型」。
设计语义模型
Token 的灵活性从开发的视角来看是用同一套结构去适配多种主题，比如说亮色，暗色或者业务一些定制的模型。但是它的本质其实在于定义设计系统的设计语义。它可能包含颜色、圆角、尺寸、阴影等等这些设计原子。
以颜色举例，在过去以及现在主流的 Design Token 的这些模型当中，大部分业界知名的设计系统，基本上都采用了色板梯度的模型，Ant Design v4 中也是如此。
色板梯度模型的逻辑很简单，就是按照色板的序号去赋予组件相应的色值。当主题变更时，只需要变更一组色板，就能达成样式的变更。
但其实这套模型在一些需要灵活性的场景下，往往会有很大的问题。其中，中性色的视觉层级混乱是最大的问题。
从中性色色的色板，从grey-0到 grey-7 赋予相应的中性色色值之后，我们的得到了下方这样的的页面。如果我们此时要变成暗色模式，一上来的直觉是什么？翻转色板对不对？
来看下下图中性色色板反转后的效果。从纯白变成纯黑，得到的界面是这个样子。你会发现这个效果非常不合理，比如说背景色反而比容器还要亮，同时下拉选项也无法和容器区分开来。包括弹窗如果悬浮在表单上时，也根本看不清楚。
而从设计上我们需要的形态是什么样子呢？背景底色应该是最深的。然后它的容器色是一个稍微亮一点点的颜色，最后它的悬浮的这一层容器则是更亮的，如下图所示。
所以暗色模式会和默认主题的色板其实会有很大的区别。那它们会有这么大的区别？其实，根本原因在于，我们在不同主题下，使用的设计手法是不同的。
在亮色模式下，其实我们是通过添加投影的方式来提高这一层的视觉强度。但是如果我们在暗色模式下只添加这个阴影的话，你会发现卡片容器和它的悬浮容器是拉不开层次的。所以在暗色模式下，我们使用的手法是提高浮层容器的亮度，进而拉开层次。
这样一对比之后，相比大家已经发现，亮色模式下与暗色模式下，设计师表达视觉强度的手法已经完全不一样了。这也是为什么色板梯度模型失效的核心原因：在亮色模式下，色板颜色是一样的，但暗色模式下颜色却不同了。
这对 Design Token 的设计语义模型带来一个挑战就是：同色值但不同视觉层级的元素，如何描述设计语义？
我们的解决思路是则是基于内容结构分层模型与用户注意力分层模型，构建中性色界面元素的设计语义。通过将界面元素拆分成背景容器和内容，然后再从强度层面分别拆成B1、B2、L1、L2到 L5，形成更加精准的设计语义。
如此一来， 我们就可以基于这个模型层面构建一个语义化的梯度。比如：
- 布局色（ Layout） 这一层属于B1，类似于处于在地下1层，我们命名成 BgLayout；
- 容器色（Container）这一层属于L1，是在标准地面上，我们命名成 BgContainer；
- 悬浮层（Elevated）这一层属于L2，是在二楼，我们命名成 BgElevated。
在亮色模式下 L1 和L 2 的亮度是一致的，但是在暗色模式下，L1 会比 L2 暗。
此外，我们还能将更加丰富的一个元素样式赋予到这些层级上，实现更加灵活的自定义。
同时再结合界面基础要素的内容结构，我们就可以去构建出来中性色的梯度变量。
同时可以保证在亮色和暗色模式下，它的视觉层级与梯度的递增强度都是统一的。
接下来我们一起看一个简单演示，在我们的主题编辑器当中，如果我们直接将一个容器的背景色从从纯白变成透明色。大家可以看到内容依然有效清晰。如果是通过色板进行修改，悬浮容器的部分也全都会变成透明色，并会和底下的内容叠加在一起，导致看不清楚内容。
而我们基于 v5 的设计语义模型，无论是改变哪一个层级的颜色，甚至切换亮暗色，都不会影响另一个层级界面的表达。
Ant Design V5 基于这样一套设计语义模型，可以为界面的灵活定制带来一个非常高的自由度，这是保证 V5 灵活性的底层设计逻辑。
业务设计系统定制
接下来我们来聊聊业务设计系统当中，我们如何去更加简单、高效地为业务设计系统进行定制。
全局样式定制
如下述视频所示，我们在 V5 中提供了主题编辑器。通过这个主题编辑器，设计师可以非常简单快速地完成主题风格定制。比如说大家所熟知的定制主色，还有中性色中的文本色偏色等。这可以非常快速地形成一个不同的风格。除了颜色以外，目前我们也支持圆角、字号、阴影等不同类型的定制。
单个组件定制
除了全局主题的定制，我们也提供了单个组件维度的定制。比如说我们可能不满足于 antd 默认的 pagination 的圆角值，我们可以通过修改这个组件的圆角 token，把它变成一个圆形的。此时对这个组件的定制不会影响全局的风格。该组件的定制将只局限在该组件中，这可以使得我们能实现更加细颗粒度的业务定制诉求。
色彩算法定制
那最后一趴，这部分是关于算法的定制。其实可能大家会说，业界会有更加好的一些色彩空间算法，比如 HCT、OKLCH 等，然后业务上可能也需要一些定制颜色算法的能力。那我们也会在后面给大家提供一个可以实施色彩定制算法的可视化算法编辑器。
我们已经结合 Google 推出的 HCT 的色彩模型和算法来保证色彩的一个视觉梯度的一致性，并且提供了一个梯度序列的增减功能。设计师可以非常简单地增加色板的一个梯度，微调色彩的倾向，甚至兼容一些偏色算法等等。
这些也是我们为 Ant Design V5 的主题定制能力提供的更加增强的部分。如果业务设计师不满足于默认的主题算法能力，也可以用这样的可视化编辑为自己的业务提供一个一个更好的色彩算法。
色彩算法的可视化定制能力，会在今年（2023年）下半年与大家正式见面。如果感兴趣，可以关注 ant design 的 github 提前了解 Alpha、Beta 的阶段性进展。
业务设计资产的灵活消费
讲完业务设计系统定制，大家应该就会有一个更加关心的事情就是：接下来怎么用？
组件消费
可能大家会很好奇说：“哎，为什么刚刚讲定制业务设计系统的时候，没有讲怎么在 sketch 当中改 symbol 或者这些东西？”
那原因就是：在现在 Ant Design V5 的方案当中，我们不再需要额外去定制 sketch 的 Symbol。
当设计师在用我们的主题编辑器完成相应那个主题定制之后，我们就可以将这个主题定制的一个配置文件直接导入Kitchen 当中。然后只要勾选这一主题配置，然后你就可以消费完整的 antd 资产了。下图就是一个使用示例：
基于 C2D 这样的能力。我们可以去实现比原来 sketch 更加高效的配置能力。比如刚刚大家看到的数组。我们可以使用添加一项的方式来进行配置。再比如刚刚配置的 Pagination 组件，通过勾选我们定制的主题之后，也可以就可以切换到我们配置出来后的样式。
那通过这样的方式，业务设计师就完全从组件定制的这个繁琐的过程当中解放开来。而且基于 C2D 的能力，我们将将可以实现比 sketch 甚至 Figma 更加强大的组件配置体验。
Token 消费
ok，讲完组件的消费之后，我们再来讲讲第二趴：Token 消费。在业务当中，我们可能会使用更多的部分就是Token。因为其实除了我们很多的基础组件之外，业务当中也会有大量的业务组件需求。
这个时候我们一般会去定制相应业务的组件。此时 design token 作为整个设计系统的一个设计语义的规范，它就会变得非常重要。
如上述演示一般，当用户在 Kitchen 中导入相应的定制主题之后，就可以使用 Kitchen 给设计元素赋予相应的 token。如此一来，我们就可以使用 token 快速做出设计规范的样式。消费 token，就是在消费设计规范。此时设计规范的颗粒度将会从组件级变成样式级别。
设计交付
当设计师利用 design token 完成设计消费之后，会需要交付给开发者，给到开发者进行消费。那在 Kitchen 当中我们也会提供相应的 Measure 交付工具。
前端同学可以直接在 Measure 上查到设计师使用的design token，并且一键复制相应的前端代码。这部分的代码会直接映射到相应前端所使用的 and design token 上，进而可以进一步的去减少设计与开发之间的信息漏损。
规范学习
最后一趴则是更加「颠覆性」的功能。同样借助 C2D 这样的一个技术，我们已经支持了从 Ant Design 官网上就复制设计稿。利用 Kitchen 的「超级粘贴」功能，每个设计 demo 都可以变成 Sketch 当中直接消费的设计资产。
那通过这样的一个方式，我们就可以保证设计师在官网上去完成完成从设计规范的学习到设计资产消费使用的一个完整的一个闭环。
- Kitchen 官网 https://kitchen.alipay.com/
- Ant Design 官网 https://ant-design.antgroup.com
- Ant Design Github https://github.com/ant-design/ant-design
- Ant Design 语雀专栏 https://www.yuque.com/ant-design/ant-design
- Ant Design 知乎专栏 https://www.zhihu.com/column/c_1564262000561106944
