一直以來咨詢動效問題的人不少，但大多問題的描述來看，可以說是對動效一無所知，網(wǎng)上我也搜了一些動效的分享，發(fā)現(xiàn)只有對細(xì)節(jié)的分享沒有真正幫助大家建立動效認(rèn)識的內(nèi)容，所以這篇將作為掃盲文，幫助你們徹底搞懂和 UI 工作相關(guān)的“動效”到底是什么。

更多動效干貨：

一、動效的類型認(rèn)識

動效是一個(gè)統(tǒng)稱，要完整描述的話，指的就是視覺元素產(chǎn)生的動畫效果，這是 UI 有別于平面的主要差異之一。

但隨著行業(yè)的發(fā)展，產(chǎn)生了很多種動效的類型，它們的作用不同，使用場景不同，實(shí)現(xiàn)方式不同，更重要的是，制作的方式也不同，如果連動效的類型都分不出來，那么就會連應(yīng)該怎么完成工作的概念都沒有。

在工作語境下，動效類型可以 4 個(gè)大類，下面會對它們分別展開介紹：

1. 交互動效
2. 交互特效 / 微動效
3. 視覺動畫
4. 可交互原型

1. 交互動效

交互動效即通過用戶進(jìn)行交互所產(chǎn)生的動畫效果，是用于對用戶的操作進(jìn)行反饋的動畫，用于提升交互可用性和體驗(yàn)。

如一個(gè)按鈕控件被點(diǎn)擊、懸浮，切換出了不同的樣式，那么這個(gè)過程就是交互動效的應(yīng)用。

再比如針對組件交互所產(chǎn)生的動畫反饋，比如通過滾動展開或放大。

還有頁面之間的跳轉(zhuǎn)，從一個(gè)頁面過度到另一個(gè)頁面的過程，比如音樂應(yīng)用中展開歌曲播放頁面，花瓣瀑布流中展開圖片詳情頁的動畫。

交互動效就是用于匹配交互操作的動畫效果，不管這個(gè)動畫效果是簡約還是酷炫，微小還是宏大。但是，這里我們要給交互動效加上一個(gè)限制，就是基礎(chǔ)交互動效的目標(biāo)是用于滿足交互的反饋。

因?yàn)橛邢喈?dāng)一部分動效設(shè)計(jì)的目標(biāo)，是為了品牌、運(yùn)營、情感服務(wù)而不是操作反饋。比如直播中的禮物動效或者領(lǐng)取優(yōu)惠券時(shí)的彈窗動效等。

而這類動效還會引發(fā)出下一個(gè)問題，即實(shí)現(xiàn)動效的方式和開發(fā)方法。常規(guī)的動效邏輯就是關(guān)鍵幀動畫的實(shí)現(xiàn)邏輯，元素的屬性從 A 變到 B（兩個(gè)關(guān)鍵幀），比如從左移到右，從藍(lán)變成綠，從大變到小等等，都是在軟件右側(cè)屬性欄可以操控的對象。

而特殊動效的實(shí)現(xiàn)則是靠一般關(guān)鍵幀動畫難以實(shí)現(xiàn)的，比如出現(xiàn)了粒子、不規(guī)則形變、特殊路徑移動、不相關(guān)圖形的轉(zhuǎn)換等等。所以，我們會把它劃分成下面的新類型。

2. 交互特效/微動效

交互特效也是交互動效的一種，但從上文可以了解到，它不只局限于滿足交互的反饋，動畫的制作和實(shí)現(xiàn)方式也和一般的關(guān)鍵幀動畫不同，比如下面這些案例。

交互特效的實(shí)現(xiàn)可以應(yīng)用任何效果形式，不管是粒子、3D、逐幀、手繪、骨骼還是液化都可以，就是把動畫特效的效果應(yīng)用到交互的反饋場景中來。

除了頁面和組件這些感知比較明顯的動畫效果外，應(yīng)用在一些細(xì)節(jié)的特效還有個(gè)專屬的名字，叫“微動效”。最常見的比如底部導(dǎo)航欄上點(diǎn)擊后產(chǎn)生的動畫效果，或者下拉刷新中 Loding 的小動畫。

導(dǎo)航欄動畫

Loading 動畫

這里動效的制作和實(shí)現(xiàn)成本都高了很多，且不用與滿足基本的操作反饋，所以可以稱它們?yōu)?—— 為了做動效而做的動效，自然要在分類上做出區(qū)分。

3. 視覺動畫

視覺動畫就是常規(guī)意義上的視頻動畫、特效動畫，多數(shù)會自己進(jìn)行播放和循環(huán)。嚴(yán)格意義上講，視覺動畫并不是動效，但之所以羅列出來，是因?yàn)樵?APP 應(yīng)用中結(jié)合視覺動畫的交互或場景有不少。

比如啟動頁、H5 活動頁、首頁節(jié)慶或福利彈窗中：

啟動頁動畫

運(yùn)營動畫

這類動畫都是廣告動畫的延伸，隨著國內(nèi)互聯(lián)網(wǎng)產(chǎn)品運(yùn)營廣告需求的激增，對廣告展現(xiàn)形式多樣化的要求越來越大，就催生出了對應(yīng)的動畫效果制作需求。在有獨(dú)立運(yùn)營設(shè)計(jì)團(tuán)隊(duì)的情況下，由運(yùn)營設(shè)計(jì)師制作。如果沒有的話，則由 UI 設(shè)計(jì)師自己完成（不分大小廠）。

4. 交互原型

可交互原型，就是可以進(jìn)行操作并實(shí)現(xiàn)對應(yīng)交互事件的演示文件，通常由多個(gè)頁面組成。

雖然它屬于原型的分類，但因?yàn)檫@類原型既然可以交互，那當(dāng)然有交互的動效，而很多人對于原型和動效的關(guān)系并沒有搞清楚。

可交互原型的主要目標(biāo)，是用于反應(yīng)產(chǎn)品和交互的邏輯，比如相關(guān)操作怎么跳轉(zhuǎn)，會獲得什么結(jié)果，流程怎么操作，而不是還原視覺的效果，這個(gè)階段中大多視覺都還沒有定稿，就更不會急著輸出具體動效。

所以除了基礎(chǔ)的頁面跳轉(zhuǎn)外，一些需要靠動效表現(xiàn)的交互即便軟件可以實(shí)現(xiàn)，也只需要做個(gè)示意，不會精確到具體的參數(shù)和細(xì)節(jié)樣式。

而如果是制作了完整的動效，且軟件支持交互操作的話，那么這個(gè)交互模式就叫可交互動效，在語境上要和“原型”做出區(qū)分。

以上就是在 UI 設(shè)計(jì)項(xiàng)目中和動效相關(guān)的 4 個(gè)分類，是設(shè)計(jì)師主要會涉及和制作的對象，每種類型的制作所使用的軟件、邏輯、交付、實(shí)現(xiàn)方式不同，如果搞不清楚要制作的動效是什么，那么就連應(yīng)該使用哪個(gè)軟件，查什么資料或教學(xué)案例都不明白，后續(xù)的工作就完全無法推進(jìn)。

二、動效軟件的認(rèn)識

動效相關(guān)的軟件有不少，不同軟件面向的動效類型不同，不是你應(yīng)該學(xué)哪個(gè)動效軟件好，還是動效軟件之間哪個(gè)更優(yōu)秀，而是你做的動效類型應(yīng)該用哪個(gè)軟件合適。

下面就根據(jù)動效的類型，來解釋它們應(yīng)該使用哪些軟件來制作。

1. 交互動效的軟件

在 UI 中，交互動效有專用的軟件，可以實(shí)現(xiàn)動效的制作和交互演示，如 Principle、Protopie、Flinto、Origami、Hype5 等等，目前主要使用 Principle 和 Protopie。

基礎(chǔ)的交互動效自然是圍繞基礎(chǔ)關(guān)鍵幀動畫實(shí)現(xiàn)的，這些軟件頁都是關(guān)鍵幀動畫工具，但它們面相的對象、場景不同，所以軟件在功能邏輯上有較大的差異。

Principle 主要適用相對短的交互流程和場景，比如實(shí)現(xiàn)一次頁面跳轉(zhuǎn)和返回，單個(gè)頁面中的組件交互，所以它不提供基礎(chǔ)的頁面過度動畫功能。

Protopie 則適用于制作相對完整的交互流程，包含多個(gè)頁面的跳轉(zhuǎn)和擬真的交互，比如酒店訂房的流程，包括選擇日期、查看酒店、選擇房型、確認(rèn)訂單等多個(gè)頁面的組合，所以包含了場景的邏輯，以及變量的條件判斷、操作功能。

這些軟件都很簡單，都是 1-2 個(gè)晚上就可以學(xué)會的，也就能明白它們的區(qū)別是什么。

它們可以實(shí)現(xiàn)出非常豐富、細(xì)膩的動效效果，能解決日常工作中 90% 以上的動效需求。

但隨著你們對關(guān)鍵幀動畫的理解加深，能區(qū)分基礎(chǔ)和進(jìn)階動效之間的區(qū)別，就會發(fā)現(xiàn)有一半以上的動效是不需要用動效軟件就能實(shí)現(xiàn)的，不管是 PPT 還是 UI 設(shè)計(jì)軟件，都有類似的功能。

比如我們前面分享過的即時(shí)設(shè)計(jì)中的“智能動畫”，就是制作關(guān)鍵幀動畫的鑰匙，足以輸出豐富的動效，下面就是使用即時(shí)完成的案例：

交互動效的軟件的核心價(jià)值，就在于這些動效是“可交互的”，用于檢驗(yàn)最真實(shí)的交互反饋效果，并根據(jù)操作快速進(jìn)行優(yōu)化和調(diào)整。

2. 交互特效/微動效/視覺動畫

交互特效、微動效、視覺動畫已經(jīng)脫離了基礎(chǔ)的關(guān)鍵幀動畫范疇，大多都無法使用動效軟件來實(shí)現(xiàn)，所以制作它們只有一個(gè)途徑，就是使用 Adobe After Effects，簡稱 AE。

AE 使用范圍最廣，功能最強(qiáng)大的動畫、特效制作工具，它可以制作任何你能想象到的效果。但是，它并不適用于一般交互動效的制作，因?yàn)?AE 做好的動效——只能看，不能交互。

原因是基礎(chǔ)交互動效的核心目標(biāo)是服務(wù)于交互的反饋，視頻的自動播放和你真實(shí)的操作感受完全是兩碼事，遑論 AE 需要耗費(fèi)幾倍的時(shí)間才能完成和一般動效軟件相同的交互效果。

但為什么還要用 AE？

因?yàn)檫@些非常規(guī)的關(guān)鍵幀動畫只有它能做，不是想不想用的問題，而是沒的選（類似 Motion 那些小眾特效工具不考慮）……

所以要不要用 AE 做動效，就是先考慮基礎(chǔ)關(guān)鍵幀動畫能不能是實(shí)現(xiàn)，做不了的話，我們才打開 AE 進(jìn)行制作。而 AE 可以實(shí)現(xiàn)的效果和操作就無窮無盡了，需要像學(xué)習(xí) PS 合成一樣通過大量的案例教學(xué)積累。

3. 可交互原型

最后可交互原型的應(yīng)用上，會包含一些簡單的交互效果，但主要判斷的標(biāo)準(zhǔn)是這個(gè)可交互的精準(zhǔn)度要到哪一級。

最簡單的可交互原型就是只有頁面的跳轉(zhuǎn)，一些操作的步驟和效果可以直接通過設(shè)計(jì)好的界面取代，比如登錄頁面賬號輸入使用默認(rèn)和輸入完兩個(gè)做好的頁面進(jìn)行跳轉(zhuǎn)示意，那么直接使用 UI 設(shè)計(jì)軟件制作就行了，再簡單搭配一些彈窗動畫、智能動畫效果進(jìn)去即可。

如果交互的精度高，需要真的實(shí)現(xiàn)輸入框內(nèi)容的錄入，還要這些輸入的內(nèi)容可以影響后續(xù)的頁面，比如個(gè)人設(shè)置頁的用戶名是你剛輸入的，那么只能使用 Protopie 或 Axure 來完成。

當(dāng)然，它們兩者之間也有差異，Protopie 說到底還是以動效為主的工具，類似對一個(gè)表格錄入大量數(shù)據(jù)，還要實(shí)現(xiàn)多條件篩選、排序并生成結(jié)果這種擬真操作是無能為力的，只能用 Axure 來制作。

雖然 Protopie 和 Axure 都能做出非常復(fù)雜的條件和邏輯，但是非必要都不推薦，因?yàn)橥耆珜?shí)現(xiàn)出來的成本非常高昂，要耗費(fèi)大量的時(shí)間但產(chǎn)出很少，嚴(yán)重拖累項(xiàng)目的進(jìn)度，所以大多數(shù)團(tuán)隊(duì)都是做好前后狀態(tài)切換的圖例進(jìn)行跳轉(zhuǎn)和說明即可。

以上就是和動效相關(guān)軟件的面相場景說明，掌握里面的所有軟件使用都是有必要的，這樣你才能真正理解動效制作上的差異，以及到底該用哪個(gè)軟件制作效率最高，能為自己節(jié)省更多的時(shí)間。

結(jié)尾

以上就是對動效相關(guān)內(nèi)容和概念的掃盲，希望可以提升大家的對動效的認(rèn)知和理解，不會再提出動效軟件哪個(gè)比較好，還是這個(gè)動效應(yīng)該用什么軟件實(shí)現(xiàn)這種無法回答的問題了。

除了常識外，動效的另一個(gè)世紀(jì)難題是就是如何實(shí)現(xiàn)出來，如果大家點(diǎn)贊和在看點(diǎn)得多的話，那么我就會在后續(xù)做更新（沒人看就不寫了嗨...）

歡迎關(guān)注作者的微信公眾號：「超人的電話亭」