UI界面設計與制作標準教程（全彩微課版）

第1章
UI設計基礎知識
1.1 認識UI設計 2
1.2 UI設計方向 2
1.2.1 用戶研究 2
1.2.2 交互設計 3
1.2.3 界面設計 3
1.3 UI設計規(guī)范 4
1.3.1 一致性原則 4
1.3.2 準確性原則 5
1.3.3 可讀性原則 6
1.3.4 布局合理化原則 6
1.3.5 操作合理性 7
1.3.6 系統(tǒng)響應時間 7
1.4 UI設計的項目流程 8
1.4.1 需求分析 8
1.4.2 設計研究 9
1.4.3 原型設計 9
1.4.4 界面設計 10
1.4.5 用戶測試 11
1.4.6 方案優(yōu)化 12
1.4.7 交付結(jié)果 13
1.5 AIGC在UI中的應用 13
1.5.1 AIGC的基本功能 13
1.5.2 AIGC在UI中的應用方式 14
1.5.3 常用的AIGC工具 17
1.6 UI設計元素應用規(guī)范 18
1.6.1 文字應用解析 18
1.6.2 圖片應用解析 23
1.6.3 色彩應用解析 25
新手答疑 29
第2章
界面設計在線工具——MasterGo 
2.1 認識MasterGo 31
2.1.1 操作界面 31
2.1.2 標尺與參考線 32
2.1.3 基礎工具 34
2.1.4 協(xié)同評論 37
2.1.5 切圖和導出 39
2.2 組件與樣式 41
2.2.1 創(chuàng)建組件 41
2.2.2 應用預設組件 42
2.2.3 創(chuàng)建樣式 42
2.3 原型交互 44
2.3.1 交互 45
2.3.2 溢出行為 47
案例實戰(zhàn)：原型交互效果制作 48
新手答疑 56
第3章
界面圖標設計
3.1 認識圖標 58
3.1.1 圖標的類型 58
3.1.2  圖標的設計風格 60
3.1.3 輔助繪制網(wǎng)格 62
3.2 iOS圖標設計規(guī)范 64
3.2.1 iOS應用圖標設計 64
3.2.2  iOS系統(tǒng)圖標設計 65
3.3 Android圖標設計規(guī)范 66
3.3.1 Android應用圖標設計 66
3.3.2 Android系統(tǒng)圖標設計 67
3.4 HarmonyOS圖標設計規(guī)范 68
3.4.1 HarmonyOS應用圖標設計 68
3.4.2 HarmonyOS系統(tǒng)圖標設計 70
案例實戰(zhàn)：制作天氣類功能圖標 72
新手答疑 88
第4章
基礎控件設計
4.1 認識控件 90
4.2 按鈕控件 90
4.2.1 按鈕控件的類型 90
4.2.2 按鈕控件設計規(guī)范 93
4.3 選擇控件 95
4.3.1 選擇控件的類型 96
4.3.2 選擇控件設計規(guī)范 97
4.4 分段控件 98
4.4.1 分段控件的類型 98
4.4.2 分段控件設計規(guī)范 99
4.5 信息反饋控件 99
4.5.1 反饋控件的類型 99
4.5.2 反饋控件設計規(guī)范 100
4.6 文本框控件 102
4.6.1 文本框控件的類型 102
4.6.2 文本框控件設計規(guī)范 103
案例實戰(zhàn)：制作美食App登錄頁控件 103
新手答疑 106
第5章
常用組件設計
5.1 認識組件 108
5.2 基礎組件 108
5.2.1 基礎組件解析 108
5.2.2 基礎組件設計規(guī)范 109
5.3 導航類組件 111
5.3.1 導航類組件解析 111
5.3.2 導航類組件設計規(guī)范 113
5.4 輸入類組件 116
5.4.1 輸入類組件解析 116
5.4.2 輸入類組件設計規(guī)范 118
5.5 展示類組件 119
5.5.1 展示類組件解析 119
5.5.2 展示類組件設計規(guī)范 121
5.6 反饋類組件 122
5.6.1 反饋類組件解析 122
5.6.2 反饋類組件設計規(guī)范 124
案例實戰(zhàn)：制作App系統(tǒng)更新對話框 126
新手答疑 133
第6章
移動端App界面設計
6.1 App常用界面類型 135
6.1.1 閃屏頁 135
6.1.2 引導頁 136
6.1.3 注冊登錄頁 137
6.1.4 空白頁 137
6.1.5 首頁 138
6.1.6 個人中心頁 138
6.1.7 其他界面 139
6.2 App原型設計 140
6.2.1 草圖的繪制 140
6.2.2 原型的設計 141
6.3 App設計規(guī)范 142
6.3.1 iOS設計規(guī)范 142
6.3.2 Android設計規(guī)范 144
6.3.3 HarmonyOS設計規(guī)范 146
案例實戰(zhàn)：制作美食App首頁界面 147
新手答疑 158
第7章
PC端界面設計
7.1 PC端界面設計簡介 160
7.2 PC源生界面 161
7.3 客戶端界面 162
7.3.1 客戶端界面的類型 162
7.3.2  客戶端界面設計規(guī)范 167
7.4 網(wǎng)頁端界面 169
7.4.1 網(wǎng)頁端界面類型 169
7.4.2  網(wǎng)頁端界面設計規(guī)范 173
案例實戰(zhàn)：制作聊天類客戶端首頁 175
新手答疑 184
第8章
小程序界面設計
8.1 關于微信小程序 186
8.1.1 移動端微信小程序 186
8.1.2 PC端微信小程序 186
8.1.3 微信小程序的創(chuàng)建 187
8.2 微信小程序界面設計規(guī)范 188
8.2.1 微信小程序界面尺寸 188
8.2.2 微信小程序視覺設計 189
8.2.3 微信小程序文字設計 193
案例實戰(zhàn)：制作旅行類小程序界面 194
新手答疑 202
第9章
界面的標注、輸出與動效制作
9.1 界面標注 204
9.1.1 界面標注的作用 204
9.1.2 界面標注的內(nèi)容 204
9.1.3 界面標注的規(guī)范 205
9.1.4 界面標注的常用工具 206
9.2 界面的切圖 207
9.2.1 界面切圖的原則 207
9.2.2 界面切圖的要點 208
9.2.3 界面切圖的命名規(guī)范 209
9.2.4 界面切圖的常用工具 211
9.3 界面的動效制作 212
9.3.1 界面動效的屬性 212
9.3.2 界面動效的作用 212
9.3.3 界面動效的類型 213
9.3.4 動效制作的常用工具 217
案例實戰(zhàn)：標注App登錄界面 218
新手答疑 224