移動 UI 界面設計, 2/e (微課版)
張曉景，李曉斌
買這商品的人也買了...
-
傲霸 UWP Apps Windows 10 -- 威力運用 XAML & C# 完全開發勝典$620$558 -
$505單片機 C語言程序設計實訓 100例 — 基於 Arduino + Proteus 模擬 -
ASP.NET Core 與 RESTful API 開發實戰$474$450 -
開關電源維修從入門到精通 第3版$414$393 -
$301新印象——中文版Sketch圖標與UI界面設計實例教程 -
看完這本就會懂！帶你無痛提升 JavaScript 面試力：精選 55道前端工程師的核心問題 × 求職加分模擬試題解析$680$530 -
$337鴻蒙硬件系統開發——智能控制與物聯網應用案例設計（視頻講解） -
Flutter 跨平臺開發實戰$414$393
商品描述
本書採用項目引入的方式，針對iOS系統、Android系統、HarmonyOS系統和微信小程序UI設計規範進行講解。全書採用任務驅動法帶動知識點的教學方式，將枯燥的知識點融入豐富有趣的案例製作中，系統解析移動端App UI設計的流程及設計技巧。書中案例均使用Adobe XD和PxCook主流UI設計軟件製作。本書共五個項目，項目一，移動UI設計基礎；項目二，iOS系統UI設計；項目三，Android系統UI設計；項目四，HarmonyOS系統UI設計；項目五，微信小程序UI設計。
本書適合UI設計愛好者、移動UI設計從業者閱讀，也適合作為各院校相關設計專業的參考教材。
作者簡介
张晓景 Adobe专家组成员。国家软件协会会员， 国家863专业讲师。资深设计师,Adobe专家委员会成员,Adobe网页设计师认证讲师,Adobe用户界面设计师,国家信息产业部653工程讲师,中国软件行业协会专家委员,参与国家开放大学网页UI设计与制作。
目錄大綱
目 錄
項目一 移動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
