探索中后台设计提效次时代
如果无法正常显示,请先停止浏览器的去广告插件。
1. 探索中后台设计提效
次时代
短篇
云凤蝶产品设计师
2. 「提效」是中后台设计师永恒的使命
3. 1.0
一次设计行为中重复组件是可以抽象复用的
IIIIIIIIIIII:
IIIIIIIIIIIIIIIIIIIII
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
IIIIIIIIIIIIIIIIIIIIIIIIIIIIII
IIIIIIIIIIIIIII IIIIIIIIIIIIIII
IIIIIIIIIIIIIII IIIIIIIIIIIIIII
IIIIIIIIIIII: IIIIIIIIIIII:
IIIIIIIIIIII: IIIIIIIIIIII:
IIIIIIIIIIIIIIIIIIIII
IIIIIIIIIIII:
IIIIIIIIIIIIIII IIIIIIIIIIIIIII
IIIIIIIIIIIIIIIIIIIIIIIIIIIIII IIIIIIIIIIIIIII IIIIIIIIIIIIIII
IIIIIIIIIIIIII IIIIIIIIIIIIIII IIIIIIIIIIIIIII
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII IIIIIIIIIII IIIIIIIIIIIIIII
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIII IIIIIIIIIIIIIII IIIIIIIIIIIIIII
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII IIIIIIIIIIIIIII IIIIIIII
IIIIIIIIIIIIIIIIIIIII IIIIIIIIIIIIIII IIIIIIIIIIIIIII
IIIIIIII IIIIIII
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
IIIIIIIIIIIIIIIII
4. 2.0
做通用组件库资产包去服务业务
5. 3.0
抽象设计原则,形成价值观
6. 4.0
抽象⻚面设计模式
7. Design System
Tools
Tools
8. 5.0
提效的下一步在哪里?
9. 要回答这个问题
让我们把设计放回生产流程中看
产品需求
后端研发-数据需求
设计
前端还原
测试上线
10. 主要目标
11. 主要目标 &主要耗费精力
产品设计对接群
前端小哥
精准表现需求
精准还原设计
这个地方你理解错了,不是这个意思
这几处还原度有问题验收没通过,你
改一下哦 https://
10:48AM
baiyan.antfin.com/task/1234
10:47AM
不好意思昨天的需求改了,设计今天
产品需求
改一下?明天要发布
10:48AM
设计
你发的看起来是一模一样的啊,哪里
前端还原
有问题?
P15-P16 ⻚的设计稿不符合 antd 规
10:48AM
范哦
???
10:49AM
10:50AM
后端研发-数据需求
???
10:50AM
测试上线
12. 精准还原设计
前端还原
云凤蝶
蚂蚁自研低代码研发平台
云凤蝶
13. 低代码生产流程
创建站点
拖入资产、配置属性
调整布局、搭建⻚面
绑定数据、交互逻辑
预览发布
14. 低代码生产流程
创建站点
拖入资产、配置属性
支撑蚂蚁内部
调整布局、搭建⻚面
300+ 个典型中后台应用
绑定数据、交互逻辑
预览发布
15. 低代码生产流程
创建站点
拖入资产、配置属性
支撑蚂蚁内部
调整布局、搭建⻚面
绑定数据、交互逻辑
300+ 个典型中后台应用
在设计内容准备好的情况下
我们可以完全省略「设计交付→前端还原」的过程
预览发布
16. 但是对设计来说有局限性
17. 精准表现需求
设计
那干脆不要做设计了
我们来替你做吧
18. 要解释这个吹的牛X,先剖析
设计师是怎么做设计的
19. 表单⻚
中后台应用最常⻅的⻚面类型
表单⻚
20. 设计表单⻚时其实我们只思考了
3 个问题
21. 纸质合同
纸质合同
电子合同
用户填这条信息的时候用什么组件合适?
1
22.
23. 用户要填的这堆表单项应该怎么分组
2
24. 用户要填的这堆表单项应该怎么分组
2
25. 某个区域内的表单项应该怎么排列
3
26. 某个区域内的表单项应该怎么排列
3
27. 设计师的专业决策逻辑
服务了千万需求
28. 看似感性而直觉的决策过程
完全是可以被量化的
探索一种可能性
让机器做设计
29.
30. 设计师对内容特征的理解
要引导用户填日期
返回数据格式是 YYYY-MM-DD
日期格式需要精确到日
日期要包含起始到结束的范围
填写内容可以完美容纳又不能浪费空间的组件宽度
开始时间
规则对API特征的理解
结束时间
包含起始值和结束值
B O D Y. c o n t r a c t T i m e
YYYY-MM-DD *2 的文本宽度可以被计算成固定值
开始时间
结束时间
31. 的理解
的范围
费空间的组件宽度
内容数量
数据类型
⻚面分组关系
规 则 对 A P I 特 征 的 容器尺寸
理解
生成尺寸
数据格式
内容关系
Label 含义
返回数据是否动态
返回数据格式是 YYYY-MM-DD
内容嵌套关系
剩余空间阈值
……
包含起始值和结束值
B O D Y. c o n t r a c t T i m e
YYYY-MM-DD *2 的文本宽度可以被计算成固定值
32. V 4.0
33. Q
猜一猜哪一个是机器生成的?
34.
35. 这就是云凤蝶「智能向导」
36. 创建站点
拖入资产、配置属性
调整布局、搭建⻚面
绑定数据、交互逻辑
预览发布
37. 条件和结果的描述关系源自
Ant Design 的历史积累
创建站点
选择数据源
预览发布
38. 当天订单数量
345,836.00 元
日同比差值 1,423.13 亿
月同比差值 1,423.13 亿
当天订单数量
345,836.00 元
同样的方法
Ant Design
Ant Design
80%
进度:
同比涨跌:-3%
Label:XXXX
Action1
Action2
环比涨跌:64%
Label:XXX
Action3
月同比差值 1,423.13 亿
论证更多场景
同比涨跌:-3%
Label:XXXX
Action1
创建时间:2021-06-17 16:07
类型:Content
1,423.13 亿
80%
进度:
Ant Design
作者:短篇
日同比差值
Action2
环比涨跌:64%
当天订单数量
Label:XXX
345,836.00 元
Action3
同比增⻓ 环比增⻓
-12% 64%
日同比差值 1,423.13 亿
月同比差值 1,423.13 亿
进度
80%
Action1
Action2
Title Title Title Title Title
Content Content Content Content Action1
Content Content Content Content Action1
Action3
39. 面
向
未
来
的
智
能
框
架
40. 底层设计原则、价值观
Ant Design 团队
B 团队
C 团队
……
41. 界面模式工程化
Ant Design 版数值
B 团队数值
C 团队数值
……
42. 集成式 Design Token
Ant Design Default Style
B Style
C Style
……
43. 引入机器学习的业务语义识别
A 业务特点
B 业务特点
C 业务特点
……
44.
45. 面向未来的生产关系
定义设计系统
产品需求
后端研发-数据需求
智能向导
测试上线
46. 如果机器终将取代人工
中后台设计师未来的价值在哪里
47. 数据需求
还原上线
低价值地 UI 劳动
48. 设计工程化
组件
Golbal Style / Design Token
系统
流程
界面模式
原则、价值观
链路
49. 我们只是希望设计师
回到他们本来应该发挥价值的事情上去
50. 谢谢大家
谢谢大家