UI界面設(shè)計(jì)與制作標(biāo)準(zhǔn)教程（全彩微課版）

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