隐形的设计体系
Ant Design 设计⼯程化探索和实践
陈思峰（晴⻛)
肖胜桃（辟起)
⽀付宝平台设计部 · 体验设计师
⽀付宝体验技术部 · 前端⼯程师
隐形的设计体系
Invisible Design System
01.
02.
⼯程化规则探索
⼯程化实践
晴⻛
辟起
Ant Design
Ant Design 设计体系
设计工具（Kitchen、云凤蝶 等）
设计资产
UI 资产
antd、antd pro
设计策略
可视化资产
AntV
JCD
以工作为中心的设计方法
GCD
以增⻓为中⼼的设计⽅法
设计语言（色彩、字体、图标、样式 等）
设计价值观
确定性 Certain
意义感 Meaningful
自然 Natural
生长性 Growing
基础组件 开箱即⽤
63 个基础组件，满⾜ 80% 以上中台⻚⾯搭建需求
Ant Design 组件
是否真的解决了提效和体验⼀致的问题？
同样的组件，同⼀套规范，为什么结果却各不相同？
设计资产
antd、antd pro、antV、TechUI
设计模式
ETCG
设计原则
阅读模式、数理逻辑、物理映射
组织协同
⽣产机制、消费链路、⼯具协同
“
设计体系不能仅仅停留在组件层⾯，⽽要将注意⼒聚焦在组件背后的体系上，
既要⽀持从规范到代码的⾃动调整，还要⽀持规范和组件体系化的演进创新。
—— from UXTOOLS
规范本身
组织协同
⼀个「新建」按钮
新建
新建
新建
语义
样式
新建
新建
位置
交互
及时⽣效
新增
原地添加
创建
跳转编辑
添加
点击反馈
···
···
···
···
语义
X
样式
X
位置
X
交互
规则的不确定性
=
?
组织协同
Ant Design
设计师
Ant Design
⼯程师
业务
设计师
业务
⼯程师
👨🎨
👨🔧
👩💻
👷
设计
Ant Design
设计师
Ant Design
⼯程师
反馈
⽣产
业务
⼯程师
业务
设计师
消费
设计
Ant Design
设计师
Ant Design
⼯程师
设计⼯程化
反馈
⽣产
ETCG 规则探索
系统化协作流程
业务
⼯程师
业务
设计师
消费
ETCG ⼯程化规则探索
E
T
C
G
Examples
Templates
Components
Globe Styles
范例
模板
组件
全局样式
同样的问题，可推理得出同样的结论
E
T
C
G
G
Examples
Templates
Components
Globe Styles
Guides
范例
模板
组件
全局样式
交互规则
ETCG 规则探索思路
聚拢资产
定义概念
定性描述
定量决策
聚拢资产
⼯作台
数据分析
数据可视化
表单类
分步表单
403
新建表单
404
分组浏览
异常类
数据明细
全局设置
空状态-引导&提示
指标⼤盘
标签设置
浏览器版本不兼容
流程编辑器
基础详情
详情类
405
编辑器
单据详情
脑图编辑器
拓扑图编辑器
发布流程
协议详情
结果类
查询表格
成功⻚
失败⻚
标准列表
列表类
卡⽚列表
成员管理
⼯作项列表
四表⼀局 专题探索
对⾼复⽤度的模板和组件进⾏收敛，通过专题⼩组探索规则
图表
表单
列表
布局
表格
如何发掘并定义组件背后的通⽤规则？
靠右⾏驶 右侧通⾏
全世界⼤约有 90% 的国家实⾏右⾏制
阅读模式
数理推导
物理映射
位置
间距
交互
「 主按钮贴边原则 」
⻚⾯中如果出现按钮组，尽量让主按钮贴近容器的边缘，除⽅向性按钮之外。
//
//
57
0
2
1
1
AntD_bigfish_Appname
3
2019-12-23 14:07
…
AntD_bigfish_Appname
5
2019-12-23 14:07
AntD_bigfish_Appname
12
2019-12-23 14:07
…
AntD_bigfish_Appname
5
2019-12-23 14:07
…
AntD_bigfish_Appname
5
2019-12-23 14:07
…
AntD_bigfish_Appname
12
2019-12-23 14:07
AntD_bigfish_Appname
3
2019-12-23 14:07
AntD_bigfish_Appname
5
2019-12-23 14:07
写给设计师
简单 · 通⽤ · 可推理
写给机器
细致 · 完善 · 可执⾏
ETCG
探索极简规则和极致体验之间的平衡
表格
表格
Header
Body
Footer
表格⼯具栏
写给设计师
这是什么，这⾥有什么
间距 B1
标题⻓度 A1
写给机器
内容显示规则
间距 B2
间距 B3
内容切换 A2
间距 B4
下拉筛选 A3
间距 B5
搜索 A4
间距 B6
按钮区 A5
表格⼯具栏
标题+操作
标题+操作+搜索
标题+操作+搜索+下拉筛选
多⾏模式：标题+操作+搜索+下拉筛选+ tab 切换
表格
内容区
操作区
表格
min-width
<ProTable
1 天之后
fi
n.com
第⼆类 · 信息不确定
👩💻
设计稿已定稿，剩下的交给你了，⾟苦
1 天之后
实现好了，地址：seeconf.ant n.com
👩💻
宽屏下好像不太对啊，这个专业表格组
件是遵循主按钮贴边原则的
设计稿也没有宽屏的尺⼨呐，对了，啥
是专业表格组件？
fi
⼀份使⽤了专业表格组件的设计稿
👨💻
👨💻
要是能有⼀套流程来管控变更
还有⼀个⼯具能识别设计稿⾥有什么资产
那就好了
资产研发流程标准化
设计资产与前端资产打通
建⽴资产研发流程
研发
部署
验收
发布
设计稿
设计规范
环境隔离
版本管控
验收卡点
资产发布
组件库
API
设计稿
组件
API
demo
图标
资产中⼼
插画
模板
···
统⼀资产研发⼯具
统⼀资产研发⼯具
平台连接
⽣产成果
⽣产提效
研发⼯具
Sketch
Kitchen
图标
⾊板
设计资源
VSCode
组件
模板组件
Kitchen
⽂档
Umi
demo
组件调试
API
⽂档撰写
dumi
∞
资产研发流程标准化
建⽴资产研发流程
统⼀资产研发⼯具
设计资产与前端资产打通
设计资产与前端资产打通
代码转设计稿（C2D）
资产通⽤描述
设计稿转代码（D2C）
资产通⽤描述
Button
基本信息
属性
样例
Button/按钮
普通/危险/链接/幽灵/…
简介、开发者 & etc.
Danger Button
⼩/中/⼤
属性：危险按钮
⽂本：Danger Button
资产通⽤描述
Button
基本信息
属性
样例
Button/按钮
普通/危险/链接/幽灵/…
简介、开发者 & etc.
Danger Button
⼩/中/⼤
Markdown ⽂档
资产通⽤描述
Button
基本信息
属性
样例
Button/按钮
普通/危险/链接/幽灵/…
简介、开发者 & etc.
Danger Button
⼩/中/⼤
Git 提交记录
Markdown ⽂档
资产通⽤描述
Button
基本信息
属性
样例
Button/按钮
普通/危险/链接/幽灵/…
简介、开发者 & etc.
Danger Button
⼩/中/⼤
Markdown ⽂档
Git 提交记录
资产通⽤描述
Button
基本信息
属性
样例
Button/按钮
普通/危险/链接/幽灵/…
简介、开发者 & etc.
Danger Button
⼩/中/⼤
TypeScript 类型定义
源代码注解
Markdown ⽂档
Git 提交记录
资产通⽤描述
Button
基本信息
属性
样例
Button/按钮
普通/危险/链接/幽灵/…
简介、开发者 & etc.
Danger Button
⼩/中/⼤
Markdown ⽂档
Git 提交记录
TypeScript 类型定义
源代码注解
资产通⽤描述
Button
基本信息
属性
样例
Button/按钮
普通/危险/链接/幽灵/…
简介、开发者 & etc.
Danger Button
⼩/中/⼤
⽂档中的组件 demo
Markdown ⽂档
Git 提交记录
TypeScript 类型定义
源代码注解
资产通⽤描述
Button
基本信息
属性
样例
Button/按钮
普通/危险/链接/幽灵/…
简介、开发者 & etc.
Danger Button
⼩/中/⼤
Markdown ⽂档
Git 提交记录
TypeScript 类型定义
源代码注解
⽂档中的组件 demo
📦
📦
📦
资产中⼼
📦
📦
资产通⽤描述
基本信息 属性 样例
📦
资产本体
📦
代码转设计稿（C2D）
资产通⽤描述 ·属性
⼩/中/⼤
配置⾯板⽣成器
代码转设计稿（C2D）
组件实时渲染
属性聚合
代码转设计稿（C2D）
代码转设计稿（C2D）
Kitchen
资产通⽤描述传递
表格⻚.sketch
代码转设计稿（C2D）
设计稿转代码（D2C）
Sketch 图层
表格⻚.sketch
资产通⽤描述
这是⼀个叫做『专业表格』的组件
属于『专业 UI』组件库
属性配置项是 A = 1、B = 2、C = 3
设计稿转代码（D2C）
Kitchen
表格⻚.sketch
提取 资产通⽤描述
设计稿转代码（D2C）
VSCode 插件
导⼊资产通⽤描述
Kitchen
Sketch
VSCode
Umi
更多场景有待探索
资产通⽤描述 + 资产本体 + 研发⼯具 + ？
回顾⼀下案例
O
·
K
第⼀类 · 变更不确定
👩💻
你好，这个组件能不能优化⼀下，我这
边的业务需要⽀持⾃定义按钮，现在只
能展示⼀个主按钮
没问题，业务需求优先，我们⻢上跟进
👩💻
资产研发中…
实现好了，设计资产和⼯程资产都已⽀
持
⼀个专业的表格组件
👩💻
太给⼒了，⾮常感谢[送花花][送花花]
👩💻
O
·
K
第⼆类 · 信息不确定
👩💻
设计稿已定稿，剩下的交给你了，⾟苦
已收到，识别到设计稿⾥有专业表格组
件哦，这下能省不少事
👨💻
1 ⼩时后
实现好了，地址：seeconf.ant n.com
👩💻
fi
⼀份使⽤了专业表格组件的设计稿
已验收完成，靠谱👍
👨💻
资产研发流程标准化
设计⼯程化
⼀套建⽴在设计体系上的研发流程，打通资产⽣产和消费的⼯程实践
设计资产和前端资产打通
设计⼯程化
D2C
消费阶段
Kitchen
VSCode
C2D
⽣产成果
Symbol ⽣成
Sketch Library
API
NPM
样例
资产通⽤描述
⽣产阶段
dumi
Kitchen
资产研发流程
规范
Ant Design 设计体系
社区朋友
15:55
技术专场
《基于 Umi 的蚂蚁前端最佳实践》
宜鑫
那 Ant Design 呢？
设计
Ant Design
设计师
Ant Design
⼯程师
设计⼯程化
⾏业⼯程师
反馈
⽣产
ETCG 规则探索
系统化协作流程
业务
⼯程师
业务
设计师
消费
⾏业设计师
Ant Design 设计开源计划
⼈⼈都是 Ant Designer
Ant Design 设计开源计划
开放
发现
交流
设计⼯程化规则开放
发现设计体系共建者
⾏业设计师交流社区
Ant Design 设计开源计划
Ant Design
THANKS!