視覺注意機(jī)制視角下的動(dòng)效設(shè)計(jì)探析

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

一、動(dòng)效設(shè)計(jì)概念

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

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

二、動(dòng)效的屬性特征

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

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

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

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

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

三、動(dòng)效的作用

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

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

（二）減少認(rèn)知負(fù)荷

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

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

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

（三）喚醒積極情緒

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

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

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

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

四、動(dòng)效設(shè)計(jì)原則

（一）動(dòng)效設(shè)計(jì)的功能性

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

（二）動(dòng)效設(shè)計(jì)的重點(diǎn)性

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

（三）動(dòng)效設(shè)計(jì)的情感化

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

（四）動(dòng)效設(shè)計(jì)的一致性

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

五、總結(jié)

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