本書從UI設計的角度出發(fā),以設計案例和項目實踐相結合的方式,介紹了UI設計的相關知識與操作技能。本書共分5個單元介紹UI設計的基礎與實戰(zhàn),包括UI設計概述、UI設計的要素、移動端界面設計、網(wǎng)頁界面設計、UI設計綜合項目實戰(zhàn),從基礎的設計方法和規(guī)范講起,主要講解移動端和網(wǎng)頁兩個常用的設計領域,每節(jié)基礎知識介紹后,配有相應的項目實戰(zhàn)。本書適合作為藝術設計類、移動開發(fā)類專業(yè)UI設計相關課程的教材,也可供UI設計相關從業(yè)人員學習參考。
1.流行領域急缺選題
2.精選內容,主打移動端和網(wǎng)頁設計領域
3.基礎理論 實戰(zhàn)項目,突出實用性和可操作性
4.微課 素材 習題答案 PPT,配套資源豐富
夏琰,長春職業(yè)技術學院副教授,任吉林省計算機行業(yè)商會理事、省美學學會會員。主要研究項目及領域:平面設計、UI設計、交互設計。
單元 UI設計概述 1
1.1 UI設計的定義 3
1.1.1 人機交互 3
1.1.2 操作邏輯 4
1.1.3 界面觀感 4
1.2 UI設計的分類 5
1.2.1 移動端UI設計 5
1.2.2 網(wǎng)頁端UI設計 6
1.2.3 其他UI設計 6
1.3 UI設計知識儲備 7
1.3.1 視覺設計基礎 8
1.3.2 軟件設計基礎 9
1.4 UI設計工作流程 9
1.5 單元小結 11
1.6 課后習題 11
第二單元 UI設計要素 13
2.1 UI色彩設計 15
2.1.1 色彩設計的原則 15
2.1.2 色彩設計方案 17
2.2 UI圖形設計 23
2.2.1 圖形創(chuàng)意表現(xiàn) 23
2.2.2 圖形與空間 27
2.3 UI文字設計 29
2.3.1 文字設計規(guī)范 29
2.3.2 字體設計技巧 34
2.4 單元小結 39
2.5 課后習題 39
第三單元 移動端UI設計 41
3.1 圖標設計 43
3.1.1 主題圖標設計 45
3.1.2 App圖標設計 47
3.1.3 項目實戰(zhàn)中古印象主題圖標設計 47
3.2 界面設計 53
3.2.1 布局設計 55
3.2.2 顏色設計 60
3.2.3 項目實戰(zhàn)迪拜之旅微信小程序界面設計 62
3.3 交互設計 66
3.3.1 設計流程 67
3.3.2 設計工具 70
3.3.3 項目實戰(zhàn)TAOCApp交互設計 72
3.4 單元小結 75
3.5 課后習題 76
第四單元 網(wǎng)頁端UI設計 79
4.1 網(wǎng)頁端UI設計基礎 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 導航欄 92
4.2.1 導航欄分類 92
4.2.2 項目實戰(zhàn)至尚裝飾公司頂部欄設計 96
4.3 Banner設計 98
4.3.1 Banner的構圖 98
4.3.2 Banner的文字 99
4.3.3 Banner的配色 99
4.3.4 Banner的背景 100
4.3.5 項目實戰(zhàn)至尚裝飾公司Banner設計 100
4.4 頁面主體設計 102
4.4.1 文字設計 102
4.4.2 色彩搭配 105
4.4.3 排版原則 108
4.4.4 項目實戰(zhàn)至尚裝飾公司頁面主體設計 110
4.5 頁腳設計 116
4.5.1 頁腳信息 116
4.5.2 頁腳設計原則 117
4.5.3 項目實戰(zhàn)至尚裝飾公司頁腳設計 118
4.6 網(wǎng)頁效果的實現(xiàn) 121
4.6.1 HTML基礎 121
4.6.2 CSS技術 125
4.6.3 其他開發(fā)工具 131
4.6.4 項目實戰(zhàn)至尚裝飾公司網(wǎng)頁搭建 131
4.7 單元小結 136
4.8 課后習題 137
第五單元 UI設計綜合項目實戰(zhàn) 139
5.1 網(wǎng)頁端UI設計綜合項目實戰(zhàn) 141
5.1.1 主頁界面的設計與制作 141
5.1.2 圖文詳情頁子頁界面的設計與制作 146
5.1.3 視頻詳情頁子頁界面的設計與制作 150
5.2 移動端UI設計綜合項目實戰(zhàn) 153
5.2.1 主界面的設計與制作 153
5.2.2 圖文詳情頁子頁界面的設計與制作 155
5.2.3 視頻詳情頁子頁界面的設計與制作 156
5.3 單元小結 159
5.4 課后習題 159