文/賈軒（廣東工業(yè)大學(xué)）

一、動效設(shè)計概念

動效設(shè)計源于影視動畫中的視覺語言，將靜態(tài)圖形圖像加入時間軸的概念，呈現(xiàn)動態(tài)的視覺效果。在平面設(shè)計領(lǐng)域，稱之為動態(tài)圖形設(shè) 計（Motion Graphic Design）[1]。隨著智能手機的出現(xiàn)，設(shè)計師和用戶對于體驗的重視逐漸提高，動態(tài)效果被越來越多的應(yīng)用到手機界面中，在界面的信息引導(dǎo)、交互反饋以及品牌風(fēng)格上提升用戶體驗。

動效設(shè)計的歷史伴隨著交互設(shè)計的發(fā)展。在20 世紀60 年代，隨著計算機的發(fā)展，交互設(shè)計首先以人機交互的形式出現(xiàn)。1984 年，Bill Moggridge 將軟件與用戶界面設(shè)計結(jié)合，提出了“交互設(shè)計”的概念。隨后在 Bill Verplank 的幫助下更名為“交互設(shè)計”。同年，蘋果公司發(fā)布的 Macintosh 中出現(xiàn)動效，但由于技術(shù)問題，使用的場景十分有限[2]。迪士尼動畫《The illusion of life：Disney animation》中提出了動畫的12 個原則，包括：擠壓與拉升、預(yù)備動作、表演與呈像方式、連貫動作法與關(guān)鍵動作法、跟隨動作與重疊動作、漸快與減慢、弧形運動軌跡、附屬動作、時間控制、夸張、吸引力、深度、平衡及重量感。通過這些基礎(chǔ)原則表現(xiàn)物理世界的自然狀態(tài)，在時間維度的基礎(chǔ)上通過視覺的變化體現(xiàn)動畫的藝術(shù)感，激發(fā)人的情緒感受，對動效設(shè)計影響深遠。隨著移動應(yīng)用設(shè)備的性能不斷提升，好的動效可以讓用戶在意識不到的情況下順暢完成任務(wù)，伴隨UI 出現(xiàn)，動效設(shè)計逐漸發(fā)展起來。

二、動效的屬性特征

動態(tài)圖形源于基礎(chǔ)的視覺圖形根據(jù)時間進行屬性變化，以此呈現(xiàn)出不同時間的視覺效果。由于圖形的屬性不同，相互組合達到的視覺效果成千上萬，再結(jié)合時間的維度，動態(tài)效果也千變?nèi)f化，呈現(xiàn)出不同的視覺效果。但所有復(fù)雜的變化都可以歸納為位置、形狀、空間、色彩這幾種基本圖形屬性的變化。總體來說，動態(tài)效果需要不斷創(chuàng)新，省去多余冗雜的圖形變化，使界面簡潔明了，避免因動效元素帶來的視覺信息的負載加深用戶理解和認知的負擔(dān)。也需要易于操作，交互上及時反饋。同時應(yīng)具有吸引力，動效設(shè)計需要打動人心，凸顯品牌。

（1）位置是最基本的動效屬性，在信息界面中劃分成 X 軸、Y 軸以及 Z 軸坐標，通過運動前位置到運動后的位置進行逐幀播放以達到視覺上的位置移動效果。X 軸以及 Y軸的變化是二維平面位移，當(dāng)增加Z 軸后，就構(gòu)建了數(shù)字界面中的空間深度。不同層級頁面切換時左右滑動、交互控件的上下滑動等動效樣式，都暗示了產(chǎn)品層級結(jié)構(gòu)以及空間結(jié)構(gòu)，讓用戶在使用過程中能夠清晰的知道自己所處的位置，不會在使用過程中迷失。

（2）形狀的變化包括了大小縮放、不規(guī)則變化，主要表現(xiàn)在圖形本身的運動中，從無到有再到無的過程，通常應(yīng)用在界面元素出場和退場的動效中，用于吸引用戶注意力等。但不管是何種變化方式，都需要符合產(chǎn)品所傳達給用戶的品牌氣質(zhì)，完整、統(tǒng)一、和諧的動效才能夠提升用戶體驗，直觀的傳遞信息。

（3）色彩變化指的是畫面中運動圖形顏色和透明度的變化，色彩的變化能夠快速引起用戶的注意，在一些復(fù)雜系統(tǒng)中，色彩的變化通過快速告知用戶任務(wù)進程或狀態(tài)的變化。例如控件按鈕的普通狀態(tài)和點擊態(tài)在色彩上會有變化，用戶在點擊某個按鈕后，所選按鈕顏色改變以反饋用戶實時狀態(tài) 。

（4）速度屬性是指各個圖形屬性在變化過程中的變化速度。主要可歸納為減速、勻速、加速三種運動速率。速率樣式常使用減速或加速來表現(xiàn)圖形變化的視覺節(jié)奏以及變化效率，非勻速的速率也更加符合自然界的運動規(guī)律，恰當(dāng)和諧的速度能夠提升用戶對產(chǎn)品在頁面切換、圖形變化過程中的流暢感提升用戶體驗。

三、動效的作用

（一）引導(dǎo)注意

在漫長的生物進化過程中，人眼對動態(tài)的事物具有天生的敏感度。視覺注意機制作為注意機制的一種，是指個體在外界刺激中快速屏蔽和過濾掉其他刺激信息，選擇最重要和最有用的視覺信息的過程，以幫助自己完成當(dāng)前任務(wù)目標[3]。注意的選擇能夠減少大腦對外部復(fù)雜環(huán)境的大量信息進行加工，轉(zhuǎn)而節(jié)約大腦資源，只對少量有用和目標信息進行認知加工。有研究者認為，視覺選擇性注意按照是否發(fā)生外顯的眼動（注視方向的改變），可分為外源性注意和內(nèi)源性注意。個體通過理解個人意愿和需求進行自上而下的注意驅(qū)動，獲取完成任務(wù)所需要的外在信息。而外源性注意指客觀刺激吸引注意，當(dāng)有顯著刺激特征的信息從其他刺激物中凸顯出來時，注意會被該刺激信息所吸引，這也反映出注意的被動性和易變性。在數(shù)字界面中通過動態(tài)的視覺信息元素優(yōu)先吸引用戶注意力，利用動畫效果來吸引人的眼球，達到將使用者的注意力引導(dǎo)至用戶需要關(guān)注的地方，可以大大降低了用戶的學(xué)習(xí)成本和搜索成本，增加用戶的視覺搜索效率。

（二）減少認知負荷

在《認知心理學(xué)》一書中指出，中樞能量理論認為，注意是人能夠用來執(zhí)行任務(wù)的數(shù)量有限的能量或者資源[4]。決定注意的關(guān)鍵取決于資源分配方案，本身也受到幾個因素的制約：受制于喚醒的刺激因素進行加工所需要的能量、個體當(dāng)時的主觀意愿和對完成目標任務(wù)需要能量的評價。其中，喚醒的刺激因素也取決于認知主體對刺激的選擇，當(dāng)客觀刺激是人感興趣或能夠解決需求的信息、困難度較高的任務(wù)操作等，都會引起較長時間的注意和思考。用戶在進行任務(wù)的過程中，會分配注意資源對信息進行搜索，當(dāng)目標信息越難找用戶搜尋的時間就越長，注意資源消耗的就越多。通過將靜態(tài)的元素轉(zhuǎn)換成動態(tài)的信息，提高注意喚醒的刺激能量，用戶能夠更加快速的注意識別信息并完成任務(wù)，也就減少了完成任務(wù)所需要的能量，對注意搜索資源消耗就越少。

認知負荷可劃分為內(nèi)在認知負荷、外在認知負荷和相關(guān)認知負荷三種類型。內(nèi)在認知負荷是指由本身信息內(nèi)容所導(dǎo)致的個體理解困難，例如 B 端產(chǎn)品對非行業(yè)用戶而言，本身的領(lǐng)域知識就構(gòu)成了學(xué)習(xí)困難。另外信息的呈現(xiàn)方式以及用戶對信息的解碼也會造成認知負荷。當(dāng)認知負荷干擾了信息的解碼和自動化時，就會產(chǎn)生外在認知負荷。而外在認知負荷的降低，早期成為了交互設(shè)計重點關(guān)注的目標。相關(guān)認知負荷是指當(dāng)個體完成目標任務(wù)有剩余的工作記憶資源時，這部分資源會投入到對交互規(guī)則的理解和認知構(gòu)建上，方便未來能夠快速識別記憶新的信息內(nèi)容。對于外在認知負荷，就涉及用戶對產(chǎn)品信息結(jié)構(gòu)以及視覺信息解碼過程中所產(chǎn)生的理解成本。結(jié)構(gòu)層動效通過頁面跳轉(zhuǎn)的位移變化，表現(xiàn)出產(chǎn)品各個頁面之間的位置關(guān)系以及空間層級關(guān)系。頁面左右滑動、上下滑動暗示了產(chǎn)品頁面結(jié)構(gòu)的信息邏輯。在頁面跳轉(zhuǎn)的任務(wù)節(jié)點上，也應(yīng)該引導(dǎo)用戶理解信息，盡量的減輕對信息理解的內(nèi)在認知負荷，而用戶對于理解任務(wù)以及信息呈現(xiàn)方式所消耗的外在認知負荷，則應(yīng)該盡可能地降低。動效設(shè)計應(yīng)該促使用戶理解、完成對認知圖示構(gòu)建，將認知資源主要集中在對任務(wù)內(nèi)容的分配上，逐漸從對任務(wù)的控制加工轉(zhuǎn)向自動加工。

動效由文本、圖形、聲音、影像等信息要素組成，這些信息通過人的視覺和聽覺感官通道進入。以視知覺為例，視知覺分為兩個階段，視知覺早期，視覺信息被視網(wǎng)膜的感光細胞獲取，投像到視網(wǎng)膜上形成短暫停留，視知覺晚期，是對圖像進行識別，將圖像的特征進行提取和分析，對應(yīng)到視覺心理模型中，與已有的認知圖式進行匹配，將新的信息已有的認知結(jié)構(gòu)進行整合。

（三）喚醒積極情緒

積極情緒是指正向情緒。許多學(xué)者針對積極情緒給出過具體詳細的描述，如羅素提出“當(dāng)事情進展順利時，你產(chǎn)生的那種想要微笑的好的感受就是積極情緒”[5]。Fredrickson 認為“積極情緒是對個人有意義的事情的獨特即時反應(yīng)，是一種暫時的愉悅”[6]。動效設(shè)計根據(jù)作用可以劃分為引導(dǎo)性動效、反饋性動效和提示性動效。引導(dǎo)型動效在界面中通過顯著的視覺刺激快速獲取用戶注意，指導(dǎo)用戶完成任務(wù)。反饋型動效則是在用戶與產(chǎn)品交互過程中的每一次點擊、滑動等操作后快速給予相應(yīng)的反饋，讓用戶得知操作結(jié)果。提示型動效則是在進程中給用戶相關(guān)信息的提示，例如，加載動效通過富有節(jié)奏律動的視覺畫面安撫用戶因等待而產(chǎn)生的焦慮感，減少用戶對于等待時間的時距感知。所有的動效時長都不宜過于漫長或短暫，過于漫長則會讓用戶對產(chǎn)品失去耐心，太過短暫會讓用戶產(chǎn)生無趣的視覺感。通過有效的動效引導(dǎo)、反饋和提示，告知用戶在任務(wù)過程中的進程以及狀態(tài)，幫助用戶快速且順利的完成任務(wù)，讓用戶產(chǎn)生需求被及時響應(yīng)、被滿足認知，從而產(chǎn)生積極情緒。

（四）增加任務(wù)效率

動效通過正面情緒的喚醒能夠增強用戶注意，促進認知加工，對工作記憶也有不同程度的影響。研究表明，注意加工會影響情緒加工[7]。情緒刺激會促使更多注意投入到刺激中，從而占據(jù)信息知覺上的優(yōu)先地位。它們無論作為知覺目標還是提示線索，都能增強注意，促進認知加工。已有研究顯示，情緒信息的愉悅度(valence)和喚醒度(arousal) 對認知過程具有調(diào)節(jié)作用，同時，個體的情緒狀態(tài)也會影響注意分配，注意分配也對情緒的產(chǎn)生和調(diào)節(jié)發(fā)揮著作用。盡管有許多研究報道，情緒加工可以自動進行。

多媒體學(xué)習(xí)認知-情感理論指出，個體的認知過程和情感是不可分割、相互影響的，積極正向的情感、動機可以驅(qū)使個體投入更多的工作記憶資源來進行信息加工，反之則會起到阻礙作用[8]。這也就意味著，動效所引發(fā)的積極情緒能夠幫助用戶理解和認知產(chǎn)品，在完成任務(wù)的過程中，也能夠投入足夠的工作記憶資源來完成目標，提升用戶體驗。另一方面，Johnson 等人通過隱性注意朝向任務(wù)研究了積極情緒注意靈活性的關(guān)系。研究發(fā)現(xiàn)，具有積極情緒的被試比有中性情緒和消極情緒的被試的注意靈活性更強，能夠更快的從提示刺激物轉(zhuǎn)移到目標刺激物上，也就說明，積極情緒能夠促進注意轉(zhuǎn)移，幫助自身更快的從非目標線索上解脫，提高搜索效率。

四、動效設(shè)計原則

（一）動效設(shè)計的功能性

動效需要體現(xiàn)產(chǎn)品結(jié)構(gòu)以及交互方式，具有解釋交互的能力。產(chǎn)品的信息結(jié)構(gòu)中，不同頁面之間的關(guān)系需要通過動效的位移表現(xiàn)出的空間以及位置，暗示用戶頁面層級關(guān)系，讓用戶對當(dāng)前頁面所處的整個產(chǎn)品頁面結(jié)構(gòu)的位置有所感知，減少用戶對產(chǎn)品結(jié)構(gòu)理解的認知負荷，傳達操作的可用性和預(yù)期結(jié)果，保證用戶在使用過程中不會迷失。用戶通過點擊、滑動等操作與系統(tǒng)發(fā)生交互時，通過動態(tài)圖形將操作與視覺連接，為用戶進行引導(dǎo)、反饋和提示，建立了交互的連貫性，完善交互鏈路。

（二）動效設(shè)計的重點性

動態(tài)的信息天然能夠快速從靜態(tài)的刺激信息中突出，吸引用戶注意。但界面中的動效設(shè)計需要克制，應(yīng)該衡量好頁面信息層級，將最重要的信息進行動態(tài)效果突出，方便用戶快速尋找。并且，動效吸引注意力，也應(yīng)該與注意力相關(guān)聯(lián)，在用戶交互或者視線關(guān)注點發(fā)生，貼合用戶任務(wù)和場景目標。不符合用戶目標的動效只會干擾用戶任務(wù)，迫使用戶產(chǎn)生無效的注意轉(zhuǎn)移，降低效率。

（三）動效設(shè)計的情感化

動效及時反饋也能夠激發(fā)用戶在完成任務(wù)后的積極情緒。用戶在完成任務(wù)后，能夠快速反饋任務(wù)狀態(tài)，提高產(chǎn)品的流暢感和操作感，提升用戶體驗。并且通過有趣生動的動態(tài)效果，能夠減少用戶等待的焦慮感，減少用戶的時距感知，緩解負面情緒。

（四）動效設(shè)計的一致性

動效涉及產(chǎn)品的結(jié)構(gòu)層、框架層和表現(xiàn)層，同屬于交互和視覺的設(shè)計范疇，并非獨立的內(nèi)容存在，因此也需要保持交互規(guī)范和視覺語言的一致性。首先，需要符合行業(yè)的一致性，即需要遵從行業(yè)中其他競品已有基礎(chǔ)動效設(shè)計的慣例，尊重用戶已經(jīng)養(yǎng)成的操作習(xí)慣和認知，避免用戶了解新的動效方式而導(dǎo)致的認知成本增加。其次，遵循產(chǎn)品內(nèi)部的動效一致性，相同的交互內(nèi)容、相同的信息結(jié)果，也應(yīng)該適用一致的動效樣式，一方面可以減少用戶認知相同屬性信息的理解成本，另一方面，也可以減少對產(chǎn)品內(nèi)部動效樣式種類的記憶成本，就研發(fā)而言，也減少了開發(fā)成本。最后，要契合產(chǎn)品品牌調(diào)性，與品牌所傳達給用戶的產(chǎn)品氣質(zhì)保持一致。

五、總結(jié)

本文重點從動效的定義與發(fā)展歷史、動效屬性維度、動效的作用幾個方面進行分析。結(jié)合認知心理學(xué)中的視覺注意機制、認知負荷理論以及積極心理學(xué)中的積極情緒等，對動效的作用進行拆分，動效能夠引導(dǎo)注意、減少認知負荷、喚醒積極情緒并提升任務(wù)效率。提出動效設(shè)計需突出功能性、重點性與情感化，希望能為動效設(shè)計實踐提供新的理論依據(jù)和設(shè)計思路。