于思航

關(guān)鍵詞：動效設(shè)計;界面設(shè)計;用戶體驗

1動效設(shè)計的概念

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3.3引導(dǎo)用戶

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

3.4個性化與情感化因素

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

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

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

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

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

4.2動效應(yīng)具有重點性

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

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

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

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

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

5結(jié)語

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