智能移動應(yīng)用界面的動效設(shè)計研究

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

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

一、動效設(shè)計的概念

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

二、移動終端應(yīng)用設(shè)計的易用性

（一）視覺元素設(shè)計

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

（二）交互設(shè)計邏輯層面的動效

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

（三）動效設(shè)計的自然性和合理性

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

（四）最小化記憶負擔(dān)

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

（五）動效中隱喻的應(yīng)用

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

（六）動效設(shè)計中的情感元素

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

（七）操控行為的有效性

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

三、移動設(shè)備應(yīng)用界面動效的易用性設(shè)計原則

（一）內(nèi)容為先，動效應(yīng)依據(jù)不同的目標(biāo)任務(wù)進行設(shè)計，近期谷歌設(shè)計團隊對事物的本質(zhì)進行思考重構(gòu)，并推出了一種全新的設(shè)計語言Material Design（原質(zhì)化設(shè)計）并將動效寫入到這項設(shè)計原則中：Motion provides meaning（動畫表達含義）。合理的動效表達可以代替文字的表述需求，闡明應(yīng)用的具體含義。在進行移動設(shè)備應(yīng)用界面動效設(shè)計時，要從目標(biāo)用戶使用動效的實際目的和需求出發(fā)，在基礎(chǔ)的交互邏輯層面的動效架構(gòu)之上，進行視覺感知甚至情感需求上的深層研究。當(dāng)界面中各個部分的編排設(shè)計和動效能夠清晰的指出并告訴用戶它們的作用以及動向，使用戶能夠?qū)⒆⒁饬性谒麄兯P(guān)注的目標(biāo)上，那么動效的設(shè)計使用就是成功且達成設(shè)計意圖的。

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

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

四、結(jié)語

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

參考文獻：

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

學(xué)發(fā)展研究[J].包裝工程，2015（16）：107-110.