UI動效設計的學習，從這篇基礎掃盲開始

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

更多動效干貨：

一、動效的類型認識

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

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

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

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

1. 交互動效

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

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

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

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

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

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

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

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

2. 交互特效/微動效

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

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

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

導航欄動畫

Loading 動畫

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

3. 視覺動畫

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

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

啟動頁動畫

運營動畫

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

4. 交互原型

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

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

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

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

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

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

二、動效軟件的認識

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

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

1. 交互動效的軟件

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

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

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

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

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

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

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

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

交互動效的軟件的核心價值，就在于這些動效是“可交互的”，用于檢驗最真實的交互反饋效果，并根據操作快速進行優化和調整。

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

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

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

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

但為什么還要用 AE？

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

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

3. 可交互原型

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

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

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

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

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

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

結尾

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

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

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