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

摘要：自從2007年蘋果發布了iPhone，開啟了智能手機終端的浪潮，隨之而來的移動應用蓬勃發展，而應用界面的設計就越來越被消費者和手機使用者看重。本文著重研究了移動應用界面中的動效設計，探尋了動效設計從電影和動畫的源起到手機應用界面設計應用的變遷，通過對比蘋果和谷歌兩家公司不同的動效設計理念，綜合分析提出了界面設計師們應該遵循的動效設計通用原則，為移動應用設計師和用戶提供了合適的動效設計參考。

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

一、動效設計的概念

Motion Graphic Design – 動態圖形設計，簡稱Motion Design，就是本文題目中的動效設計。運效設計既要符合平面設計的原則，也要兼顧視聽語言設計標準，是通過視頻或動畫等創作成動態影像的藝術表現形式。動效設計最早提出于20世紀50年代，它注重實踐性，現在還沒有權威的定義。而其形式和內容非常廣泛，除了字體和版面的運動變化，還囊括了電影片頭和界面中的動態圖像等。從廣義上講，動效設計的真正意義在于對事情發生的過程和內在機理的描述和說明，而不僅僅是表面形式的圖形動態實現。用戶體驗設計師Hazwani和Bernard在2016年發表在雜志《Interaction Design》上的文章“Motion with Meaning： Semantic Animation in Interface Design”提出用戶界面設計在1970年代只是一系列沒有任何過渡的靜態PDF。盡管早期有一些值得注意的優秀動效設計的例子可以追溯到最初的蘋果電腦Macintosh，但由于當時計算機的圖形功能有限，有效的動效設計仍然鳳毛麟角。20世紀80年代后，隨著計算機功能的日益強大，動效的制作越來越便捷，開始被頻繁地使用，而設計的效果也更加華麗。動效設計也不僅僅局限于傳統的電視節目，而且在各種媒體中得到了廣泛的應用。例如電影《功夫熊貓》就是動效設計在電影中應用非常成功的典范，動效和實景的交融展現，為觀眾沒呈現了一個多彩多姿的視聽盛宴。隨著2007年iPhone帶動下的智能手機極速發展改變了人類生活方式，也為動效設計開辟了一個嶄新的應用領域。交互設計大師Alan Cooper 在《About Face 3 交互設計精髓》中總結，因為可以闡述事物間的關系，動效是一種強大工具，而這個工具的作用在屏幕較小的手機上尤為突出，設計者可以充分發揮內容隱藏的功效。而且動效可以幫助設計者梳理清新舊內容的關系以及激發設計者對新內容的創作。除了在手機應用設計上的顯著功效，動效在網站設計上的應用也非常有效，它可以高效的引導用戶瀏覽頁面。除了在電影中的應用，結合著物聯網和大數據的發展，動效也廣泛應用于互動營銷的應用中。而互動營銷結合了動效設計的概念之后，形式變得更加新穎，也讓客戶能更高效的了解產品。圖文有了動感設計之后大大提升了吸引力，而且動效設計的互動性和特殊性是其他藝術形式無法取代的。綜上所述，動效設計不但為電影，網站和移動終端應用界面提供了音像，動畫及解說，更是實現了在符合了用戶心理的基礎上的表達、解釋和交流功能。隨著動感處理軟件和硬件顯示設備的性能提升，動效設計的發展將更加豐富和成熟。

二、移動終端應用設計的易用性

（一）視覺元素設計

從自然進化出眼睛之后，視覺信息就占據了絕大部分的信息采集。而人類用視覺信息作為接收信息手段的比例更高（高達80%），而從信息傳達的效率角度來講，信息的結構和視覺元素能夠有機的結合可以極大的提高信息傳達和接受的準確和高效性。在這個結合過程中，視覺元素之間的關系處理至關重要，歸納為以下三點：1、辨識一個視覺元素的最基本的特征是它的可識別性，而形狀、尺寸、色彩構成了元素重要的三大要素。元素所傳達的信息必須是準確可靠的，可以讓用戶正確理解所包含的意義，這就要求合理有機的搭配三要素而達到吸引用戶的作用并能準確高效的傳遞信息。2、而兩個或多個元素間形狀、尺寸、顏色的對比是元素設計的第二個關鍵點。除了對元素做靜態對比之外，可以借助元素之間動態的變化比對使元素之間的異同更具有吸引力，也可以增加各個不同元素的辨識性。如蘋果手表中圖標大小和形狀分區設計，并結合動態交互控制，使得用戶選擇和操作更高效和流暢，而產品也更具有吸引力。3、第三個關鍵點是元素的空間位置， 是通過對二維平面內元素間的對比產生三維的空間感。通過對元素空間位置的擺放設計而產生視覺上的三維層次結構，這樣更接近物體在現實中的視覺效果，使用戶可以清晰準確的區分元素前后及層級結構關系。而這種對元素空間位置的特殊設計，跳出了二維空間的平面束縛，增加了界面的沉浸感和現實感。

（二）交互設計邏輯層面的動效

動效設計可以用作移動應用中交互設計邏輯的輔助說明，這樣可以有效地降低學習成本，并且能簡化引導流程，可以在用戶體驗中達到事半功倍的效果。這個功能也是動效設計的一個主要應用功能，而其中典型的設計形式包括動畫轉場、下拉刷新、界面消隱等。在動畫轉場設計形式中，轉到下一級的頁面是從右側面疊加進入，而返回上一級的頁面的時候，頁面會從右側漸漸隱去，這種對頁面翻轉，滑動，漸隱等動效可以有效地營造出一種現實世界的三維空間感，使用戶能快速有效理解頁面之間的從屬和層級關系;在下拉動刷新中，用戶通過向下滑動屏幕來實現更新內容的功能，下拉區域的旋轉設計代表正在加載的狀態，動態滑動屏幕刷新的功能完全取代了原來通過點擊才能實現的刷新功能，這在操作上極大地簡化了設計，而且在給用戶體驗上達到了非常流暢、自然的設計，使得該應用在用戶中的得到了深入的傳播;界面消隱是指在向下滑動頁面時，自動隱藏導航條的功能設計。這種動效設計的應用可以合理地拓寬界面的面積，也使得內容的上下關聯性得到了很好的提升，使用戶在查看內容的同時體驗流暢而舒適的用戶體驗。所以可以說，具有指向性和功能性的動效設計是交互設計邏輯層面設計的本質。

（三）動效設計的自然性和合理性

自然并且合理是動效設計必須要達到的要求，這是因為動效設計的基礎是自然界和現實生活。而在現實生活中，物體是有著固有的物理屬性的，是有質量有體積的，要想讓物體位移，必須施加作用力。而且由于慣性和阻力的存在，大部分物體的運動都是加速或減速的過程，也是人們習以為常地緩進緩出。如果動效設計中的界面或元素突然啟停或突兀的轉向運動，會使設計脫離現實，用戶產生不適的感覺。所以在動效設計中，元素的運動要符合物理常規，包含正確的邏輯與動作次序，而不能一味地追求動畫效果的與眾不同。而在視覺信息層級方面，也要注意現實世界中的合理層次關系。在現實中，物體在視覺上總是近大遠小，所以在動效設計中也要遵循這個統一原則，根據要傳達的整體系統的視覺層次來設計元素的大小和排列，合理展示視覺信息的層次感。在過渡轉場時，因為人腦對現實世界的故有感官（物體位移、形變、色變等），所以在動效設計中加入舒適平穩地過渡效果，會極大提升設計的用戶體驗，也能使用戶迅速有效的理解界面變化的前后邏輯。

（四）最小化記憶負擔

在設計和用戶交流互動的應用時，要遵守操作方法和步驟越簡單越好的原則。因為用戶在進行應用操作時不可能記住非常煩瑣和復雜的流程和方法，而且煩瑣的步驟也會大大降低應用的用戶體驗。這就要求在動效設計的過程中有效地減少華而不實的裝飾性動效，盡量保持簡潔的交互設計，最小化用戶的記憶負擔，方便用戶在使用過程中集中注意力在功能上的體驗。在功能引導的動效設計中，應利用動效模擬用戶操作的情景，使用戶能在情景下高效的記憶操作步驟，減少用戶在操作中的思考負擔。

（五）動效中隱喻的應用

谷歌公司在2014年I/O 大會上展示了Material Design，一種全新的設計語言，是通過實體隱喻的方法來進行界面設計。這個全新的設計通過對光影效果、物體表面質感、物體動感三種方式來實現對物體的運動、空間及交互關系的表達。通過對真實世界的效果模擬使用戶操作更接近現實，提高用戶的體驗度。

（六）動效設計中的情感元素

細節的處理往往是區別優秀設計和普通設計的關鍵。真正好的用戶體驗設計也是在細微處見功力。通過細節功能的設計而體現應用產品的差異化，這樣能更好地吸引用戶，而用戶在使用產品的時候也會有很豐富的體驗。在動效設計中增加情感元素的細節往往能提升產品的體驗值。通過營造細膩的場景，動效設計可以讓用戶的操作變得輕松而自然，還可以加入文化或情感的喚醒，喚起用戶的潛在情緒，比如回憶、聯想等。如“網易云音樂”的音樂播放界面動效設計就在情感細節方面做地非常到位，視覺元素上模仿20世紀的唱片機外形，唱臂采用金屬材質增強了場景的真實感，給用戶以強烈的沉浸感。這在很大程度上吸引了用戶，也能很好的引發用戶的情感共鳴，尤其是年紀較長的用戶。

（七）操控行為的有效性

操控的有效性是指設計預期的完成程度。動效的設計要考慮用戶的下意識動作流程，因為下意識的操作是用戶的非條件反射似的操作，要比有意識的操作反應速度快很多。動效設計要符合用戶的下意識的使用步驟。例如在鼠標滾動設計上，MacOS El Capitan以不同于傳統的滾動方式來設計。這是符合自然的滾動規律，也符合用戶的使用習慣。

三、移動設備應用界面動效的易用性設計原則

（一）內容為先，動效應依據不同的目標任務進行設計，近期谷歌設計團隊對事物的本質進行思考重構，并推出了一種全新的設計語言Material Design（原質化設計）并將動效寫入到這項設計原則中：Motion provides meaning（動畫表達含義）。合理的動效表達可以代替文字的表述需求，闡明應用的具體含義。在進行移動設備應用界面動效設計時，要從目標用戶使用動效的實際目的和需求出發，在基礎的交互邏輯層面的動效架構之上，進行視覺感知甚至情感需求上的深層研究。當界面中各個部分的編排設計和動效能夠清晰的指出并告訴用戶它們的作用以及動向，使用戶能夠將注意力集中在他們所關注的目標上，那么動效的設計使用就是成功且達成設計意圖的。

（二）運用通感，遵照現實規律，打造無割裂浸入式的用戶體驗時，要注意不同的動效節奏會給用戶帶來不同的心理感受。因此，界面動效在移動應用的設計中離不開“現實體驗”這個概念，動效的設計應合理遵循人的運動規律，按照現實的物理規律和節奏，不斷地與其他學科如人機交互學、社會學等融合汲取正確的處理方式，確保界面中的信息能夠被用戶正確地理解，更好地為用戶所服務，實現易用性目標。通感屬于認知心理學的范疇，巧妙地運用通感并遵循界面設計的基本規律，讓用戶在感官、經驗與界面等各個關鍵要素之間建立聯系，可以幫助用戶快速的熟悉和理解動效，使那些即使沒有使用經驗的用戶在面對一個全新的界面時也能夠迅速地在潛意識中調動其長期記憶而形成某種意識，清楚地知道每個元素的基本含義是什么、該如何使用、同時順利產生交互以達到自己的使用目的。

（三）動效具有非獨立性和一致性，動效設計只是界面交互體驗設計的一部分，并不能獨立存在，因此，動效設計往往需要符合整體視覺設計語言的一致性。首先，基于目前業界內對于界面基礎動效的設計規范，尊重其對用戶已形成的固有使用習慣，提高用戶易用性，例如我們平時操作中經常用到過的跳轉下一層及為從右往左淡入頁面，返回上一級從左往右淡入界面等基礎動效，就是沿用了iOS3的設計法則，至今仍然被許多APP所沿用;其次，是要注意動效其傳遞的感情基調是否與應用程序整體一致，例如，移動辦公應用類的APP應多用響應速度快，視覺感知迅捷的動效，以降低用戶在使用過程中的疲憊感;而藝術創意類的APP應更多地關注動效的趣味性體驗，例如不同層級展示和空間擴展會給用戶帶來與眾不同的質感體驗。

四、結語

基于移動應用界面動效的易用性研究，本文梳理了動效和界面設計易用性之間的聯系，提出了合理且針對性較強的動效易用性設計策略。為了使用戶易于接受界面的動效引導，在移動應用動效設計中應更加注重用戶的使用體驗，從功能角度出發遵循用戶的使用軌跡和視覺規律。未來在交互層面的幾何體系中應注重垂直Z軸的分層方向，通過對交互設計層面上三維物理空間感的縱深加入，使得視覺感官不在處于同一平面上。從當前簡單的二維設計轉向更富層次感的三維動效設計發展方向，使移動應用界面動效的設計給用戶帶來更優質的視覺維度體驗和操控體驗。

參考文獻：

[1]陳星海，楊煥，廖海進.基于效率的移動界面視覺設計美

學發展研究[J].包裝工程，2015（16）：107-110.