设计研发资产的管理和应用是大中型前端项目须要考虑的重要问题，设计工程化能够提高设计、研发、验收、消费各个环节的肯定性，确保设计和前端的无缝衔接。在过去几年，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 是 Ant Design 基础的设计模式，提供了从全局样式到组件再到模板的设计体系建设思路，好比你们比较熟悉的 Globe Styles：全局样式层，最基础的色彩、字体、图标等，Components：antd 组件，Templates：Ant Design Pro 以及内部版本的 TechUI。
今年，咱们主要在前四个的基础上新增了一个 G，Guides 交互规则。前四部分决定了组件和模板长成什么样，最后一个 G，决定了人和机器之间应该如何进行交互。这套模式的核心是但愿，不一样的人在遇到一样的问题时，可以运用这套模式推理得出一样的结论。经过 ETCG进行工程化规则探索，能够简单抽象成四个步骤：聚拢资产、定义概念、定性描述、定量决策。
前面两个是大多数组件或者规范建设的思路，咱们在工程化规探索上，重点对规则自己进行定性和定量的区分，定性规则做为设计指南提供给设计师，定量的规则，提供给机器进行工程化规则和组件的封装。
第一步，聚拢资产，简单来讲就是收集业务中的页面，找到高复用度的组件和模块，并按照类型分类。经过对蚂蚁中台 50+产品的收集和整理，初步肯定八个类型的专题，再通过一轮收敛以后，最终肯定下五大类专题，分别是：图表、表单、列表、表格以及布局，内部简称：四表一局。并按照专题小组的形式，对每一个专题进行规则探索。
肯定好专题类型以后，下一步须要定义清楚每类专题里面的模板和组件，这里的定义概念，主要是用通俗易懂的原则去描述组件的用途。Ant Design 有 63 个组件和十几套模板，若是每一个都是单独描述，属性和概念会很是多，因此，这里就须要一层通用规则的概念。
关于通用规则的理解，这里举一个例子——右行制，靠右行驶，右侧通行。全世界有 90%的国家都实行右行制，这是一条深刻人心且获得普遍共识的原则。具体到不一样的场景，好比马路上的行车线，指示牌，斑马线上的弯折箭头，自动扶梯上的分隔线，虽然不一样的场景会有不一样的呈现形态，可是这些背后都是依据右行制这个通用的原则去创建的。即便在一个彻底陌生的环境，潜意识里也能够根据这个原则找到规律。
根据这个思路，在组件设计和规则的制定上，也须要找到这种通用且被普遍共识的原则。
好比，在元素的空间布局上，会根据阅读习惯去考虑，大多数文字的阅读习惯都是从左到右，好比页面布局经典的 F 模式和 Z模式，因此在元素的空间位置上，会倾向于根据视觉动线和阅读习惯来放置元素。
在字号、间距、尺寸上，会根绝梳理逻辑来推理，好比最基础的 8n 模式、菲波那切数列数列等，让整套数值符合某种规律，这样才能方便推理和传播。
一样，在交互上也须要尽可能模拟现实世界中的物理反馈，例如天然光影的变化对应的色彩模式，按钮的点击、按下、抬起、结果反馈等，应该都是不一样的状态，因此须要经过光影和色彩变化来模拟现实世界中的物理反馈。
总结下来就是，在通用规则层要尽量找到符合你们认知的某种认知和规律，这也是探索天然交互的核心内容。
根据这个思路，在按钮位置上，咱们经过对大量按钮进行研究和分析，制定了这样一条规则：主按钮贴边原则。意思是，若是页面中出现按钮组，要尽可能让主按钮贴近容器的边缘，除方向性按钮以外。好比总体左对齐，那主按钮就贴近容器左边缘，右对齐，主按钮贴近容器右边缘。这是一条很是简单的规则，稍加推理，就能找到不一样场景下按钮的位置规律，好比在表单、表格、弹窗、抽屉中，不一样的组件，均可以按照这个规则去细化按钮的对齐方式。
就像右行制同样，在不一样的场景中，可能展示的形式不一样，可是，背后都能依据同一条通用原则。
找到这个通用规则以后，接下须要，须要对不一样的场景，按照定性描述和定量描述的方式去细化规则，首先会给设计师提供一份设计指南。好比按照对话习惯，或者方向性的含义，去给设计师提供指导建议。到这个程度还不够，具体的细节，好比尺寸，间距等等，还须要提供给机器一份详细的说明。
好比，这是按钮在表格工具栏中的展现规则，这层规则须要详细的标注尺寸，相对位置，间距等等，而且要给出不一样的组件排序逻辑。这一层定量内容，对用户而言，就是隐形的规则。
经过对规则的定性和定量描述，咱们但愿暴露给设计师的规则尽量的简单，可以帮助设计师在规则层面造成共识，同时把复杂的规则进行封装，下降规则在传播中的发散和损耗。
因此，ETCG 的工程化规则的核心，就是探索极简规则和极致体验之间的平衡。
前面讲了 ETCG 规则探索的思路，接下来咱们用一个具体的例子，来看看这些规则是如何被封装在组件内，一个表格能够分为三个部分：Header、Body、Footer。
咱们先从最简单的表格工具栏来分析，按照定性和定量的规则描述，咱们把规则分为两部分， 写给设计师的规则，设计师须要关注两个问：一、这个组件是什么，也就是定义组件的功能，二、这里有什么，即肯定这里面能够放置的元素。
剩下的内容，怎么对齐，内容怎么显示，咱们把规则细化并封装在组件内部，让机器自动执行。
除了表格工具栏，表格主体部分也须要对规则进行细化，首先对表格主体部分进行划分，左侧定义为功能区，好比全选操做等，中间的内容区，放置主体内容，右侧定义为操做区。
这一层划分，是为了定义清楚不一样类型的信息应该显示在什么位置。
具体到里面的内容，咱们也对每个字段的语义特征进行分析，以此来肯定，不一样的字段应该显示多宽。好比时间字段，按照年月日时分秒，能够肯定一个最小宽度，保证 90%以上的时间字段都能安全显示不换行，一样，姓名、手机号、标签等固定格式的语义均可以肯定一个最佳的显示规则。
除了表格内部元素和字段特征定义，表格自己也和列表打通，由于从展现的字段属性来讲，表格和列表展现的内容含义很是类似，因此，咱们能够经过一行代码的配置，快速把表格切换成列表。这样大大下降了设计的决策成本。
以上这些规则封装后，咱们把它定义为模板组件，这些模板除了以常规组件包的形式提供给设计使用以外，咱们还对这些模板进行工具化的输出。
咱们把模板组件经过 Kitchen 插件的集成，设计师甚至是产品同窗，能够直接经过插件的面板，来配置里面的内容，从生产源头保证设计内容的规范性和一致性。
同时，再往前一步，这些配置生成后，能够直接导出代码配置，提供给前端使用，进一步保证从设计到前端之间的无缝衔接。
顺便预告一下，目前 Kitchen 3 beta 版本正在内测中，预计在四月份 Kitchen 3 正式版会对外发布。
一样的思路，除了表格以外，咱们对表单、列表、图标、布局都进行一层模板提取和封装，这些内容构成了完整四表一局模板组件，目前也已经对外开放，你们能够点击阅读原文访问官方仓库下载使用。
总结一下，以上主要分享了从 ETCG 工程化规则探索，到四表一局模板组件的封装思路，再从模板到Kitchen 工具化实践，这是咱们在设计工程化上探索的基本思路。
前面分享了ETCG 工程化规则的探索。那么对于设计同窗而言，这些内容和本身有什么关系呢？
秉承着开源的思想，咱们但愿这套思路和模式，不只仅能服务于蚂蚁集团内部的产品，也可以服务到行业内更多的设计师和开发者。
因此，咱们正式推出，Ant Design 设计开源计划！
但愿经过设计开源，可以链接行业内更多的设计师，同时已邀请你们可以参与到 Ant Design 设计体系的建设中来。
整个设计开源计划主要包含三部份内容：开放、发现、交流。
前面讲到的全部规则探索思路、模板组件、工具，都会开放给你们尝试和使用，咱们但愿除了前端开源、组件开源、工具开源以外，还能作到思惟的开源，但愿这些探索思路可以给你们在设计工程化探索上一些启发和帮助。
咱们会经过Ant Design 官方媒体帐号，按期发起话题，并邀请全部的设计师参与话题讨论，但愿可以发现优秀的创意和想法，而且一块儿把这些想法落地，共同建设服务于整个行业的设计体系。
目前咱们已经开通了知乎专栏、站酷、以及 UI 中国的官网媒体帐号，后续咱们会把 Ant Design 团队在行业设计体系中建设的经验总结分享给你们，共同打造一个开放的交流社区，专一于设计体系，以及面向将来的设计工程化研究。
欢迎扫描下方二维码，了解设计开源计划的所有内容，也能够关注 Ant Design 的知乎、站酷、UI 中国等官方媒体帐号，了解更多动态。
最后，设计开源，只是一个起点，咱们常说：一我的能够走的很快，但一群人才能走的更远，Ant Design 建设有 5 年的时间，Ant Design 的建设离不开社区的贡献以及用户的支持。
5 年时间，对一个设计体系来讲，咱们还很年轻，还有不少的成长空间，咱们但愿经过开放、发现和交流学习的心态，和全部的设计师以及开发者，共同去探索 Ant Design 设计工程化将来的更多可能。
本文分享自微信公众号 - 支付宝技术（Ant-Techfin）。
若有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一块儿分享。antd
