本書(shū)采用項(xiàng)目導(dǎo)向、任務(wù)驅(qū)動(dòng)的模式進(jìn)行編寫(xiě),突破了傳統(tǒng)的教學(xué)模式,在充分汲取本課程教學(xué)改革的成果及作者多年教學(xué)與實(shí)踐經(jīng)驗(yàn)的基礎(chǔ)上,以案例教學(xué)和項(xiàng)目制作流程為課程導(dǎo)向,以移動(dòng)UI設(shè)計(jì)的具體應(yīng)用為學(xué)習(xí)目標(biāo),系統(tǒng)地介紹了移動(dòng)UI設(shè)計(jì)的基本知識(shí)和設(shè)計(jì)技巧。 本書(shū)內(nèi)容由淺入深、通俗易懂、實(shí)例豐富、圖文并茂、直觀生動(dòng)、可操作性強(qiáng),較好地做到了理論與實(shí)踐的統(tǒng)一、內(nèi)容與形式的一致。本書(shū)內(nèi)容包括7個(gè)項(xiàng)目,分別為App界面設(shè)計(jì)概述、色彩在移動(dòng)設(shè)備UI中的應(yīng)用、移動(dòng)UI中的常用元素設(shè)計(jì)、UI元素的組合應(yīng)用、電商購(gòu)物類(lèi)App界面設(shè)計(jì)、《垃圾分類(lèi)小能手》游戲界面設(shè)計(jì)、《病毒消消樂(lè)》游戲界面設(shè)計(jì)。在每個(gè)項(xiàng)目中以典型工作任務(wù)或?qū)嶋H產(chǎn)品開(kāi)發(fā)為載體,介紹并應(yīng)用移動(dòng)UI設(shè)計(jì)的知識(shí)點(diǎn),使學(xué)生掌握所需的基本理論和技能。 本書(shū)可以作為本科院校、高職高專(zhuān)院校中移動(dòng)UI設(shè)計(jì)相關(guān)課程的教材,也可以作為廣大UI設(shè)計(jì)人員的參考用書(shū)。
趙峰,副教授,職業(yè)資格二級(jí)(技師),中國(guó)職業(yè)技術(shù)教育學(xué)會(huì)教學(xué)工作委員會(huì)會(huì)員。畢業(yè)于北京交通大學(xué)計(jì)算機(jī)科學(xué)與技術(shù)專(zhuān)業(yè),現(xiàn)為廣東創(chuàng)新科技職業(yè)學(xué)院動(dòng)漫制作技術(shù)專(zhuān)業(yè)帶頭人,在高校從教二十余年。參與或主持廳局級(jí)、學(xué)會(huì)級(jí)教育教學(xué)改革科研課題三項(xiàng),在各級(jí)各類(lèi)期刊發(fā)表教育教學(xué)改革論文15篇。研究成果在職教學(xué)會(huì)、高教學(xué)會(huì)評(píng)比中獲得一等獎(jiǎng)8項(xiàng)、二等獎(jiǎng)3項(xiàng)、三等獎(jiǎng)5項(xiàng)。指導(dǎo)學(xué)生參加各級(jí)各類(lèi)技能大賽,多次獲得優(yōu)秀指導(dǎo)教師稱(chēng)號(hào)。參與編寫(xiě)多部教材,申報(bào)實(shí)用新型專(zhuān)利1項(xiàng)。
項(xiàng)目1 App UI 設(shè)計(jì)概述 ...................................................................................................... 1
1.1 UI 設(shè)計(jì)的基本概念及分類(lèi) ................................................................................................. 1
1.1.1 UI 設(shè)計(jì)的基本概念 ......................................................................................................................... 1
1.1.2 UI 設(shè)計(jì)的分類(lèi) ................................................................................................................................. 1
1.2 App UI 設(shè)計(jì)的要素及布局方式 ......................................................................................... 4
1.2.1 App UI 設(shè)計(jì)的要素 ......................................................................................................................... 4
1.2.2 App UI 設(shè)計(jì)的布局方式 ............................................................................................................... 13
1.3 App UI 設(shè)計(jì)的流程 ........................................................................................................... 15
1.4 App UI 設(shè)計(jì)的原則 ........................................................................................................... 16
1.5 App UI 設(shè)計(jì)的尺寸標(biāo)準(zhǔn) ................................................................................................... 17
1.5.1 設(shè)計(jì)尺寸標(biāo)準(zhǔn)和規(guī)范 .................................................................................................................... 17
1.5.2 平臺(tái) ................................................................................................................................................ 17
1.5.3 單位尺寸 ........................................................................................................................................ 17
1.5.4 iOS 平臺(tái)的尺寸標(biāo)準(zhǔn) ..................................................................................................................... 18
1.5.5 Android 平臺(tái)的尺寸標(biāo)準(zhǔn) .............................................................................................................. 20
1.5.6 HarmonyOS 平臺(tái)的尺寸標(biāo)準(zhǔn) ....................................................................................................... 20
1.6 常用的UI 設(shè)計(jì)工具 .......................................................................................................... 22
1.6.1 Adobe Photoshop ............................................................................................................................ 22
1.6.2 Adobe Illustrator ............................................................................................................................. 24
1.6.3 數(shù)位板 ............................................................................................................................................ 24
1.6.4 數(shù)碼相機(jī) ........................................................................................................................................ 25
1.7 智能手機(jī)操作系統(tǒng)介紹 .................................................................................................... 26
1.7.1 HarmonyOS .................................................................................................................................... 26
1.7.2 iOS .................................................................................................................................................. 29
1.7.3 Android ........................................................................................................................................... 31
習(xí) 題 ......................................................................................................................................... 33
項(xiàng)目2 色彩在移動(dòng)設(shè)備UI 中的應(yīng)用.................................................................................. 34
2.1 色彩的基本知識(shí) ................................................................................................................ 34
2.2 色彩的組成 ........................................................................................................................ 35
2.3 色彩的對(duì)比 ........................................................................................................................ 36
2.4 色彩的調(diào)和 ........................................................................................................................ 39
2.5 色調(diào)的變化 ........................................................................................................................ 42
2.6 移動(dòng)端UI 色彩搭配的原則 .............................................................................................. 42
2.6.1 UI 三色搭配原則 ........................................................................................................................... 42
2.6.2 色彩搭配的注意事項(xiàng) .................................................................................................................... 43
2.6.3 UI 設(shè)計(jì)的配色技巧 ....................................................................................................................... 43
習(xí) 題 ......................................................................................................................................... 44
項(xiàng)目3 移動(dòng)UI 中的常用元素設(shè)計(jì) ..................................................................................... 45
3.1 圖標(biāo)概述 ............................................................................................................................ 45
3.1.1 圖標(biāo)設(shè)計(jì)流程 ................................................................................................................................ 46
3.1.2 圖標(biāo)設(shè)計(jì)原則 ................................................................................................................................ 46
3.2 任務(wù)1 創(chuàng)意線(xiàn)性圖標(biāo)的設(shè)計(jì) ........................................................................................... 49
3.2.1 任務(wù)描述 ........................................................................................................................................ 49
3.2.2 思路剖析 ........................................................................................................................................ 50
3.2.3 任務(wù)實(shí)現(xiàn) ........................................................................................................................................ 50
3.3 任務(wù)2 扁平化風(fēng)格圖標(biāo)的設(shè)計(jì) ....................................................................................... 51
3.3.1 任務(wù)描述 ........................................................................................................................................ 52
3.3.2 思路剖析 ........................................................................................................................................ 52
3.3.3 任務(wù)實(shí)現(xiàn) ........................................................................................................................................ 52
3.4 任務(wù)3 MBE 風(fēng)格圖標(biāo)的設(shè)計(jì) .......................................................................................... 53
3.4.1 任務(wù)描述 ........................................................................................................................................ 54
3.4.2 思路剖析 ........................................................................................................................................ 54
3.4.3 任務(wù)實(shí)現(xiàn) ........................................................................................................................................ 55
3.5 任務(wù)4 線(xiàn)性漸變圖標(biāo)設(shè)計(jì) ............................................................................................... 58
3.5.1 任務(wù)描述 ........................................................................................................................................ 58
3.5.2 思路剖析 ........................................................................................................................................ 58
3.5.3 任務(wù)實(shí)現(xiàn) ........................................................................................................................................ 59
習(xí) 題 ......................................................................................................................................... 66
項(xiàng)目4 UI 元素的組合應(yīng)用 ................................................................................................. 68
4.1 任務(wù)1 首頁(yè)設(shè)計(jì) ............................................................................................................... 68
4.1.1 任務(wù)描述 ........................................................................................................................................ 68
4.1.2 思路剖析 ........................................................................................................................................ 68
4.1.3 任務(wù)實(shí)現(xiàn) ........................................................................................................................................ 69
4.2 任務(wù)2 商品分類(lèi)頁(yè)面設(shè)計(jì) ............................................................................................... 73
4.2.1 任務(wù)描述 ........................................................................................................................................ 73
4.2.2 思路剖析 ........................................................................................................................................ 73
4.2.3 任務(wù)實(shí)現(xiàn) ........................................................................................................................................ 74
4.3 任務(wù)3 詳情頁(yè)設(shè)計(jì) ............................................................................................................ 82
4.3.1 任務(wù)描述 ........................................................................................................................................ 82
4.3.2 思路剖析 ........................................................................................................................................ 82
4.3.3 任務(wù)實(shí)現(xiàn) ........................................................................................................................................ 82
4.4 任務(wù)4 個(gè)人中心頁(yè)面設(shè)計(jì) ............................................................................................... 87
4.4.1 任務(wù)描述 ........................................................................................................................................ 87
4.4.2 思路剖析 ........................................................................................................................................ 88
4.4.3 任務(wù)實(shí)現(xiàn) ........................................................................................................................................ 88
習(xí) 題 ......................................................................................................................................... 97
項(xiàng)目5 電商購(gòu)物類(lèi)App UI 設(shè)計(jì) ........................................................................................ 99
5.1 產(chǎn)品定位 ............................................................................................................................ 99
5.2 產(chǎn)品優(yōu)勢(shì) ............................................................................................................................ 99
5.3 繪制草圖 .......................................................................................................................... 100
5.3.1 繪制《美食美刻》App 的草圖 ................................................................................................... 100
5.3.2 Axure RP ...................................................................................................................................... 100
5.4 繪制原型圖 ...................................................................................................................... 104
5.4.1 原型圖的作用 .............................................................................................................................. 105
5.4.2 原型圖的種類(lèi) .............................................................................................................................. 105
5.4.3 使用線(xiàn)框圖制作《美食美刻》App 的原型圖 ........................................................................... 105
5.5 設(shè)計(jì)風(fēng)格、顏色定位及字體設(shè)置 .................................................................................. 108
5.5.1 設(shè)計(jì)風(fēng)格 ...................................................................................................................................... 108
5.5.2 顏色定位 ...................................................................................................................................... 108
5.5.3 文字設(shè)置 ...................................................................................................................................... 108
5.6 啟動(dòng)圖標(biāo) .......................................................................................................................... 109
5.6.1 啟動(dòng)圖標(biāo)的詳細(xì)分析 .................................................................................................................. 109
5.6.2 啟動(dòng)圖標(biāo)的參數(shù) .......................................................................................................................... 109
5.6.3 啟動(dòng)圖標(biāo)的制作過(guò)程 .................................................................................................................. 110
5.7 加載頁(yè) .............................................................................................................................. 113
5.7.1 頁(yè)面詳細(xì)分析 .............................................................................................................................. 113
5.7.2 頁(yè)面參數(shù) ...................................................................................................................................... 114
5.7.3 頁(yè)面制作過(guò)程 .............................................................................................................................. 114
5.8 引導(dǎo)頁(yè) .............................................................................................................................. 116
5.8.1 頁(yè)面詳細(xì)分析 .............................................................................................................................. 116
5.8.2 頁(yè)面參數(shù) ...................................................................................................................................... 116
5.8.3 頁(yè)面制作過(guò)程 .............................................................................................................................. 117
5.9 首頁(yè) .................................................................................................................................. 118
5.9.1 頁(yè)面詳細(xì)分析 .............................................................................................................................. 118
5.9.2 頁(yè)面參數(shù) ...................................................................................................................................... 118
5.9.3 頁(yè)面制作過(guò)程 .............................................................................................................................. 119
5.10 “商城”頁(yè) ........................................................................................................................ 128
5.10.1 頁(yè)面詳細(xì)分析 ............................................................................................................................ 129
5.10.2 頁(yè)面參數(shù) .................................................................................................................................... 129
5.10.3 頁(yè)面制作過(guò)程 ............................................................................................................................ 130
5.11 “美食分享”頁(yè) ................................................................................................................. 147
5.11.1 頁(yè)面詳細(xì)分析 ............................................................................................................................ 147
5.11.2 頁(yè)面參數(shù) .................................................................................................................................... 148
5.11.3 頁(yè)面制作過(guò)程 ............................................................................................................................ 149
5.12 “訂單”頁(yè) ........................................................................................................................... 173
5.12.1 頁(yè)面詳細(xì)分析 ............................................................................................................................ 173
5.12.2 頁(yè)面參數(shù) .................................................................................................................................... 174
5.12.3 頁(yè)面制作過(guò)程 ............................................................................................................................ 174
5.13 “我的”頁(yè) ........................................................................................................................... 175
5.13.1 頁(yè)面詳細(xì)分析 ............................................................................................................................ 175
5.13.2 頁(yè)面參數(shù) .................................................................................................................................... 176
5.13.3 頁(yè)面制作過(guò)程 ............................................................................................................................ 177
5.14 案例小結(jié) ........................................................................................................................ 178
習(xí) 題 ....................................................................................................................................... 178
項(xiàng)目6 《垃圾分類(lèi)小能手》游戲UI 設(shè)計(jì) ........................................................................ 181
6.1 游戲定位 .......................................................................................................................... 181
6.2 繪制草圖 .......................................................................................................................... 181
6.2.1 啟動(dòng)圖標(biāo)草圖 .............................................................................................................................. 181
6.2.2 加載頁(yè)草圖 .................................................................................................................................. 182
6.2.3 注冊(cè)引導(dǎo)頁(yè)草圖 .......................................................................................................................... 182
6.2.4 首頁(yè)草圖 ...................................................................................................................................... 182
6.2.5 幫助頁(yè)面草圖 .............................................................................................................................. 183
6.2.6 游戲頁(yè)面草圖 .............................................................................................................................. 183
6.2.7 通關(guān)頁(yè)面草圖 .............................................................................................................................. 184
6.3 啟動(dòng)圖標(biāo) .......................................................................................................................... 185
6.4 加載頁(yè) .............................................................................................................................. 188
6.5 注冊(cè)引導(dǎo)頁(yè) ...................................................................................................................... 190
6.6 首頁(yè) .................................................................................................................................. 194
6.7 幫助頁(yè)面 .......................................................................................................................... 197
6.8 游戲頁(yè)面 .......................................................................................................................... 200
6.9 通關(guān)頁(yè)面 .......................................................................................................................... 203
6.10 案例小結(jié) ........................................................................................................................ 206
習(xí) 題 ....................................................................................................................................... 206
項(xiàng)目7 《病毒消消樂(lè)》游戲UI 設(shè)計(jì) ................................................................................ 207
7.1 產(chǎn)品定位 .......................................................................................................................... 207
7.2 產(chǎn)品優(yōu)勢(shì) .......................................................................................................................... 207
7.3 繪制草圖 .......................................................................................................................... 208
7.4 風(fēng)格定位、色彩定位 ...................................................................................................... 209
7.4.1 風(fēng)格定位 ...................................................................................................................................... 209
7.4.2 色彩定位 ...................................................................................................................................... 209
7.5 啟動(dòng)圖標(biāo) .......................................................................................................................... 211
7.5.1 背景部分 ...................................................................................................................................... 212
7.5.2 點(diǎn)綴部分 ...................................................................................................................................... 213
7.5.3 主體部分 ...................................................................................................................................... 214
7.6 引導(dǎo)頁(yè) .............................................................................................................................. 216
7.6.1 賽道 .............................................................................................................................................. 217
7.6.2 框架 .............................................................................................................................................. 219
7.6.3 引導(dǎo)圖標(biāo) ...................................................................................................................................... 222
7.6.4 其他小圖標(biāo) .................................................................................................................................. 224
7.7 主頁(yè) .................................................................................................................................. 225
7.7.1 主頁(yè)點(diǎn)綴 ...................................................................................................................................... 226
7.7.2 主頁(yè)小圖標(biāo) .................................................................................................................................. 227
7.8 加載頁(yè) .............................................................................................................................. 229
7.8.1 加載圖標(biāo) ...................................................................................................................................... 230
7.8.2 針管圖標(biāo) ...................................................................................................................................... 232
7.9 子頁(yè)面1 設(shè)計(jì) .................................................................................................................. 233
7.9.1 歌曲介紹欄 .................................................................................................................................. 234
7.9.2 頂部小圖標(biāo) .................................................................................................................................. 236
7.10 子頁(yè)面2 設(shè)計(jì) ................................................................................................................ 237
7.10.1 主體文案 .................................................................................................................................... 238
7.11 子頁(yè)面3 設(shè)計(jì) ................................................................................................................ 241
7.11.1 內(nèi)部符號(hào)圖標(biāo) ............................................................................................................................ 242
7.12 案例小結(jié) ........................................................................................................................ 244
習(xí) 題 ....................................................................................................................................... 244