After Effects移動UI交互動效設計與制作（全彩慕課版）（第2版）

陳力，天津電子信息職業技術學院副教授，藝術設計學院副院長。編寫出版

After Effects移動UI交互動效設計與制作（全彩慕課版）十四五國規教材。

目　　錄

 

模塊1 UI動效設計基礎

【學習目標】 1

1.1　了解UI動效 1

1.1.1　什麼是UI動效 1

1.1.2　UI動效的發展 2

1.1.3　動效在UI中的作用 3

1.2　UI交互設計 4

1.2.1　用戶青睞的交互設計模式 5

1.2.2　提升產品轉化率 5

1.3　UI動效設計的要點與作用 7

1.3.1　增強用戶體驗 7

1.3.2　提升產品氣質 7

1.3.3　還原設計亮點 8

1.4　如何設計動效 8

1.4.1　首先需要有一個想法 8

1.4.2　實現想法 9

1.5　動效的類型有哪些 10

1.5.1　轉場過渡 10

1.5.2　層級展示 11

1.5.3　空間擴展 11

1.5.4　聚焦重點 11

1.5.5　內容呈現 12

1.5.6　操作反饋 12

1.6　基礎變化類型 13

1.6.1　移動、旋轉和縮放 13

1.6.2　屬性變化 13

1.6.3　變化節奏 14

1.6.4　基礎變化的組合應用 14

1.7　UI動效設計軟件 15

1.8　模塊小結 17

1.9　素養拓展 17

1.10　課後測試 17

1.10.1　選擇題 17

1.10.2　創新題 18

 

模塊2 After Effects基礎操作

【學習目標】 19

2.1　After Effects概述 19

2.2　After Effects工作界面 20

2.2.1　認識After Effects工作界面 20

2.2.2　菜單欄 21

2.2.3　工具欄 22

2.2.4　“項目”面板 23

2.2.5　“合成”窗口 24

2.2.6　“時間軸”面板 24

2.2.7　其他面板 25

2.3　After Effects的基本操作 26

2.3.1　創建項目文件 26

2.3.2　在項目文件中創建合成文件 27

2.3.3　保存和關閉項目文件 27

2.3.4　After Effects中的基本工作流程 28

2.4　素材的導入與管理操作 28

2.4.1　導入素材的基本方法 29

2.4.2　導入PSD格式素材 30

任務1：通過導入PSD格式文件創建合成 30

2.4.3　導入AI格式素材 31

任務2：通過導入AI格式文件創建合成 30

2.4.4　素材的管理操作 32

2.4.5　嵌套合成文件 34

2.5　認識“時間軸”面板 35

2.5.1　“音頻/視頻”選項 35

2.5.2　“圖層基礎”選項 36

2.5.3　“圖層開關”選項 36

2.5.4　“轉換控制”選項 36

2.5.5　“父級和鏈接”選項 37

2.5.6　“時間控制”選項 37

2.6　After Effects中的圖層 38

2.6.1　認識不同類型的圖層 38

2.6.2　圖層的混合模式 41

2.7　模塊小結 43

2.8　素養拓展 43

2.9　課後測試 44

2.9.1　選擇題 44

2.9.2　創新題 44

 

模塊3　基礎關鍵幀動效制作

【學習目標】 45

3.1　了解關鍵幀與關鍵幀動畫 46

3.2　關鍵幀的編輯操作 46

3.2.1　關鍵幀的創建方法 46

3.2.2　選擇關鍵幀 47

3.2.3　移動關鍵幀 48

3.2.4　復制關鍵幀 48

3.2.5　刪除關鍵幀 48

任務1：制作背景圖片滑動切換動效 48

3.3　基礎“變換”屬性 53

3.3.1　“錨點”屬性 53

3.3.2　“位置”屬性 53

3.3.3　“縮放”屬性 54

3.3.4　“旋轉”屬性 54

3.3.5　“不透明度”屬性 55

任務2：制作火箭飛行加載動效 53

3.4　運動路徑 61

3.4.1　將直線運動路徑調整為曲線運動路徑 61

3.4.2　運動自定向 62

任務3：制作飛機飛行動效 60

3.5　圖表編輯器 66

3.5.1　認識圖表編輯器 66

3.5.2　設置對象的緩動效果 67

任務4：制作圓球彈跳變形動效 65

3.6　模塊小結 73

3.7　素養拓展 74

3.8　課後測試 74

3.8.1　選擇題 74

3.8.2　創新題 74

 

模塊4　蒙版動效制作與輸出

【學習目標】 75

4.1　形狀的應用 76

4.1.1　形狀路徑 76

4.1.2　創建路徑群組 77

4.1.3　設置形狀路徑屬性 77

任務1：制作圓環Loading動效 77

4.2　創建蒙版動效 84

4.2.1　蒙版動效原理 84

4.2.2　形狀工具 84

4.2.3　鋼筆工具 85

4.2.4　創建蒙版 85

4.2.5　設置蒙版屬性 86

4.2.6　蒙版的疊加處理 87

任務2：制作二維碼掃描動效 84

4.2.7　軌道遮罩 92

任務3：制遮罩標題文字動效 89

4.3　在After Effects中渲染輸出動效 97

4.3.1　認識渲染工作區 97

4.3.2　理解渲染輸出選項 98

4.3.3　渲染輸出 99

任務4：將動效輸出為視頻和圖片 96

4.4　模塊小結 103

4.5　素養拓展 104

4.6　課後測試 104

4.6.1　選擇題 104

4.6.2　創新題 105

 

模塊5　UI元素動效

【學習目標】 105

5.1　圖標動效 106

5.1.1　圖標在UI中的作用 106

5.1.2　圖標動效的常見表現方法 108

5.1.3　制作簡約線框圖標變換動效 110

任務1：制作簡約線框圖標變換動效 110

5.1.4　制作美食圖標動效 115

任務2：制作美食圖標動效 115

5.2　加載進度條與開關按鈕動效 123

5.2.1　常見的加載進度條表現形式 123

5.2.2　制作矩形進度條動效 124

任務3：制作矩形進度條動效 124

5.2.3　開關按鈕的功能特點 128

5.2.4　制作開關按鈕動效 128

任務4：制作開關按鈕動效 128

5.3　文字動效 132

5.3.1　文字動效的優勢 132

5.3.2　文字動效的常見表現形式 133

5.3.3　制作手寫文字動效 135

任務5：制作手寫文字動效 135

5.4　Logo動效 139

5.4.1　Logo動效概述 139

5.4.2　Logo動效的優勢 140

5.4.3　設計Logo動效時需要註意的問題 142

5.4.4　制作動感切片Logo動效 142

任務6：制作動感切片Logo動效 142

5.5　工具欄動效 147

5.5.1　工具欄動效設計 147

5.5.2　制作液態標簽欄圖標動效 148

任務7：制作液態標簽欄圖標動效 148

5.6　模塊小結 154

5.7　素養拓展 154

5.8　課後測試 154

5.8.1　選擇題 154

5.8.2　創新題 155

 

模塊6　界面轉場與菜單動效

【學習目標】 156

6.1　界面切換轉場動效的核心規則 156

6.1.1　轉場動效自然流暢 156

6.1.2　動效層次分明 157

6.1.3　關聯是過渡動效的重要功能 157

6.1.4　界面切換過渡要快速 157

6.1.5　動效要清晰 158

6.1.6　制作登錄轉場動效 159

任務1：制作登錄轉場動效 159

6.2　常見的界面切換轉場動效 166

6.2.1　彈出 166

6.2.2　側滑 167

6.2.3　漸變放大 167

6.2.4　其他 168

6.2.5　制作圖片翻頁切換動效 168

任務2：制作圖片翻頁切換動效 168

6.3　導航菜單切換動效 176

6.3.1　交互式動態導航菜單的優勢 176

6.3.2　導航菜單動效的設計要點 176

6.3.3　制作側滑導航菜單動效 177

任務3：制作側滑導航菜單動效 177

6.4　模塊小結 181

6.5　素養拓展 181

6.6　課後測試 182

6.6.1　選擇題 182

6.6.2　創新題 182

 

模塊7　綜合案例

【學習目標】 182

7.1　制作天氣界面動效 183

7.1.1　動效分析 183

7.1.2　制作步驟 183

7.2　制作界面加載動效 188

7.2.1　動效分析 188

7.2.2　制作步驟 188

7.3　制作App界面滑動動效 194

7.3.1　動效分析 194

7.3.2　制作步驟 194

7.4　制作App歡迎界面動效 201

7.4.1　動效分析 201

7.4.2　制作步驟 201

7.5　模塊小結 210

7.6　素養拓展 210

7.7　課後測試 211

7.7.1　選擇題 211

7.7.2　創新題 211