什么是交互動效

用戶與界面進行交流互動時以動效的形式進行信息傳達。用戶與產品交流過程中，信息的傳遞是雙向的——用戶向系統發出操作指令，系統接收信號后，系統發出的信號以動效或其他用戶可識別的視覺形式傳遞給用戶 ，從而實現用戶與系統的雙向互動。交互動效是指具有交互屬性的動效設計，發生于交互操作之后。

交互動效的作用

通過交互動效可以有效地進行信息傳遞并實現用戶與產品的實時交流。同時動效虛擬現實的時空感、營造界面空間的真實性，使用戶在交互的過程中感受到操作的合理性，從而降低界面使用的學習成本。除此之外，動效設計也能夠彰顯產品品牌特性與差異化。

交互動效對產品的作用可以分為三個層次——

首先，實用性是第一層次，交互動效的實用性與其使用場景相關聯。常見的動效使用場景包括轉場、加載、引導、反饋等，不同場景的動效的作用與目標有所不同，具體會在后文詳細介紹給大家；其次，交互動效的認知性是第二層次，其幫助系統更有效地傳達信息；最后，審美性是認知性和實用性基礎上的升華，其最能體現產品的品牌屬性，是情感化設計的有效切入點，也是動效評價的最高標準。

實用性 – 提升產品易用性

交互動效的核心功能是傳達信息并闡釋界面跳轉之間的邏輯，幫助用戶更好的和產品進行信息互動。交互動效的實用性需要根據場景來區分，分別有轉場動效、反饋動效、加載動效、引導動效四種最常見的場景：

轉場動效。轉場動效是指從一個界面過渡到另一個界面的過程。轉場動效幫助用戶理解界面間的層級關系，也給用戶方位感和空間感。通過轉場動效用戶可以更清晰地了解產品的界面框架、邏輯架構，以及界面和元素之間的空間關系并隨時感受界面和元素的空間變化。

轉場動效常見的變化形式包括位移、變形、旋轉、縮放，下圖為您展示幾種常見的轉場形式：

反饋動效。反饋動效是用戶進行某個操作之后，系統以動態的形式向用戶傳達信息的過程。通過反饋動效用戶可以了解系統的運行狀態，使用戶操作移動應用反饋結果更加可視化，以此可以方便用戶的操縱。

加載動效。加載動效常用于應用系統還在運行狀態的場景，其主要的目的是利用動效的表現形式降低用戶的等待感。如下圖的 Bilibili 加載動效，延緩用戶等待的同時強調品牌形象。

引導動效。引導用戶操作的動效是引導動效，常用在新手引導。引導動效的主要目的是通過運動的元素來吸引用戶注意，達到引導用戶操作的目的，如下圖美團商品頁的紅包動效：

認知性 – 更有效地傳達信息

動效的認知性是指動效傳達信息的功能，通過動效的形式來虛擬用戶生活經驗中的物體運動狀態，從而降低用戶使用產品的學習成本。動效滿足用戶的心智模型，尤其在新的產品和功能設計中這一點尤為重要。下圖是華為手機充電時的動效，利用運動的圓點模擬電流進行充電的動效。

動效的審美性-提升產品品牌

1. 時間與速率體現運動物體的質感與性格

動效設計的兩個核心參數是運動時間和運動速率，時間與曲線影響用戶對動效的感知度、也表現了動效的質量和性格。因此，動效的時間、速率是提示產品品牌差異化的關鍵因素。

1）運動時間

元素變換時，速度要適度，既不能太慢避免用戶等待，也不能太快導致用戶無法及時識別信息。界面中最優的動效時長是 200-500ms，而手機界面中最合適的時長是 200-300ms。

運動時間的長短可以體現物體運動的性格和質感，從而影響整個產品的品牌調性。運動時間越少，運動越敏捷越能傳達出一種效率感；時間越多，運動越遲緩越傳達出穩重感。

2）運動速率和緩動曲線

動效的運動速率是表現動效質感的另一個重要因素，動效設計中常用“位移 – 時間”運動曲線來表達運動速率：橫軸表示時間，縱軸表示在一個方向上的位移。

在現實生活環境中物體的運動都遵循著物理規律，帶有阻力的緩動曲線可以營造真實、自然的感覺。可以通過調節動效的緩動曲線來模仿真實物理世界的這些運動狀態，從而表現運動主體的質感。

常用的緩動曲線有標準曲線、減速運動曲線、加速運動曲線、彈跳運動曲線四種類型，緩動曲線也可以組合使用。

標準曲線（緩入緩出）

開始和結束處為靜止，沒有加速和減速。標準曲線比較適用于運動主體均在界面中的動效，例如卡片移動、選項卡切換、圖片縮放、加載動效等：

減速運動曲線（緩出）

運動主體從最高速開始，并逐漸減小的速度即為減速曲線。這個動效的出現場景常常代表運動主體進入屏幕的時候：

加速運動曲線

速度從 0 開始，逐漸加速完成運動的曲線稱之為加速曲線。這種運動速度形式一般用于對象離開屏幕的動效：

彈跳運動曲線：

物體向一個方向加速運動，之后反向減速運動達到最高處開始繼續返回之前的方向加速運動。利用彈跳曲線模擬出小球落地的運動速度表現物體的“彈性”質感。比如手機鎖屏時，屏幕落下的彈跳：

2. 兩個品牌風格各異的案例介紹

現如今市場上很多移動應用同質化嚴重，可以通過提升交互動效的審美性來實現品牌差異化，同時給用戶一種愉快的用戶體驗。表現動效的審美功能需要考慮產品的品牌定位、也要考慮用戶的特征。

1）夸克——簡而美的品牌定位

比如夸克瀏覽器以“簡而美”的品牌定位，目標是打造簡潔、高效的搜索體驗。動效設計速度較快從而突出“高效”這一屬性；運動形式較為單一，符合極簡化的產品品牌定位，也為用戶提供一個高效快捷的使用環境；在語音識別頁，利用線條這一視覺元素突出精簡感。

2）每日故宮——莊重典雅的國風品牌

然而，以傳統與古風定位的每日故宮 APP，在動效設計上采用全然不同的風格。選取日歷、祥云、月明圓缺來作為產品的主要視覺符號，轉場動效速度遲緩，突出莊重感；轉場變化方式多采用透明度變化，宛若古代水墨畫暈染的朦朧感……產品的視覺設計與動效設計呈現婉轉優雅，展示出品牌沉穩、莊重的感覺。

結語

本文向大家介紹了交互動效的基礎概念，并從交互動效的實用性、認知性、審美性幾個方面分析其對產品體驗的影響。交互動效是用戶與產品進行信息交流的橋梁，也是提升移動應用產品情感化的重要表現形式。從品牌傳遞再到體驗優化設計師們需對動效細節進行不斷的打磨，筆者將會在下一期為大家帶來“設計師如何進行系統地交互動效設計”的分享。