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

第1章
1.1 UI設(shè)計(jì)基礎(chǔ) 2
1.1.1 什么是UI設(shè)計(jì) 2
1.1.2 UI設(shè)計(jì)的重要性 2
1.1.3 UI設(shè)計(jì)的特點(diǎn) 3
1.1.4 UI設(shè)計(jì)色彩基礎(chǔ) 3
1.2 UI動(dòng)效設(shè)計(jì) 5
1.2.1 認(rèn)識(shí)UI動(dòng)效 5
1.2.2 動(dòng)效在界面中的作用 6
1.2.3 UI動(dòng)效設(shè)計(jì)的必要性 8
1.2.4 UI動(dòng)效設(shè)計(jì)原則 8
1.3 UI動(dòng)效設(shè)計(jì)類(lèi)型 9
1.3.1 功能型動(dòng)效 9
1.3.2 展示型動(dòng)效 12
1.4 AIGC在UI動(dòng)效設(shè)計(jì)中的應(yīng)用 12
1.4.1 什么是AIGC 12
1.4.2 認(rèn)識(shí)Midjourney 13
1.4.3 Midjourney應(yīng)用方法 13
1.5 UI動(dòng)效設(shè)計(jì)工具 15
1.5.1 Photoshop 15
1.5.2 After Effects 15
1.5.3 Illustrator 16
新手答疑 17
第2章
After Effects應(yīng)用基礎(chǔ)
2.1 After Effects工作界面 19
2.1.1  “工具”面板 19
2.1.2  “項(xiàng)目”面板 19
2.1.3  “合成”面板 20
2.1.4  “時(shí)間軸”面板 20
2.1.5 其他面板 20
2.2 After Effects基礎(chǔ)操作 21
2.2.1 創(chuàng)建項(xiàng)目文件 21
2.2.2 創(chuàng)建合成 22
2.2.3 動(dòng)效的渲染與輸出 23
2.2.4 保存和關(guān)閉項(xiàng)目文件 25
動(dòng)手練 渲染動(dòng)效文件 26
2.3 素材的導(dǎo)入和管理 29
2.3.1 導(dǎo)入素材 29
2.3.2 管理素材 30
2.3.3 嵌套合成 32
動(dòng)手練 整理動(dòng)效文件素材 33
2.4 軟件間的協(xié)同工作 35
2.4.1 在A(yíng)fter Effects中應(yīng)用PSD文件 35
2.4.2 在A(yíng)fter Effects中應(yīng)用AI文件 36
實(shí)戰(zhàn)演練：創(chuàng)建清理加速動(dòng)效 37
新手答疑 46
第3章
圖層控制與動(dòng)畫(huà)
3.1 圖層的基本操作 48
3.1.1 創(chuàng)建圖層 48
3.1.2  管理圖層 49
3.1.3 圖層混合模式 51
3.2 圖層的基本屬性 54
3.2.1 五大基本屬性 55
3.2.2  編輯圖層屬性 57
動(dòng)手練 制作圖像切換動(dòng)效 58
3.3 關(guān)鍵幀動(dòng)畫(huà) 63
3.3.1 認(rèn)識(shí)時(shí)間軸 63
3.3.2  添加關(guān)鍵幀 65
3.3.3 關(guān)鍵幀的編輯與管理 65
3.3.4  關(guān)鍵幀插值 66
3.3.5 認(rèn)識(shí)圖表編輯器 67
動(dòng)手練 制作指針旋轉(zhuǎn)動(dòng)效 68
實(shí)戰(zhàn)演練：制作按鈕動(dòng)效 72
新手答疑 79
第4章
蒙版動(dòng)效制作
4.1 創(chuàng)建蒙版動(dòng)效 81
4.1.1 認(rèn)識(shí)蒙版 81
4.1.2 蒙版動(dòng)效原理 81
4.1.3 形狀工具組 81
4.1.4 鋼筆工具組 85
動(dòng)手練 亮度調(diào)整動(dòng)效 87
4.2 編輯蒙版屬性 90
4.2.1 蒙版路徑 91
4.2.2 蒙版羽化 92
4.2.3 蒙版不透明度 93
4.2.4 蒙版擴(kuò)展 94
4.2.5 蒙版混合模式 95
動(dòng)手練 界面切換動(dòng)效 96
實(shí)戰(zhàn)演練：音樂(lè)播放動(dòng)效 99
新手答疑 104
第5章
文本動(dòng)效制作
5.1 創(chuàng)建文本圖層 106
5.1.1 UI文本規(guī)范 106
5.1.2 創(chuàng)建文本 108
5.1.3 編輯文本 109
動(dòng)手練 描邊文本動(dòng)效 111
5.2 文本動(dòng)效制作 115
5.2.1 文本圖層的屬性 115
5.2.2 動(dòng)畫(huà)控制器 116
5.2.3 文本選擇器 118
5.2.4 文本動(dòng)畫(huà)預(yù)設(shè) 120
動(dòng)手練 文本跳動(dòng)動(dòng)效 121
實(shí)戰(zhàn)演練：閃屏頁(yè)文字出現(xiàn)動(dòng)效 127
新手答疑 133
第6章
界面動(dòng)效設(shè)計(jì)
6.1 常見(jiàn)動(dòng)效設(shè)計(jì) 135
6.1.1 界面加載等待動(dòng)效設(shè)計(jì) 135
6.1.2 界面刷新動(dòng)效設(shè)計(jì) 137
6.1.3 引導(dǎo)界面的動(dòng)效設(shè)計(jì) 138
6.1.4 導(dǎo)航菜單動(dòng)效設(shè)計(jì) 139
動(dòng)手練 進(jìn)度條加載等待動(dòng)效 140
6.2 界面切換動(dòng)效設(shè)計(jì) 146
6.2.1 常見(jiàn)的界面切換動(dòng)效 146
6.2.2 界面切換動(dòng)效設(shè)計(jì)規(guī)范 146
動(dòng)手練 日歷切換動(dòng)效 147
實(shí)戰(zhàn)演練：界面切換動(dòng)效 152
新手答疑 160
第7章
Photoshop動(dòng)效制作
7.1 制作動(dòng)效 162
7.1.1 認(rèn)識(shí)時(shí)間軸 162
7.1.2  制作幀動(dòng)畫(huà) 162
7.1.3 制作視頻時(shí)間軸動(dòng)畫(huà) 163
動(dòng)手練 制作進(jìn)度條動(dòng)效 164
7.2 導(dǎo)出動(dòng)效 170
7.2.1 導(dǎo)出視頻格式 170
7.2.2  導(dǎo)出GIF格式 170
動(dòng)手練 導(dǎo)出加載旋轉(zhuǎn)等待動(dòng)效 171
實(shí)戰(zhàn)演練：制作天氣預(yù)報(bào)動(dòng)效 175
新手答疑 180
第8章
綜合案例：制作悅·樂(lè)App登錄動(dòng)效
8.1 思路分析 182
8.2 制作過(guò)程 183
8.2.1 制作啟動(dòng)動(dòng)效 183
8.2.2 制作點(diǎn)按動(dòng)效 187
8.2.3 制作登錄動(dòng)效 190
附錄
附錄A  After Effects常用快捷鍵匯總 196
附錄B  Photoshop常用快捷鍵匯總 200