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

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