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

在之前的文章《超全面總結(jié)！有可以提升用戶設(shè)計(jì)體驗(yàn)的方法？》也簡(jiǎn)單介紹過，交互動(dòng)效存在的意義和基本類型，這里我們來全面詳聊一下。

一、動(dòng)效分類

首先我們先區(qū)分幾個(gè)動(dòng)效的概念。

1. MG動(dòng)畫

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

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

2. 表情包動(dòng)圖

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

3. UI 交互動(dòng)效

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

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

二、做動(dòng)效的軟件

之前經(jīng)常看到動(dòng)效作品評(píng)論里總有同學(xué)在問「大佬，哪個(gè)軟件做的呀？」，這里來做個(gè)統(tǒng)一總結(jié)。

1. Adobe After Effects

大家最熟悉不過的 AE，做 UI 動(dòng)效最常見的軟件。

優(yōu)點(diǎn)：面向電影特效的軟件，可以完成的動(dòng)效種類與復(fù)雜程度可想而知，靈活配合 Adobe 自家的 ps、ai，可提供 Lottie 動(dòng)畫庫 Jason 文件。

缺點(diǎn)：入門門檻高，功能繁雜，學(xué)習(xí)成本高。

導(dǎo)出格式：mov 視頻文件。

2. Adobe Photoshop

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

優(yōu)點(diǎn)：同樣使用 timeline 設(shè)計(jì)動(dòng)效，操作較簡(jiǎn)單。

缺點(diǎn)：可完成的動(dòng)效效果寥寥無幾，適合用來完成逐幀動(dòng)畫（如表情包里的簡(jiǎn)單小 gif）。

導(dǎo)出格式：gif ?動(dòng)圖文件。

3. Hype 3

如果說 AE 是 UX 動(dòng)效屆的 ps（功能繁雜且全面），那么 Hype 3 應(yīng)該就是 UX 動(dòng)效屆的 sketch（針對(duì)型強(qiáng)且易操作）。

優(yōu)點(diǎn)：易上手、無需代碼可以實(shí)現(xiàn)實(shí)時(shí)交互動(dòng)效操作、原生界面支持中文，3.0版本后支持更多動(dòng)畫效果。

缺點(diǎn)：可完成動(dòng)效效果有限。

導(dǎo)出格式：gif動(dòng)圖/視頻/png/Html，pc、mobile 實(shí)時(shí)操作。

4. Flinto/Principle

其實(shí)這2軟件差不太多，都是更簡(jiǎn)易版的 Hype 3。

優(yōu)點(diǎn)：操作簡(jiǎn)單的一如 sketch，有 sketch 插件可以配合使用，效率高，無需代碼可以實(shí)現(xiàn)實(shí)時(shí)交互動(dòng)效操作。

缺點(diǎn)：可完成動(dòng)效效果比 Hype 3 還有限。

導(dǎo)出格式：視頻 mov，鏈接只能在手機(jī)上同步預(yù)覽，可錄屏。

5. Keynote

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

優(yōu)點(diǎn)：無腦操作，效果一流。

缺點(diǎn)：僅有有效的過渡動(dòng)效。

導(dǎo)出格式：keynote 文件。

三、UI 動(dòng)效常用核心技能盤點(diǎn)

因?yàn)樵谧魑淮蟛糠侄际?UX 設(shè)計(jì)師，所以以下著重介紹一下，如何用 AE 實(shí)現(xiàn)幾個(gè)核心 UI 動(dòng)效技能點(diǎn)。

Skill Point 1：緩動(dòng)

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

AE應(yīng)用

• 選中關(guān)鍵幀——?jiǎng)赢?gt;關(guān)鍵幀輔助>緩動(dòng) | animation>keyframe assistant>easy ease （或點(diǎn)擊關(guān)鍵幀右鍵>關(guān)鍵幀輔助>緩動(dòng)）；
• 圖形編輯器>使視圖適應(yīng)所有曲線>拖動(dòng)端點(diǎn)調(diào)整曲線 | Graph Editor > Fit all graphs to view。

Skill Point 2：遮罩

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

AE應(yīng)用

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

Skill Point 3：值變

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

AE應(yīng)用

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

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

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

AE應(yīng)用

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

Skill Point 5：毛玻璃效果

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

AE應(yīng)用

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

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

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

AE應(yīng)用

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

Skill Point 7：融合

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

AE應(yīng)用

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

Skill Point 8：抖動(dòng)

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

AE應(yīng)用

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

Skill Point 9：水波紋

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

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

AE應(yīng)用

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

歡迎關(guān)注作者微信公眾號(hào)：「Nana的設(shè)計(jì)錦囊」

圖片素材作者：Thunder Rockets

「動(dòng)效設(shè)計(jì)精選」

• 動(dòng)效設(shè)計(jì)科普：《超全面！產(chǎn)品動(dòng)效設(shè)計(jì)全方位科普手冊(cè)》
• 動(dòng)效設(shè)計(jì)技巧：《7個(gè)實(shí)用技巧，讓你的動(dòng)效變得更優(yōu)秀！》
• 動(dòng)效設(shè)計(jì)工具：《針對(duì)不同設(shè)計(jì)階段，如何選擇合適的動(dòng)效工具？》
• 動(dòng)效設(shè)計(jì)教程：《雞爺：那些酷炫的UI動(dòng)效可不是動(dòng)一動(dòng)那么簡(jiǎn)單》

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

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com 是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計(jì)愛好者也準(zhǔn)備了貼心的知識(shí)樹專欄。開啟免費(fèi)自學(xué)新篇章，按照我們的專欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺效果。

設(shè)計(jì)導(dǎo)航：國(guó)內(nèi)人氣最高的設(shè)計(jì)網(wǎng)址導(dǎo)航，設(shè)計(jì)師必備： http://hao.uisdc.com