如今豐富細膩的 App 動效遍布移動端優秀應用界面中，為用戶提供了良好的動態沉浸式體驗，動效設計在產品研發過程中也越來越被認可和重視。
通過本文，你將輕松了解到關于動效設計的一些必備知識：
- 究竟為什么要設計動效？它的意義和價值是什么？
- App 動效形式多種多樣，如何將它們區分和歸類？
- 優秀的動效有哪些實用性的指導原則供我們參考？
- 動效軟件紛繁眾多，如何挑選出最合適的那一款？（文末附有下載鏈接）
一、動效設計的必要性
1.提升用戶體驗
設計師若只追求靜態像素的完美呈現，而忽略動態過程的合理表達，會導致用戶不能在視覺上覺察元素的連續變化，進而很難對新舊狀態的更替有清晰的感知。
迪士尼動畫大師乃特維克說過一句話：
動畫的一切皆在于時間點和空間幅度。
通過「時間點」和「空間幅度」的設計為用戶建立運動的可信度，即視覺上的真實感，當用戶意識到這個動作是合理的，才能更加清晰愉悅地使用產品。
2.增添產品氣質
未添加動效的產品，會帶給人一種死氣沉沉的感覺，所有內容平鋪直敘、毫無生機，即使界面設計的很美觀，也會缺乏一種靈動細膩的氣質。
如果把產品比作成美女，那么界面視覺就是美女的顏值，交互動效就是美女的肢體語言。合理的動效能將更立體、更富有關聯性的信息傳遞出去，提高產品的“表達能力”，增加親和力和趣味性，也利于品牌的建立。
3.創造設計師優勢
3.1 降低溝通成本
設計師通過制作高保真動效 Demo 展示設計思路和創意，大大提高設計提案交接率，降低了設計師與開發的溝通成本，提高了動效的還原度，體現專業性。
3.2 打造核心競爭力
在 UI 設計行業已經趨于飽和、并且產品設計流程逐漸實現體系化和模塊化的今天，設計師如果只會利用組件重復性地“拼湊”頁面而無更多的價值產出，被替代的可能性將會增大。
在日常工作之余，若要為公司和團隊輸出更多的價值，動效設計能力便是交互/視覺設計師的必備技能與核心競爭力之一。
二、動效設計的類型
界面動效種類紛繁多樣，根據 App 動效的作用，可以大體分為如下 6 個類型:
1.轉場過渡
人腦灰質會對動態事物（如:移動、形變、色變等）保持敏感。在界面中加入一些平滑舒適的過渡效果，不僅能讓界面顯得生動，更能幫助用戶理解界面前后變化的邏輯關系。
2.層級展示
現實空間里，物體存在近大遠小原則，運動則會近快遠慢。當界面中的元素存在不同層級時，恰當的動效可以幫助用戶理清前后位置關系，以動效來體現整個系統的空間感。
3.空間擴展
在移動端界面設計中，由于有限的屏幕空間難以承載大量的信息內容，可以通過折疊、翻轉、縮放等形式拓展附加內容的存儲空間，以漸進展示的方式來減輕用戶的認知負擔。
4.聚焦關注
聚焦關注是通過元素的動作變化，提醒用戶關注特點的內容信息。這種提醒方式不僅可以降低視覺元素的干擾，使界面更清爽簡潔，還能在用戶使用過程中，輕盈自然地吸引用戶注意力。
5.內容呈現
界面內容元素按照一定的秩序規律逐級呈現，引導用戶視覺焦點走向，幫助用戶更好地感知頁面布局、層級結構和重點內容，同時也能讓整個流程更加豐富流暢，增添了界面的活力。
6.操作反饋
無論是點擊、長按、拖拽、滑動等交互行為，都應該得到系統的即時反饋，將其以視覺或動效的方式展現，幫助用戶了解當前系統對交互過程的響應情況，為用戶帶來安全感。
三、動效設計的原則
這是一位在五年時間內為四十多個國家和上百個頂尖機構提供咨詢服務的動效設計師，總結出來的實用性動效設計原則，為提升產品體驗與可用性提供幫助。[譯者 Z Yuhan 注] 原英文鏈接
3.1 緩入緩出
時效事件發生時，元素的動作應顯得自然，與用戶預期相符。
3.2 偏移與延遲
加入新的界面元素或場景時，可用于表達元素之間的關系。
3.3 父子關系
當界面元素較多時，可以利用時空差異創造出可以感知到的父子繼承關系。
3.4 形變
用連貫的狀態描繪表達元素功能的改變。
3.5 值變
當元素的值發生變化時，用連續動態的方式表達前后之間的關聯。
3.6 遮罩
如果一個界面元素的不同的展示方式對應不同的功能，那么讓展示方式的變化過程具有連續性。
3.7 覆蓋
用堆疊元素的相對位置來描述它們的扁平空間關系。
3.8 復制
當新的元素從已有元素復制出來時，用連貫的方式描述其關聯關系。
3.9 景深
允許用戶看得到非主要元素或場景（前景或背景）。
3.10 視差
當用戶滾動界面時，在平面創造出空間層次。
3.11 翻轉
通過具有空間架構的描述方式來表現新元素的產生與離場。
3.12 滑動變焦
用連續的空間描述來引導界面元素和空間。
四、動效軟件的選擇
動效設計軟件紛繁眾多，不同軟件的側重點也各不相同，設計師可以根據項目的時間、精細度、面向對象等條件來選擇合適的軟件。下面我列舉出市面上常見的動效軟件以及各自的優缺點，供選擇參考。
1.After Effects
AE 這款軟件知名度很高，學過設計的應該都知道，它的優點就是強大，可以實現超高精度的動效，一般 UI 動效制作只用到了 AE 很小的一部分功能。缺點是門檻高，上手較困難，不能做實時交互動效。
2.Hype
Hype 號稱無代碼動效神器，像 AE 一樣使用時間軸來設置動畫。動畫效果在 PC、Pad、Mobile 端都可以直接預覽，也可以導出視頻或者 GIF。3.0 版還有物理特性和彈性曲線，可以實現更強大的動畫效果。
3.Principle
Principle 功能強大，界面和 Sketch 類似，被譽為 Sketch 的最佳拍檔。它主要是做少量頁面間的過渡轉場、單元素動畫等細節動效。優點很明顯，上手快、效率高、質感好，缺點就是不易做整套交互流程。
4.Flinto
Flinto 界面跟 Sketch 也非常相似，能夠快速實現各種滾動、轉場、點擊反饋等效果，適合模擬多個頁面、場景復雜的交互流程，學習成本低。缺點是復雜的動效難以實現，價格略貴且試用期短。
5.Framer
Framer 是一個基于 Javascript 的原型工具，能快速導入 Photoshop、Sketch 中的圖像并模擬圖層分層，支持手勢，動畫精細度高，可在手機或平板中預覽效果。缺點是需要有一定的編程基礎，上手難度較高。
6.ProtoPie
Protopie 是一款交互原型設計工具，支持 Mac 和 Windows 雙平臺，更加輕量級，集成的功能更吸引人，可以調用 iPhone 系統的陀螺儀、麥克風、羅盤、3D Touch，多種智能傳感器等等，絕對是 Windows 用戶設計師的福利。
小結
動效設計可以提升用戶體驗、增添產品氣質，并為設計師創造優勢；
6 種作用的動效類型：轉場過渡、層級展示、空間擴展、聚焦關注、內容呈現、操作反饋；
12 個實用性的動效原則：緩入緩出、偏移與延遲、父子關系、形變、值變、遮罩、覆蓋、復制、景深、視差、翻轉、滑動變焦；
根據項目時間、精細度、面向對象等條件，選擇合適的工具制作動效。
到此，《Design System》系列的動效理論篇就要告一段落了，如果喜歡的話就點個贊～你也可以關注我的公眾號「彭彭設計筆記」，我會不定期更新 UI 設計類精品文章。
最后，已為大家整理好了各個軟件的官方下載鏈接，請收下～
After Effects 官網下載地址
Hype 官網下載地址
Principle 官網下載地址
Flinto 官網下載地址
Framer 官網下載地址
ProtoPie 官網下載地址
