移動UI界面設計（第2版）（微課版）

專案一 移動UI設計基礎
相關知識： 3
1.1 熟悉移動UI設計 3
1.1.1 瞭解UI設計 3
1.1.2 什麼是App 4
1.1.3 移動UI設計與平面UI設計的區別 5
1.2 移動UI設計平臺 7
1.2.1 Android系統 7
1.2.2 HarmonyOS系統 8
1.2.3 iOS系統和iPadOS系統 9
1.2.4 Wear OS和WatchOS系統 11
1.3 移動App專案開發職業劃分 12
1.2.5 產品經理 12
1.2.6 專案經理 12
1.2.7 頁面設計師 13
1.2.8 開發人員 13
1.4 移動UI設計常用軟體 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
任務實施： 17
1.5 任務一 分析移動UI設計的需求 17
1.5.1 任務分析——移動UI需求分析 17
1.5.2 任務實施——“茶道”App的用戶分析 20
1.6 任務二 移動UI交互設計 21
1.7.1 任務分析——移動UI交互設計流程 21
1.7.2 任務實施——設計“茶道”App交互原型 24
1.7 任務三 移動UI視覺設計 25
1.7.3 任務實施——移動UI視覺設計步驟 25
1.7.4 任務實施——設計“茶道”App 頁UI 26
1.8 總結擴展 28
1.8.2 項目小結 28
1.8.3 思政導入 28
1.8.4 拓展案例——設計“茶道”App其他頁面UI 28
1.9 課後測試 28
1.9.1 選擇題 29
1.9.2 判斷題 29
1.9.3 創新題 29

專案二 iOS系統UI設計
相關知識： 31
2.1 螢幕密度與解析度 31
2.1.1 網點密度和螢幕密度 31
2.1.2 螢幕解析度 31
2.2 iOS系統介面尺寸和元件 32
2.2.1 iOS系統介面設計尺寸 32
2.2.2 iOS系統元件 33
2.3 iOS系統文字設計規範 36
2.3.1 字體 36
2.3.2 字型大小 37
2.3.3 顏色和字重 37
2.4 iOS系統圖示設計規範 38
2.5 iOS系統圖片設計規範 39
2.5.1 圖片的比例 40
2.5.2 圖片的格式 41
2.6 iOS系統內容佈局 41
2.6.1 列表式佈局 41
2.6.2 陳列館式佈局 42
2.6.3 宮格式佈局 42
2.6.4 卡片式佈局 43
2.7 iOS系統版式設計規範 44
任務實施： 44
2.8 任務一 設計App產品原型 44
2.8.1 任務分析——App UI的尺寸和佈局 45
2.8.2 任務實施——設計“茶道”App原型 46
2.9 任務二 設計App產品交互流程 51
2.9.1 任務分析——交互流程設計的 要性 51
2.9.2 任務實施——設計“茶道”App頁面交互 52
2.10 任務三 設計App產品視覺效果 55
2.10.1 任務分析——確定“茶道”App UI配色方案 56
2.10.2 任務實施——設計“茶道”App視覺效果 56
2.11 總結擴展 63
2.11.1 項目小結 63
2.11.2 思政導入 63
2.11.3 拓展案例——設計“品茶”App介面 63
2.12 課後測試 63
2.12.1 選擇題 64
2.12.2 判斷題 64
2.12.2 創新題 64

專案三Android系統UI設計
相關知識： 66
3.1 瞭解Android系統“碎片化” 66
3.2 Android系統單位與尺寸 67
3.2.1 Android系統螢幕密度 67
3.2.2 Android系統單位 68
3.2.3 Android系統設計尺寸 68
3.3 Android系統元件設計尺寸 69
3.3.1 Android系統元件尺寸 69
3.3.2 Android系統元素間距 69
3.4 Android系統文字設計規範 70
3.4.1 字體 70
3.4.2 字型大小 71
3.5 Android系統圖示設計規範 71
3.5.1 圖示的尺寸 73
3.5.2 觸摸回饋 74
任務實施： 75
3.6 任務一 設計旗袍App產品原型與交互 75
3.6.1 任務分析——旗袍App產品思維導圖與佈局分析 75
3.6.2 任務實施——設計旗袍App原型和交互 78
3.7 任務二 設計旗袍App圖示組與UI 84
3.7.1 任務分析——圖示設計的點與原則 84
3.7.2 任務實施——設計旗袍App頁面UI 85
3.8 任務三 輸出旗袍App頁面並完成適配 92
3.8.1 任務分析——如何做到一稿多用 93
3.8.2 任務實施——輸出、適配和標注旗袍App頁面 94
3.9 總結擴展 98
3.9.1 項目小結 98
3.9.2 思政導入 98
3.9.3 拓展案例——設計詩詞App介面 98
3.10 課後測試 98
3.10.1 選擇題 98
3.10.2 判斷題 99
3.10.3 創新題 99

專案四HarmonyOS系統UI設計
相關知識： 101
4.1 瞭解HarmonyOS系統 101
4.1.1 HarmonyOS系統的誕生與點 101
4.1.2 HarmonyOS與iOS和Android的區別 102
4.2 HarmonyOS系統單位與尺寸 102
4.2.1 HarmonyOS系統的單位 103
4.2.2 HarmonyOS系統的元件尺寸 103
4.3 HarmonyOS系統文字設計規範 105
4.3.1 字體 105
4.1.3 字型大小 106
4.1.4 對齊規則 106
4.4 HarmonyOS系統圖示設計規範 106
4.4.1 圖示圖形大小佈局 107
4.4.2 圖示圖形的征 108
4.5 HarmonyOS系統的間距 108
任務實施： 110
4.6 任務一 設計戲曲App原型 110
4.6.1 任務分析——專案頁面尺寸和佈局類型 110
4.6.2 任務實施——設計戲曲App產品原型 111
4.7 任務二 設計戲曲App視覺效果 117
4.7.1 任務分析——交互設計需要考慮的內容 117
4.7.2 任務實施——設計戲曲App視覺效果 118
4.8 任務三 輸出與適配戲曲App頁面 123
4.8.1 任務分析——“點9”切圖的應用 124
4.8.2 任務實施——輸出與標注戲曲App產品頁面 127
4.9 總結擴展 133
4.9.1 項目小結 133
4.9.2 思政導入 133
4.9.3 拓展案例——設計京劇App介面 133
4.10 課後測試 133
4.10.1 選擇題 133
4.10.2 判斷題 134
4.10.3 創新題 134

專案五 小程式UI設計
相關知識： 136
5.1 瞭解小程式UI設計 136
5.2 小程式UI設計尺寸和區域 137
5.2.1 小程式UI設計尺寸 137
5.2.2 小程式UI設計區域 137
5.3 啟動頁載入 140
5.4 小程式UI元件設計 141
5.4.1 巡覽列設計 141
5.4.2 標籤欄設計 143
5.5 小程式UI文字設計 144
5.5.1 字體與字型大小 144
5.5.2 字體顏色 145
5.6 任務一 設計瓷器小程式原型 145
5.6.1 任務分析——瓷器小程式UI設計分析 146
5.6.2 任務實施——設計瓷器小程式UI原型 147
5.7 任務二 設計瓷器小程式視覺效果 152
5.7.1 任務分析——瓷器小程式UI配色方案 152
5.7.2 任務實施——設計瓷器小程式UI與交互 152
5.8 任務三 標注與適配瓷器小程式頁面 158
5.8.1 任務分析——掌握切片命名規範 159
5.8.2 任務實施——標注與輸出瓷器小程式頁面 161
5.9 總結擴展 167
4.9.1 項目小結 167
4.9.2 思政導入 167
4.9.3 拓展案例——設計旅遊小程式介面 167
5.10 課後測試 167
5.10.1 選擇題 168
5.10.2 判斷題 168
4.10.3 創新題 168