單元　UI設(shè)計概述 1

1.1　UI設(shè)計的定義　3

1.1.1　人機交互　3

1.1.2　操作邏輯　4

1.1.3　界面觀感　4

1.2　UI設(shè)計的分類　5

1.2.1　移動端UI設(shè)計　5

1.2.2　網(wǎng)頁端UI設(shè)計　6

1.2.3　其他UI設(shè)計　6

1.3　UI設(shè)計知識儲備　7

1.3.1　視覺設(shè)計基礎(chǔ)　8

1.3.2　軟件設(shè)計基礎(chǔ)　9

1.4　UI設(shè)計工作流程　9

1.5　單元小結(jié)　11

1.6　課后習(xí)題　11

第二單元　UI設(shè)計要素　13

2.1　UI色彩設(shè)計　15

2.1.1　色彩設(shè)計的原則　15

2.1.2　色彩設(shè)計方案　17

2.2　UI圖形設(shè)計　23

2.2.1　圖形創(chuàng)意表現(xiàn)　23

2.2.2　圖形與空間　27

2.3　UI文字設(shè)計　29

2.3.1　文字設(shè)計規(guī)范　29

2.3.2　字體設(shè)計技巧　34

2.4　單元小結(jié)　39

2.5　課后習(xí)題　39

第三單元　移動端UI設(shè)計　41

3.1　圖標設(shè)計　43

3.1.1　主題圖標設(shè)計　45

3.1.2　App圖標設(shè)計　47

3.1.3　項目實戰(zhàn)中古印象主題圖標設(shè)計　47

3.2　界面設(shè)計　53

3.2.1　布局設(shè)計　55

3.2.2　顏色設(shè)計　60

3.2.3　項目實戰(zhàn)迪拜之旅微信小程序界面設(shè)計　62

3.3　交互設(shè)計　66

3.3.1　設(shè)計流程　67

3.3.2　設(shè)計工具　70

3.3.3　項目實戰(zhàn)TAOCApp交互設(shè)計　72

3.4　單元小結(jié)　75

3.5　課后習(xí)題　76

第四單元　網(wǎng)頁端UI設(shè)計　79

4.1　網(wǎng)頁端UI設(shè)計基礎(chǔ)　81

4.1.1　網(wǎng)頁發(fā)展歷史　81

4.1.2　網(wǎng)站開發(fā)流程　81

4.1.3　網(wǎng)站類型　83

4.1.4　網(wǎng)頁版式　88

4.2　導(dǎo)航欄　92

4.2.1　導(dǎo)航欄分類　92

4.2.2　項目實戰(zhàn)至尚裝飾公司頂部欄設(shè)計　96

4.3　Banner設(shè)計　98

4.3.1　Banner的構(gòu)圖　98

4.3.2　Banner的文字　99

4.3.3　Banner的配色　99

4.3.4　Banner的背景　100

4.3.5　項目實戰(zhàn)至尚裝飾公司Banner設(shè)計　100

4.4　頁面主體設(shè)計　102

4.4.1　文字設(shè)計　102

4.4.2　色彩搭配　105

4.4.3　排版原則　108

4.4.4　項目實戰(zhàn)至尚裝飾公司頁面主體設(shè)計　110

4.5　頁腳設(shè)計　116

4.5.1　頁腳信息　116

4.5.2　頁腳設(shè)計原則　117

4.5.3　項目實戰(zhàn)至尚裝飾公司頁腳設(shè)計　118

4.6　網(wǎng)頁效果的實現(xiàn)　121

4.6.1　HTML基礎(chǔ)　121

4.6.2　CSS技術(shù)　125

4.6.3　其他開發(fā)工具　131

4.6.4　項目實戰(zhàn)至尚裝飾公司網(wǎng)頁搭建　131

4.7　單元小結(jié)　136

4.8　課后習(xí)題　137

第五單元　UI設(shè)計綜合項目實戰(zhàn)　139

5.1　網(wǎng)頁端UI設(shè)計綜合項目實戰(zhàn)　141

5.1.1　主頁界面的設(shè)計與制作　141

5.1.2　圖文詳情頁子頁界面的設(shè)計與制作　146

5.1.3　視頻詳情頁子頁界面的設(shè)計與制作　150

5.2　移動端UI設(shè)計綜合項目實戰(zhàn)　153

5.2.1　主界面的設(shè)計與制作　153

5.2.2　圖文詳情頁子頁界面的設(shè)計與制作　155

5.2.3　視頻詳情頁子頁界面的設(shè)計與制作　156

5.3　單元小結(jié)　159

5.4　課后習(xí)題　159