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

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