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

一、動效的類型認識

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

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

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

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

1. 交互動效

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

如一個按鈕控件被點擊、懸浮，切換出了不同的樣式，那么這個過程就是交互動效的應用。

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

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

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

因為有相當一部分動效設計的目標，是為了品牌、運營、情感服務而不是操作反饋。比如直播中的禮物動效或者領取優(yōu)惠券時的彈窗動效等。

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

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

2. 交互特效/微動效

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

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

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

導航欄動畫

Loading 動畫

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

3. 視覺動畫

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

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

啟動頁動畫

運營動畫

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

4. 交互原型

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

雖然它屬于原型的分類，但因為這類原型既然可以交互，那當然有交互的動效，而很多人對于原型和動效的關系并沒有搞清楚。

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

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

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

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

二、動效軟件的認識

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

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

1. 交互動效的軟件

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

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

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

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

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

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

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

比如我們前面分享過的即時設計中的"智能動畫"，就是制作關鍵幀動畫的鑰匙，足以輸出豐富的動效，下面就是使用即時完成的案例：

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

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

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

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

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

但為什么還要用 AE？

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

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

3. 可交互原型

最后可交互原型的應用上，會包含一些簡單的交互效果，但主要判斷的標準是這個可交互的精準度要到哪一級。

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

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

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

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

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

結(jié)尾

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

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

作者：超人的電話亭