認識UI設(shè)計　/ 1

1.1　UI設(shè)計概述 /2

1.1.1　什么是UI設(shè)計 /　2

1.1.2　UI設(shè)計的用戶體驗 /　4

1.1.3　UI設(shè)計的常用工具 /　6

1.2　UI設(shè)計的運用 /8

1.2.1　移動App界面設(shè)計 /　8

1.2.2　網(wǎng)頁界面設(shè)計 /　9

1.2.3　游戲界面設(shè)計 /　10

1.2.4　應(yīng)用軟件界面設(shè)計 /　11

1.3　UI設(shè)計的發(fā)展趨勢 /11

1.3.1　人工智能產(chǎn)品界面設(shè)計 /　11

1.3.2　AR產(chǎn)品界面設(shè)計 /　12

1.3.3　VR產(chǎn)品界面設(shè)計 /　13

1.4　UI設(shè)計的原則 /13

1.4.1　適用性 /　13

1.4.2　規(guī)范性 /　14

1.4.3　易操作性 /　15

1.4.4　統(tǒng)一性 /15

1.4.5　層級性 /16

1.5　UI設(shè)計的流程 /17

1.5.1　分析設(shè)計需求 /17

1.5.2　明確視覺定位 /17

1.5.3　繪制原型圖 /18

1.5.4　繪制效果圖 /19

1.5.5　標(biāo)注與切圖 /20

1.6　項目實訓(xùn) /21

項目一　天氣類應(yīng)用軟件界面的素材搜集與制作 /21

項目二　分析大型網(wǎng)絡(luò)游戲界面的UI設(shè)計原則 /22

思考與練習(xí)　/　23

第　2章 UI設(shè)計要素 /　24

2.1　點、線、面 /25

2.1.1　點 /25

2.1.2　線 /26

2.1.3　面 /27

2.1.4　分析案例網(wǎng)易云音樂App播放頁界面分析 /28

2.2　色彩 /29

2.2.1　色彩的屬性 /29

2.2.2　色彩的對比 /31

2.2.3　主色、輔助色與點綴色 /32

2.2.4　UI設(shè)計中常見的色彩搭配 /33

2.2.5　分析案例對普通話學(xué)習(xí)App界面進行色彩分析 /34

2.3　字體 /35

2.3.1　UI設(shè)計常用字體類型 /35

2.3.2　UI設(shè)計字體規(guī)范 /37

2.3.3　UI設(shè)計中的字體排版 /39

2.3.4　設(shè)計案例小游戲App界面中的文字設(shè)計 /40

2.4　風(fēng)格 /44

2.4.1　界面風(fēng)格的設(shè)計要點 /44

2.4.2　界面常見的設(shè)計風(fēng)格 /44

2.4.3　設(shè)計案例插畫風(fēng)格的網(wǎng)站登錄界面設(shè)計 /46

2.5　項目實訓(xùn) /53

項目一　分析網(wǎng)站首頁的UI設(shè)計 /53

項目二　設(shè)計讀書App啟動頁界面 /54

思考與練習(xí)　/　54

第3章　UI設(shè)計規(guī)范 /56

3.1　了解UI設(shè)計規(guī)范 /57

3.1.1　UI設(shè)計規(guī)范的原則 /57

3.1.2　UI設(shè)計規(guī)范包括的 內(nèi)容 /58

3.2　不同操作系統(tǒng)的UI設(shè)計規(guī)范 /60

3.2.1　iOS的UI設(shè)計規(guī)范 /60

3.2.2　Android操作系統(tǒng)的UI設(shè)計規(guī)范 /61

3.2.3　Windows操作系統(tǒng)的UI設(shè)計規(guī)范 /63

3.3　UI設(shè)計的圖片規(guī)范 /63

3.3.1　圖片的格式 /64

3.3.2　圖片的使用規(guī)范 /64

3.4　項目實訓(xùn)分析某App界面中的UI設(shè)計規(guī)范 /65

思考與練習(xí)　/　66

第4章　UI設(shè)計布局與構(gòu)圖 /　67

4.1　UI設(shè)計的布局元素 /68

4.1.1　留白 /68

4.1.2　視覺層次 /70

4.1.3　分析案例分析佰草集官方網(wǎng)站界面的布局元素 /72

4.2　UI設(shè)計的布局原則 /73

4.2.1　對齊原則 /73

4.2.2　對比原則 /74

4.2.3　重復(fù)原則 /75

4.2.4　平衡原則 /75

4.2.5　節(jié)奏與韻律原則 /76

4.2.6　分析案例分析手機App界面的布局原則 /77

4.3　UI設(shè)計的構(gòu)圖方法 /78

4.3.1　平衡構(gòu)圖 /78

4.3.2　放射式構(gòu)圖 /79

4.3.3　九宮格構(gòu)圖 /80

4.3.4　三角形構(gòu)圖 /81

4.3.5　F形構(gòu)圖 /81

4.3.6　S形構(gòu)圖 /82

4.3.7　設(shè)計案例用三角形構(gòu)圖設(shè)計App登錄界面 /82

4.4　項目實訓(xùn) /86

項目一　分析自然堂官方網(wǎng)站界面的布局與構(gòu)圖 /86

項目二　設(shè)計App引導(dǎo)頁界面 /88

思考與練習(xí)　/89

第5章　網(wǎng)頁界面設(shè)計 /　91

5.1　認識網(wǎng)頁界面 /92

5.1.1　網(wǎng)頁界面的組成 /92

5.1.2　常見的網(wǎng)頁界面布局方式 /94

5.1.3　網(wǎng)頁界面的設(shè)計要求 /96

5.2　網(wǎng)頁界面Logo和按鈕設(shè)計 /96

5.2.1　Logo設(shè)計標(biāo)準與樣式 /97

5.2.2　按鈕的類型和特點 /98

5.2.3　設(shè)計案例設(shè)計旅行網(wǎng)Logo /98

5.2.4　設(shè)計案例設(shè)計網(wǎng)頁登錄按鈕 /103

5.3　網(wǎng)頁界面設(shè)計 /105

5.3.1　網(wǎng)頁首頁界面的主要功能 /105

5.3.2　網(wǎng)頁內(nèi)頁界面設(shè)計的注意事項 /106

5.3.3　設(shè)計案例制作網(wǎng)頁首頁界面 /106

5.3.4　設(shè)計案例制作網(wǎng)頁內(nèi)頁界面 /112

5.4　項目實訓(xùn)設(shè)計多肉微觀世界登錄頁界面 /114

思考與練習(xí)　/116

第6章　App界面設(shè)計 /　118

6.1　認識App界面 /119

6.1.1　App基本界面構(gòu)成 /119

6.1.2　App界面布局形式 /120

6.1.3　App界面設(shè)計要點 /125

6.2　App界面圖標(biāo)設(shè)計 /125

6.2.1　認識App界面圖標(biāo) /125

6.2.2　App界面圖標(biāo)類型 /126

6.2.3　App界面圖標(biāo)設(shè)計要點 /127

6.2.4　設(shè)計案例設(shè)計書畫應(yīng)用2.5D圖標(biāo) /129

6.3　App首頁界面設(shè)計 /133

6.3.1　App首頁界面類型 /133

6.3.2　App首頁界面設(shè)計要點 /135

6.3.3　設(shè)計案例設(shè)計美食App首頁界面 /136

6.4　App列表頁界面設(shè)計 /142

6.4.1　App列表頁界面類型 /142

6.4.2　App列表頁界面設(shè)計原則 /142

6.4.3　設(shè)計案例設(shè)計美食App列表頁界面 /143

6.5　App其他界面設(shè)計 /146

6.5.1　App其他界面類型 /146

6.5.2　設(shè)計案例設(shè)計美食App關(guān)注頁界面 /147

6.5.3　設(shè)計案例設(shè)計美食App個人中心頁界面 /150

6.6　項目實訓(xùn)設(shè)計旅游App搜索頁界面 /154

思考與練習(xí)　/155

第7章　界面的標(biāo)注、切圖與動效制作 /　157

7.1　界面的標(biāo)注 /158

7.1.1　界面標(biāo)注的作用 /158

7.1.2　界面標(biāo)注的內(nèi)容 /158

7.1.3　界面標(biāo)注的規(guī)范 /160

7.1.4　界面標(biāo)注的常用工具 /161

7.1.5　設(shè)計案例標(biāo)注App首頁界面 /161

7.2　界面的切圖 /167

7.2.1　切圖的原則 /167

7.2.2　切圖的要點 /167

7.2.3　切圖的命名規(guī)則 /168

7.2.4　設(shè)計案例對App首頁界面進行切圖 /169

7.3　界面的動效制作 /171

7.3.1　界面動效的作用 /172

7.3.2　界面動效的類型 /172

7.3.3　設(shè)計案例制作加載動效 /173

7.4　項目實訓(xùn)標(biāo)注App關(guān)注頁界面 /180

思考與練習(xí)　/182

第8章　綜合案例電商主題界面設(shè)計 /　183

8.1　家居網(wǎng)案例分析 /184

8.1.1　家居網(wǎng)項目定位 /184

8.1.2　家居網(wǎng)設(shè)計思路 /185

8.1.3　繪制家居網(wǎng)界面原型圖 /186

8.2　家居網(wǎng)界面設(shè)計 /188

8.2.1　設(shè)計家居網(wǎng)Logo /188

8.2.2　設(shè)計家居網(wǎng)首頁界面 /189

8.2.3　設(shè)計家居網(wǎng)內(nèi)頁界面 /195

8.3　家居網(wǎng)App界面設(shè)計 /198

8.3.1　設(shè)計家居網(wǎng)App首頁界面 /198

8.3.2　設(shè)計家居網(wǎng)App發(fā)現(xiàn)頁界面 /201

8.3.3　設(shè)計家居網(wǎng)App詳情頁界面 /202

8.3.4　設(shè)計家居網(wǎng)App商品結(jié)算頁界面 /204

8.3.5　設(shè)計家居網(wǎng)App個人中心頁界面 /206

8.3.6　設(shè)計家居網(wǎng)App登錄頁界面 /208

思考與練習(xí)　/209