移動UI設計項目化實戰教程

項目1 App UI 設計概述 ...................................................................................................... 1
1.1 UI 設計的基本概念及分類 ................................................................................................. 1
1.1.1 UI 設計的基本概念 ......................................................................................................................... 1
1.1.2 UI 設計的分類 ................................................................................................................................. 1
1.2 App UI 設計的要素及佈局方式 ......................................................................................... 4
1.2.1 App UI 設計的要素 ......................................................................................................................... 4
1.2.2 App UI 設計的佈局方式 ............................................................................................................... 13
1.3 App UI 設計的流程 ........................................................................................................... 15
1.4 App UI 設計的原則 ........................................................................................................... 16
1.5 App UI 設計的尺寸標準 ................................................................................................... 17
1.5.1 設計尺寸標準和規範 .................................................................................................................... 17
1.5.2 平臺 ................................................................................................................................................ 17
1.5.3 單位尺寸 ........................................................................................................................................ 17
1.5.4 iOS 平臺的尺寸標準 ..................................................................................................................... 18
1.5.5 Android 平臺的尺寸標準 .............................................................................................................. 20
1.5.6 HarmonyOS 平臺的尺寸標準 ....................................................................................................... 20
1.6 常用的UI 設計工具 .......................................................................................................... 22
1.6.1 Adobe Photoshop ............................................................................................................................ 22
1.6.2 Adobe Illustrator ............................................................................................................................. 24
1.6.3 數碼板 ............................................................................................................................................ 24
1.6.4 數碼相機 ........................................................................................................................................ 25
1.7 智能手機操作系統介紹 .................................................................................................... 26
1.7.1 HarmonyOS .................................................................................................................................... 26
1.7.2 iOS .................................................................................................................................................. 29
1.7.3 Android ........................................................................................................................................... 31
習 題 ......................................................................................................................................... 33
項目2 色彩在移動設備UI 中的應用.................................................................................. 34
2.1 色彩的基本知識 ................................................................................................................ 34
2.2 色彩的組成 ........................................................................................................................ 35
2.3 色彩的對比 ........................................................................................................................ 36
2.4 色彩的調和 ........................................................................................................................ 39
2.5 色調的變化 ........................................................................................................................ 42
2.6 移動端UI 色彩搭配的原則 .............................................................................................. 42
2.6.1 UI 三色搭配原則 ........................................................................................................................... 42
2.6.2 色彩搭配的註意事項 .................................................................................................................... 43
2.6.3 UI 設計的配色技巧 ....................................................................................................................... 43
習 題 ......................................................................................................................................... 44
項目3 移動UI 中的常用元素設計 ..................................................................................... 45
3.1 圖標概述 ............................................................................................................................ 45
3.1.1 圖標設計流程 ................................................................................................................................ 46
3.1.2 圖標設計原則 ................................................................................................................................ 46
3.2 任務1 創意線性圖標的設計 ........................................................................................... 49
3.2.1 任務描述 ........................................................................................................................................ 49
3.2.2 思路剖析 ........................................................................................................................................ 50
3.2.3 任務實現 ........................................................................................................................................ 50
3.3 任務2 扁平化風格圖標的設計 ....................................................................................... 51
3.3.1 任務描述 ........................................................................................................................................ 52
3.3.2 思路剖析 ........................................................................................................................................ 52
3.3.3 任務實現 ........................................................................................................................................ 52
3.4 任務3 MBE 風格圖標的設計 .......................................................................................... 53
3.4.1 任務描述 ........................................................................................................................................ 54
3.4.2 思路剖析 ........................................................................................................................................ 54
3.4.3 任務實現 ........................................................................................................................................ 55
3.5 任務4 線性漸變圖標設計 ............................................................................................... 58
3.5.1 任務描述 ........................................................................................................................................ 58
3.5.2 思路剖析 ........................................................................................................................................ 58
3.5.3 任務實現 ........................................................................................................................................ 59
習 題 ......................................................................................................................................... 66
項目4 UI 元素的組合應用 ................................................................................................. 68
4.1 任務1 首頁設計 ............................................................................................................... 68
4.1.1 任務描述 ........................................................................................................................................ 68
4.1.2 思路剖析 ........................................................................................................................................ 68
4.1.3 任務實現 ........................................................................................................................................ 69
4.2 任務2 商品分類頁面設計 ............................................................................................... 73
4.2.1 任務描述 ........................................................................................................................................ 73
4.2.2 思路剖析 ........................................................................................................................................ 73
4.2.3 任務實現 ........................................................................................................................................ 74
4.3 任務3 詳情頁設計 ............................................................................................................ 82
4.3.1 任務描述 ........................................................................................................................................ 82
4.3.2 思路剖析 ........................................................................................................................................ 82
4.3.3 任務實現 ........................................................................................................................................ 82
4.4 任務4 個人中心頁面設計 ............................................................................................... 87
4.4.1 任務描述 ........................................................................................................................................ 87
4.4.2 思路剖析 ........................................................................................................................................ 88
4.4.3 任務實現 ........................................................................................................................................ 88
習 題 ......................................................................................................................................... 97
項目5 電商購物類App UI 設計 ........................................................................................ 99
5.1 產品定位 ............................................................................................................................ 99
5.2 產品優勢 ............................................................................................................................ 99
5.3 繪制草圖 .......................................................................................................................... 100
5.3.1 繪制《美食美刻》App 的草圖 ................................................................................................... 100
5.3.2 Axure RP ...................................................................................................................................... 100
5.4 繪制原型圖 ...................................................................................................................... 104
5.4.1 原型圖的作用 .............................................................................................................................. 105
5.4.2 原型圖的種類 .............................................................................................................................. 105
5.4.3 使用線框圖製作《美食美刻》App 的原型圖 ........................................................................... 105
5.5 設計風格、顏色定位及字體設置 .................................................................................. 108
5.5.1 設計風格 ...................................................................................................................................... 108
5.5.2 顏色定位 ...................................................................................................................................... 108
5.5.3 文字設置 ...................................................................................................................................... 108
5.6 啟動圖標 .......................................................................................................................... 109
5.6.1 啟動圖標的詳細分析 .................................................................................................................. 109
5.6.2 啟動圖標的參數 .......................................................................................................................... 109
5.6.3 啟動圖標的製作過程 .................................................................................................................. 110
5.7 加載頁 .............................................................................................................................. 113
5.7.1 頁面詳細分析 .............................................................................................................................. 113
5.7.2 頁面參數 ...................................................................................................................................... 114
5.7.3 頁面製作過程 .............................................................................................................................. 114
5.8 引導頁 .............................................................................................................................. 116
5.8.1 頁面詳細分析 .............................................................................................................................. 116
5.8.2 頁面參數 ...................................................................................................................................... 116
5.8.3 頁面製作過程 .............................................................................................................................. 117
5.9 首頁 .................................................................................................................................. 118
5.9.1 頁面詳細分析 .............................................................................................................................. 118
5.9.2 頁面參數 ...................................................................................................................................... 118
5.9.3 頁面製作過程 .............................................................................................................................. 119
5.10 “商城”頁 ........................................................................................................................ 128
5.10.1 頁面詳細分析 ............................................................................................................................ 129
5.10.2 頁面參數 .................................................................................................................................... 129
5.10.3 頁面製作過程 ............................................................................................................................ 130
5.11 “美食分享”頁 ................................................................................................................. 147
5.11.1 頁面詳細分析 ............................................................................................................................ 147
5.11.2 頁面參數 .................................................................................................................................... 148
5.11.3 頁面製作過程 ............................................................................................................................ 149
5.12 “訂單”頁 ........................................................................................................................... 173
5.12.1 頁面詳細分析 ............................................................................................................................ 173
5.12.2 頁面參數 .................................................................................................................................... 174
5.12.3 頁面製作過程 ............................................................................................................................ 174
5.13 “我的”頁 ........................................................................................................................... 175
5.13.1 頁面詳細分析 ............................................................................................................................ 175
5.13.2 頁面參數 .................................................................................................................................... 176
5.13.3 頁面製作過程 ............................................................................................................................ 177
5.14 案例小結 ........................................................................................................................ 178
習 題 ....................................................................................................................................... 178
項目6 《垃圾分類小能手》遊戲UI 設計 ........................................................................ 181
6.1 遊戲定位 .......................................................................................................................... 181
6.2 繪制草圖 .......................................................................................................................... 181
6.2.1 啟動圖標草圖 .............................................................................................................................. 181
6.2.2 加載頁草圖 .................................................................................................................................. 182
6.2.3 註冊引導頁草圖 .......................................................................................................................... 182
6.2.4 首頁草圖 ...................................................................................................................................... 182
6.2.5 幫助頁面草圖 .............................................................................................................................. 183
6.2.6 遊戲頁面草圖 .............................................................................................................................. 183
6.2.7 通關頁面草圖 .............................................................................................................................. 184
6.3 啟動圖標 .......................................................................................................................... 185
6.4 加載頁 .............................................................................................................................. 188
6.5 註冊引導頁 ...................................................................................................................... 190
6.6 首頁 .................................................................................................................................. 194
6.7 幫助頁面 .......................................................................................................................... 197
6.8 遊戲頁面 .......................................................................................................................... 200
6.9 通關頁面 .......................................................................................................................... 203
6.10 案例小結 ........................................................................................................................ 206
習 題 ....................................................................................................................................... 206
項目7 《病毒消消樂》遊戲UI 設計 ................................................................................ 207
7.1 產品定位 .......................................................................................................................... 207
7.2 產品優勢 .......................................................................................................................... 207
7.3 繪制草圖 .......................................................................................................................... 208
7.4 風格定位、色彩定位 ...................................................................................................... 209
7.4.1 風格定位 ...................................................................................................................................... 209
7.4.2 色彩定位 ...................................................................................................................................... 209
7.5 啟動圖標 .......................................................................................................................... 211
7.5.1 背景部分 ...................................................................................................................................... 212
7.5.2 點綴部分 ...................................................................................................................................... 213
7.5.3 主體部分 ...................................................................................................................................... 214
7.6 引導頁 .............................................................................................................................. 216
7.6.1 賽道 .............................................................................................................................................. 217
7.6.2 框架 .............................................................................................................................................. 219
7.6.3 引導圖標 ...................................................................................................................................... 222
7.6.4 其他小圖標 .................................................................................................................................. 224
7.7 主頁 .................................................................................................................................. 225
7.7.1 主頁點綴 ...................................................................................................................................... 226
7.7.2 主頁小圖標 .................................................................................................................................. 227
7.8 加載頁 .............................................................................................................................. 229
7.8.1 加載圖標 ...................................................................................................................................... 230
7.8.2 針管圖標 ...................................................................................................................................... 232
7.9 子頁面1 設計 .................................................................................................................. 233
7.9.1 歌曲介紹欄 .................................................................................................................................. 234
7.9.2 頂部小圖標 .................................................................................................................................. 236
7.10 子頁面2 設計 ................................................................................................................ 237
7.10.1 主體文案 .................................................................................................................................... 238
7.11 子頁面3 設計 ................................................................................................................ 241
7.11.1 內部符號圖標 ............................................................................................................................ 242
7.12 案例小結 ........................................................................................................................ 244
習 題 ....................................................................................................................................... 244