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

關(guān)鍵詞：動(dòng)效設(shè)計(jì);界面設(shè)計(jì);用戶(hù)體驗(yàn)

一、動(dòng)效設(shè)計(jì)的概念

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

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

（一）視覺(jué)元素設(shè)計(jì)

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

（二）交互設(shè)計(jì)邏輯層面的動(dòng)效

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

（三）動(dòng)效設(shè)計(jì)的自然性和合理性

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

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

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

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

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

（六）動(dòng)效設(shè)計(jì)中的情感元素

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

（七）操控行為的有效性

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

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

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

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

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

四、結(jié)語(yǔ)

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

參考文獻(xiàn)：

[1]陳星海，楊煥，廖海進(jìn).基于效率的移動(dòng)界面視覺(jué)設(shè)計(jì)美

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