第 1 章 初識UI 設計
1.1 UI 設計的相關概念………………… 2
1.1.1 UI 設計的概念………………… 2
1.1.2 UI 與WUI 和GUI… ………… 2
1.1.3 UI 設計常用術語中英文對照… ………………………… 3
1.1.4 UI 設計常用軟件……………… 3
1.2 UI 設計項目流程…………………… 3
1.2.1 項目設計流程… ……………… 4
1.2.2 UI 設計流程…………………… 4
1.3 UI 設計的風格表現………………… 5
1.4 UI 設計的行業(yè)發(fā)展………………… 6
1.4.1 UI 設計行業(yè)現狀……………… 6
1.4.2 UI 設計發(fā)展趨勢……………… 8
1.5 UI 設計的學習方法………………… 9
第 2 章 圖標設計
2.1 圖標的基礎知識… ……………… 12
2.1.1 圖標的概念… ……………… 12
2.1.2 圖標設計的流程… ………… 12
2.1.3 圖標設計的原則… ………… 14
2.2 圖標的設計規(guī)范… ……………… 16
2.2.1 圖標的尺寸及單位… ……… 16
2.2.2 圖標的視覺統(tǒng)一… ………… 18
2.2.3 圖標的清晰度… …………… 19
2.3 圖標的風格類型… ……………… 19
2.3.1 像素風格… ………………… 19
2.3.2 扁平化風格… ……………… 20
2.3.3 擬物化風格… ……………… 24
2.3.4 微擬物風格… ……………… 25
2.3.5 立體風格… ………………… 25
2.4 課堂案例——繪制扁平化風格-單色面性圖標… ………………… 26
2.5 課堂練習… ……………………… 30
2.5.1 課堂練習——繪制扁平化風格-不透明色塊面性圖標… …… 30
2.5.2 課堂練習——繪制扁平化風格-微漸變面性圖標… ………… 31
2.6 課后習題… ……………………… 32
2.6.1 課后習題——繪制扁平化風格光影效果圖標… …………… 32
2.6.2 課后習題——繪制扁平化風格折紙投影圖標… …………… 32
第3 章 App 界面設計
3.1 App 的基礎知識………………… 35
3.1.1 App 的概念… ……………… 35
3.1.2 App 設計的流程… ………… 35
3.1.3 App 界面設計的原則… …… 38
3.2 App 界面設計的規(guī)范…………… 40
3.2.1 iOS 設計規(guī)范… …………… 40
3.2.2 Android 設計規(guī)范… ……… 46
3.3 App 常用界面類型……………… 51
3.3.1 閃屏頁… …………………… 51
3.3.2 引導頁… …………………… 53
3.3.3 首頁… ……………………… 54
3.3.4 個人中心頁… ……………… 56
3.3.5 詳情頁… …………………… 56
3.3.6 注冊登錄頁… ……………… 57
3.4 課堂案例——制作侃侃App…… 57
3.5 課堂練習——制作Shine App… …………………………… 95
3.6 課后習題——制作Circle App… …………………………… 96
第4 章 網頁界面設計
4.1 網頁界面設計的基礎知識……… 99
4.1.1 網頁界面設計的概念… …… 99
4.1.2 網頁界面設計的流程… …… 99
4.1.3 網頁界面設計的原則… …… 102
4.2 網頁界面設計的規(guī)范… ………… 104
4.2.1 網頁界面設計的尺寸及單位… ……………………… 104
4.2.2 網頁界面設計的界面結構… ……………………… 107
4.2.3 網頁界面設計的布局… …… 108
4.2.4 網頁界面設計的字體… …… 110
4.2.5 網頁界面設計的圖標… …… 111
4.3 網頁常用界面類型……………… 114
4.4 課堂案例——制作Easy Life 家居電商網站… ……………………… 118
4.4.1 課堂案例—制作Easy Life家居電商網站首頁… ……… 118
4.4.2 課堂案例—制作Easy Life家居電商網站產品列表頁…… 142
4.4.3 課堂案例——制作Easy Life家居電商網站產品詳情頁…… 151
4.5 課堂練習——制作Artsy 家居電商網站… …………………………… 159
4.6 課后習題——制作裝飾家居電商網站… …………………………… 160
第5 章 軟件界面設計
5.1 軟件界面設計的基礎知識……… 162
5.1.1 軟件界面設計的概念… …… 162
5.1.2 軟件界面設計的流程… …… 162
5.1.3 軟件界面設計的原則… …… 165
5.2 軟件界面設計的規(guī)范… ………… 166
5.2.1 軟件界面設計的尺寸及單位… ……………………… 167
5.2.2 軟件界面設計的界面結構… ……………………… 168
5.2.3 軟件界面設計的布局… …… 168
5.2.4 軟件界面設計的字體… …… 172
5.2.5 軟件界面設計的圖標… …… 174
5.3 軟件常用界面類型… …………… 178
5.4 課堂案例——制作音樂播放器軟件… …………………………… 180
5.4.1 課堂案例——制作Song 音樂播放器軟件首頁… ………… 180
5.4.2 課堂案例——制作Song 音樂播放器軟件歌單頁… ……… 194
5.4.3 課堂案例——制作Song 音樂播放器軟件歌曲列表頁… … 200
5.5 課堂練習——制作More 音樂播放器軟件… …………………… 207
5.6 課后習題——制作CoolPlayer音樂播放器軟件… ……………… 208
第6 章 游戲界面設計
6.1 游戲界面設計的基礎知識……… 210
6.1.1 游戲界面設計的概念… …… 210
6.1.2 游戲界面設計的流程… …… 210
6.1.3 游戲界面設計的原則… …… 212
6.2 游戲界面設計的規(guī)范… ………… 214
6.2.1 游戲界面設計的尺寸及單位…… 214
6.2.2 游戲界面設計的界面結構…… 215
6.2.3 游戲界面設計的布局……… 215
6.2.4 游戲界面設計的字體……… 216
6.2.5 游戲界面設計的圖標……… 217
6.3 游戲常用界面類型……………… 217
6.4 課堂案例——制作水果消消消游戲… …………………………… 220
6.5 課堂練習——制作Boom 游戲…… 229
6.6 課后習題——制作Pet Fun游戲… …………………………… 230