移動應用界面的動效設計研究

于思航

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

1動效設計的概念

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

2移動應用界面中的動效設計概念

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

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

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

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

3移動應用界面的動效設計的目的和意義

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

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

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

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

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

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

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

3.3引導用戶

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

3.4個性化與情感化因素

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

4移動應用界面動效設計原則

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

4.1動效應具有闡釋性

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

4.2動效應具有重點性

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

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

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

4.4動效應具有一致性

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

5結(jié)語

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