想學習APP的動效該如何設計的話，那就一起來欣賞這篇文章吧~

如今豐富細膩的 App 動效遍布優(yōu)秀的移動應用界面中，為用戶提供了良好的動態(tài)沉浸式體驗，動效設計在產(chǎn)品研發(fā)過程中也越來越被認可和重視。

通過本文，你將輕松了解到關于動效設計的一些必備知識：

• 為什么要設計動效？它的意義和價值是什么？
• App 動效形式有很多，如何去區(qū)分和歸類？
• 優(yōu)秀的動效有哪些實用性的指導原則？
• 動效軟件紛繁眾多，如何選擇合適的來用？

一、動效設計的必要性

1. 提升用戶體驗

設計師若只追求靜態(tài)像素的完美呈現(xiàn)，而忽略動態(tài)過程的合理表達，會導致用戶不能在視覺上覺察元素的連續(xù)變化，進而很難對新舊狀態(tài)的更替有清晰的感知。

迪士尼動畫大師乃特維克說過一句話：

動畫的一切皆在于時間點和空間幅度。

通過「時間點」和「空間幅度」的設計為用戶建立運動的可信度，即視覺上的真實感，當用戶意識到這個動作是合理的，才能更加清晰愉悅地使用產(chǎn)品。

2. 增添產(chǎn)品氣質(zhì)

未添加動效的產(chǎn)品，會帶給人一種死氣沉沉的感覺，所有內(nèi)容平鋪直敘、毫無生機，即使界面設計的很美觀，也會缺乏一種靈動細膩的氣質(zhì)。

如果把產(chǎn)品比作成美女，那么界面視覺就是美女的顏值，交互動效就是美女的肢體語言。合理的動效能將更立體、更富有關聯(lián)性的信息傳遞出去，提高產(chǎn)品的“表達能力”，增加親和力和趣味性，也利于品牌的建立。

3. 創(chuàng)造設計師優(yōu)勢

（1）降低溝通成本

設計師通過制作高保真動效 Demo 展示設計思路和創(chuàng)意，大大提高設計提案交接率，降低了設計師與開發(fā)的溝通成本，提高了動效的還原度，體現(xiàn)專業(yè)性。

（2）打造核心競爭力

在 UI 設計行業(yè)已經(jīng)趨于飽和、并且產(chǎn)品設計流程逐漸實現(xiàn)體系化和模塊化的今天，設計師如果只會利用組件重復性地“拼湊”頁面而無更多的價值產(chǎn)出，被替代的可能性將會增大。

在日常工作之余，若要為公司和團隊輸出更多的價值，動效設計能力便是交互/視覺設計師的必備技能與核心競爭力之一。

二、動效設計的類型

界面動效種類紛繁多樣，根據(jù) App 動效的作用，可以大體分為如下 6 個類型:

1. 轉(zhuǎn)場過渡

人腦灰質(zhì)會對動態(tài)事物（如：移動、形變、色變等）保持敏感，在界面中加入一些平滑舒適的過渡效果，不僅能讓界面顯得生動，更能幫助用戶理解界面前后變化的邏輯關系。

2. 層級展示

現(xiàn)實空間里，物體存在近大遠小原則，運動則會近快遠慢。當界面中的元素存在不同層級時，恰當?shù)膭有Э梢詭椭脩衾砬迩昂笪恢藐P系，以動效來體現(xiàn)整個系統(tǒng)的空間感。

3. 空間擴展

在移動端界面設計中，由于有限的屏幕空間難以承載大量的信息內(nèi)容，可以通過折疊、翻轉(zhuǎn)、縮放等形式拓展附加內(nèi)容的存儲空間，以漸進展示的方式來減輕用戶的認知負擔。

4. 聚焦關注

聚焦關注是通過元素的動作變化，提醒用戶關注特點的內(nèi)容信息。這種提醒方式不僅可以降低視覺元素的干擾，使界面更清爽簡潔，還能在用戶使用過程中，輕盈自然地吸引用戶注意力。

5. 內(nèi)容呈現(xiàn)

界面內(nèi)容元素按照一定的秩序規(guī)律逐級呈現(xiàn)，引導用戶視覺焦點走向，幫助用戶更好地感知頁面布局、層級結(jié)構(gòu)和重點內(nèi)容，同時也能讓整個流程更加豐富流暢，增添了界面的活力。

6. 操作反饋

無論是點擊、長按、拖拽、滑動等交互行為，都應該得到系統(tǒng)的即時反饋，將其以視覺或動效的方式展現(xiàn)，幫助用戶了解當前系統(tǒng)對交互過程的響應情況，為用戶帶來安全感。

三、動效設計的原則

這是一位在五年時間內(nèi)為四十多個國家和上百個頂尖機構(gòu)提供咨詢服務的動效設計師，總結(jié)出來的實用性動效設計原則，為提升產(chǎn)品體驗與可用性提供幫助。[譯者 Z Yuhan 注]

1. 緩入緩出

時效事件發(fā)生時，元素的動作應顯得自然，與用戶預期相符。

2. 偏移與延遲

加入新的界面元素或場景時，可用與表達元素之間的關系。

3. 父子關系

當界面元素較多時，可以利用時空差異創(chuàng)造出可以感知到的父子繼承關系。

4.?形變

用連貫的狀態(tài)描繪表達元素功能的改變。

5. 值變

當元素的值發(fā)生變化時，用連續(xù)動態(tài)的方式表達前后之間的關聯(lián)。

6. 遮罩

如果一個界面元素的不同的展示方式對應不同的功能，那么讓展示方式的變化過程具有連續(xù)性。

7. 覆蓋

用堆疊元素的相對位置來描述它們的扁平空間關系。

8. 復制

當新的元素從已有元素復制出來時，用連貫的方式描述其關聯(lián)關系。

9. 景深

允許用戶瞥得到非主要元素或場景。

10. 視差

當用戶滾動界面時，在平面創(chuàng)造出空間層次。

11. 翻轉(zhuǎn)

通過具有空間架構(gòu)的描述方式來表現(xiàn)新元素的產(chǎn)生與離場。

12. 滑動變焦

用連續(xù)的空間描述來引導界面元素和空間。

四、動效軟件的選擇

動效設計軟件紛繁眾多，不同軟件的側(cè)重點也各不相同，設計師可以根據(jù)項目的時間、精細度、面向?qū)ο蟮葪l件來選擇合適的軟件。下面我列舉出市面上常見的動效軟件以及各自的優(yōu)缺點，供選擇參考。

1. After Effects

AE 這款軟件知名度很高，學過設計的應該都知道，它的優(yōu)點就是強大，可以實現(xiàn)超高精度的動效，一般 UI 動效制作只用到了 AE 很小的一部分功能。缺點是門檻高，上手較困難，不能做實時交互動效。

2. Hype

Hype 號稱無代碼動效神器，像 AE 一樣使用時間軸來設置動畫。動畫效果在 PC、Mobile、Pad 端都可以直接預覽，也可以導出視頻或者 GIF。3.0 版還有物理特性和彈性曲線，可以實現(xiàn)更強大的動畫效果。

3. Principle

Principle 功能強大，界面和 Sketch 類似，被譽為 Sketch 的最佳拍檔。它主要是做少量頁面間的過渡轉(zhuǎn)場、單元素動畫等細節(jié)動效。優(yōu)點很明顯，上手快、效率高、質(zhì)感好，缺點就是不易做整套交互流程。

4. Flinto

Flinto 界面跟 Sketch 也非常相似，能夠快速實現(xiàn)各種滾動、轉(zhuǎn)場、點擊反饋等效果，適合模擬多個頁面、場景復雜的交互流程，學習成本低。缺點是復雜的動效難以實現(xiàn)，價格略貴且試用期短。

5. Framer

Framer 是一個基于 Javascript 的原型工具，能快速導入 Photoshop、Sketch 中的圖像并模擬圖層分層，支持手勢，動畫精細度高，可在手機或平板中預覽效果。缺點是需要有一定的編程基礎，上手難度較高。

6. ProtoPie

ProtoPie 是一款交互原型設計工具，支持 Mac 和 Windows 雙平臺，更加輕量級，集成的功能更吸引人，可以調(diào)用 iPhone 系統(tǒng)的陀螺儀、麥克風、羅盤、3D Touch，多種智能傳感器等等，絕對是 Windows 用戶設計師的福利。

小結(jié)

• 動效設計可以提升用戶體驗、增添產(chǎn)品氣質(zhì)，并為設計師創(chuàng)造優(yōu)勢；
• 6 種作用的動效類型：轉(zhuǎn)場過渡、層級展示、空間擴展、聚焦關注、內(nèi)容呈現(xiàn)、操作反饋；
• 12 個實用性的動效原則 ：緩入緩出、偏移與延遲、父子關系、形變、值變、遮罩、覆蓋、復制、景深、視差、翻轉(zhuǎn)、滑動變焦；
• 根據(jù)項目時間、精細度、面向?qū)ο蟮葪l件，選擇合適的工具制作動效。

到此，《Design System》系列的動效理論篇就要告一段落了，如果喜歡的話就請點個贊吧～ 你也可以關注我的公眾號「彭彭設計筆記」，我會不定期更新 UI 設計類精品文章。

最后，祝大家都能成為動效達人。

作者：彭彭

來源：微信公眾號：彭彭設計筆記。

本文由 @彭彭 授權發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載

題圖來自 Pexels ，基于 CC0 協(xié)議