UI設(shè)計(jì)項(xiàng)目化實(shí)戰(zhàn)教程（微課版）

項(xiàng)目1　認(rèn)識(shí)UI設(shè)計(jì)

1.1　相關(guān)知識(shí)　2

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

1.1.2　UI設(shè)計(jì)分類　3

1.1.3　UI設(shè)計(jì)師簡(jiǎn)介　4

1.1.4　UI設(shè)計(jì)的發(fā)展趨勢(shì)　5

1.1.5　UI設(shè)計(jì)基礎(chǔ)　6

1.2　項(xiàng)目小結(jié)　16

1.3　課后習(xí)題　16



項(xiàng)目2　設(shè)計(jì)“伴游”App圖標(biāo)

2.1　任務(wù)導(dǎo)入　18

2.2　相關(guān)知識(shí)　18

2.2.1　圖標(biāo)的概念　18

2.2.2　圖標(biāo)的設(shè)計(jì)規(guī)范　19

2.2.3　圖標(biāo)的風(fēng)格類型　20

2.2.4　圖標(biāo)網(wǎng)格　22

2.3　任務(wù)實(shí)施　23

2.3.1　思路解析　23

2.3.2　應(yīng)用圖標(biāo)的設(shè)計(jì)與制作　23

2.3.3　面性“首頁”圖標(biāo)的設(shè)計(jì)與制作　31

2.3.4　漸變“攻略”圖標(biāo)的設(shè)計(jì)與制作　36

2.4　創(chuàng)意設(shè)計(jì)實(shí)踐　46

2.5　項(xiàng)目小結(jié)　48

2.6　課后習(xí)題　48



項(xiàng)目3　設(shè)計(jì)“伴游”

App主界面和登錄界面

3.1　任務(wù)導(dǎo)入　50

3.2　相關(guān)知識(shí)　50

3.2.1　主界面中的主要元素　50

3.2.2　App產(chǎn)品原型　57

3.2.3　標(biāo)注　60

3.2.4　卡片式設(shè)計(jì)　60

3.3　任務(wù)實(shí)施　61

3.3.1　主界面設(shè)計(jì)思路解析　61

3.3.2　主界面的設(shè)計(jì)與制作　62

3.3.3　登錄界面設(shè)計(jì)思路解析　67

3.3.4　登錄界面的設(shè)計(jì)與制作　68

3.4　創(chuàng)意設(shè)計(jì)實(shí)踐　70

3.5　項(xiàng)目小結(jié)　72

3.6　課后習(xí)題　72



項(xiàng)目4　設(shè)計(jì)“伴游”App引導(dǎo)頁界面

4.1　任務(wù)導(dǎo)入　74

4.2　相關(guān)知識(shí)　74

4.2.1　引導(dǎo)頁的分類　74

4.2.2　引導(dǎo)頁界面的表現(xiàn)方式　76

4.2.3　UI設(shè)計(jì)中的MBE風(fēng)格　78

4.3　任務(wù)實(shí)施　79

4.3.1　引導(dǎo)頁界面設(shè)計(jì)思路解析　79

4.3.2　引導(dǎo)頁界面的設(shè)計(jì)與制作　79

4.4　創(chuàng)意設(shè)計(jì)實(shí)踐　88

4.5　項(xiàng)目小結(jié)　89

4.6　課后習(xí)題　89



項(xiàng)目5　設(shè)計(jì)“伴游”App

搜索列表頁和詳情頁界面

5.1　任務(wù)導(dǎo)入　91

5.2　相關(guān)知識(shí)　92

5.2.1　了解搜索列表頁和詳情頁　92

5.2.2　詳情頁界面版面布局　92

5.2.3　字體規(guī)范　93

5.3　任務(wù)實(shí)施　94

5.3.1　搜索列表頁界面設(shè)計(jì)思路解析　94

5.3.2　搜索列表頁界面的設(shè)計(jì)與制作　95

5.3.3　詳情頁界面設(shè)計(jì)思路解析　102

5.3.4　詳情頁界面的設(shè)計(jì)與制作　103

5.4　創(chuàng)意設(shè)計(jì)實(shí)踐　108

5.5　項(xiàng)目小結(jié)　109

5.6　課后習(xí)題　109



項(xiàng)目6　設(shè)計(jì)“伴游”App個(gè)人中心頁界面

6.1　任務(wù)導(dǎo)入　111

6.2　相關(guān)知識(shí)　111

6.2.1　了解個(gè)人中心頁　111

6.2.2　個(gè)人中心頁界面的組成　112

6.2.3　界面中的色彩系統(tǒng)　112

6.3　任務(wù)實(shí)施　114

6.3.1　個(gè)人中心頁界面設(shè)計(jì)思路解析　114

6.3.2　個(gè)人中心頁界面的設(shè)計(jì)與制作　115

6.3.3　設(shè)置頁界面的設(shè)計(jì)與制作　119

6.4　創(chuàng)意設(shè)計(jì)實(shí)踐　122

6.5　項(xiàng)目小結(jié)　123

6.6　課后習(xí)題　123



項(xiàng)目7　設(shè)計(jì)“伴游”網(wǎng)頁端首頁界面

7.1　任務(wù)導(dǎo)入　125

7.2　相關(guān)知識(shí)　126

7.2.1　網(wǎng)頁界面設(shè)計(jì)的概念　126

7.2.2　網(wǎng)頁界面設(shè)計(jì)的流程　126

7.2.3　柵格系統(tǒng)　127

7.3　任務(wù)實(shí)施　130

7.3.1　網(wǎng)頁端首頁界面設(shè)計(jì)思路解析　130

7.3.2　網(wǎng)頁端首頁界面的設(shè)計(jì)與制作　131

7.4　創(chuàng)意設(shè)計(jì)實(shí)踐　138

7.5　項(xiàng)目小結(jié)　139

7.6　課后習(xí)題　140



項(xiàng)目8　設(shè)計(jì)“伴游”網(wǎng)頁端搜索列表頁和詳情頁界面

8.1　任務(wù)導(dǎo)入　142

8.2　相關(guān)知識(shí)　143

8.2.1　常用網(wǎng)頁界面的類型　143

8.2.2　常見的網(wǎng)頁界面布局方式　144

8.3　任務(wù)實(shí)施　147



8.3.1　網(wǎng)頁端搜索列表頁界面設(shè)計(jì)思路解析　147

8.3.2　網(wǎng)頁端搜索列表頁界面的設(shè)計(jì)與制作　148

8.3.3　網(wǎng)頁端詳情頁界面設(shè)計(jì)思路解析　153

8.3.4　網(wǎng)頁端詳情頁界面的設(shè)計(jì)與制作　154

8.4　創(chuàng)意設(shè)計(jì)實(shí)踐　168

8.5　項(xiàng)目小結(jié)　169

8.6　課后習(xí)題　169



項(xiàng)目9　設(shè)計(jì)“伴游”網(wǎng)頁端個(gè)人中心訂單頁和下載頁界面

9.1　任務(wù)導(dǎo)入　171

9.2　相關(guān)知識(shí)　172

9.2.1　網(wǎng)頁界面設(shè)計(jì)規(guī)范　172

9.2.2　了解下載頁　174

9.3　任務(wù)實(shí)施　175

9.3.1　網(wǎng)頁端個(gè)人中心訂單頁界面設(shè)計(jì)思路解析　175

9.3.2　網(wǎng)頁端個(gè)人中心訂單頁界面的設(shè)計(jì)與制作　176

9.3.3　網(wǎng)頁端下載頁界面設(shè)計(jì)思路解析　179

9.3.4　網(wǎng)頁端下載頁界面的設(shè)計(jì)與制作　179

9.4　創(chuàng)意設(shè)計(jì)實(shí)踐　182

9.5　項(xiàng)目小結(jié)　182

9.6　課后習(xí)題　182