本書采用項目引入的方式，針對iOS系統(tǒng)、Android系統(tǒng)、HarmonyOS系統(tǒng)和微信小程序UI設計規(guī)范進行講解。全書采用任務驅動法帶動知識點的教學方式，將枯燥的知識點融入豐富有趣的案例制作中，全面解析移動端App UI設計的流程及設計技巧。書中案例均使用Adobe XD和PxCook主流UI設計軟件制作。本書共五個項目，項目一，移動UI設計基礎；項目二，iOS系統(tǒng)UI設計；項目三，Android系統(tǒng)UI設計；項目四，HarmonyOS系統(tǒng)UI設計；項目五，微信小程序UI設計。
本書適合UI設計愛好者、移動UI設計從業(yè)者閱讀，也適合作為各院校相關設計專業(yè)的參考教材。
1.十三五國規(guī)。
2.暢銷教材作者撰寫。
3.整體框架上做了變化，項目任務式寫法，符合高職使用習慣。
4.內(nèi)容設計上增加了國產(chǎn)鴻蒙系統(tǒng)及微信小程序UI設計。
5.配套豐富的教學資源及講解操作視頻。
張曉景 Adobe專家組成員。國家軟件協(xié)會會員， 國家863專業(yè)講師。資深設計師,Adobe專家委員會成員,Adobe網(wǎng)頁設計師認證講師,Adobe用戶界面設計師,國家信息產(chǎn)業(yè)部653工程講師,中國軟件行業(yè)協(xié)會專家委員,參與國家開放大學網(wǎng)頁UI設計與制作。
目 錄
項目一 移動UI設計基礎
相關知識： 3
1.1 熟悉移動UI設計 3
1.1.1 了解UI設計 3
1.1.2 什么是App 4
1.1.3 移動UI設計與平面UI設計的區(qū)別 5
1.2 移動UI設計平臺 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 頁面設計師 13
1.2.8 開發(fā)人員 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 創(chuàng)新題 29
項目二 iOS系統(tǒng)UI設計
相關知識： 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)界面設計尺寸 32
2.2.2 iOS系統(tǒng)組件 33
2.3 iOS系統(tǒng)文字設計規(guī)范 36
2.3.1 字體 36
2.3.2 字號 37
2.3.3 顏色和字重 37
2.4 iOS系統(tǒng)圖標設計規(guī)范 38
2.5 iOS系統(tǒng)圖片設計規(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)版式設計規(guī)范 44
任務實施： 44
2.8 任務一 設計制作App產(chǎn)品原型 44
2.8.1 任務分析——App UI的尺寸和布局 45
2.8.2 任務實施——設計制作“茶道”App原型 46
2.9 任務二 設計制作App產(chǎn)品交互流程 51
2.9.1 任務分析——交互流程設計的必要性 51
2.9.2 任務實施——設計制作“茶道”App頁面交互 52
2.10 任務三 設計制作App產(chǎn)品視覺效果 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 創(chuàng)新題 64
項目三Android系統(tǒng)UI設計
相關知識： 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)設計尺寸 68
3.3 Android系統(tǒng)組件設計尺寸 69
3.3.1 Android系統(tǒng)組件尺寸 69
3.3.2 Android系統(tǒng)元素間距 69
3.4 Android系統(tǒng)文字設計規(guī)范 70
3.4.1 字體 70
3.4.2 字號 71
3.5 Android系統(tǒng)圖標設計規(guī)范 71
3.5.1 圖標的尺寸 73
3.5.2 觸摸反饋 74
任務實施： 75
3.6 任務一 設計制作旗袍App產(chǎn)品原型與交互 75
3.6.1 任務分析——旗袍App產(chǎn)品思維導圖與布局分析 75
3.6.2 任務實施——設計制作旗袍App原型和交互 78
3.7 任務二 設計制作旗袍App圖標組與UI 84
3.7.1 任務分析——圖標設計的優(yōu)點與原則 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 創(chuàng)新題 99
項目四HarmonyOS系統(tǒng)UI設計
相關知識： 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)文字設計規(guī)范 105
4.3.1 字體 105
4.1.3 字號 106
4.1.4 對齊規(guī)則 106
4.4 HarmonyOS系統(tǒng)圖標設計規(guī)范 106
4.4.1 圖標圖形大小布局 107
4.4.2 圖標圖形的特征 108
4.5 HarmonyOS系統(tǒng)的間距 108
任務實施： 110
4.6 任務一 設計制作戲曲App原型 110
4.6.1 任務分析——項目頁面尺寸和布局類型 110
4.6.2 任務實施——設計制作戲曲App產(chǎn)品原型 111
4.7 任務二 設計制作戲曲App視覺效果 117
4.7.1 任務分析——交互設計需要考慮的內(nèi)容 117
4.7.2 任務實施——設計制作戲曲App視覺效果 118
4.8 任務三 輸出與適配戲曲App頁面 123
4.8.1 任務分析——“點9”切圖的應用 124
4.8.2 任務實施——輸出與標注戲曲App產(chǎn)品頁面 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 創(chuàng)新題 134
項目五 微信小程序UI設計
相關知識： 136
5.1 了解小程序UI設計 136
5.2 小程序UI設計尺寸和區(qū)域 137
5.2.1 小程序UI設計尺寸 137
5.2.2 小程序UI設計區(qū)域 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 任務分析——掌握切片命名規(guī)范 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 創(chuàng)新題 168
書單推薦
