用一篇文章，幫你掌握基礎實用的動效技能

對如今的 UX 設計師來說，會點動效基本已是常規操作了。作為 UX 設計師，動效可以輔助的產出可以涵蓋界面交互動效、項目宣傳 MG動畫、產品吉祥物表情包、年終匯報 PPT 等等。這些技能點雖然廣，但是只需要掌握基礎實用的幾個點就足以輔助我們更好的包裝輸出。

在之前的文章《超全面總結！有可以提升用戶設計體驗的方法？》也簡單介紹過，交互動效存在的意義和基本類型，這里我們來全面詳聊一下。

一、動效分類

首先我們先區分幾個動效的概念。

1. MG動畫

MG動畫（Motion Graphics），簡單來說就是圖文動畫的意思。MG動畫的整體運用十分廣泛，其中包括電影開頭、電視開頭、欄目包裝、產品演示、廣告節目等各個領域。

作為互聯網設計師，我們可以使用簡單的 MG動畫來進行 APP 展示：比如 app store 的 video、官網 video 或者工作匯報中的項目成果展示，總體我們可以把它劃分在品牌設計的類別中。

2. 表情包動圖

如今的微信表情平臺發展成了一個表情包行業，可以讓設計師發布自己設計的表情包供微信用戶使用，其中一部分表情包是帶有動效的，即逐幀動畫的產物，以小 gif 的格式呈現。

3. UI 交互動效

在用戶體驗界面設計中，因交互需求而發生的動效設計，例如：loading、轉場、點擊反饋等。

現在越來越多專業化 UX 交互動效軟件助力實現 html 在手機上的實時操作反饋，就仿佛你不用代碼做了一個 app 出來。

二、做動效的軟件

之前經常看到動效作品評論里總有同學在問「大佬，哪個軟件做的呀？」，這里來做個統一總結。

1. Adobe After Effects

大家最熟悉不過的 AE，做 UI 動效最常見的軟件。

優點：面向電影特效的軟件，可以完成的動效種類與復雜程度可想而知，靈活配合 Adobe 自家的 ps、ai，可提供 Lottie 動畫庫 Jason 文件。

缺點：入門門檻高，功能繁雜，學習成本高。

導出格式：mov 視頻文件。

2. Adobe Photoshop

每天都要打開 Adobe 家的 ps，它也是可以做動效的。

優點：同樣使用 timeline 設計動效，操作較簡單。

缺點：可完成的動效效果寥寥無幾，適合用來完成逐幀動畫（如表情包里的簡單小 gif）。

導出格式：gif ?動圖文件。

3. Hype 3

如果說 AE 是 UX 動效屆的 ps（功能繁雜且全面），那么 Hype 3 應該就是 UX 動效屆的 sketch（針對型強且易操作）。

優點：易上手、無需代碼可以實現實時交互動效操作、原生界面支持中文，3.0版本后支持更多動畫效果。

缺點：可完成動效效果有限。

導出格式：gif動圖/視頻/png/Html，pc、mobile 實時操作。

4. Flinto/Principle

其實這2軟件差不太多，都是更簡易版的 Hype 3。

優點：操作簡單的一如 sketch，有 sketch 插件可以配合使用，效率高，無需代碼可以實現實時交互動效操作。

缺點：可完成動效效果比 Hype 3 還有限。

導出格式：視頻 mov，鏈接只能在手機上同步預覽，可錄屏。

5. Keynote

這個應該是設計師都知道的神器，一如宣傳語「讓你的演示文稿提神提氣、出類拔萃」，比 PPT 好用一萬倍。

優點：無腦操作，效果一流。

缺點：僅有有效的過渡動效。

導出格式：keynote 文件。

三、UI 動效常用核心技能盤點

因為在座各位大部分都是 UX 設計師，所以以下著重介紹一下，如何用 AE 實現幾個核心 UI 動效技能點。

Skill Point 1：緩動

交互動效的初衷是為了給產品帶來舒適的用戶體驗，那么從本質上每一個交互動效的過渡都應該遵從物理曲線與緩動原則，比如：下拉的重力感、過場的緩入緩出，避免產品像機器般給用戶帶來生硬的感受。

AE應用

• 選中關鍵幀——動畫>關鍵幀輔助>緩動 | animation>keyframe assistant>easy ease （或點擊關鍵幀右鍵>關鍵幀輔助>緩動）；
• 圖形編輯器>使視圖適應所有曲線>拖動端點調整曲線 | Graph Editor > Fit all graphs to view。

Skill Point 2：遮罩

遮罩功能可以解決許多你想不到的動效問題，達到一個比如魔術化的效果，也是 MG動畫轉場常用功能之一。簡單來說，就是將動效分為2層（底層是展示圖，頂層是遮罩），通過改變的遮罩大小，我們可以看到底層展示圖的不同部分。

AE應用

• 選中形狀工具在固態層或合成的預合成 | solid 或者 Pre-compose 上畫一個形狀（即完成該圖層的遮罩 mask）；
• 下拉遮罩屬性即可調整遮罩路徑、大小、羽化、透明度等數值。

Skill Point 3：值變

工具型 APP 中常用的數值變化動效，可以靈活展現數字變化的過程，在 MG動畫中使用也是一種數據的震撼表現方式。

AE應用

• 新建文本層并選中——效果>文本>數字 | Effect>texts>numbers；
• 參數設置。

Skill Point 4：3D翻轉

設置3D屬性可以讓物體擁有 XY軸空間，立體化表達物體概念。

AE應用

• 打開圖層3D圖層屬性 | 3D layer；
• 設置 XY軸屬性。

Skill Point 5：毛玻璃效果

iOS 源生的毛玻璃效果在很多動效軟件上都受到限制，當然 AE 是無所不能的。這里單獨作為一個技能點來和大家分享，還因為 AE 中毛玻璃效果的制作還會牽扯到一個關鍵點——「調節層」的使用，通過毛玻璃的應用大家應該可以舉一反三出它的更多用法。

AE應用

• 圖層>新建>調節層 | layer>new>adjustment layer （注意該圖層需要位于需要被模糊的圖層與毛玻璃遮罩圖層之間）；
• 選中調節層——效果>模糊與銳化>高斯模糊；
• 建立一個遮罩圖層（遮罩形狀大小調整為毛玻璃展現區域形狀大小）；
• Ctrl+C 復制遮罩圖層路徑>Ctrl+V 粘貼到調整層；
• 按照需求調節遮罩圖層的透明度屬性即可看到毛玻璃效果。

Skill Point 6：修剪路徑（開放式）

UI 動效中高頻出現的路徑描繪動效實現技能，從 LOGO 到圖標都可以通過 AI 導入形狀路徑來完成路徑描繪動效。這里只介紹比較實用的開放式修剪路徑（即線條路徑），封閉式修剪路徑應用不多（即形狀路徑）。

AE應用

• 形狀圖層>添加>修剪路徑 | shape layer>add>Trim Paths；
• 設置結束、開始屬性，完成路徑動效。

Skill Point 7：融合

圖形的融合變換，有很多種做法，這里介紹效果最好的一種。

AE應用

• 新建調節層——效果>快速模糊 | Effect>fast blur。效果>色階 | Effect>levels；
• 參數調整。

Skill Point 8：抖動

緩慢抖動是常在動態 mockup 中見到的效果，這里應用到「表達式」的使用，也是屬于可以舉一反三應用于多種地方的重要技能點。其中可以使用表達式的除了抖動效果，還有頭尾相接的無限循環等。

AE應用

• alt+需要抖動圖層屬性關鍵幀小秒表>在時間軸上出現的空間里寫上 wiggle（數值A，數值B）；
• 調整數值A（每秒震動次數）、B（運動范圍像素值）達到自己想要的抖動效果（我一般用1,20達到一個緩動的效果）。

Skill Point 9：水波紋

之前做手機清理類 APP 經常會涉及到的流量表達動效，雖然做起來不是很簡單，但是效果非常好。

這里應用的是「置換圖」技能，大家同樣可以使用「置換圖」方法舉一反三。

AE應用

• 新建形狀圖層（命名為「波浪」）>效果>扭曲>置換圖 | new shape layer>effect>distort>replacement map；
• 新建固態層>效果>無線電波 | new solid layer>effect>radio wave；
• 將2中的固態層合成預合成，命名為「置換圖」（注意轉移所有屬性）；
• 將「置換圖」預合成的開始點移到最左邊——效果>快速模糊 | effect>fast blur；
• 點擊「波浪」層的置換圖屬性，選擇「置換圖」預合成替換；
• 隱藏「置換圖」預合成。

歡迎關注作者微信公眾號：「Nana的設計錦囊」

圖片素材作者：Thunder Rockets

「動效設計精選」

• 動效設計科普：《超全面！產品動效設計全方位科普手冊》
• 動效設計技巧：《7個實用技巧，讓你的動效變得更優秀！》
• 動效設計工具：《針對不同設計階段，如何選擇合適的動效工具？》
• 動效設計教程：《雞爺：那些酷炫的UI動效可不是動一動那么簡單》

================明星欄目推薦================

優優教程網： UiiiUiii.com 是優設旗下優質中文教程網站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章，按照我們的專欄一步步學習，一定可以迅速上手并制作出酷炫的視覺效果。

設計導航：國內人氣最高的設計網址導航，設計師必備： http://hao.uisdc.com