Ant Design 设计体系
本文的主题叫做 Invisible Design System，隐形的设计体系，主要是想和大家分享，我们对可见的设计体系背后隐形的设计规则的思考，以及如何通过设计工程化的方式，让这些复杂的规则可用而不可见。
整个设计工程化探索主要分成两部分内容，第一部分是以设计师视角出发的工程化规则探索，第二部分是以工程师视角的工程化实践。本文从设计师视角，聊聊 Ant Design 设计体系的建设。
Ant Design 从 2015 年第一个版本发布，至今已有 5 年时间，去年 Ant Design4.0 发布，提出了全新的价值观：自然、确定性、意义感、生长性，基于这几个价值观向上发展，有最基础的设计语言、设计资产，以及去年探索出的以工作流为中心的设计策略 JCD，最上层包括设计工具 Kitchen 以及云凤蝶，这些内容构成了 Ant Design 设计体系的完整建设框架。
随着整个行业的发展，企业级产品和系统的复杂度不断的增强，我们也在思考，Ant Design 提供的组件和模板，在未来的应用场景中能否持续提效和保证体验一致。同时，我们也在思考，Ant Design 下一代的组件会是什么样子，以及 Ant Design 整个设计体系会朝着什么方向演进。
目前 Ant Design 一共有 63 个基础组件，这些组件基本可以满足一个系统 80% 以上的页面搭建诉求，而且这些组件也提供高自由度的配置和自定义属性。但也正是因为高灵活性，会导致很多人在使用组件的时候，找不到统一的原则和规范，尤其是设计层，在面对同样的场景下，使用同样的组件和规范，不同的人还是会出现不同的结果。
我们尝试从整个设计体系的角度来思考，如何解决统一性和规范共识的问题。一套设计体系，除了最上层呈现的设计资产，例如，antd、antd pro、antV、TechUI 等，还包括资产背后的设计模式、设计原则、组织协同等，可见的设计资产只是整套设计体系呈现出来最直观的一部分，而不可见的模式、原则和机制，提供了整套体系不断演进和创新的思路。
2020 年 UXTOOLS 对整个行业设计体系调研中总结到：“设计体系不能仅仅停留在组件层，而要将注意力聚焦在组件背后的体系上，既要支持从规范到代码的自动调整，还要支持规范和组件体系化的演进和创新。”
简单来说，设计体系区别于单纯的组件库最大差异就是，能否支持从规范到代码的自动调整，如果能做到这一层，才可以称之为，Living Desing System（真正的设计体系）。
我们对整个设计体系的定位和思考，主要聚焦在两个维度，一是从规范本身出发，另一个是从组织协同角度。从规范本身比较容易理解，大多数组件或者规范的建立基本都会从规范本身去迭代和进化，但是组织协同是大家很少提到的一个点。那么组织协同和设计体系是一种什么关系呢？
如果从更长远的阶段来看，一个设计体系不仅仅能支持当前阶段的设计和开发工作，也不只是支持某个开发者或者某个设计师的生产提效，而是要支持一个团队、一个组织的整体协同工作，还要能从规范本身支持不断的演进和创新。
首先从规范本身思考，以一个按钮为例，一个按钮除了直观呈现出的样式之外，还包括语义、位置、交互等，这些维度组合在一起，决定了按钮最终呈现的状态。而每一个维度里，又包含很多变量，这些变量可能会导致最终结果千差万别。所以，因为规则本身的变量，会导致规范本身存在不确定性，这种不确定性会导致大家对组件的认知和使用成本增加，进而导致设计决策和研发成本增加，这是第一层思考。
另一个维度是从组织协同的角度去思考。Ant Design 的组件和规范从设计到最终被用户使用，一共有四类角色参与，分别是 Ant Design 的设计师和工程师，业务设计师和工程师。理想的情况下生产和消费流程是：Ant Design 的设计师设计组件，Ant Design 的工程师开发组件，再把组件给到业务设计师和工程师使用，业务工程师和设计师把使用过程中的问题反馈给生产端，形成一个完整的闭环。
但实际上，这个流程远远没有这么理想化。实际过程各类角色并不是一个单独的个体，所以每个角色之间可能存在各种交叉和连接，这就会导致两个问题：一个是刚才提到过的规范本身的不确定性，每个人对规则的理解有所不同，导致规则在传播过程中存在信息的分散和损耗。
另一个是因为多角色的协同，导致协作过程中存在信息不对等，比如，设计师更新了设计稿，但是前端没有及时更新，就会导致最终的的组件效果存在差异。针对这两个问题，我们尝试通过设计工程化的方式，来收敛整个过程中的不确定性，提升Ant Design 组织协同和组件生产效率。
设计工程化主要包含两部分内容，第一部分是基于 ETCG 模式的工程化规则探索，另一部分是系统化协作流程的建立。
ETCG 工程化规则探索
首先来看看 ETCG 工程化规则探索的部分。ETCG 是 Ant Design 基础的设计模式，提供了从全局样式到组件再到模板的设计体系建设思路，比如大家比较熟悉的 Globe Styles：全局样式层，最基础的色彩、字体、图标等，Components：antd 组件，Templates：Ant Design Pro 以及内部版本的 TechUI。
今年，我们主要在前四个的基础上新增了一个 G，Guides 交互规则。前四部分决定了组件和模板长成什么样，最后一个 G，决定了人和机器之间应该如何进行交互。这套模式的核心是希望，不同的人在遇到同样的问题时，能够运用这套模式推理得出同样的结论。通过 ETCG进行工程化规则探索，可以简单抽象成四个步骤：聚拢资产、定义概念、定性描述、定量决策。
前面两个是大多数组件或者规范建设的思路，我们在工程化规探索上，重点对规则本身进行定性和定量的区分，定性规则作为设计指南提供给设计师，定量的规则，提供给机器进行工程化规则和组件的封装。
第一步，聚拢资产，简单来说就是收集业务中的页面，找到高复用度的组件和模块，并按照类型分类。通过对蚂蚁中台 50+产品的收集和整理，初步确定八个类型的专题，再经过一轮收敛之后，最终确定下五大类专题，分别是：图表、表单、列表、表格以及布局，内部简称：四表一局。并按照专题小组的形式，对每个专题进行规则探索。
确定好专题类型之后，下一步需要定义清楚每类专题里面的模板和组件，这里的定义概念，主要是用通俗易懂的原则去描述组件的用途。Ant Design 有 63 个组件和十几套模板，如果每个都是单独描述，属性和概念会非常多，所以，这里就需要一层通用规则的概念。
关于通用规则的理解，这里举一个例子——右行制，靠右行驶，右侧通行。全世界有 90%的国家都实行右行制，这是一条深入人心且得到广泛共识的原则。具体到不同的场景，比如马路上的行车线，指示牌，斑马线上的弯折箭头，自动扶梯上的分隔线，虽然不同的场景会有不同的呈现形态，但是这些背后都是依据右行制这个通用的原则去建立的。即使在一个完全陌生的环境，潜意识里也可以根据这个原则找到规律。
根据这个思路，在组件设计和规则的制定上，也需要找到这种通用且被广泛共识的原则。
比如，在元素的空间布局上，会根据阅读习惯去考虑，大多数文字的阅读习惯都是从左到右，比如页面布局经典的 F 模式和 Z模式，所以在元素的空间位置上，会倾向于根据视觉动线和阅读习惯来放置元素。
在字号、间距、尺寸上，会根绝梳理逻辑来推理，比如最基础的 8n 模式、菲波那切数列数列等，让整套数值符合某种规律，这样才能方便推理和传播。
同样，在交互上也需要尽量模拟现实世界中的物理反馈，例如自然光影的变化对应的色彩模式，按钮的点击、按下、抬起、结果反馈等，应该都是不同的状态，所以需要通过光影和色彩变化来模拟现实世界中的物理反馈。
总结下来就是，在通用规则层要尽可能找到符合大家认知的某种认知和规律，这也是探索自然交互的核心内容。
根据这个思路，在按钮位置上，我们通过对大量按钮进行研究和分析，制定了这样一条规则：主按钮贴边原则。意思是，如果页面中出现按钮组，要尽量让主按钮贴近容器的边缘，除方向性按钮之外。比如整体左对齐，那主按钮就贴近容器左边缘，右对齐，主按钮贴近容器右边缘。这是一条非常简单的规则，稍加推理，就能找到不同场景下按钮的位置规律，比如在表单、表格、弹窗、抽屉中，不同的组件，都可以按照这个规则去细化按钮的对齐方式。
