相關主題
商品描述
本書采用項目導向、任務驅動的模式編寫，突破了傳統的教學模式，在充分汲取本課程教學改革成果及作者多年教學與實踐經驗的基礎上，以案例教學和項目制作流程為課程導向，以移動 UI 設計的具體應用為學習目標，系統地介紹了移動 UI 設計的基本知識和設計技巧。 本書內容由淺入深、通俗易懂、案例豐富、圖文並茂、直觀生動、可操作性強，較好地做到了理論與實踐的統一、內容與形式的一致。本書內容包括 7 個項目，分別為 App UI 設計概述、色彩在移動 UI 中的應用、移動 UI 中的常用元素設計、UI 元素的組合應用、電商購物類 App UI 設計、《垃圾分類小能手》遊戲 UI 設計、《病毒消消樂》遊戲 UI 設計。在每個項目中，以典型的工作任務或實際產品開發為載體，介紹並應用移動 UI 設計的知識點，使學生掌握所需的基本理論知識和技能。 本書可以作為本科院校、高職高專院校中移動 UI 設計相關課程的教材，也可以作為廣大 UI 設計人員的參考用書。
目錄大綱
項目 1 App UI 設計概述 ·····················································································.1
1.1 UI 設計的基本概念及分類··············································································1
1.1.1 UI 設計的基本概念···························································································1
1.1.2 UI 設計的分類·································································································1
1.2 App UI 設計的要素及布局方式········································································3
1.2.1 App UI 設計的要素···························································································3
1.2.2 App UI 設計的布局方式··················································································.11
1.3 App UI 設計的流程····················································································.13
1.4 App UI 設計的原則····················································································.14
1.5 App UI 設計的尺寸標準··············································································.15
1.5.1 設置尺寸標準和規範 ·····················································································.15
1.5.2 平臺 ··········································································································.15
1.5.3 單位尺寸 ····································································································.15
1.5.4 iOS 平臺的尺寸標準 ······················································································.16
1.5.5 Android 平臺的尺寸標準·················································································.17
1.5.6 HarmonyOS 平臺的尺寸標準············································································.18
1.6 常用的 UI 設計工具···················································································.20
1.6.1 Adobe Photoshop ···························································································.20
1.6.2 Adobe Illustrator ····························································································.21
1.6.3 數位板 ·······································································································.21
1.6.4 數碼相機 ····································································································.22
1.7 智能手機操作系統 ····················································································.23
1.7.1 HarmonyOS ·································································································.23
1.7.2 iOS············································································································.26
1.7.3 Android ······································································································.27
習題 ·············································································································.29
項目 2 色彩在移動 UI 中的應用··········································································.30
2.1 色彩的基礎知識 ·······················································································.30
2.2 色彩的組成 ·····························································································.31
2.3 色彩的對比 ·····························································································.31
2.4 色彩的調和 ·····························································································.34
2.5 色調的變化 ·····························································································.36
2.6 移動 UI 的色彩搭配原則·············································································.37
2.6.1 UI 設計的三色搭配原則··················································································.37
2.6.2 色彩搭配的註意事項 ·····················································································.37
2.6.3 UI 設計的配色技巧························································································.37
習題 ·············································································································.38
項目 3 移動 UI 中的常用元素設計·······································································.39
3.1 圖標概述 ································································································.39
3.1.1 圖標設計流程 ······························································································.39
3.1.2 圖標設計原則 ······························································································.40
3.2 任務 1 創意線性圖標的設計 ······································································.42
3.2.1 任務描述 ····································································································.43
3.2.2 思路剖析 ····································································································.43
3.2.3 任務實現 ····································································································.43
3.3 任務 2 設計扁平化風格的圖標 ···································································.44
3.3.1 任務描述 ····································································································.45
3.3.2 思路剖析 ····································································································.45
3.3.3 任務實現 ····································································································.45
3.4 任務 3 設計 MBE 風格的圖標 ····································································.46
3.4.1 任務描述 ····································································································.47
3.4.2 思路剖析 ····································································································.47
3.4.3 任務實現 ····································································································.48
3.5 任務 4 設計線性漸變圖標 ·········································································.50
3.5.1 任務描述 ····································································································.50
3.5.2 思路剖析 ····································································································.50
3.5.3 任務實現 ····································································································.51
習題 ·············································································································.57
項目 4 UI 元素的組合應用 ················································································.58
4.1 任務 1 首頁設計 ·····················································································.58
4.1.1 任務描述 ····································································································.58
4.1.2 思路剖析 ····································································································.58
4.1.3 任務實現 ····································································································.58
4.2 任務 2 商品分類頁設計 ············································································.62
4.2.1 任務描述 ····································································································.62
4.2.2 思路剖析 ····································································································.62
4.2.3 任務實現 ····································································································.62
4.3 任務 3 詳情頁設計 ··················································································.70
4.3.1 任務描述 ····································································································.70
4.3.2 思路剖析 ····································································································.70
4.3.3 任務實現 ····································································································.70
4.4 任務 4 個人中心頁設計 ············································································.75
4.4.1 任務描述 ····································································································.75
4.4.2 思路剖析 ····································································································.75
4.4.3 任務實現 ····································································································.75
習題 ·············································································································.81
項目 5 電商購物類 App UI 設計 ·········································································.82
5.1 產品定位 ································································································.82
5.2 產品優勢 ································································································.82
5.3 繪制草圖 ································································································.83
5.3.1 繪制《美食美刻》App 的草圖··········································································.83
5.3.2 Axure RP·····································································································.84
5.4 繪制原型圖 ·····························································································.87
5.4.1 原型圖的作用 ······························································································.88
5.4.2 原型圖的分類 ······························································································.88
5.4.3 使用線框圖制作《美食美刻》App 的原型圖························································.88
5.5 設計風格、顏色定位及文字設置···································································.90
5.5.1 設計風格 ····································································································.90
5.5.2 顏色定位 ····································································································.90
5.5.3 文字設置 ····································································································.90
5.6 啟動圖標 ································································································.91
5.6.1 啟動圖標的詳細分析 ·····················································································.91
5.6.2 啟動圖標的參數 ···························································································.91
5.6.3 啟動圖標的制作過程 ·····················································································.91
5.7 加載頁 ···································································································.94
5.7.1 頁面詳細分析 ······························································································.94
5.7.2 頁面參數 ····································································································.95
5.7.3 頁面制作過程 ······························································································.95
5.8 引導頁 ···································································································.97
5.8.1 頁面詳細分析 ······························································································.97
5.8.2 頁面參數 ····································································································.97
5.8.3 頁面制作過程 ······························································································.98
5.9 首頁 ······································································································.99
5.9.1 頁面詳細分析 ······························································································.99
5.9.2 頁面參數 ··································································································.100
5.9.3 頁面制作過程 ····························································································.100
5.10 “商城”頁 ·····························································································109
5.10.1 頁面詳細分析···························································································.109
5.10.2 頁面參數·································································································.109
5.10.3 頁面制作過程···························································································.110
5.11 “美食分享”頁························································································126
5.11.1 頁面詳細分析 ···························································································.126
5.11.2 頁面參數 ·································································································.126
5.11.3 頁面制作過程 ···························································································.127
5.12 “訂單”頁 ·····························································································150
5.12.1 頁面詳細分析···························································································.150
5.12.2 頁面參數·································································································.151
5.12.3 頁面制作過程···························································································.151
5.13 “我的”頁 ·····························································································152
5.13.1 頁面詳細分析···························································································.152
5.13.2 頁面參數·································································································.152
5.13.3 頁面制作過程···························································································.153
5.14 案例小結·······························································································154
習題 ·············································································································154
項目 6 《垃圾分類小能手》遊戲 UI 設計······························································157
6.1 產品定位 ································································································157
6.2 繪制草圖 ································································································157
6.2.1 啟動圖標草圖 ····························································································.157
6.2.2 加載頁草圖 ·······························································································.158
6.2.3 註冊引導頁草圖 ·························································································.158
6.2.4 首頁草圖 ··································································································.158
6.2.5 幫助頁面草圖 ····························································································.159
6.2.6 遊戲頁面草圖 ····························································································.159
6.2.7 通關頁面草圖 ····························································································.160
6.3 啟動圖標 ································································································161
6.4 加載頁 ···································································································164
6.5 註冊引導頁 ·····························································································166
6.6 首頁 ······································································································170
6.7 幫助頁面 ································································································173
6.8 遊戲頁面 ································································································176
6.9 通關頁面 ································································································179
6.10 案例小結·······························································································182
習題 ·············································································································182
項目 7 《病毒消消樂》遊戲 UI 設計····································································183
7.1 產品定位 ································································································183
7.2 產品優勢 ································································································183
7.3 繪制草圖 ································································································183
7.4 風格定位、色彩定位 ·················································································185
7.4.1 風格定位 ··································································································.185
7.4.2 色彩定位 ··································································································.185
7.5 啟動圖標 ································································································186
7.5.1 背景部分 ··································································································.187
7.5.2 點綴部分 ··································································································.188
7.5.3 主體部分 ··································································································.189
7.6 引導頁 ···································································································191
7.6.1 賽道 ········································································································.192
7.6.2 框架 ········································································································.195
7.6.3 引導圖標 ··································································································.197
7.6.4 其他小圖標 ·······························································································.198
7.7 主頁 ······································································································199
7.7.1 主頁點綴 ··································································································.200
7.7.2 主頁小圖標 ·······························································································.201
7.8 加載頁 ···································································································203
7.8.1 加載圖標 ··································································································.204
7.8.2 針管圖標 ··································································································.205
7.9 子頁面 1 設計 ··························································································206
7.9.1 歌曲介紹欄 ·······························································································.207
7.9.2 頂部小圖標 ·······························································································.209
7.10 子頁面 2 設計·························································································210
7.10.1 “通關成功”圖標 ······················································································.211
7.10.2 針劑欄····································································································.212
7.11 子頁面 3 設計 ·························································································213
7.12 註意事項·······························································································217
習題 ·············································································································217
