移動UI設計與製作標準教程（全彩微課版）

目 錄

第1章

移動UI的設計基礎

1.1 認識移動UI設計 2

1.1.1 UI設計 2

1.1.2 移動UI設計 3

1.1.3 UI設計與移動UI設計的區別 4

1.2 移動UI的系統分類 6

1.2.1 HarmonyOS 6

1.2.2 Android 7

1.2.3 iOS 8

1.3 移動UI的設計原則 9

1.3.1 簡潔性原則 9

1.3.2 一致性原則 9

1.3.3 可訪問性原則 10

1.3.4 響應式原則 10

1.3.5 視覺層次原則 11

1.3.6 觸控友好原則 11

1.4 AIGC在移動UI中的應用 12

1.4.1 前期調研與競品分析 12

1.4.2 設計靈感與創意激發 13

1.4.3 設計素材與資源生成 14

1.5 移動UI的設計流程 16

1.5.1 用戶研究 16

1.5.2 任務分析 16

1.5.3 設計草圖 16

1.5.4  設計細化 17

1.5.5 用戶測試 17

1.5.6 反饋和優化 18

1.5.7  方案交付 18

1.5.8 方案實施 18

新手答疑 19

第2章

移動UI的色彩搭配

2.1 色彩的基礎知識 21

2.1.1 色彩的屬性 21

2.1.2 色彩的類別 21

2.2 色彩搭配 23

2.2.1 互補色搭配 23

2.2.2 對比色搭配 23

2.2.3 相鄰色搭配 24

2.2.4 類似色搭配 24

2.2.5 分裂互補色搭配 25

2.2.6 三角形搭配 25

2.2.7 四色搭配 26

2.2.8 正方形搭配 26

2.3 構建UI的顏色系統 27

2.3.1 明確風格 27

2.3.2 選擇主色 28

2.3.3 確定配色 29

2.3.4  定義顏色層次 29

2.4 常見的移動UI配色 32

2.4.1  社交類配色 32

2.4.2 電商類配色 34

2.4.3 美食類配色 36

2.4.4 教育類配色 37

2.5 案例實戰：構建美食類App顏色系統 39

新手答疑 41

第3章

移動UI的原型設計

3.1 移動UI的草圖繪制 43

3.1.1 UI草圖的定義 43

3.1.2  UI草圖的優缺點 43

3.1.3 常見UI草圖表現形式 44

3.2 移動UI的原型設計 45

3.2.1 原型設計的概念 45

3.2.2  原型的表現手法 46

3.2.3 原型設計的重要性 47

3.3 原型設計的常用軟件 47

3.4 案例實戰：繪制旅行類App原型圖 52

新手答疑 59

第4章

移動UI的構建

4.1 界面構建的元素 61

4.2 UI控件類型詳解 61

4.2.1 基礎控件 61

4.2.2 導航控件 62

4.2.3 輸入控件 63

4.2.4 顯示控件 65

4.2.5 反饋控件 66

4.3 按鈕的視覺設計 67

4.3.1 按鈕的類型 67

4.3.2 按鈕的組成 69

4.3.3 按鈕的層級分類 70

4.3.4 按鈕的邊角樣式 70

4.3.5 按鈕的顯示狀態 71

4.4 彈窗的視覺設計 71

4.4.1 彈窗的構成 71

4.4.2 模態彈窗 72

4.4.3 非模態彈窗 73

4.4.4 彈窗的設計原則 74

4.4.5 彈窗的觸發機制 75

4.5 案例實戰：製作權限獲取彈窗 76

新手答疑 81

第5章

HarmonyOS UI設計

5.1 認識HarmonyOS  83

5.1.1 常用單位 83

5.1.2 柵格系統 83

5.2 HarmonyOS界面構成 84

5.2.1 狀態欄 84

5.2.2 標題欄 85

5.2.3  工具欄 85

5.2.4 底部頁簽欄 85

5.2.5 按鈕 86

5.3 HarmonyOS圖標設計規範 87

5.3.1 應用圖標設計 87

5.3.2 系統圖標設計 89

5.4 HarmonyOS文字設計規範 91

5.4.1 字體規範 91

5.4.2 字體排版 92

5.5 HarmonyOS應用架構 94

5.5.1 界面框架與結構 94

5.5.2 特定頁面或視圖 95

5.5.3 編輯界面 96

5.6 案例實戰：設計繪畫類App界面 97

新手答疑 107

第6章

Android UI設計

6.1 Android的常用單位 109

6.2 Android界面尺寸規範 110

6.2.1 Android界面尺寸 110

6.2.2 Android的界面結構 110

6.3 Android圖標設計規範 112

6.3.1 Android產品圖標設計 112

6.3.2 Android系統圖標設計 113

6.4 Android文字設計規範 114

6.4.1 文字規範 114

6.4.2 文本顏色 115

6.5 Android圖片設計規範 116

6.5.1 圖片的使用場景 116

6.5.2 圖片格式 118

6.5.3 圖片遮罩 118

6.6 案例實戰：設計交通工具類系統

圖標 120

新手答疑 131

第7章

iOS UI設計

7.1 iOS的常用單位 133

7.2 iOS界面尺寸規範 133

7.2.1 iOS界面尺寸 134

7.2.2 iOS的界面結構 134

7.3 iOS圖標設計規範 135

7.3.1 iOS應用圖標設計 135

7.3.2  iOS系統圖標設計 137

7.4 iOS文字設計規範 137

7.4.1 系統字體規範 137

7.4.2  文字大小 138

7.4.3 文字顏色 139

7.5 iOS界面設計規範 140

7.5.1 全局邊距 140

7.5.2 卡片間距 140

7.5.3 內容佈局 140

7.5.4 圖片比例 142

7.6 案例實戰：設計美食類應用圖標 142

新手答疑 151

第8章

交互動效設計

8.1 關於交互設計 153

8.2 移動UI交互類型 153

8.2.1 按界面元素分類 153

8.2.2 按交互模式分類 155

8.2.3 按設計原則與效果分類 157

8.3 關於UI動效 160

8.4 UI動效的屬性 161

8.4.1 時間 161

8.4.2 緩動與速度 161

8.4.3 視覺 162

8.4.4 交互 163

8.4.5 過渡效果 163

8.5 UI動效的類型 164

8.5.1 按功能分類 164

8.5.2 按運動方式分類 165

8.5.3 按觸發方式分類 165

8.5.4 按持續時間分類 166

8.6 常用的動效設計軟件 167

8.7 案例實戰：製作下載進度條 169

新手答疑 176

第9章

標註與切圖

9.1 界面標註 178

9.1.1 界面標註的作用 178

9.1.2 界面標註的內容 178

9.1.3 界面標註的規範 179

9.2 界面標註的常用工具 180

9.3 界面的切圖 182

9.3.1 界面切圖的原則 182

9.3.2 界面切圖的要點 183

9.3.3 界面切圖的命名規範 185

9.3.4 常見的切圖命名 186

9.4 界面切圖的常用工具 187

9.5 案例實戰：首頁界面切圖 189

新手答疑 192