互動設計的最後一公裡(一)——動效設計

動效設計在交互稿的邏輯展示及提高可讀性方面是很有必要的，當然其作用也不限於交互稿的展示，還有很多富有創意的設計點都可以用動效設計來進行表現。

對於互動設計師而言，主要的交付成果物是交互原型，相對於視覺稿來說，其在視覺效果、認識層面、感知層面要遠遜於視覺稿。以至於在有些產品團隊中，互動設計師與視覺設計師合二為一，在確定需求後，直接進行製作高保真的視覺稿。

隨著設計工具逐漸遷移到sketch上，其最基本的頁面點擊跳轉卻不能實現，只能進行靜態頁面展示，若設計師工作時間充足一些，或許會進行頁面之間的流轉箭頭指示。

對於那些對產品以及業務不是很了解的團隊成員來說，其一直會處於懵懂狀態，甚至會在眾多的靜態頁面中迷失，大大降低了交互稿的可讀性。

加載動效

因此，動效設計在交互稿的邏輯展示及提高可讀性方面是很有必要的，當然其作用也不限於交互稿的展示，還有很多富有創意的設計點都可以用動效設計來進行表現。

接下來，我們就深入的探討一下互動設計的最後一公裡——動效設計。

定義

動效設計（Motion design）是通過動態效果，滿足用戶當前心理需求，提升用戶體驗的設計過程。從定義來看，滿足用戶心理需求與提升產品的用戶體驗，是動效設計的兩大目標。

• 滿足用戶心理需求是對互動設計的完善與補充，包括引導用戶操作、對用戶的操作進行反饋等；
• 提升產品的用戶體驗是互動設計的升華，包括減少用戶在使用過程中的不適感，增強產品的操作流暢度，提升產品的氣質。

現實中，很多人對動效設計的了解不夠深入，往往以偏概全，甚至有人覺得動效就是所謂的Loading，在這種情況下，對動效設計的作用理解就更加不準確了。

作用

從動效設計的定義延伸來講，動效設計的作用主要體現在兩個方面：

• 一方面是操作功能，包括幫助引導、展示層級、高效反饋；
• 另一方面是情感功能，增強用戶體驗，包括流暢過度、增強操作、升華體驗。

動效設計的操作功能是對用戶需求的滿足以及操作的反饋，讓用戶操作流程成為一個銜接緊密流暢的閉環。幫助引導與展示層級都有利於用戶易懂、易操作，幫助用戶快速理解頁面主次關係以及操作方式等。

高效反饋是對用戶操作完成後的相應反饋，無論操作的成功與失敗，都應該給與用戶明確的結果並引導用戶接下來的操作。

動效設計的情感功能是動效設計所體現出來的產品氣質，無論流暢過渡，還是增強操作、升華體驗都是在為產品氣質的塑造而添磚加瓦。

但是，現實中很多設計師將動效設計作為互動設計的附屬工作，很少投入精力去關注產品動效，導致項目開發人員採用產品系統的底層控制項來完成產品的轉場、加載動效等。這樣的動效效果會與設計風格、產品氣質有所偏差，顯得較為突兀、另類。這樣的動效設計無勝於有，只會為產品減分。

要想做好產品體驗，動效設計需要引起互動設計師足夠的重視，那麼什麼樣的動效設計才是一個合格動效設計呢？

要求

作為互動設計的最後一個環節，合格的動效作品要滿足一定的要求，這裡作者給出了五大要求。

其中前三點是基本要求，是完成一個動效的必要條件。

1. 流暢

流暢是是一個合格動效的基本要求，結合動效的過渡流暢的作用，有一些設計師總結了三個維度——不卡、不閃、不跳，這「三不」要求是實現過渡流暢的重要方面，無論是緩入緩出還是加載動畫，流暢都是動效的最基本的要求。

2. 充分考慮開發成本

在公司中做的任何項目都是基於時間、人力資源等多方面的條件下來開展的。因此，任何一個動效設計的開發都要考慮項目的投入與產出比。

設計師應該站在項目團隊的角度來審視交互動效，只有與項目成員達成一致，才能保證動效實現的效果。否則，你的動效設計只會停留在設計階段，不能落實到項目中。

3. 性能與響應度

不管如何強調動效設計的重要性，但是互動設計的重點永遠是交互稿，這一點是不會變的。因此，動效設計的要充分考慮到設備的性能與限制，只有在保證功能完善與健全的前提下來進行動效設計，同時要做到動效文件越小越好。

在滿足動效的基本要求後，你的動效作品才有可能落實到產品中，那麼接下來我們來討論一下動效設計的高階要求。

4. 克制

具有克制屬性不一定是好的動效設計，然而好的動效設計一定具有克制屬性。動效設計不是設計炫技的舞臺，帶著腳鐐跳舞仍然適用。

克制是對動效效果的限制包括簡潔適度、不增加用戶操作、不阻礙用戶、不超過時限（操作動效最優區間0.5s-1s）。

產品的動效與用戶的操作相互交替出現，動效出現在用戶界面上的頻率會大大增加。對用戶來說，最好的動效是讓用戶感受不到動效的存在，過度設計有可能會將用戶的注意力吸引到動效上，而忽略頁面要表達的內容與功能，造成操作流程上的割裂。

因此，對動效的功能屬性的準確表達要大於或遠大於其美觀效果的表現。

5. 自然

自然是高階要求中最難把握的一點，參照現實環境的物體物理運動特點，用戶會將現實生活中的運動感受，帶入到具體的動效過程，若動效不符合用戶運動感受的動效，會給人怪異的情感。

因此，不同的動效節奏和形式，會給用戶帶來不同的體驗。例如：在加載過程中的加速運動，要比勻速運動與減速運動的的體驗好。

除了運動事件的速度形式，運動的節奏與方式，也是影響動效設計自然屬性的關鍵因素。例如：在小人的行走過程中，左臂與右腿是同時向前的，如果不一致，就會給用戶不自然、不真實的感覺。

動效的上述五點要求是貫穿動效設計的整個過程，同時也是檢驗動效優劣的重要維度。

類型

從不同的維度進行分析，動效設計類型有不同的分類結果。有的設計師根據產品業務進行分類，動效設計可分為：轉場動效、操作引導與反饋類、內容呈現類以及情感體驗類四類。

根據動效出現的時機與作用，本人將動效大致分為四類，分別是品牌類動效、引導類動效、轉場類動效、反饋類動效。

1. 品牌類動效

通常，品牌類動效出現在開機頁面。

• 從狹義上來說，品牌類動效指的是產品的logo動畫，將產品或公司的品牌形象特色進行準確傳達，如谷歌logo動畫；
• 從廣義上來說，品牌類動效是產品中統一、獨特能夠與其他產品產生差異化的動效設計，甚至能夠上升至產品的「隱形logo」的地位，如蘋果的解鎖動效、MD中的FAT按鈕動效等。

Google動效（來源Dribbble）

有些產品的品牌類動效的風格會遺傳給產品的其他動效設計，使產品的設計風格與動效特點上保持一致。

2. 引導類動效

引導類動效一般出現在引導頁面或入場動效之後，引起用戶注意或引導用戶進行操作，從而減少用戶困惑，如APP的引導頁等。引導類動效還包括頁面元素動畫、圖標動效，已引起用戶的注意，進行操作。

菜單動效

3. 轉場類動效

轉場類動效又可細分為：離場類動效與入場類動效，二者是相向而生，主要功能是頁面層級展示以及流暢過渡。

離場動效是頁面中元素的離開，入場動效是頁面元素的進入，二者佔據著動效設計的絕大部分，對整個產品形象的塑造起著重要作用，同時在效果上要更加注意克制的設計要求。

不同複雜度的動效用戶驚喜度與使用時長的關係

複雜度高的動效會急劇拉升用戶的驚喜度，但是，隨著時間的推移，驚喜度會逐步降低。在用戶使用的中後期，複雜的動效往往會引起用戶的反感，影響用戶操作。複雜度低的動效設計在用戶驚喜度方面是潛移默化的影響，當用戶逐漸熟悉與適應產品的動效節奏，其驚喜度會逐漸上升，最終保持在較高的水平。

4. 反饋類動效

反饋類動效是指用戶在操作後頁面給出的操作反饋提示動效，是銜接用戶操作與頁面跳轉的過渡效果。反饋動效可細分為：實時反饋動效與整體反饋動效。

在反饋類動效中，設計師最熟悉的動效是加載動效，其是對用戶點擊一下載的反饋，同時銜接了離場動效與入場動效，使用戶的才做反饋更加順暢，避免中間出現斷層。

原則

根據牛頓的三大運動定律，我們可以得出以下結論：

1. 現實環境下，物體總是做加速和減速運動；
2. 運動物體在停止時，總會在停止點兩側做搖擺運動，最終因摩擦力而停止。在使用產品的過程中，用戶會不自主的將在現實中對物體運動的感知經驗，映射到相應的動效設計，以檢測動效的合理性。

因此，在動效設計中，運動的物體也要符合現實環境的運動規律，才能與用戶的感知相匹配。

在動效設計中，設計師要遵循牛頓力學三定律，考慮到重力、摩擦力、慣性等因素，並將這些因素體現在動效的表現上。相較於不符合現實環境的運動物體，遵循現實環境的動效會更有感染力，能夠提升用戶體驗。

動效設計脫胎於動畫，根據動畫的設計原則，並結合動效的具體場景，在進行動效設計時，除了要遵循前文的物理原則，還要遵循一定的表現原則。

根據自身經驗，以及網上對動效設計原則的探討，筆者將動效設計的原則歸納如下：

1. 預備動作

預備動作是動效開始時都有一個反向的蓄勢動作，例如：我們起跳時都會先下蹲，然後才會起跳。預備動作是為了獲得更大的起始速度，預備動作的時長與幅度決定了起始速度以及相應的運動距離。

因此，預備動作的幅度要與最終的動效形成相應的映射，使其前後匹配，才會給出符合用戶心理預期的動效結果。

預備動作

2. 緩動（緩入緩出）

緩動是用來模擬現實、傳遞情感的，包括緩入、緩出兩個方面，是元素在運動過程中的速度關係，也是元素運動的基本狀態。

緩入是加速過程，緩出是減速過程，在整個過程中，元素的運動節奏與位置可以預期，用戶可以提前對運動結束後的運動做好心理準備。元素運動的速度變化對用戶情緒有一定的影響，例如：對於加載過程，進度條的加速加載肯定比勻速加載和減速加載的體驗要好。

緩動

3. 動作跟隨

跟隨動作也是模擬現實的一種表現手法，體現了運動的不完全一致性。同時，動作跟隨也能體現頁面元素的層級與分組關係。

高優先級的的內容，作為頁面的主要元素首先移動，次要元素與模塊，依次跟隨進行移動。動作跟隨一方面體現了頁面元素的歸屬，另一方面讓運動的節奏更加舒展且有層次，不至於出現同時移動，分不清先後主次的情況。

動作跟隨

4. 形變

形變也是模擬現實的一種表現方式，對運動元素的屬性進行烘託與體現，包括材質、速度等。形變越誇張，越體現材質的彈性或運動的快速；形變越小，越體現材質的堅硬或速度緩慢。

另外，預備動作中的幅度也包含形變屬性。形變中要遵循一個原則，就是元素的體積要保持一致或大體一致，不能有較大的偏差，否則動效的銜接上會有跳動。

形變

5. 慣性起止

慣性起止則完全是牛頓力學定律中的慣性定律的體現，任何物體運動方式改變時，物體都有保持現有運動方式的慣性。在運動的開始與結束時，慣性也是要表現的狀態。慣性的表達可以通過位置、形變等來體現速度變化的劇烈程度。

慣性起止

6. 有始有終

有始有終是動效設計過程中的銜接原則，體現在元素的入場與離場。有始有終的表現方式有生長、逆生長、透明度變化、位移等多種。在入場與轉場動效中，透明度變化與位移等的變化方式較為常見，加載動效或頁面內的入場動效則以生長與逆生長的方式為主。

如下案例中，元素的進場是左側滑入，同時伴隨透明度的變化，這樣的入場動效才符合用戶認知，不會突然出現與消失，只是元素在畫面內外的移動與變化。同時，也呼應了動效設計的流暢原則。

有始有終

7. 運動節奏

可以說，運動節奏是一種用戶的直觀感受，而且是動效設計的靈魂。差的運動節奏提升到好的動效節奏是很容易的，只要滿足動效的原則與要求，就可以實現好的動效設計。

但是，舒服的動效設計就沒有那麼容易了，需要設計師對現實事物進行細心的觀察，進而對其概括與提煉，並進行合理的藝術表現（例如誇張）。最終，使其符合用戶心底認知且契合用戶在當下場景的心理訴求。

Principl中的時間與運動關係控制器

運動節奏不僅僅是運動的快與慢，還包括運動的形式、物體的形變，以及所體現出來的受力等等，是這些物理屬性合理交替的的表現形式。合理的運動節奏對動效的表現具有十分重要的意義，能夠增強動效的美感與韻律。

運動節奏的控制體現在時間與距離兩個維度，所有的運動元素都要在這兩個維度上相互協調與匹配。

在動效設計中，動效的設計原則並不是單一出現的，而是相互結合，達到符合現實情況，滿足用戶心理預期。同時，這些原則也不是一層不變的，在某些設計中會在形式上進行誇張或特意打破既有的預定，給用戶意外與驚喜。

表達方式

動效的核心是幀動畫，就是一幀幀的動畫串聯起來形成的動畫效果。幀動畫的關鍵就是K幀，K幀包括順序K幀與節點K幀兩種。順序K幀是指根據動效的運動順序，對每一個細節上的變化進行K幀，然後，工具軟體會將關鍵幀之間的頁面變化形成補間動畫，進而完成動效的製作。

節點K幀是將動效變化中的每一個關鍵節點進行打幀，然後關鍵幀之間完成細節變化的進行K幀，最終也是通過補間動畫完成動效設計。實際上順序K幀也是節點K幀的一種，都是對動效的變化進行K幀，不同之處在與，順序K幀的密度要遠大於節點K幀，有點類似繪畫中的起稿與細節刻畫。

對於不同屬性的設計工具，其採用的表達方式也不一樣。對於不同的設計師，在同一種工具上的表達方式一不盡相同。對於工具的使用，本人較為熟悉的是AE與Principle，這兩款動效軟體的特長，幾乎可以涵蓋當前所有的動效設計。

對於AE，可以採用順序K幀，也可以採用節點K幀與順序K幀相結合的方式，來實現動效設計，這得益於AE強大的時間軸功能。

對於Principle而言，更多的是採用節點K幀，因為principle的關鍵幀功能較弱，同時表達的動效細節不如AE細膩，因此只能做進行節點K幀。另外在Principle中插入關鍵幀較為複雜，對後續的關鍵幀有很大的影響，因此，principle只適合節點K幀。

此處，將不再對設計工具進行展開闡述，接下來兩篇文章，將分別探討兩款設計工具在不同的動效設計上的優劣勢、注意事項以及技巧，同時進行一些實踐操作，並將工程文件分享給大家。

後記

在高速發展二十年後的今天，網際網路產品早已擺脫以往簡單粗暴的功能堆疊的設計方式，進入到體驗為王的時代。在當前AI大行其道，VR、AR層出不窮的時代，作為產品情感的重要表達方式，動效設計是每個設計師應該掌握的設計技能。

註：下面的連結是文中所涉及的動效案例的工程文件，有需要的朋友可以自行下載！

連結: https://pan.baidu.com/s/19y3Lp189jBoAbMtG9yLBwQ 密碼: x5qr

#專欄作家#

弘毅道，公眾號：UIUX設計工作坊，人人都是產品經理專欄作家。關注to B業務，尤其擅長後臺程序界面設計，包括需求溝通，原型設計以及後期的設計評審等。

本文原創發布於人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基於CC0協議