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

一、動(dòng)效的類(lèi)型認(rèn)識(shí)

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

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

在工作語(yǔ)境下，動(dòng)效類(lèi)型可以 4 個(gè)大類(lèi)，下面會(huì)對(duì)它們分別展開(kāi)介紹：

1. 交互動(dòng)效
2. 交互特效 / 微動(dòng)效
3. 視覺(jué)動(dòng)畫(huà)
4. 可交互原型

1. 交互動(dòng)效

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

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

再比如針對(duì)組件交互所產(chǎn)生的動(dòng)畫(huà)反饋，比如通過(guò)滾動(dòng)展開(kāi)或放大。

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

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

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

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

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

2. 交互特效/微動(dòng)效

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

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

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

導(dǎo)航欄動(dòng)畫(huà)

Loading 動(dòng)畫(huà)

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

3. 視覺(jué)動(dòng)畫(huà)

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

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

啟動(dòng)頁(yè)動(dòng)畫(huà)

運(yùn)營(yíng)動(dòng)畫(huà)

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

4. 交互原型

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

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

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

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

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

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

二、動(dòng)效軟件的認(rèn)識(shí)

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

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

1. 交互動(dòng)效的軟件

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

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

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

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

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

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

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

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

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

2. 交互特效/微動(dòng)效/視覺(jué)動(dòng)畫(huà)

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

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

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

但為什么還要用 AE？

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

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

3. 可交互原型

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

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

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

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

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

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

結(jié)尾

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

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

作者：超人的電話(huà)亭