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

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

一、關(guān)于動(dòng)效分類(lèi)

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

1. MG動(dòng)畫(huà)

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

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

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

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

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

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

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

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

之前經(jīng)?？吹絼?dòng)效作品底下總會(huì)有童鞋在下問(wèn)“大佬，哪個(gè)軟件做的呀？”，這里來(lái)做個(gè)統(tǒng)一總結(jié)，以后這種問(wèn)題就不用再去問(wèn)別人了。

1. Adobe After Effects

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

• 優(yōu)點(diǎn)：面向電影特效的軟件，可以完成的動(dòng)效種類(lèi)與復(fù)雜程度可想而知，靈活配合阿逗比自家的ps、ai占盡方便，可提供Lottie動(dòng)畫(huà)庫(kù)Jason文件。
• 缺點(diǎn)：入門(mén)門(mén)檻高，功能繁雜，學(xué)習(xí)成本高。
• 導(dǎo)出格式：mov視頻文件。

2. Adobe?Photoshop

嗯對(duì)，你沒(méi)有看錯(cuò)，是你每天都要打開(kāi)的阿逗比家ps，它也是可以做動(dòng)效的。

• 優(yōu)點(diǎn)：同樣使用timeline設(shè)計(jì)動(dòng)效，操作較簡(jiǎn)單。
• 缺點(diǎn)：可完成的動(dòng)效效果寥寥無(wú)幾，適合用來(lái)完成逐幀動(dòng)畫(huà)（如表情包里的簡(jiǎn)單小gif）。
• 導(dǎo)出格式：gif動(dòng)圖文件。

3. Hype 3

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

• 優(yōu)點(diǎn)：易上手、無(wú)需代碼可以實(shí)現(xiàn)實(shí)時(shí)交互動(dòng)效操作、原生界面支持中文，3.0版本后支持更多動(dòng)畫(huà)效果。
• 缺點(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插件可以配合使用，效率高，無(wú)需代碼可以實(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ì)師都知道的神器，一如宣傳語(yǔ)“讓你的演示文稿提神提氣、出類(lèi)拔萃“，比PPT好用一萬(wàn)倍。

• 優(yōu)點(diǎn)：無(wú)腦操作，效果一流。
• 缺點(diǎn)：僅有有效的過(guò)渡動(dòng)效。
• 導(dǎo)出格式：keynote文件。

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

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

Skill Point 1：緩動(dòng)

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

AE應(yīng)用

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

看不清的話(huà)，可以點(diǎn)擊看大圖哦

Skill Point 2：遮罩

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

AE應(yīng)用

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

Skill Point 3：值變

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

AE應(yīng)用

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

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

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

AE應(yīng)用

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

Skill Point 5：毛玻璃效果

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

AE應(yīng)用

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

Skill Point 6：修剪路徑（開(kāi)放式）

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

AE應(yīng)用

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

Skill Point 7：融合

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

AE應(yīng)用

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

Skill Point 8：抖動(dòng)

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

AE應(yīng)用

1. alt+需要抖動(dòng)圖層屬性關(guān)鍵幀小秒表>在時(shí)間軸上出現(xiàn)的空間里寫(xiě)上wiggle(數(shù)值A(chǔ)，數(shù)值B)；
2. 調(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ī)清理類(lèi)APP經(jīng)常會(huì)涉及到的流量表達(dá)動(dòng)效，雖然做起來(lái)不是很簡(jiǎn)單，但是效果非常好。

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

AE應(yīng)用

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

題外話(huà)

寫(xiě)這篇?jiǎng)有Э偨Y(jié)文，主要是因?yàn)楣ぷ餍枰罱鼊倓傋隽藗€(gè)動(dòng)效視頻，配合團(tuán)隊(duì)伙伴的設(shè)計(jì)立項(xiàng)宣講效果灰常之好，感覺(jué)這確實(shí)是一種很出彩的包裝和宣傳自己思路的一種方式。

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

不過(guò)雖然task多，但是在一種很講究效率的狀態(tài)下進(jìn)行的，這一點(diǎn)很開(kāi)心。

下一篇爭(zhēng)取憋個(gè)大招，還請(qǐng)各位耐心等待。

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

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