第 1 章 初識(shí)UI 設(shè)計(jì)

1.1 UI 設(shè)計(jì)的相關(guān)概念………………… 2

1.1.1　UI 設(shè)計(jì)的基本概念… ………… 2

1.1.2 UI 與WUI 和GUI 的關(guān)系… … 2

1.1.3 UI 設(shè)計(jì)常用術(shù)語(yǔ)中英文對(duì)照… ………………………… 3

1.2 UI 設(shè)計(jì)的常用軟件………………… 3

1.3 UI 設(shè)計(jì)的項(xiàng)目流程………………… 4

1.3.1 產(chǎn)品設(shè)計(jì)流程… ……………… 4

1.3.2 UI 設(shè)計(jì)流程…………………… 4

1.4 UI 設(shè)計(jì)的風(fēng)格表現(xiàn)………………… 5

1.5 UI 設(shè)計(jì)的行業(yè)發(fā)展………………… 6

1.5.1 UI 設(shè)計(jì)行業(yè)現(xiàn)狀… …………… 6

1.5.2 UI 設(shè)計(jì)發(fā)展趨勢(shì)… …………… 9

1.6 UI 設(shè)計(jì)的學(xué)習(xí)方法……………… 10

第 2 章 圖標(biāo)設(shè)計(jì)

2.1 圖標(biāo)的基礎(chǔ)知識(shí)… ……………… 13

2.1.1 圖標(biāo)的概念… ……………… 13

2.1.2 圖標(biāo)設(shè)計(jì)的流程… ………… 13

2.1.3 圖標(biāo)設(shè)計(jì)的原則… ………… 15

2.2 圖標(biāo)的設(shè)計(jì)規(guī)范………………… 18

2.2.1 圖標(biāo)的尺寸及單位… ……… 18

2.2.2 圖標(biāo)的視覺(jué)統(tǒng)一… ………… 21

2.2.3 圖標(biāo)的清晰度… …………… 21

2.3 圖標(biāo)的風(fēng)格類型………………… 22

2.3.1 擬物化風(fēng)格… ……………… 22

2.3.2 扁平化風(fēng)格… ……………… 22

2.3.3 3D 風(fēng)格…………………… 23

2.3.4 2.5D 風(fēng)格…………………… 23

2.4 課堂案例——繪制扁平化風(fēng)格的單色面性圖標(biāo)……………………24

2.5 課堂練習(xí)………………………… 29

2.5.1 課堂練習(xí)——繪制扁平化風(fēng)格的不透明色塊面性圖標(biāo)… … 29

2.5.2 課堂練習(xí)——繪制扁平化風(fēng)格的微漸變面性圖標(biāo)… ……… 29

2.6 課后習(xí)題………………………… 30

2.6.1 課后習(xí)題——繪制扁平化風(fēng)格的光影效果圖標(biāo)… ………… 30

2.6.2 課后習(xí)題——繪制扁平化風(fēng)格的折紙投影圖標(biāo)… ………… 30

第3 章 App 界面設(shè)計(jì)

3.1 App 界面的基礎(chǔ)知識(shí)…………… 32

3.1.1 App的概念…………………32

3.1.2 App界面設(shè)計(jì)的流程………32

3.1.3 App界面設(shè)計(jì)的原則………34

3.2 App界面的設(shè)計(jì)規(guī)范……………36

3.2.1 iOS系統(tǒng)界面的設(shè)計(jì)規(guī)范…36

3.2.2 Android系統(tǒng)界面的設(shè)計(jì)規(guī)范…………………………41

3.3 App常用的界面類型……………44

3.3.1 閃屏頁(yè)………………………44

3.3.2 引導(dǎo)頁(yè)………………………46

3.3.3 首頁(yè)…………………………47

3.3.4 個(gè)人中心頁(yè)…………………49

3.3.5 詳情頁(yè)………………………50

3.3.6 注冊(cè)登錄頁(yè)…………………50

3.4 課堂案例——制作暢游旅游App………………………………51

3.4.1 課堂案例——制作暢游旅游App閃屏頁(yè)……………51

3.4.2 課堂案例——制作暢游旅游App引導(dǎo)頁(yè)……………53

3.4.3 課堂案例——制作暢游旅游App首頁(yè)……………………58

3.4.4 課堂案例——制作暢游旅游App個(gè)人中心頁(yè)……………70

3.4.5 課堂案例——制作暢游旅游App酒店詳情頁(yè)……………80

3.4.6 課堂案例——制作暢游旅游App登錄頁(yè)…………………103

3.5 課堂練習(xí)——制作潮貨電商App………………………………112

3.6 課后習(xí)題——制作三餐美食類App………………………113

第4章 網(wǎng)頁(yè)界面設(shè)計(jì)

4.1 網(wǎng)頁(yè)界面設(shè)計(jì)的基礎(chǔ)知識(shí)………116

4.1.1 網(wǎng)頁(yè)界面設(shè)計(jì)的概念………116

4.1.2 網(wǎng)頁(yè)界面設(shè)計(jì)的流程………116

4.1.3 網(wǎng)頁(yè)界面設(shè)計(jì)的原則………118

4.2 網(wǎng)頁(yè)界面的設(shè)計(jì)規(guī)范……………120

4.2.1 網(wǎng)頁(yè)界面設(shè)計(jì)的尺寸及單位…………………………120

4.2.2 網(wǎng)頁(yè)界面設(shè)計(jì)的界面結(jié)構(gòu)……122

4.2.3 網(wǎng)頁(yè)界面設(shè)計(jì)的布局………123

4.2.4 網(wǎng)頁(yè)界面設(shè)計(jì)的文字………125

4.2.5 網(wǎng)頁(yè)界面設(shè)計(jì)的圖標(biāo)………128

4.3 網(wǎng)頁(yè)常用的界面類型……………130

4.4 課堂案例——制作東方木品家居電商網(wǎng)站…………………………133

4.4.1 課堂案例——制作東方木品家居電商網(wǎng)站首頁(yè)…………133

4.4.2 課堂案例——制作東方木品家居電商網(wǎng)站產(chǎn)品列表頁(yè)……157

4.4.3 課堂案例——制作東方木品家居電商網(wǎng)站產(chǎn)品詳情頁(yè)……166

4.5 課堂練習(xí)——制作一點(diǎn)生活家居電商網(wǎng)站……………………175

4.6 課后習(xí)題——制作臻藝裝飾家居電商網(wǎng)站……………………175

第5章 軟件界面設(shè)計(jì)

5.1 軟件界面設(shè)計(jì)的基礎(chǔ)知識(shí)………178

5.1.1 軟件界面設(shè)計(jì)的概念………178

5.1.2 軟件界面設(shè)計(jì)的流程………178

5.1.3 軟件界面設(shè)計(jì)的原則………180

5.2 軟件界面的設(shè)計(jì)規(guī)范……………181

5.2.1 軟件界面設(shè)計(jì)的尺寸及單位………………………182

5.2.2 軟件界面設(shè)計(jì)的界面結(jié)構(gòu)…………………………183

5.2.3 軟件界面設(shè)計(jì)的布局………183

5.2.4 軟件界面設(shè)計(jì)的文字………186

5.2.5 軟件界面設(shè)計(jì)的圖標(biāo)………188

5.3 軟件常用的界面類型……………192

5.4 課堂案例——制作天籟音樂(lè)播放器軟件界面…………………195

5.4.1 課堂案例——制作天籟音樂(lè)播放器軟件首頁(yè)……………195

5.4.2 課堂案例——制作天籟音樂(lè)播放器軟件歌單頁(yè)…………211

5.4.3 課堂案例——制作天籟音樂(lè)播放器軟件歌曲列表頁(yè)……217

5.5 課堂練習(xí)——制作不凡音樂(lè)播放器軟件界面…………………225

5.6 課后習(xí)題——制作酷聽(tīng)音樂(lè)播放器軟件界面…………………226

第6章 游戲界面設(shè)計(jì)

6.1 游戲界面設(shè)計(jì)的基礎(chǔ)知識(shí)………228

6.1.1 游戲界面設(shè)計(jì)的概念………228

6.1.2 游戲界面設(shè)計(jì)的流程………228

6.1.3 游戲界面設(shè)計(jì)的原則………230

6.2 游戲界面的設(shè)計(jì)規(guī)范……………232

6.2.1 游戲界面設(shè)計(jì)的尺寸及單位…………………………232

6.2.2 游戲界面設(shè)計(jì)的界面結(jié)構(gòu)…232

6.2.3 游戲界面設(shè)計(jì)的類型和布局…………………………232

6.2.4 游戲界面設(shè)計(jì)的文字………236

6.2.5 游戲界面設(shè)計(jì)的圖標(biāo)………236

6.3 課堂案例——制作果蔬消消消游戲界面…………………………237

6.4 課堂練習(xí)——制作糖果消消樂(lè)游戲界面…………………………247

6.5 課后習(xí)題——制作開(kāi)心連連看游戲界面…………………………247