UI設計基礎與實戰項目教程（微課版）

本書從UI設計的角度出發，以設計案例和項目實踐相結合的方式，介紹了UI設計的相關知識與操作技能。本書共分5個單元介紹UI設計的基礎與實戰，包括UI設計概述、UI設計的要素、移動端界面設計、網頁界面設計、UI設計綜合項目實戰，從基礎的設計方法和規範講起，主要講解移動端和網頁兩個常用的設計領域，每節基礎知識介紹後，配有相應的項目實戰。本書適合作為藝術設計類、移動開發類專業UI設計相關課程的教材，也可供UI設計相關從業人員學習參考。

夏琰，長春職業技術學院副教授，任吉林省計算機行業商會理事、省美學學會會員。主要研究項目及領域：平面設計、UI設計、交互設計。

第一單元UI設計概述1
1．1UI設計的定義3
1．1．1人機交互3
1．1．2操作邏輯4
1．1．3界面觀感4
1．2UI設計的分類5
1．2．1移動端UI設計5
1．2．2網頁端UI設計6
1．2．3其他UI設計6
1．3UI設計知識儲備7
1．3．1視覺設計基礎8
1．3．2軟件設計基礎9
1．4UI設計工作流程9
1．5單元小結11
1．6課後習題11
第二單元UI設計要素13
2．1UI色彩設計15
2．1．1色彩設計的原則15
2．1．2色彩設計方案17
2．2UI圖形設計23
2．2．1圖形創意表現23
2．2．2圖形與空間27
2．3UI文字設計29
2．3．1文字設計規範29
2．3．2字體設計技巧34
2．4單元小結39
2．5課後習題39
第三單元移動端UI設計41
3．1圖標設計43
3．1．1主題圖標設計45
3．1．2App圖標設計47
3．1．3項目實戰——“中古印象”主題圖標設計47
3．2界面設計53
3．2．1佈局設計55
3．2．2顏色設計60
3．2．3項目實戰——“迪拜之旅”微信小程序界面設計62
3．3交互設計66
3．3．1設計流程67
3．3．2設計工具70
3．3．3項目實戰——“TAOC”App交互設計72
3．4單元小結75
3．5課後習題76
第四單元網頁端UI設計79
4．1網頁端UI設計基礎81
4．1．1網頁發展歷史81
4．1．2網站開發流程81
4．1．3網站類型83
4．1．4網頁版式88
4．2導航欄92
4．2．1導航欄分類92
4．2．2項目實戰——“至尚裝飾公司”頂部欄設計96
4．3Banner設計98
4．3．1Banner的構圖98
4．3．2Banner的文字99
4．3．3Banner的配色99
4．3．4Banner的背景100
4．3．5項目實戰——“至尚裝飾公司”Banner設計100
4．4頁面主體設計102
4．4．1文字設計102
4．4．2色彩搭配105
4．4．3排版原則108
4．4．4項目實戰——“至尚裝飾公司”頁面主體設計110
4．5頁腳設計116
4．5．1頁腳信息116
4．5．2頁腳設計原則117
4．5．3項目實戰——“至尚裝飾公司”頁腳設計118
4．6網頁效果的實現121
4．6．1HTML基礎121
4．6．2CSS技術125
4．6．3其他開發工具131
4．項目實戰——“至尚裝飾公司”網頁搭建131
4．7單元小結136
4．8課後習題137
第五單元UI設計綜合項目實戰139
5．1網頁端UI設計綜合項目實戰141
5．1．1主頁界面的設計與製作141
5．1．2“圖文詳情頁”子頁界面的設計與製作146
5．1．3“詳情頁”子頁界面的設計與製作150
5．2移動端UI設計綜合項目實戰153
5．2．1主界面的設計與製作153
5．2．2“圖文詳情頁”子頁界面的設計與製作155
5．2．3“詳情頁”子頁界面的設計與製作156
5．3單元小結159
5．4課後習題159