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

在之前的文章項目1-2的設(shè)計總結(jié)提升里也簡單介紹過，交互動效存在的意義和基本類型介紹，這里我們來全面詳聊一下~

一、關(guān)于動效分類

首先我們先區(qū)分幾個動效的概念。

1. MG動畫

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

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

2. 表情包動圖

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

3. UI交互動效

在用戶體驗界面設(shè)計中，因交互需求而發(fā)生的動效設(shè)計，例如：loading、轉(zhuǎn)場、點擊反饋等。

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

二、關(guān)于做動效的軟件

之前經(jīng)?？吹絼有ё髌返紫驴倳型谙聠枴按罄?，哪個軟件做的呀？”，這里來做個統(tǒng)一總結(jié)，以后這種問題就不用再去問別人了。

1. Adobe After Effects

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

• 優(yōu)點：面向電影特效的軟件，可以完成的動效種類與復雜程度可想而知，靈活配合阿逗比自家的ps、ai占盡方便，可提供Lottie動畫庫Jason文件。
• 缺點：入門門檻高，功能繁雜，學習成本高。
• 導出格式：mov視頻文件。

2. Adobe?Photoshop

嗯對，你沒有看錯，是你每天都要打開的阿逗比家ps，它也是可以做動效的。

• 優(yōu)點：同樣使用timeline設(shè)計動效，操作較簡單。
• 缺點：可完成的動效效果寥寥無幾，適合用來完成逐幀動畫（如表情包里的簡單小gif）。
• 導出格式：gif動圖文件。

3. Hype 3

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

• 優(yōu)點：易上手、無需代碼可以實現(xiàn)實時交互動效操作、原生界面支持中文，3.0版本后支持更多動畫效果。
• 缺點：可完成動效效果有限。
• 導出格式：gif動圖/視頻/png/Html，pc、mobile實時操作。

4. Flinto/Principle

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

• 優(yōu)點：操作簡單的一如sketch，有sketch插件可以配合使用，效率高，無需代碼可以實現(xiàn)實時交互動效操作。
• 缺點：可完成動效效果比Hype 3還有限。
• 導出格式：視頻mov，鏈接只能在手機上同步預覽，可錄屏。

5. Keynote

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

• 優(yōu)點：無腦操作，效果一流。
• 缺點：僅有有效的過渡動效。
• 導出格式：keynote文件。

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

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

Skill Point 1：緩動

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

AE應用

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

看不清的話，可以點擊看大圖哦

Skill Point 2：遮罩

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

AE應用

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

Skill Point 3：值變

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

AE應用

1. 新建文本層并選中——效果>文本>數(shù)字 | Effect>texts>numbers；
2. 參數(shù)設(shè)置。

Skill Point 4：3D翻轉(zhuǎn)

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

AE應用

1. 打開圖層3D圖層屬性 | 3D layer；
2. 設(shè)置XY軸屬性。

Skill Point 5：毛玻璃效果

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

AE應用

1. 圖層>新建>調(diào)節(jié)層 | layer>new>adjustment layer (注意該圖層需要位于需要被模糊的圖層與毛玻璃遮罩圖層之間）；
2. 選中調(diào)節(jié)層——效果>模糊與銳化>高斯模糊；
3. 建立一個遮罩圖層（遮罩形狀大小調(diào)整為毛玻璃展現(xiàn)區(qū)域形狀大?。?/li>
4. Ctrl+C復制遮罩圖層路徑>Ctrl+V粘貼到調(diào)整層；
5. 按照需求調(diào)節(jié)遮罩圖層的透明度屬性即可看到毛玻璃效果咯。

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

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

AE應用

1. 形狀圖層>添加>修剪路徑 | shape layer>add>Trim Paths；
2. 設(shè)置結(jié)束、開始屬性，完成路徑動效。

Skill Point 7：融合

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

AE應用

1. 新建調(diào)節(jié)層——效果>快速模糊 | Effect>fast blur。效果>色階 | Effect>levels；
2. 參數(shù)調(diào)整。

Skill Point 8：抖動

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

AE應用

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

Skill Point 9：水波紋

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

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

AE應用

1. 新建形狀圖層（命名為“波浪”）>效果>扭曲>置換圖 | new shape layer>effect>distort>replacement map；
2. 新建固態(tài)層>效果>無線電波 | new solid layer>effect>radio wave；
3. 將2中的固態(tài)層合成預合成，命名為“置換圖”（注意轉(zhuǎn)移所有屬性）；
4. 將“置換圖”預合成的開始點移到最左邊——效果>快速模糊 | effect>fast blur；
5. 點擊”波浪“層的置換圖屬性，選擇“置換圖”預合成替換；
6. 隱藏“置換圖”預合成。

題外話

寫這篇動效總結(jié)文，主要是因為工作需要最近剛剛做了個動效視頻，配合團隊伙伴的設(shè)計立項宣講效果灰常之好，感覺這確實是一種很出彩的包裝和宣傳自己思路的一種方式。

最近工作接收的信息量一直比較大，目前在接業(yè)務需求同時并行多個task，包括動態(tài)化組件平臺的搭建和數(shù)據(jù)分析~

不過雖然task多，但是在一種很講究效率的狀態(tài)下進行的，這一點很開心。

下一篇爭取憋個大招，還請各位耐心等待。

本文由 @NaNa 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Pexels，基于 CC0 協(xié)議