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

于思航

關鍵詞：動效設計;界面設計;用戶體驗

1動效設計的概念

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

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

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

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

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

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

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

3.1反應元素界面的層級關系

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

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

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

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

3.2提供交互反饋和狀態

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

3.3引導用戶

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

3.4個性化與情感化因素

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

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

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

4.1動效應具有闡釋性

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

4.2動效應具有重點性

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

4.3動效應具有細節性

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

4.4動效應具有一致性

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

5結語

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