對于交互設(shè)計師而言，主要的交付成果物是交互原型，相對于視覺稿來說，其在視覺效果、認(rèn)識層面、感知層面要遠(yuǎn)遜于視覺稿。以至于在有些產(chǎn)品團(tuán)隊中，交互設(shè)計師與視覺設(shè)計師合二為一，在確定需求后，直接進(jìn)行制作高保真的視覺稿。

隨著設(shè)計工具逐漸遷移到sketch上，其最基本的頁面點擊跳轉(zhuǎn)卻不能實現(xiàn)，只能進(jìn)行靜態(tài)頁面展示，若設(shè)計師工作時間充足一些，或許會進(jìn)行頁面之間的流轉(zhuǎn)箭頭指示。對于那些對產(chǎn)品以及業(yè)務(wù)不是很了解的團(tuán)隊成員來說，其一直會處于懵懂狀態(tài)，甚至?xí)诒姸嗟撵o態(tài)頁面中迷失，大大降低了交互稿的可讀性。

加載動效

因此，動效設(shè)計在交互稿的邏輯展示及提高可讀性方面是很有必要的，當(dāng)然其作用也不限于交互稿的展示，還有很多富有創(chuàng)意的設(shè)計點都可以用動效設(shè)計來進(jìn)行表現(xiàn)。接下來，我們就深入的探討一下交互設(shè)計的最后一公里——動效設(shè)計。

定義

動效設(shè)計（Motion design）是通過動態(tài)效果，滿足用戶當(dāng)前心理需求，提升用戶體驗的設(shè)計過程。從定義來看，滿足用戶心理需求與提升產(chǎn)品的用戶體驗，是動效設(shè)計的兩大目標(biāo)。滿足用戶心理需求是對交互設(shè)計的完善與補(bǔ)充，包括引導(dǎo)用戶操作、對用戶的操作進(jìn)行反饋等；提升產(chǎn)品的用戶體驗是交互設(shè)計的升華，包括減少用戶在使用過程中的不適感，增強(qiáng)產(chǎn)品的操作流暢度，提升產(chǎn)品的氣質(zhì)。

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

作用

從動效設(shè)計的定義延伸來講，動效設(shè)計的作用主要體現(xiàn)在兩個方面，一方面是操作功能，包括幫助引導(dǎo)、展示層級、高效反饋；另一方面是情感功能，增強(qiáng)用戶體驗，包括流暢過度、增強(qiáng)操作、升華體驗。

動效設(shè)計的操作功能是對用戶需求的滿足以及操作的反饋，讓用戶操作流程成為一個銜接緊密流暢的閉環(huán)。幫助引導(dǎo)與展示層級都有利于用戶易懂、易操作，幫助用戶快速理解頁面主次關(guān)系以及操作方式等；高效反饋是對用戶操作完成后的相應(yīng)反饋，無論操作的成功與失敗，都應(yīng)該給與用戶明確的結(jié)果并引導(dǎo)用戶接下來的操作。

動效設(shè)計的情感功能是動效設(shè)計所體現(xiàn)出來的產(chǎn)品氣質(zhì)，無論流暢過渡，還是增強(qiáng)操作、升華體驗都是在為產(chǎn)品氣質(zhì)的塑造而添磚加瓦。

但是，現(xiàn)實中很多設(shè)計師將動效設(shè)計作為交互設(shè)計的附屬工作，很少投入精力去關(guān)注產(chǎn)品動效，導(dǎo)致項目開發(fā)人員采用產(chǎn)品系統(tǒng)的底層控件來完成產(chǎn)品的轉(zhuǎn)場、加載動效等。這樣的動效效果會與設(shè)計風(fēng)格、產(chǎn)品氣質(zhì)有所偏差，顯得較為突兀、另類；這樣的動效設(shè)計無勝于有，只會為產(chǎn)品減分。

要想做好產(chǎn)品體驗，動效設(shè)計需要引起交互設(shè)計師足夠的重視，那么什么樣的動效設(shè)計才是一個合格動效設(shè)計呢？

要求

作為交互設(shè)計的最后一個環(huán)節(jié)，合格的動效作品要滿足一定的要求，這里作者給出了五大要求。

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

1、流暢

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

2、充分考慮開發(fā)成本

在公司中做的任何項目都是基于時間、人力資源等多方面的條件下來開展的，因此，任何一個動效設(shè)計的開發(fā)都要考慮項目的投入與產(chǎn)出比。設(shè)計師應(yīng)該站在項目團(tuán)隊的角度來審視交互動效，只有與項目成員達(dá)成一致，才能保證動效實現(xiàn)的效果。否則，你的動效設(shè)計只會停留在設(shè)計階段，不能落實到項目中。

3、性能與響應(yīng)度

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

在滿足動效的基本要求后，你的動效作品才有可能落實到產(chǎn)品中，那么接下來我們來討論一下動效設(shè)計的高階要求。

4、克制

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

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

產(chǎn)品的動效與用戶的操作相互交替出現(xiàn)，動效出現(xiàn)在用戶界面上的頻率會大大增加。對用戶來說，最好的動效是讓用戶感受不到動效的存在，過度設(shè)計有可能會將用戶的注意力吸引到動效上，而忽略頁面要表達(dá)的內(nèi)容與功能，造成操作流程上的割裂。因此，對動效的功能屬性的準(zhǔn)確表達(dá)要大于或遠(yuǎn)大于其美觀效果的表現(xiàn)。

5、自然

自然是高階要求中最難把握的一點。參照現(xiàn)實環(huán)境的物體物理運(yùn)動特點，用戶會將現(xiàn)實生活中的運(yùn)動感受帶入到具體的動效過程，若動效不符合用戶運(yùn)動感受的動效，會給人怪異的情感。因此，不同的動效節(jié)奏和形式，會給用戶帶來不同的體驗。例如，在加載過程中的加速運(yùn)動要比勻速運(yùn)動與減速運(yùn)動的的體驗好。

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

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

類型

從不同的維度進(jìn)行分析，動效設(shè)計類型有不同的分類結(jié)果。有的設(shè)計師根據(jù)產(chǎn)品業(yè)務(wù)進(jìn)行分類：動效設(shè)計可分為轉(zhuǎn)場動效、操作引導(dǎo)與反饋類、內(nèi)容呈現(xiàn)類以及情感體驗類四類。

根據(jù)動效出現(xiàn)的時機(jī)與作用，本人將動效大致分為四類，分別是品牌類動效、引導(dǎo)類動效、轉(zhuǎn)場類動效、反饋類動效。

通常，品牌類動效出現(xiàn)在開機(jī)頁面。從狹義上來說，品牌類動效指的是產(chǎn)品的logo動畫，將產(chǎn)品或公司的品牌形象特色進(jìn)行準(zhǔn)確傳達(dá)，如谷歌logo動畫；從廣義上來說，品牌類動效是產(chǎn)品中統(tǒng)一、獨特能夠與其他產(chǎn)品產(chǎn)生差異化的動效設(shè)計，甚至能夠上升至產(chǎn)品的“隱形logo”的地位，如蘋果的解鎖動效、MD中的FAT按鈕動效等。

Google動效（來源Dribbble）

有些產(chǎn)品的品牌類動效的風(fēng)格會遺傳給產(chǎn)品的其他動效設(shè)計，使產(chǎn)品的設(shè)計風(fēng)格與動效特點上保持一致。

引導(dǎo)類動效一般出現(xiàn)在引導(dǎo)頁面或入場動效之后，引起用戶注意或引導(dǎo)用戶進(jìn)行操作，從而減少用戶困惑，如APP的引導(dǎo)頁等。引導(dǎo)類動效還包括頁面元素動畫、圖標(biāo)動效，已引起用戶的注意，進(jìn)行操作。

菜單動效

轉(zhuǎn)場類動效又可細(xì)分為離場類動效與入場類動效，二者是相向而生，主要功能是頁面層級展示以及流暢過渡。離場動效是頁面中元素的離開，入場動效是頁面元素的進(jìn)入，二者占據(jù)著動效設(shè)計的絕大部分，對整個產(chǎn)品形象的塑造起著重要作用，同時在效果上要更加注意克制的設(shè)計要求。

不同復(fù)雜度的動效用戶驚喜度與使用時長的關(guān)系

復(fù)雜度高的動效會急劇拉升用戶的驚喜度，但是，隨著時間的推移，驚喜度會逐步降低，在用戶使用的中后期，復(fù)雜的動效往往會引起用戶的反感，影響用戶操作。復(fù)雜度低的動效設(shè)計在用戶驚喜度方面是潛移默化的影響，當(dāng)用戶逐漸熟悉與適應(yīng)產(chǎn)品的動效節(jié)奏，其驚喜度會逐漸上升，最終保持在較高的水平。

反饋類動效是指用戶在操作后頁面給出的操作反饋提示動效，是銜接用戶操作與頁面跳轉(zhuǎn)的過渡效果。反饋動效可細(xì)分為實時反饋動效與整體反饋動效。在反饋類動效中，設(shè)計師最熟悉的動效是加載動效，其是對用戶點擊一下載的反饋，同時銜接了離場動效與入場動效，使用戶的才做反饋更加順暢，避免中間出現(xiàn)斷層。

原則

根據(jù)牛頓的三大運(yùn)動定律，我們可以得出以下結(jié)論：1、現(xiàn)實環(huán)境下，物體總是做加速和減速運(yùn)動；2、運(yùn)動物體在停止時，總會在停止點兩側(cè)做搖擺運(yùn)動，最終因摩擦力而停止。在使用產(chǎn)品的過程中，用戶會不自主的將在現(xiàn)實中對物體運(yùn)動的感知經(jīng)驗，映射到相應(yīng)的動效設(shè)計，以檢測動效的合理性。因此，在動效設(shè)計中，運(yùn)動的物體也要符合現(xiàn)實環(huán)境的運(yùn)動規(guī)律，才能與用戶的感知相匹配。

在動效設(shè)計中，設(shè)計師要遵循牛頓力學(xué)三定律，考慮到重力、摩擦力、慣性等因素，并將這些因素體現(xiàn)在動效的表現(xiàn)上。相較于不符合現(xiàn)實環(huán)境的運(yùn)動物體，遵循現(xiàn)實環(huán)境的動效會更有感染力，能夠提升用戶體驗。

動效設(shè)計脫胎于動畫，根據(jù)動畫的設(shè)計原則，并結(jié)合動效的具體場景，在進(jìn)行動效設(shè)計時，除了要遵循前文的物理原則，還要遵循一定的表現(xiàn)原則。

根據(jù)自身經(jīng)驗，以及網(wǎng)上對動效設(shè)計原則的探討，筆者將動效設(shè)計的原則歸納如下：

1、預(yù)備動作

預(yù)備動作是動效開始時都有一個反向的蓄勢動作，例如我們起跳時都會先下蹲，然后才會起跳。預(yù)備動作是為了獲得更大的起始速度，預(yù)備動作的時長與幅度決定了起始速度以及相應(yīng)的運(yùn)動距離。因此，預(yù)備動作的幅度要與最終的動效形成相應(yīng)的映射，使其前后匹配，才會給出符合用戶心理預(yù)期的動效結(jié)果。

預(yù)備動作

2、緩動（緩入緩出）

緩動是用來模擬現(xiàn)實、傳遞情感的，包括緩入、緩出兩個方面，是元素在運(yùn)動過程中的速度關(guān)系，也是元素運(yùn)動的基本狀態(tài)。緩入是加速過程，緩出是減速過程，在整個過程中，元素的運(yùn)動節(jié)奏與位置可以預(yù)期，用戶可以提前對運(yùn)動結(jié)束后的運(yùn)動做好心理準(zhǔn)備。元素運(yùn)動的速度變化對用戶情緒有一定的影響，例如，對于加載過程，進(jìn)度條的加速加載肯定比勻速加載和減速加載的體驗要好。

緩動

3、動作跟隨

跟隨動作也是模擬現(xiàn)實的一種表現(xiàn)手法，體現(xiàn)了運(yùn)動的不完全一致性。同時，動作跟隨也能體現(xiàn)頁面元素的層級與分組關(guān)系。高優(yōu)先級的的內(nèi)容，作為頁面的主要元素首先移動，次要元素與模塊，依次跟隨進(jìn)行移動。動作跟隨一方面體現(xiàn)了頁面元素的歸屬，另一方面讓運(yùn)動的節(jié)奏更加舒展且有層次，不至于出現(xiàn)同時移動，分不清先后主次的情況。

動作跟隨

4、形變

形變也是模擬現(xiàn)實的一種表現(xiàn)方式，對運(yùn)動元素的屬性進(jìn)行烘托與體現(xiàn)，包括材質(zhì)、速度等。形變越夸張，越體現(xiàn)材質(zhì)的彈性或運(yùn)動的快速；形變越小，越體現(xiàn)材質(zhì)的堅硬或速度緩慢。另外，預(yù)備動作中的幅度也包含形變屬性。形變中要遵循一個原則，就是元素的體積要保持一致或大體一致，不能有較大的偏差，否則動效的銜接上會有跳動。

形變

5、慣性起止

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

慣性起止

6、有始有終

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

如下案例中，元素的進(jìn)場是左側(cè)滑入，同時伴隨透明度的變化，這樣的入場動效才符合用戶認(rèn)知，不會突然出現(xiàn)與消失，只是元素在畫面內(nèi)外的移動與變化。同時，也呼應(yīng)了流暢要求。

有始有終

7、運(yùn)動節(jié)奏

可以說，運(yùn)動節(jié)奏是一種用戶的直觀感受，而且是動效設(shè)計的靈魂。差的運(yùn)動節(jié)奏提升到好的動效節(jié)奏是很容易的，只要滿足動效的原則與要求，就可以實現(xiàn)好的動效設(shè)計。但是，舒服的動效設(shè)計就沒有那么容易了，需要設(shè)計師對現(xiàn)實事物進(jìn)行細(xì)心的觀察，進(jìn)而對其概括與提煉，并進(jìn)行合理的藝術(shù)表現(xiàn)（例如夸張）。最終，使其符合用戶心底認(rèn)知且契合用戶在當(dāng)下場景的心理訴求。

Principl中的時間與運(yùn)動關(guān)系控制器

運(yùn)動節(jié)奏不僅僅是運(yùn)動的快與慢，還包括運(yùn)動的形式、物體的形變，以及所體現(xiàn)出來的受力等等，是這些物理屬性合理交替的的表現(xiàn)形式。合理的運(yùn)動節(jié)奏對動效的表現(xiàn)具有十分重要的意義，能夠增強(qiáng)動效的美感與韻律。運(yùn)動節(jié)奏的控制體現(xiàn)在時間與距離兩個維度，所有的運(yùn)動元素都要在這兩個維度上相互協(xié)調(diào)與匹配。

在動效設(shè)計中，動效的設(shè)計原則并不是單一出現(xiàn)的，而是相互結(jié)合，達(dá)到符合現(xiàn)實情況，滿足用戶心理預(yù)期。同時，這些原則也不是一層不變的，在某些設(shè)計中會在形式上進(jìn)行夸張或特意打破既有的預(yù)定，給用戶意外與驚喜。

表達(dá)方式

動效的核心是幀動畫，就是一幀幀的動畫串聯(lián)起來形成的動畫效果。幀動畫的關(guān)鍵就是K幀，K幀包括順序K幀與節(jié)點K幀兩種。順序K幀是指根據(jù)動效的運(yùn)動順序，對每一個細(xì)節(jié)上的變化進(jìn)行K幀，然后，工具軟件會將關(guān)鍵幀之間的頁面變化形成補(bǔ)間動畫，進(jìn)而完成動效的制作。

節(jié)點K幀是將動效變化中的每一個關(guān)鍵節(jié)點進(jìn)行打幀，然后關(guān)鍵幀之間完成細(xì)節(jié)變化的進(jìn)行K幀，最終也是通過補(bǔ)間動畫完成動效設(shè)計。實際上順序K幀也是節(jié)點K幀的一種，都是對動效的變化進(jìn)行K幀，不同之處在與，順序K幀的密度要遠(yuǎn)大于節(jié)點K幀，有點類似繪畫中的起稿與細(xì)節(jié)刻畫。

對于不同屬性的設(shè)計工具，其采用的表達(dá)方式也不一樣；對于不同的設(shè)計師，在同一種工具上的表達(dá)方式一不盡相同。對于工具的使用，本人較為熟悉的是AE與Principle，這兩款動效軟件的特長，幾乎可以涵蓋當(dāng)前所有的動效設(shè)計。

對于AE，可以采用順序K幀，也可以采用節(jié)點K幀與順序K幀相結(jié)合的方式，來實現(xiàn)動效設(shè)計。這得益于AE強(qiáng)大的時間軸功能。對于Principle而言，更多的是采用節(jié)點K幀，因為principle的關(guān)鍵幀功能較弱，同時表達(dá)的動效細(xì)節(jié)不如AE細(xì)膩，因此只能做進(jìn)行節(jié)點K幀。另外在Principle中插入關(guān)鍵幀較為復(fù)雜，對后續(xù)的關(guān)鍵幀有很大的影響，因此，principle只適合節(jié)點K幀。

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

后記

在高速發(fā)展二十年后的今天，互聯(lián)網(wǎng)產(chǎn)品早已擺脫以往簡單粗暴的功能堆疊的設(shè)計方式，進(jìn)入到體驗為王的時代。在當(dāng)前AI大行其道，VR、AR層出不窮的時代，作為產(chǎn)品情感的重要表達(dá)方式，動效設(shè)計是每個設(shè)計師應(yīng)該掌握的設(shè)計技能。

在數(shù)字化產(chǎn)品的世界里，每一個細(xì)微的交互動作都承載著設(shè)計師的匠心獨運(yùn)。然而，當(dāng)我們在談?wù)摻换ピO(shè)計時，往往只關(guān)注于界面的布局、信息的層級，卻忽略了一個至關(guān)重要的元素——動效設(shè)計。今天，就讓我們一起探討動效設(shè)計在交互稿中的重要作用，以及它如何提升設(shè)計的可讀性和吸引力。

首先，動效設(shè)計在交互稿的邏輯展示中發(fā)揮著至關(guān)重要的作用。它不僅僅是一種裝飾，更是連接各個頁面、元素之間的橋梁。通過精心設(shè)計的動效，我們可以清晰地展示用戶操作的流程、頁面的跳轉(zhuǎn)關(guān)系以及元素的變化狀態(tài)，幫助團(tuán)隊成員更好地理解產(chǎn)品的功能和操作流程。這種直觀的展示方式，使得交互稿不再是一個靜態(tài)的展示品，而是一個可以“活”起來的產(chǎn)品原型。

其次，動效設(shè)計在提高交互稿的可讀性方面也具有顯著的優(yōu)勢。對于那些對產(chǎn)品以及業(yè)務(wù)不是很了解的團(tuán)隊成員來說，靜態(tài)的交互稿往往難以讓他們快速理解產(chǎn)品的功能和操作流程。而通過動效設(shè)計，我們可以將復(fù)雜的操作流程簡化為一系列流暢、自然的動作，讓用戶在操作中自然而然地理解產(chǎn)品的功能和特點。同時，動效設(shè)計還可以突出顯示重要的信息和元素，引導(dǎo)用戶的注意力，提高交互稿的易讀性和易用性。

除此之外，動效設(shè)計還具有無限的創(chuàng)意空間。它不僅可以用于展示交互稿的邏輯關(guān)系和操作流程，還可以用于表達(dá)設(shè)計師的創(chuàng)意和想法。通過精心設(shè)計的動效，我們可以將產(chǎn)品的特點和優(yōu)勢以更加生動、有趣的方式呈現(xiàn)給用戶，增強(qiáng)用戶的參與感和體驗感。這種創(chuàng)意性的表達(dá)方式，不僅可以讓交互稿更加生動有趣，還可以提升產(chǎn)品的品牌形象和競爭力。

然而，在實際工作中，我們發(fā)現(xiàn)很多交互設(shè)計師在交付成果物時，往往只提供了靜態(tài)的交互原型，而忽略了動效設(shè)計的重要性。這主要是因為隨著設(shè)計工具逐漸遷移到Sketch等軟件上，最基本的頁面點擊跳轉(zhuǎn)等動效難以實現(xiàn)，導(dǎo)致設(shè)計師在制作交互原型時只能選擇靜態(tài)展示。但是，這并不意味著我們應(yīng)該放棄動效設(shè)計。相反，我們應(yīng)該積極探索新的設(shè)計工具和技術(shù)手段，將動效設(shè)計融入到交互原型中，讓設(shè)計更加生動、有趣。

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

鏈接: https://pan.baidu.com/s/19y3Lp189jBoAbMtG9yLBwQ 密碼: x5qr