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

第1章
1.1 UI設計基礎 2
1.1.1 什么是UI設計 2
1.1.2 UI設計的重要性 2
1.1.3 UI設計的特點 3
1.1.4 UI設計色彩基礎 3
1.2 UI動效設計 5
1.2.1 認識UI動效 5
1.2.2 動效在界面中的作用 6
1.2.3 UI動效設計的必要性 8
1.2.4 UI動效設計原則 8
1.3 UI動效設計類型 9
1.3.1 功能型動效 9
1.3.2 展示型動效 12
1.4 AIGC在UI動效設計中的應用 12
1.4.1 什么是AIGC 12
1.4.2 認識Midjourney 13
1.4.3 Midjourney應用方法 13
1.5 UI動效設計工具 15
1.5.1 Photoshop 15
1.5.2 After Effects 15
1.5.3 Illustrator 16
新手答疑 17
第2章
After Effects應用基礎
2.1 After Effects工作界面 19
2.1.1  “工具”面板 19
2.1.2  “項目”面板 19
2.1.3  “合成”面板 20
2.1.4  “時間軸”面板 20
2.1.5 其他面板 20
2.2 After Effects基礎操作 21
2.2.1 創(chuàng)建項目文件 21
2.2.2 創(chuàng)建合成 22
2.2.3 動效的渲染與輸出 23
2.2.4 保存和關閉項目文件 25
動手練 渲染動效文件 26
2.3 素材的導入和管理 29
2.3.1 導入素材 29
2.3.2 管理素材 30
2.3.3 嵌套合成 32
動手練 整理動效文件素材 33
2.4 軟件間的協(xié)同工作 35
2.4.1 在After Effects中應用PSD文件 35
2.4.2 在After Effects中應用AI文件 36
實戰(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 關鍵幀動畫 63
3.3.1 認識時間軸 63
3.3.2  添加關鍵幀 65
3.3.3 關鍵幀的編輯與管理 65
3.3.4  關鍵幀插值 66
3.3.5 認識圖表編輯器 67
動手練 制作指針旋轉(zhuǎn)動效 68
實戰(zhàn)演練：制作按鈕動效 72
新手答疑 79
第4章
蒙版動效制作
4.1 創(chuàng)建蒙版動效 81
4.1.1 認識蒙版 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 蒙版擴展 94
4.2.5 蒙版混合模式 95
動手練 界面切換動效 96
實戰(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 文本動畫預設 120
動手練 文本跳動動效 121
實戰(zhàn)演練：閃屏頁文字出現(xiàn)動效 127
新手答疑 133
第6章
界面動效設計
6.1 常見動效設計 135
6.1.1 界面加載等待動效設計 135
6.1.2 界面刷新動效設計 137
6.1.3 引導界面的動效設計 138
6.1.4 導航菜單動效設計 139
動手練 進度條加載等待動效 140
6.2 界面切換動效設計 146
6.2.1 常見的界面切換動效 146
6.2.2 界面切換動效設計規(guī)范 146
動手練 日歷切換動效 147
實戰(zhàn)演練：界面切換動效 152
新手答疑 160
第7章
Photoshop動效制作
7.1 制作動效 162
7.1.1 認識時間軸 162
7.1.2  制作幀動畫 162
7.1.3 制作視頻時間軸動畫 163
動手練 制作進度條動效 164
7.2 導出動效 170
7.2.1 導出視頻格式 170
7.2.2  導出GIF格式 170
動手練 導出加載旋轉(zhuǎn)等待動效 171
實戰(zhàn)演練：制作天氣預報動效 175
新手答疑 180
第8章
綜合案例：制作悅·樂App登錄動效
8.1 思路分析 182
8.2 制作過程 183
8.2.1 制作啟動動效 183
8.2.2 制作點按動效 187
8.2.3 制作登錄動效 190
附錄
附錄A  After Effects常用快捷鍵匯總 196
附錄B  Photoshop常用快捷鍵匯總 200