認識UI設計　/ 1

1.1　UI設計概述 /2

1.1.1　什么是UI設計 /　2

1.1.2　UI設計的用戶體驗 /　4

1.1.3　UI設計的常用工具 /　6

1.2　UI設計的運用 /8

1.2.1　移動App界面設計 /　8

1.2.2　網頁界面設計 /　9

1.2.3　游戲界面設計 /　10

1.2.4　應用軟件界面設計 /　11

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

1.3.1　人工智能產品界面設計 /　11

1.3.2　AR產品界面設計 /　12

1.3.3　VR產品界面設計 /　13

1.4　UI設計的原則 /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設計的流程 /17

1.5.1　分析設計需求 /17

1.5.2　明確視覺定位 /17

1.5.3　繪制原型圖 /18

1.5.4　繪制效果圖 /19

1.5.5　標注與切圖 /20

1.6　項目實訓 /21

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

項目二　分析大型網絡游戲界面的UI設計原則 /22

思考與練習　/　23

第　2章 UI設計要素 /　24

2.1　點、線、面 /25

2.1.1　點 /25

2.1.2　線 /26

2.1.3　面 /27

2.1.4　分析案例網易云音樂App播放頁界面分析 /28

2.2　色彩 /29

2.2.1　色彩的屬性 /29

2.2.2　色彩的對比 /31

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

2.2.4　UI設計中常見的色彩搭配 /33

2.2.5　分析案例對普通話學習App界面進行色彩分析 /34

2.3　字體 /35

2.3.1　UI設計常用字體類型 /35

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

2.3.3　UI設計中的字體排版 /39

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

2.4　風格 /44

2.4.1　界面風格的設計要點 /44

2.4.2　界面常見的設計風格 /44

2.4.3　設計案例插畫風格的網站登錄界面設計 /46

2.5　項目實訓 /53

項目一　分析網站首頁的UI設計 /53

項目二　設計讀書App啟動頁界面 /54

思考與練習　/　54

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

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

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

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

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

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

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

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

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

3.3.1　圖片的格式 /64

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

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

思考與練習　/　66

第4章　UI設計布局與構圖 /　67

4.1　UI設計的布局元素 /68

4.1.1　留白 /68

4.1.2　視覺層次 /70

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

4.2　UI設計的布局原則 /73

4.2.1　對齊原則 /73

4.2.2　對比原則 /74

4.2.3　重復原則 /75

4.2.4　平衡原則 /75

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

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

4.3　UI設計的構圖方法 /78

4.3.1　平衡構圖 /78

4.3.2　放射式構圖 /79

4.3.3　九宮格構圖 /80

4.3.4　三角形構圖 /81

4.3.5　F形構圖 /81

4.3.6　S形構圖 /82

4.3.7　設計案例用三角形構圖設計App登錄界面 /82

4.4　項目實訓 /86

項目一　分析自然堂官方網站界面的布局與構圖 /86

項目二　設計App引導頁界面 /88

思考與練習　/89

第5章　網頁界面設計 /　91

5.1　認識網頁界面 /92

5.1.1　網頁界面的組成 /92

5.1.2　常見的網頁界面布局方式 /94

5.1.3　網頁界面的設計要求 /96

5.2　網頁界面Logo和按鈕設計 /96

5.2.1　Logo設計標準與樣式 /97

5.2.2　按鈕的類型和特點 /98

5.2.3　設計案例設計旅行網Logo /98

5.2.4　設計案例設計網頁登錄按鈕 /103

5.3　網頁界面設計 /105

5.3.1　網頁首頁界面的主要功能 /105

5.3.2　網頁內頁界面設計的注意事項 /106

5.3.3　設計案例制作網頁首頁界面 /106

5.3.4　設計案例制作網頁內頁界面 /112

5.4　項目實訓設計多肉微觀世界登錄頁界面 /114

思考與練習　/116

第6章　App界面設計 /　118

6.1　認識App界面 /119

6.1.1　App基本界面構成 /119

6.1.2　App界面布局形式 /120

6.1.3　App界面設計要點 /125

6.2　App界面圖標設計 /125

6.2.1　認識App界面圖標 /125

6.2.2　App界面圖標類型 /126

6.2.3　App界面圖標設計要點 /127

6.2.4　設計案例設計書畫應用2.5D圖標 /129

6.3　App首頁界面設計 /133

6.3.1　App首頁界面類型 /133

6.3.2　App首頁界面設計要點 /135

6.3.3　設計案例設計美食App首頁界面 /136

6.4　App列表頁界面設計 /142

6.4.1　App列表頁界面類型 /142

6.4.2　App列表頁界面設計原則 /142

6.4.3　設計案例設計美食App列表頁界面 /143

6.5　App其他界面設計 /146

6.5.1　App其他界面類型 /146

6.5.2　設計案例設計美食App關注頁界面 /147

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

6.6　項目實訓設計旅游App搜索頁界面 /154

思考與練習　/155

第7章　界面的標注、切圖與動效制作 /　157

7.1　界面的標注 /158

7.1.1　界面標注的作用 /158

7.1.2　界面標注的內容 /158

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

7.1.4　界面標注的常用工具 /161

7.1.5　設計案例標注App首頁界面 /161

7.2　界面的切圖 /167

7.2.1　切圖的原則 /167

7.2.2　切圖的要點 /167

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

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

7.3　界面的動效制作 /171

7.3.1　界面動效的作用 /172

7.3.2　界面動效的類型 /172

7.3.3　設計案例制作加載動效 /173

7.4　項目實訓標注App關注頁界面 /180

思考與練習　/182

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

8.1　家居網案例分析 /184

8.1.1　家居網項目定位 /184

8.1.2　家居網設計思路 /185

8.1.3　繪制家居網界面原型圖 /186

8.2　家居網界面設計 /188

8.2.1　設計家居網Logo /188

8.2.2　設計家居網首頁界面 /189

8.2.3　設計家居網內頁界面 /195

8.3　家居網App界面設計 /198

8.3.1　設計家居網App首頁界面 /198

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

8.3.3　設計家居網App詳情頁界面 /202

8.3.4　設計家居網App商品結算頁界面 /204

8.3.5　設計家居網App個人中心頁界面 /206

8.3.6　設計家居網App登錄頁界面 /208

思考與練習　/209