蚂蚁金服体验科技大会

2019 SEEConf 资产一起造 工作坊 2

1. Ant Design 资产⼀一起造 海海纳 & ⽵竹尔
2. 图⽚片来源:unsplash
3. E xamples 功能范例例 T emplates 模板 C omponents 组件 G lobal Styles
4. ·负责传达产品给⽤用户的感官感受,形成对产品第⼀一印象 G lobal Styles ·⽤用户判断该产品在该领域是否专业的关键因素 ·产品设计师最需要关注和服务的地⽅方
5. Ant Design Ant Design Pro Ant Design Mobile …
6. 😎 “可以啊,但还是明天上线” 🧐 “这有什什么区别,浪费时间” 🤬 “这改⼀一个那改⼀一个,乱七⼋八糟的” …
7. 🧩 📽 图形化 动效
8. 动效 … 💅 提升上限 图形化 👗 保证下限 界⾯面设计:字体、布局、⾊色彩…
9. 「为了了提⾼高效率 并⾮非限制设计」
10. 「Design Token」
11. “Design Token 是设计系统中的视觉设计原⼦子。它们是⼀一组有着统⼀一命名规则的实 体,⽤用于存储视觉设计部分的具体参数,⽐比如 HEX ⾊色值、间距、尺⼨寸的像素等。使 ⽤用它可以有帮助为 UI 开发⼯工作维护⼀一套具备可扩展性、⼀一致性的视觉体系。” –Salesforce
12. 「FONT」
13. 字号:14 px ⾏行行⾼高:22 px 颜⾊色:#666666
14. 官⽹网、⽂文档、社区、活动、⼯工作台、移动端… 多部⻔门、多PD、多开发、多设计协作 字号、字体、⾏行行⾼高、颜⾊色、状态、间距…
20. ⼀一套控制性强且可拓拓展的⽅方法来维系产品的⻛风格系统 通⽤用变量量 组件变量量 Color - 颜⾊色 Button - 按钮 Border - 边框 List - 列列表 Font - 字体字形 Card - 卡⽚片 Radius - 圆⻆角 Table - 表格 Shadow - 阴影 Form - 表单 … …
21. 🌟 🌟 🌟 🌟 🧚 🌟 那究竟我们究竟可以怎么改?⼜又能改成什什么样呢? 🌟 🌟 🌟
22. ⾸首⻚页 - Before Color-Primary 基础玩法 1. 改主⾊色
23. ⾸首⻚页 - Before Color-Primary 基础玩法 1. 改主⾊色
24. ⾸首⻚页 - Before ⾼高级玩法 1. 改变通⽤用变量量 2. 适当调整组件变量量
25. 主⾊色 产品主⾊色 通⽤用变量量 颜⾊色 1. 主⾊色 2. 中性⾊色 3. 辅助⾊色 中性⾊色 辅助⾊色 ⽤用于字体、背景、边框、线等处 功能⾊色、图形化配⾊色 ⾸首⻚页 - Before
26. ⾸首⻚页 - Before 主⾊色 通⽤用变量量 颜⾊色 o 1. 主⾊色 2. 中性⾊色 3. 辅助⾊色 辅助⾊色 中性⾊色
27. ⾸首⻚页 - Before 通⽤用变量量 主⾊色 颜⾊色 o 1. 主⾊色 2. 中性⾊色 3. 辅助⾊色 辅助⾊色 中性⾊色
28. ⾸首⻚页 - Before 颜⾊色 中性⾊色 ⽤用于字体、背景、边框、线等处 中性⾊色 o 1. 主⾊色 2. 中性⾊色 3. 辅助⾊色
29. ⾸首⻚页 - Before 颜⾊色 中性⾊色 🤔 Color-Primary o 1. 主⾊色 2. 中性⾊色 3. 辅助⾊色
30. ⾸首⻚页 - Before Color-Primary 颜⾊色 中性⾊色 209 91 100 o 1. 主⾊色 2. 中性⾊色 ⾊色相 纯度 明度 3. 辅助⾊色 (H) (S) (B)
31. ⾸首⻚页 Before ⾊色相:简单来说就是⼀一眼望去是什什么颜⾊色,我们常说的红⾊色⻩黄⾊色橙⾊色 绿⾊色蓝⾊色。这些就是对⾊色相的⼀一个描述。 颜⾊色 中性⾊色 纯度:简单来说就是饱和度,颜⾊色越灰,⼀一眼望去⾊色相越不不明确,纯 度越低;越容易易分辨,纯度越⾼高,颜⾊色越正。 o 1. 主⾊色 2. 中性⾊色 3. 辅助⾊色 明度:⾊色彩的明亮程度,也就是感官上的⽐比较亮⽐比较暗
32. ⾸首⻚页 - Before 颜⾊色 中性⾊色 1. 主⾊色 2. 中性⾊色 3. 辅助⾊色 ⾊色相-H 纯度-S 明度-B Gray-1 Gray-2 Gray-3 Gray-4 Gray-5 Gray-6 Gray-7 Gray-8 209 209 209 209 209 209 209 209 o
33. ⾸首⻚页 - Before 颜⾊色 中性⾊色 o 1. 主⾊色 2. 中性⾊色 3. 辅助⾊色 98 96 91 85 75 55 35 15
34. ⾸首⻚页 - Before 颜⾊色 中性⾊色 明度:保证可读性与拉开灰度层次 98 1. 主⾊色 2. 中性⾊色 3. 辅助⾊色 96 91 85 75 o 55 35 15
35. ⾸首⻚页 - Before 颜⾊色 中性⾊色 1. 主⾊色 2. 中性⾊色 3. 辅助⾊色 ⾊色相-H Gray-1 Gray-2 Gray-3 Gray-4 Gray-5 Gray-6 Gray-7 Gray-8 209 209 209 209 209 209 209 209 75 55 35 15 纯度-S 明度-B o 98 96 91 85
36. 纯度 : 明度越⾼高,物体⾊色彩呈现越浓郁;反之 ⾸首⻚页 - Before 颜⾊色 中性⾊色 o 1. 主⾊色 2. 中性⾊色 3. 辅助⾊色 图⽚片来源:unsplash
37. ⾸首⻚页 - Before 颜⾊色 中性⾊色 理理性理理论 1. 主⾊色 2. 中性⾊色 3. 辅助⾊色 + o 100 + ⻚页⾯面
38. ⾸首⻚页 - Before 颜⾊色 中性⾊色 纯度-S 1. 主⾊色 2. 中性⾊色 3. 辅助⾊色 1 1 2 o5 15 25 45 65
39. ⾸首⻚页 - Before 颜⾊色 中性⾊色 1. 主⾊色 2. 中性⾊色 3. 辅助⾊色 Gray-1 Gray-2 Gray-3 Gray-4 Gray-5 Gray-6 Gray-7 Gray-8 ⾊色相-H 209 209 209 209 209 209 209 209 纯度-S 1 1 2 5o 15 25 45 65 明度-B 98 96 91 85 75 55 35 15
40. ⾸首⻚页 - Before 颜⾊色 中性⾊色 o 1. 主⾊色 2. 中性⾊色 3. 辅助⾊色
41. ⾸首⻚页 - Before 颜⾊色 辅助⾊色 辅助⾊色-功能⾊色 ⽤用于字体、背景、边框、线等处 @yellow-6 @green-6 1. 主⾊色 #FFBF00 #96D911 #F04435 2. 中性⾊色 警告⾊色 成功⾊色 失败⾊色 3. 辅助⾊色 o @red-6
42. ⾸首⻚页 - Before @yellow-6 @green-6 @red-6 颜⾊色 #FFBF00 #96D911 #F04435 辅助⾊色 警告⾊色 成功⾊色 失败⾊色 o 1. 主⾊色 2. 中性⾊色 3. 辅助⾊色 HSB HSB HSB (45,100,100) (80,92,85) (54,78,94)
43. ⾸首⻚页 - Before ⾊色相-H : 统⼀一向冷⾊色系偏 颜⾊色 辅助⾊色 45 80 5 o 1. 主⾊色 2. 中性⾊色 3. 辅助⾊色 55 100 355
44. ⾸首⻚页 - Before 颜⾊色 辅助⾊色 1. 主⾊色 2. 中性⾊色 3. 辅助⾊色 @yellow-6 @green-6 o @red-6 #FAE714 #52C41A #F52234 警告⾊色 成功⾊色 失败⾊色
45. ⾸首⻚页 - Before 通⽤用变量量 圆⻆角 1. 圆⻆角表意 2. 圆⻆角本质 3. 产品⽓气质
46. ⾸首⻚页 - Before 圆⻆角表意:圆润更更具亲和⼒力力、尖⻆角产⽣生距离感 通⽤用变量量 圆⻆角 1. 圆⻆角表意 2. 圆⻆角本质 3. 产品⽓气质 图⽚片来源:google 搜索
47. ⾸首⻚页 - Before 圆⻆角表意:尖⻆角更更具权威感,圆⻆角缺乏稳重感 通⽤用变量量 圆⻆角 1. 圆⻆角表意 2. 圆⻆角本质 3. 产品⽓气质 图⽚片来源:apple 官⽹网
48. ⾸首⻚页 - Before 圆⻆角本质:圆⻆角就是⼀一种细节 · 尖⻆角是天然形成的 通⽤用变量量 圆⻆角 1. 圆⻆角表意 2. 圆⻆角本质 3. 产品⽓气质 图⽚片来源:unsplash · 圆⻆角是精⼼心设计打磨的
49. ⾸首⻚页 - Before 通⽤用变量量 圆⻆角 1. 圆⻆角表意 2. 圆⻆角本质 3. 产品⽓气质 圆润 尖⻆角 · 更更具亲和⼒力力 · 细节更更耐看 · 更更具权威感 · 细节更更简单
50. ⾸首⻚页 - Before 通⽤用变量量 圆⻆角 研发效能⼯工具 1. 圆⻆角表意 2. 圆⻆角本质 3. 产品⽓气质 专业度⾼高 重流程、重效率
51. ⾸首⻚页 - Before 通⽤用变量量 圆⻆角 1. 圆⻆角表意 2. 圆⻆角本质 3. 产品⽓气质 圆润 尖⻆角 · 更更具亲和⼒力力 · 细节更更耐看 · 更更具权威感 · 细节更更简单
52. ⾸首⻚页 - Before 通⽤用变量量 圆⻆角 1. 圆⻆角表意 2. 圆⻆角本质 3. 产品⽓气质 圆润 尖⻆角 · 更更具亲和⼒力力 · 细节更更耐看 · 更更具权威感 · 细节更更简单
53. ⾸首⻚页 - Before 通⽤用变量量 圆⻆角 原 1. 圆⻆角表意 2. 圆⻆角本质 3. 产品⽓气质 现
54. Shadow 👻 Font 🖌 1.阴影⾊色加⼊入主⾊色 1.字体家族需要区别系统字体与活动字 2.根据内容层次,可适当增加阴影层次 体 3.阴影的⼤大⼩小与模糊度要统⼀一来看,不不 2.可读性是第⼀一要素 要太多,因为阴影本质是拉开⽆无⼒力力层 3.少即是多 次 4.尝试让字体像⾳音符⼀一样跳跃 … …
55. ⾸首⻚页 - Before 组件变量量 Table 1. 元素 2. 间距 3. 通⽤用 4. ICONFONT
56. ⾸首⻚页 - Before 组件变量量 Table 1. 元素 2. 间距 3. 通⽤用 4. ICONFONT
57. ⾸首⻚页 - Before 组件变量量 Table 1. 元素 2. 间距 3. 通⽤用 4. ICONFONT
58. ⾸首⻚页 - Before 组件变量量 Table 1. 元素 2. 间距 3. 通⽤用 4. ICONFONT
59. ⾸首⻚页 - Before 组件变量量 Table 1. 元素 2. 间距 3. 通⽤用 4. ICONFONT
60. ⾸首⻚页 - Before 组件变量量 Table 1. 元素 2. 间距 3. 通⽤用 4. ICONFONT
61. 万物皆可 Design Token 「视觉表现、产品⽓气质、交互体验…」
62. 💎 「SKETCH FILE」
63. Color-Primary
64. Color-Primary Color-Primary
65. Color-Primary Color-Primary Color-Primary
66. Color-Primary Color-Primary Color-Primary Color-Primary
67. https://ant.design
68. Alla Kholmatova
69. THANKS

相关幻灯片