目  錄

第1章UI設計行業概況

1.1UI行業發展前景   1

1.2UI設計常用工具   2

1.3交互設計的原則      7

1.4本章小結      8

第2章認識UI動效和After Effects CC

2.1認識UI動效   9

2.1.1UI動效的概念      9

2.1.2UI動效的神奇用途   10

2.2After Effects CC功能概述   11

2.2.1After Effects CC功能簡介      11

2.2.2After Effects CC工作界面      12

2.3After Effects CC工作流程   19

2.3.1設計項目      19

2.3.2偏好設置      20

2.3.3組織和管理素材   21

2.3.4輸出設置      23

2.4入門練習      25

2.4.1加載條動畫   25

2.4.2加載進度百分數   27

2.4.3Logo演繹動畫      30

2.5本章小結      33

第3章圖層控制與動畫

3.1圖層控制      34

3.1.1創建與管理圖層   34

3.1.2圖層剪輯      36

3.1.3混合模式      38

3.2透明控制      42

3.2.1透明概念      43

3.2.2軌道遮罩      43

3.2.3應用蒙版      44

3.2.4摳像特技      47

3.3圖層運動      49

3.3.1圖層運動概述   49

3.3.2運動路徑      50

3.3.3運動預設      53

3.4課堂練習      55

3.4.1液態動效      55

3.4.2啟動頁動效   58

3.4.3燃燒顯露Logo      62

3.4.4MG風格      66

3.4.5環形刻度計時動效   71

3.5本章小結      75

第4章三維空間合成

4.1三維圖層概述      76

4.2應用燈光技術      79

4.2.1創建燈光      79

4.2.2燈光參數      81

4.3應用攝像機      83

4.3.1攝像機技術   83

4.3.2攝像機參數   85

4.4課堂練習      86

4.4.1卡片飄落      86

4.4.2禮花魔盒      89

4.4.3立體Logo投影      96

4.4.4C4D場景動效   100

4.4.5模擬全景動效   106

4.5本章小結   114

第5章文字與圖形動效

5.1創建文本圖層      115

5.1.1創建文本   115

5.1.2編輯文本   116

5.2文本動畫   118

5.2.1源文本動畫   118

5.2.2動畫器與選擇器   118

5.2.3應用文本動畫預設   121

5.2.4操作文本路徑   123

5.3高級繪畫工具   124

5.3.1選擇與調整筆刷   125

5.3.2操作繪畫時間線   126

5.3.3高級仿制工具   128

5.4形狀圖層運動   129

5.5課堂練習   133

5.5.1字符閃爍   133

5.5.2手寫字效果   135

5.5.3MG風格效果      140

5.5.4動感圖形組合   146

5.5.5動感Banner   152

5.5.6黑板報效果   159

5.5.7HUD   165

5.6本章小結   169

第6章高級運動技巧

6.1運動曲線編輯器      170

6.1.1運動插值概述   170

6.1.2編輯運動曲線   172

6.1.3調節速率   173

6.2表達式動畫控制      175

6.2.1表達式概述   175

6.2.2創建表達式   176

6.2.3常用表達式實例   179

6.3音頻的視覺化特效      183

6.4課堂練習   186

6.4.1Logo演繹      186

6.4.2花飾加載動效   192

6.4.3幾何圖形變幻   202

6.4.4音量指針動效   207

6.4.5彩蝶飛舞   212

6.5本章小結   219

第7章粒子與破碎特效

7.1粒子運動場      220

7.1.1運動場控制   220

7.1.2粒子形狀控制   223

7.1.3粒子行為控制   224

7.1.4屬性映射器控制   227

7.2破碎效果   230

7.2.1顯示與渲染選項   231

7.2.2破碎選項   231

7.2.3三維效果   234

7.3課堂練習   236

7.3.1粒子彙聚Logo   236

7.3.2煙花效果   241

7.3.3零落的標牌   245

7.3.4文字成煙   251

7.3.5飄落的秋葉   257

7.4本章小結   262

第8章典型插件特效

8.1CC插件組      263

8.1.1CC插件簡介      263

8.1.2油漆Logo效果   266

8.1.3泡泡文字   270

8.2Trapcode插件組      272

8.2.1插件簡介   272

8.2.2流光溢彩   273

8.2.3炫彩Logo    276

8.2.4晶格背景   279

8.2.5字煙縹緲   283

8.3其他視效插件   287

8.3.1Optical光斑   287

8.3.2Newton動力學特效   291

8.3.3Plexus點線空間   295

8.3.4Stardust粒子特效   301

8.4動畫腳本插件   307

8.4.1快速制作進度條   307

8.4.23D折紙   310

8.4.3排版圖形變幻   311

8.4.4自動圖形連線   316

8.5本章小結   319

前  言

UI即User Interface（用戶界面）的簡稱，UI設計是指對軟件的人機交互、操作邏輯、界面美觀的整體設計，也叫用戶界面設計。用戶界面設計行業剛剛在全球軟件業興起時，屬於高新技術設計產業，專業人纔稀缺，人纔資源爭奪激烈，就業市場供不應求。如今，國內的UI設計行業日益發展，有了專門的職業分工，也開始出現一些高水準的一線設計師與UI設計交流組織，眾多大型IT企業均已成立專業的UI設計部門。

從字面上看，UI包含用戶與界面兩個部分，實際上還包括用戶與界面之間的交互關繫，其實可分為用戶研究、交互設計和界面設計3個方面。隨著移動端設備的普及和網速的不斷提升，目前的界面已不僅限於版式圖標的設計和信息頁面的瀏覽，多種多樣素也是非常具有吸引力的，也往往能給用戶留下深刻的印像和好感。UI動效可以通過交互設計工具進行的運動、轉場，以及軌跡和時間軸的設置，也可以通過添加小模塊來增加動感。

《After Effects CC移動UI動效設計必修課》重點講解的是界面設計中的動效制作部分。對於界面設計師來說，掌握一些動效設計和制作技術很有必要，例如在設計界面交互動效、項目宣傳MG動畫、產品吉祥物表情包、年終彙報圖表時，這些技能可以輔助設計師更好地包裝輸出。

《After Effects CC移動UI動效設計必修課》是一本幫助讀者快速入門並提高實戰能力的學習用書，采用完全適合自學的“教程 案例”和“完全案例”兩種編寫形式，所有案例均精心挑選和制作，按照UI動效的實際應用進行劃分，每一章的案例在編排上循序漸進，力求帶領讀者深入商業應用的層面，講解不同風格的動效設計和應用技巧。

《After Effects CC移動UI動效設計必修課》著重講解如何在After Effects CC中設計和制作UI，包括加載動效、Logo演繹動畫、液態動效、MG風格動效、三維空間效果、文字動效、動感Banner、典型插件特效等。在制作一些素時，為了提高效率，對經常使用的表達式、粒子和多種插件都通過案例進行了細致的講解，針對一些特殊的場合還會結合Photoshop和C4D等軟件進行整合運用。

《After Effects CC移動UI動效設計必修課》由具有豐富經驗的UI和AE動效設計師編寫，從工作界面和合成動效的一般流程入手，逐步引導讀者學習UI動效設計的基礎知識、高級粒子和腳本動畫的應用等各種技能。希望《After Effects CC移動UI動效設計必修課》能夠幫助讀者解決學習中的難題，提高技術水平，快速成為設計和制作UI動效的高手。

《After Effects CC移動UI動效設計必修課》由吳楨、路倩和王志新編著，在成書的過程中，趙新偉、趙昆、吳月、劉一凡、吳倩、李英傑、梁磊、趙婷、彭聰、朱虹、王妍、李燁、師晶晶、華冰、趙建、王淑軍、周煒、李占方、賈燕、楊柳、朱鵬、張峰、苗鵬、劉鴻燕、陳瑞瑞等人參與了部分內容的編寫工作。由於作者水平所限，書中難免有疏漏和不足之處，懇請廣大讀者批評指正。

為了方便讀者學習，《After Effects CC移動UI動效設計必修課》為每個案例提供了教學視頻，隻要掃描一下書中案例名稱旁邊的二維碼，即可直接打開視頻進行觀看，或者推送到自己的郵箱中下載後進行觀看。《After Effects CC移動UI動效設計必修課》配套的學習資源中提供了書中所有案例的工程文件、教學視頻和PPT 課件。讀者在學習時可掃描下面的二維碼，然後將內容推送到自己的郵箱中，即可下載獲取相應的資源( 注意：請將這兩個二維碼下的壓縮文件全部下載完畢後，再進行解壓，即可得到完整的文件內容)。

編    者