Ant Design 3.

0
 ✨

㸐㿋⺚㶩
69
霃雦䋗 !
01. 02.
%FTJHO
4ZTUFN 荈搬⛓繠
赦赥⟱⚌紩❡ㅷ霃雦 "OU
%FTJHO

霃雦
⡤禹皍➝ 露鎊ⴲ䱲
%FTJHO
4ZTUFN
Ӿ෈ਁ֛ ኴᶎᜋፏ चᏐᕟկ

3LQJIDQJ6& Primary Default Dashed Danger

᝕෈ਁ֛

6DQ)UDQFLVFR
60
ਁ‫ݩ‬ᥢ᝜

3; +HDGOLQH
ଉአࢶຽ
3; +HDGOLQH suggestion suggestion suggestion
suggestion suggestion suggestion

1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0

3; +HDGOLQH q w e r t y u i o p q w e r t y u i o p

a s d f g h j k l a s d f g h j k l
3; %RG\
z x c v b n m z x c v b n m

"123 , . "123 , .
3; &DSWLRQ
Style Guide

r fa c e
y of Inte
ntro p
h e E
T

start end

The minimum viable design system…”- Marcin Treder

Design System

The Entropy of Interface

start end

The minimum viable design system…”- Marcin Treder

“A design system is an evolving ruleset governing the
composition of a product.”

Colm Tuite
Better UX
Consistency

Efficiency
图片来源：dribbble.com
功能复杂，量级大 页面类型的重复性较多

业务、产品变动频繁 使用者多具备专业背景

一致性的要求 商业化趋势
30 800+
Before After
Better UX
Consistency

Efficiency
 ✂
%&
Efficiency Better UX
🛠
! ' Consistency 🎨 💡
 Efficiency Better UX

设计资产 体验策略

团队模型 UI 工具化
ETCG

Consistency

设计语言

Ant Design System 2018

团队模型 Team module

Leader Designer Developer

Ant Design System 2018

团队模型 Team module
100%

50%

0%

Leader Designer Designer Developer

Ant Design System 2018

团队模型 Team module

Product Team A Product Team B

System Operation Team

Product Team C Product Team D

Leader Designer Developer

Ant Design System 2018

设计资产 Design Assets

Modularity

Ant Design System 2018

设计资产 Design Assets

Ծߝ੶ ᤈӱ੶ ᭗አ੶

ӱ‫ۓ‬ཛྷୗପ$

A UI ᩒԾ ᦡᦇᩒრ Ꭳᦩ෈໩

ᦡᦇᩒԾ҈Design Assets
B
UI ᩒԾ ᦡᦇᩒრ Ꭳᦩ෈໩ क़᮱ኞா

ӱ‫ۓ‬ཛྷୗପ%

A UI ᩒԾ ᦡᦇᩒრ Ꭳᦩ෈໩

Ant Design System 2018

体验策略 UX strategies

Task Focus

Ant Design System 2018

体验策略 UX strategies

ၞᑕӨොဩ ଶᰁ֛ᔮ ֛ḵᬩ០ ๋֯ਫ᪢

Ant Design System 2018

 Efficiency Better UX

设计资产 体验策略

团队模型 UI 工具化
ETCG

Consistency

设计语言

Ant Design System 2018

荈搬⛓繠
Consistency
 …

Web
✨

…
Design Values

Mobile AR VR…
FONT SPACE COLOR
 A
A
A
A
A
A
A
A
A
Body size Font scales Line height
 a
h 2d tan 2
 a a
h 2d tan 2 2d tan
2
a = 0.3 d = 50cm 120 = 12
2.54
1inch 2.54cm PPI = 120
 37.6%

A = PPI / 10
39.8%

数据来源：screensiz.es
12 px 14 px
The Elements of Typographic Style


3PCFSU
#SJOHIVSTU
 fi

i/n
fi f 0r n

f0

i
0 1 2

‘The typographic style’－ Spencer Mortensen

 e
2.71828….
Pentatonic
 fi

69 px
i/5 57 px
fi 14 X 2.71828 46 px
38 px
31 px
26 px
21 px
17 px
14 px

12 px
line height
Hello Math Font size
 -i/n
hi fi ( 1 + r e ) r 0.618
12 14 17 21 26 31 38 46 57 69 …

20 23 26 30 34 40 47 55 65 78 …
 69 px ҆ 78 9҈1.13
68 px ҆ 76 8҈1.13

12
57 px ҆ 65 8҈1.14 13 12
56 px ҆ 64 8҈1.14 12

11 46 px ҆ 55 9҈1.20 10 10
46 px ҆ 54 8҈1.17 10

8 38 px ҆ 47 9҈1.24 8 8 38 px ҆ 46 8҈1.21 8

7 31 px ҆ 40 9҈1.29 7 8 30 px ҆ 38 8҈1.26 8

5 26 px ҆ 34 8҈1.31 6 6 24 px ҆ 32 8҈1.33 6

5 21 px ҆ 30 9҈1.43 4 4 20 px ҆ 28 8҈1.4 4

4 17 px ҆ 26 9҈1.53 4 4 16 px ҆ 24 8҈1.5 4

3 14 px ҆ 23 9҈1.64 3 2 14 px ҆ 22 8҈1.57 2

2 12 px ҆ 20 8҈1.67 3 2 12 px ҆ 20 8҈1.67 2
16 px
68 px ҆ 76
56 px ҆ 64
16 px

46 px ҆ 54
16 px
38 px ҆ 46
16 px
30 px ҆ 38
16 px
24 px ҆ 32
16 px
20 px ҆ 28
16 px
16 px ҆ 24
16 px
14 px ҆ 22
16 px
12 px ҆ 20
 V1.0 V2.0 V3.0

64 px
56 px 56 px 68 px
48 px 56 px
48 px 40 px 46 px
40 px 34 px 38 px
32 px 28 px 30 px
24 px 24 px 24 px
18 px 20 px 20 px

16 px 16 px 16 px

14 px 14 px 14 px

12 px 12 px 12 px
Before After
Before After
Before After
After
Le Modulor
动态的秩序之美
Ant design web
Let the sunshine in
色彩背后的数理之美
H

B
✨
5P
CF
DPOUJOVF