移動UI界面設(shè)計（第2版 微課版）

目 錄

項目一 移動UI設(shè)計基礎(chǔ)
相關(guān)知識： 3
1.1 熟悉移動UI設(shè)計 3
1.1.1 了解UI設(shè)計 3
1.1.2 什么是App 4
1.1.3 移動UI設(shè)計與平面UI設(shè)計的區(qū)別 5
1.2 移動UI設(shè)計平臺 7
1.2.1 Android系統(tǒng) 7
1.2.2 HarmonyOS系統(tǒng) 8
1.2.3 iOS系統(tǒng)和iPadOS系統(tǒng) 9
1.2.4 Wear OS和WatchOS系統(tǒng) 11
1.3 移動App項目開發(fā)職業(yè)劃分 12
1.2.5 產(chǎn)品經(jīng)理 12
1.2.6 項目經(jīng)理 12
1.2.7 頁面設(shè)計師 13
1.2.8 開發(fā)人員 13
1.4 移動UI設(shè)計常用軟件 13
1.4.1 XMind和Axure RP 13
1.4.2 Photoshop和Sketch 14
1.4.3 Adobe XD和Figma 15
1.4.4 PxCook和Assistor PS 16
任務(wù)實施： 17
1.5 任務(wù)一 分析移動UI設(shè)計的需求 17
1.5.1 任務(wù)分析——移動UI需求分析 17
1.5.2 任務(wù)實施——“茶道”App的用戶分析 20
1.6 任務(wù)二 移動UI交互設(shè)計 21
1.7.1 任務(wù)分析——移動UI交互設(shè)計流程 21
1.7.2 任務(wù)實施——設(shè)計“茶道”App交互原型 24
1.7 任務(wù)三 移動UI視覺設(shè)計 25
1.7.3 任務(wù)實施——移動UI視覺設(shè)計步驟 25
1.7.4 任務(wù)實施——設(shè)計“茶道”App首頁UI 26
1.8 總結(jié)擴展 28
1.8.2 項目小結(jié) 28
1.8.3 思政導(dǎo)入 28
1.8.4 拓展案例——設(shè)計制作“茶道”App其他頁面UI 28
1.9 課后測試 28
1.9.1 選擇題 29
1.9.2 判斷題 29
1.9.3 創(chuàng)新題 29

項目二 iOS系統(tǒng)UI設(shè)計
相關(guān)知識： 31
2.1 屏幕密度與分辨率 31
2.1.1 網(wǎng)點密度和屏幕密度 31
2.1.2 屏幕分辨率 31
2.2 iOS系統(tǒng)界面尺寸和組件 32
2.2.1 iOS系統(tǒng)界面設(shè)計尺寸 32
2.2.2 iOS系統(tǒng)組件 33
2.3 iOS系統(tǒng)文字設(shè)計規(guī)范 36
2.3.1 字體 36
2.3.2 字號 37
2.3.3 顏色和字重 37
2.4 iOS系統(tǒng)圖標(biāo)設(shè)計規(guī)范 38
2.5 iOS系統(tǒng)圖片設(shè)計規(guī)范 39
2.5.1 圖片的比例 40
2.5.2 圖片的格式 41
2.6 iOS系統(tǒng)內(nèi)容布局 41
2.6.1 列表式布局 41
2.6.2 陳列館式布局 42
2.6.3 宮格式布局 42
2.6.4 卡片式布局 43
2.7 iOS系統(tǒng)版式設(shè)計規(guī)范 44
任務(wù)實施： 44
2.8 任務(wù)一 設(shè)計制作App產(chǎn)品原型 44
2.8.1 任務(wù)分析——App UI的尺寸和布局 45
2.8.2 任務(wù)實施——設(shè)計制作“茶道”App原型 46
2.9 任務(wù)二 設(shè)計制作App產(chǎn)品交互流程 51
2.9.1 任務(wù)分析——交互流程設(shè)計的必要性 51
2.9.2 任務(wù)實施——設(shè)計制作“茶道”App頁面交互 52
2.10 任務(wù)三 設(shè)計制作App產(chǎn)品視覺效果 55
2.10.1 任務(wù)分析——確定“茶道”App UI配色方案 56
2.10.2 任務(wù)實施——設(shè)計制作“茶道”App視覺效果 56
2.11 總結(jié)擴展 63
2.11.1 項目小結(jié) 63
2.11.2 思政導(dǎo)入 63
2.11.3 拓展案例——設(shè)計制作“品茶”App界面 63
2.12 課后測試 63
2.12.1 選擇題 64
2.12.2 判斷題 64
2.12.2 創(chuàng)新題 64

項目三Android系統(tǒng)UI設(shè)計
相關(guān)知識： 66
3.1 了解Android系統(tǒng)“碎片化” 66
3.2 Android系統(tǒng)單位與尺寸 67
3.2.1 Android系統(tǒng)屏幕密度 67
3.2.2 Android系統(tǒng)單位 68
3.2.3 Android系統(tǒng)設(shè)計尺寸 68
3.3 Android系統(tǒng)組件設(shè)計尺寸 69
3.3.1 Android系統(tǒng)組件尺寸 69
3.3.2 Android系統(tǒng)元素間距 69
3.4 Android系統(tǒng)文字設(shè)計規(guī)范 70
3.4.1 字體 70
3.4.2 字號 71
3.5 Android系統(tǒng)圖標(biāo)設(shè)計規(guī)范 71
3.5.1 圖標(biāo)的尺寸 73
3.5.2 觸摸反饋 74
任務(wù)實施： 75
3.6 任務(wù)一 設(shè)計制作旗袍App產(chǎn)品原型與交互 75
3.6.1 任務(wù)分析——旗袍App產(chǎn)品思維導(dǎo)圖與布局分析 75
3.6.2 任務(wù)實施——設(shè)計制作旗袍App原型和交互 78
3.7 任務(wù)二 設(shè)計制作旗袍App圖標(biāo)組與UI 84
3.7.1 任務(wù)分析——圖標(biāo)設(shè)計的優(yōu)點與原則 84
3.7.2 任務(wù)實施——設(shè)計制作旗袍App頁面UI 85
3.8 任務(wù)三 輸出旗袍App頁面并完成適配 92
3.8.1 任務(wù)分析——如何做到一稿多用 93
3.8.2 任務(wù)實施——輸出、適配和標(biāo)注旗袍App頁面 94
3.9 總結(jié)擴展 98
3.9.1 項目小結(jié) 98
3.9.2 思政導(dǎo)入 98
3.9.3 拓展案例——設(shè)計制作詩詞App界面 98
3.10 課后測試 98
3.10.1 選擇題 98
3.10.2 判斷題 99
3.10.3 創(chuàng)新題 99

項目四HarmonyOS系統(tǒng)UI設(shè)計
相關(guān)知識： 101
4.1 了解HarmonyOS系統(tǒng) 101
4.1.1 HarmonyOS系統(tǒng)的誕生與特點 101
4.1.2 HarmonyOS與iOS和Android的區(qū)別 102
4.2 HarmonyOS系統(tǒng)單位與尺寸 102
4.2.1 HarmonyOS系統(tǒng)的單位 103
4.2.2 HarmonyOS系統(tǒng)的組件尺寸 103
4.3 HarmonyOS系統(tǒng)文字設(shè)計規(guī)范 105
4.3.1 字體 105
4.1.3 字號 106
4.1.4 對齊規(guī)則 106
4.4 HarmonyOS系統(tǒng)圖標(biāo)設(shè)計規(guī)范 106
4.4.1 圖標(biāo)圖形大小布局 107
4.4.2 圖標(biāo)圖形的特征 108
4.5 HarmonyOS系統(tǒng)的間距 108
任務(wù)實施： 110
4.6 任務(wù)一 設(shè)計制作戲曲App原型 110
4.6.1 任務(wù)分析——項目頁面尺寸和布局類型 110
4.6.2 任務(wù)實施——設(shè)計制作戲曲App產(chǎn)品原型 111
4.7 任務(wù)二 設(shè)計制作戲曲App視覺效果 117
4.7.1 任務(wù)分析——交互設(shè)計需要考慮的內(nèi)容 117
4.7.2 任務(wù)實施——設(shè)計制作戲曲App視覺效果 118
4.8 任務(wù)三 輸出與適配戲曲App頁面 123
4.8.1 任務(wù)分析——“點9”切圖的應(yīng)用 124
4.8.2 任務(wù)實施——輸出與標(biāo)注戲曲App產(chǎn)品頁面 127
4.9 總結(jié)擴展 133
4.9.1 項目小結(jié) 133
4.9.2 思政導(dǎo)入 133
4.9.3 拓展案例——設(shè)計制作京劇App界面 133
4.10 課后測試 133
4.10.1 選擇題 133
4.10.2 判斷題 134
4.10.3 創(chuàng)新題 134

項目五 微信小程序UI設(shè)計
相關(guān)知識： 136
5.1 了解小程序UI設(shè)計 136
5.2 小程序UI設(shè)計尺寸和區(qū)域 137
5.2.1 小程序UI設(shè)計尺寸 137
5.2.2 小程序UI設(shè)計區(qū)域 137
5.3 啟動頁加載 140
5.4 小程序UI組件設(shè)計 141
5.4.1 導(dǎo)航欄設(shè)計 141
5.4.2 標(biāo)簽欄設(shè)計 143
5.5 小程序UI文字設(shè)計 144
5.5.1 字體與字號 144
5.5.2 字體顏色 145
5.6 任務(wù)一 設(shè)計制作瓷器小程序原型 145
5.6.1 任務(wù)分析——瓷器小程序UI設(shè)計分析 146
5.6.2 任務(wù)實施——設(shè)計制作瓷器小程序UI原型 147
5.7 任務(wù)二 設(shè)計制作瓷器小程序視覺效果 152
5.7.1 任務(wù)分析——瓷器小程序UI配色方案 152
5.7.2 任務(wù)實施——設(shè)計制作瓷器小程序UI與交互 152
5.8 任務(wù)三 標(biāo)注與適配瓷器小程序頁面 158
5.8.1 任務(wù)分析——掌握切片命名規(guī)范 159
5.8.2 任務(wù)實施——標(biāo)注與輸出瓷器小程序頁面 161
5.9 總結(jié)擴展 167
4.9.1 項目小結(jié) 167
4.9.2 思政導(dǎo)入 167
4.9.3 拓展案例——設(shè)計制作旅游微信小程序界面 167
5.10 課后測試 167
5.10.1 選擇題 168
5.10.2 判斷題 168
4.10.3 創(chuàng)新題 168