于思航

關(guān)鍵詞：動(dòng)效設(shè)計(jì);界面設(shè)計(jì);用戶體驗(yàn)

1動(dòng)效設(shè)計(jì)的概念

動(dòng)效設(shè)計(jì)運(yùn)用領(lǐng)域非常廣，從電影片頭到平面設(shè)計(jì)中的字體形態(tài)動(dòng)態(tài)變化等，而各個(gè)領(lǐng)域?qū)ζ涞亩x也不一。筆者在這里把廣義的動(dòng)效設(shè)計(jì)理解為將靜態(tài)的視覺語言，通過動(dòng)畫效果的形式進(jìn)行表達(dá)的設(shè)計(jì)方式。一般認(rèn)為，動(dòng)效設(shè)計(jì)起源于20世紀(jì)五、六十年代的電影動(dòng)態(tài)片頭設(shè)計(jì)，其原理是利用人的視覺暫留現(xiàn)象，通過快速轉(zhuǎn)換圖片，在視覺上造成連續(xù)的畫面。在平面領(lǐng)域，一般將動(dòng)效設(shè)計(jì)稱之為動(dòng)態(tài)圖形設(shè)計(jì)（Motion Graphic Design），主要研究二維圖形從靜態(tài)轉(zhuǎn)為動(dòng)態(tài)的基礎(chǔ)理論和技巧。而在交互設(shè)計(jì)領(lǐng)域，動(dòng)效設(shè)計(jì)更多地被理解為動(dòng)畫設(shè)計(jì)（AnimationDesign），包含二維和三維的視覺動(dòng)態(tài)效果。

2移動(dòng)應(yīng)用界面中的動(dòng)效設(shè)計(jì)概念

在智能手機(jī)出現(xiàn)以前，用戶和設(shè)計(jì)師們對(duì)于界面操作的體驗(yàn)重視程度并不高，極少地會(huì)使用動(dòng)態(tài)的元素變化方式。在移動(dòng)互聯(lián)網(wǎng)時(shí)代，由于信息傳輸技術(shù)的提升、手機(jī)屏幕越來越大、用戶在界面上操作的時(shí)間越來越長、屏幕信息占據(jù)的用戶心智也越來越高，用戶體驗(yàn)越來越重要。在這樣的背景下，動(dòng)畫效果被越來越多地運(yùn)用在在手機(jī)界面設(shè)計(jì)中，作為一種用戶的交互反饋，提升用戶體驗(yàn)的微交互方式。例如，美國用戶體驗(yàn)領(lǐng)域?qū)＜襌achel Hinman總結(jié)了迪土尼動(dòng)畫的設(shè)計(jì)技巧，提出了適用于手機(jī)界面動(dòng)畫交互的12條原理，是較早從設(shè)計(jì)原理談手機(jī)界面動(dòng)效的專作。

動(dòng)效設(shè)計(jì)在界面設(shè)計(jì)中真正引起重視的事件就要談到2013年蘋果發(fā)布的IOS7系統(tǒng)。IOS7改變了IOS6擬物化的設(shè)計(jì)方式，轉(zhuǎn)向了扁平化設(shè)計(jì)（Flat Design），放棄了原來系統(tǒng)空間的紋理與質(zhì)感，運(yùn)用線性圖標(biāo)，并統(tǒng)一了色調(diào)，從而符合當(dāng)時(shí)提出的內(nèi)容優(yōu)先和高效操作的系統(tǒng)設(shè)計(jì)理念。相似的圖標(biāo)雖然減少了視覺認(rèn)知負(fù)荷，但是在視覺效果上較為單調(diào)，尤其是在表現(xiàn)層級(jí)變化時(shí)較為乏力。因此，蘋果保留了動(dòng)畫效果在表示狀態(tài)、增強(qiáng)操作意圖和可視化操作結(jié)果上的應(yīng)用，從而加強(qiáng)必要的視覺引導(dǎo)和振奮效果。并提出了克制、一致性、自然性和可調(diào)節(jié)性四個(gè)動(dòng)效設(shè)計(jì)的原則，以避免動(dòng)效過度吸引用戶注意力資源。

另一個(gè)對(duì)現(xiàn)在手機(jī)應(yīng)用動(dòng)效設(shè)計(jì)影響較大的是2014年安卓5.0的發(fā)布以及背后的創(chuàng)新理念原質(zhì)化設(shè)計(jì)（Material Design）的提出。原質(zhì)化設(shè)計(jì)旨在以模擬真實(shí)世界的光效、表面質(zhì)感與運(yùn)動(dòng)感設(shè)計(jì)出系統(tǒng)化的動(dòng)效與空間，從而構(gòu)成實(shí)體隱喻。原質(zhì)化設(shè)計(jì)并不是說要回到視覺效果繁復(fù)的擬物化設(shè)計(jì)，而是通過簡單的圖形、光影和運(yùn)動(dòng)讓人們聯(lián)想到真實(shí)世界的事物，從而建立用戶的熟悉度。原質(zhì)化設(shè)計(jì)對(duì)于動(dòng)效設(shè)計(jì)提出了四點(diǎn)設(shè)計(jì)期望：真實(shí)的運(yùn)動(dòng)動(dòng)作、響應(yīng)式交互、有意義的轉(zhuǎn)場與打動(dòng)用戶的細(xì)節(jié)。

谷歌與蘋果都意識(shí)到了動(dòng)效對(duì)于注意力的強(qiáng)聚焦作用。但兩家公司對(duì)于動(dòng)效設(shè)計(jì)的態(tài)度還是有差異的，蘋果強(qiáng)調(diào)克制使用動(dòng)效，從而降低動(dòng)效對(duì)內(nèi)容認(rèn)知的影響;而谷歌強(qiáng)調(diào)的是鼓勵(lì)動(dòng)效產(chǎn)生愉悅感，提高用戶主動(dòng)接受信息的興趣，并將用戶注意力引導(dǎo)至關(guān)鍵內(nèi)容上去。兩者沒有對(duì)錯(cuò)之分，還是要根據(jù)APP應(yīng)用的調(diào)性和實(shí)際場景進(jìn)行區(qū)別設(shè)計(jì)。

3移動(dòng)應(yīng)用界面的動(dòng)效設(shè)計(jì)的目的和意義

3.1反應(yīng)元素界面的層級(jí)關(guān)系

通過動(dòng)效更清晰地闡述界面層級(jí)的變化，使用戶更易于理解界面的轉(zhuǎn)場以及當(dāng)前層級(jí)與之前所處層級(jí)關(guān)系，能更輕松地定位到當(dāng)前正在進(jìn)行的工作。尤其是界面層級(jí)相對(duì)復(fù)雜、界面切換較為頻繁的應(yīng)用，更應(yīng)該重視動(dòng)效設(shè)計(jì)，增加界面與界面轉(zhuǎn)場的事件聯(lián)系和轉(zhuǎn)場的延續(xù)感，減少困擾從而提升體驗(yàn)。反應(yīng)界面層級(jí)的動(dòng)效設(shè)計(jì)是最常用的動(dòng)效，例如，IOS系統(tǒng)一直沿用的闡述層級(jí)變化的三種動(dòng)效，現(xiàn)在也已成為許多手機(jī)應(yīng)用基本動(dòng)效的設(shè)計(jì)語義范式：

1）通過橫向切換表明層級(jí)的變化。一般進(jìn)入某一級(jí)界面的子頁面是從右往左淡入，而退回父頁面是從左往右淡出。

2）通過縱向滑動(dòng)和彈出來開啟一個(gè)分支任務(wù)。在某一界面執(zhí)行分支任務(wù)操作時(shí)，一般會(huì)使用縱向彈出操作欄的方式，例如，微信聊天窗口的輸入欄的打開與收縮。

3）通過全屏縮放來強(qiáng)調(diào)內(nèi)容來源。通過全屏縮放的方式可以很好地引導(dǎo)視覺焦點(diǎn)轉(zhuǎn)移，從而將視線轉(zhuǎn)移到內(nèi)容來源項(xiàng)中。例如，IOS系統(tǒng)中打開/關(guān)閉某一APP應(yīng)用時(shí)的縮放動(dòng)效;再例如，微信朋友圈打開/關(guān)閉照片的縮放動(dòng)效。

3.2提供交互反饋和狀態(tài)

相對(duì)其他方式，動(dòng)效能夠更直觀地提供及時(shí)的反饋和交互狀態(tài)。消除用戶在等待操作生效時(shí)可能對(duì)自己和產(chǎn)品產(chǎn)生懷疑和挫敗感。例如，加載狀態(tài)、選中狀態(tài)等等。如圖1中對(duì)加載狀態(tài)欄的有趣設(shè)計(jì)，可以有效消除用戶在等待加載時(shí)的焦慮。

3.3引導(dǎo)用戶

動(dòng)效也是進(jìn)行用戶引導(dǎo)的有力工具。我們會(huì)在一些需要新用戶引導(dǎo)的場景下見到各種手勢(shì)引導(dǎo)操作引導(dǎo)，或者在版本界面更新變化較大的時(shí)候，我們也會(huì)運(yùn)用手勢(shì)動(dòng)效引導(dǎo)用戶建立界面熟悉度。因?yàn)槭褂脛?dòng)畫進(jìn)行引導(dǎo)的形式具有高效真實(shí)，易于交互的特性，用戶可以瞬間心領(lǐng)神會(huì)，大大降低學(xué)習(xí)成本和學(xué)習(xí)焦慮。

3.4個(gè)性化與情感化因素

動(dòng)效設(shè)計(jì)在界面上有著較強(qiáng)的視覺表現(xiàn)力和沖擊力，因此也是經(jīng)常被用來作為體現(xiàn)界面?zhèn)€性化和情感化設(shè)計(jì)的重要工具。例如，圖2經(jīng)典的登錄界面加入卡通形象的交互動(dòng)效，瞬間就讓原本枯燥的輸入密碼操作變得有趣起來，用戶的注意力也更集中了。此外，動(dòng)效所蘊(yùn)合的個(gè)性化與情感化語義常常也被運(yùn)用在提高用戶對(duì)于品牌的認(rèn)知度和好感度上。

4移動(dòng)應(yīng)用界面動(dòng)效設(shè)計(jì)原則

錯(cuò)誤理解蘋果與谷歌對(duì)于動(dòng)效設(shè)計(jì)的建議，就會(huì)導(dǎo)致動(dòng)效設(shè)計(jì)走向錯(cuò)誤的兩個(gè)極端，一種是為了避免犯錯(cuò)而基本棄用動(dòng)效設(shè)計(jì)，但是容易造成界面干篇一律，用戶使用容易感到枯燥乏味;而另一種則是過度炫技式地使用動(dòng)效，而忽略視覺重點(diǎn)的聚焦導(dǎo)致舍本逐末。許多設(shè)計(jì)師對(duì)于動(dòng)效設(shè)計(jì)都有自己獨(dú)到的理解，較為著名的是Ben iohnson提出的“162”原則，即一個(gè)APP中要涉及到一個(gè)開場動(dòng)效，六個(gè)引導(dǎo)動(dòng)效和兩個(gè)細(xì)節(jié)動(dòng)效。但是不同的APP應(yīng)用對(duì)于動(dòng)效的需求也不盡相同，啟用動(dòng)效設(shè)計(jì)是相當(dāng)考驗(yàn)設(shè)計(jì)師的總體把握力的。下面是筆者根據(jù)蘋果和谷歌兩家公司的界面設(shè)計(jì)指南，總結(jié)的動(dòng)效設(shè)計(jì)應(yīng)該遵循的通用原則。

4.1動(dòng)效應(yīng)具有闡釋性

動(dòng)效應(yīng)具有解釋交互的能力，如元素的空間層次關(guān)系，傳達(dá)操作的可用性和預(yù)期結(jié)果。動(dòng)效作為用戶進(jìn)入界面最先注意到的元素，應(yīng)該承擔(dān)快速幫助用戶搞清任務(wù)進(jìn)展和界面內(nèi)容的作用，增加界面使用的流暢性和操縱感。

4.2動(dòng)效應(yīng)具有重點(diǎn)性

因?yàn)橐苿?dòng)的事物天然更加聚焦注意力，動(dòng)效在產(chǎn)品界面中位于層級(jí)的最高點(diǎn)，我們應(yīng)當(dāng)正確地理解這個(gè)特點(diǎn)，而不能濫用這一點(diǎn)。也就是說，動(dòng)效只應(yīng)當(dāng)發(fā)生在用戶交互，或用戶視線聚焦的地點(diǎn)，即動(dòng)效的展示應(yīng)當(dāng)與用戶注意力關(guān)聯(lián)，不應(yīng)當(dāng)產(chǎn)生干擾用戶完成任務(wù)的情況，更不應(yīng)該出現(xiàn)無意義的轉(zhuǎn)移注意力的設(shè)計(jì)。

4.3動(dòng)效應(yīng)具有細(xì)節(jié)性

雖然從用戶感知的角度，動(dòng)效應(yīng)該是簡單地，但也需要有細(xì)節(jié)地配合，需靠考慮真實(shí)的運(yùn)動(dòng)狀態(tài)、光影效果與材質(zhì)，才能使視覺上看上去舒適、自然，不然就算很簡單的動(dòng)效缺少了細(xì)節(jié)的考量，也會(huì)令人感到突兀。

4.4動(dòng)效應(yīng)具有一致性

動(dòng)效設(shè)計(jì)只是交互設(shè)計(jì)的一部分，并不能獨(dú)立于界面而存在，因此，動(dòng)效設(shè)計(jì)需要注重視覺語言的一致性。首先，是要尊重目前業(yè)界內(nèi)對(duì)于基礎(chǔ)動(dòng)效所形成的設(shè)計(jì)慣例，尊重其對(duì)用戶養(yǎng)成的固有習(xí)慣，例如上文中提到的IOS3個(gè)基礎(chǔ)動(dòng)效（跳轉(zhuǎn)下一層及為從右往左淡入頁面，返回上一級(jí)從左往右淡入界面等）就被許多APP所沿用;其次，是要注意其傳遞的情感調(diào)性是否與其應(yīng)用的APP一致，例如，科技感較強(qiáng)的應(yīng)用多用響應(yīng)較快，視覺效果較為迅捷的動(dòng)效，而藝術(shù)繪畫類應(yīng)用經(jīng)常注重動(dòng)效的體驗(yàn)性，例如不同材質(zhì)的紙面給用戶帶來的質(zhì)感體驗(yàn)等。

5結(jié)語

動(dòng)效設(shè)計(jì)作為界面設(shè)計(jì)的視覺頂層，是指引導(dǎo)和響應(yīng)用戶操作、實(shí)現(xiàn)與用戶深度交互的重要載體。但在實(shí)際設(shè)計(jì)過程中，我們要綜合考慮界面設(shè)計(jì)的最終目標(biāo)，避免讓動(dòng)效設(shè)計(jì)過度消耗用戶注意力，而是應(yīng)該合理利用其活潑的形式，服務(wù)于關(guān)鍵信息的有效傳達(dá)?？梢灶A(yù)見的是，在用戶注意力資源越來越寶貴的趨勢(shì)下，動(dòng)效設(shè)計(jì)作為能夠有效激起用戶注意力的界面工具，在今后界面設(shè)計(jì)中的重要性和地位會(huì)越來越高。