圖形界面設(shè)計(jì)中的動(dòng)態(tài)效果應(yīng)用及趨勢(shì)探析

馬馳

摘要：對(duì)動(dòng)態(tài)效果的設(shè)計(jì)特點(diǎn)、應(yīng)用形式與發(fā)展趨勢(shì)進(jìn)行梳理歸納，為圖形界面設(shè)計(jì)者提升界面視覺語言表達(dá)力、審美價(jià)值及品牌視覺認(rèn)知度提供有益啟發(fā)。通過案例分析與經(jīng)驗(yàn)總結(jié)相結(jié)合的方法，—方面分析既有動(dòng)效實(shí)例，探尋在不同應(yīng)用層面下的表現(xiàn)手法及趨勢(shì)，另—方面結(jié)合構(gòu)成、視覺經(jīng)驗(yàn)、視知覺等領(lǐng)域的理論，探索動(dòng)態(tài)效果對(duì)于豐富圖形界面視覺藝術(shù)內(nèi)涵、提升藝術(shù)附加值的作用及可能。分析了動(dòng)態(tài)效果的特點(diǎn)與應(yīng)用領(lǐng)域，結(jié)合既有案例歸納闡釋了動(dòng)態(tài)效果的設(shè)計(jì)目標(biāo)、方法與類型并提出延伸思考。探索及研究圖形界面中動(dòng)態(tài)效果的形式和方法，能夠更好地為圖形設(shè)計(jì)在新的媒介形式中進(jìn)行新的應(yīng)用嘗試提供幫助，使其在提升應(yīng)用程序的審美、藝術(shù)附加值和視覺體驗(yàn)上發(fā)揮最大效能。

關(guān)鍵詞：圖形界面 動(dòng)態(tài)效果 視覺經(jīng)驗(yàn) 空間

中圖分類號(hào)：TB472

文獻(xiàn)標(biāo)識(shí)碼：A

文章編號(hào)：1003-0069 （2019）10-0113-03

引言

動(dòng)態(tài)效果設(shè)計(jì)脫胎于動(dòng)畫與動(dòng)態(tài)圖形設(shè)計(jì)，起初作為—種給予界面使用者視覺反饋的手段和信息載體介入到圖形界面（GUI）設(shè)計(jì)，隨著多媒體及互聯(lián)網(wǎng)技術(shù)與設(shè)備的進(jìn)步，其應(yīng)用領(lǐng)域日益廣泛，現(xiàn)已衍變?yōu)閳D形界面中一種重要的視覺表現(xiàn)形式。文章結(jié)合部分實(shí)際案例，探討動(dòng)態(tài)效果（Motion Effect）介入圖形界面設(shè)計(jì)后在信息反饋、視覺層級(jí)與邏輯層級(jí)的視覺化表達(dá)特點(diǎn)。分析闡釋當(dāng)前動(dòng)態(tài)效果的主要應(yīng)用目的、形式與發(fā)展趨勢(shì)，進(jìn)而引申出實(shí)現(xiàn)界面或屏幕邊界與虛擬空間拓展可能性的思考。

一、動(dòng)態(tài)效果設(shè)計(jì)與圖形界面的關(guān)系和特點(diǎn)

隨著移動(dòng)互聯(lián)網(wǎng)終端設(shè)備如智能手機(jī)、平板電腦等設(shè)備與屏幕觸控等相關(guān)技術(shù)的迅猛發(fā)展，當(dāng)下基于移動(dòng)設(shè)備的操作系統(tǒng)或是應(yīng)用軟件（APP）已經(jīng)在其圖形界面的設(shè)計(jì)上，對(duì)視覺體驗(yàn)、心理學(xué)、交互手段提出了更加混合化、系統(tǒng)化的要求。動(dòng)態(tài)效果（Motion Effect）這種脫胎于動(dòng)畫、圖形設(shè)計(jì)等傳統(tǒng)視覺藝術(shù)并融入新的媒介載體中的視覺表現(xiàn)形式與圖形語言，就是在這一背景下應(yīng)運(yùn)而生的，并從它的誕生起便慢慢地改變著我們?cè)诮缑嬷行畔⒔庾x的方式。在移動(dòng)端設(shè)備中，動(dòng)態(tài)效果是用戶在操作界面中通過觸控、重力感應(yīng)、聲控等操作方式與移動(dòng)設(shè)備進(jìn)行交互的過程中所呈現(xiàn)出的動(dòng)畫化圖形語言，是一種界面對(duì)用戶已進(jìn)行的操作的可視化反饋。比方說在用戶與設(shè)備進(jìn)行交互的過程中，界面通過動(dòng)態(tài)效果，讓界面內(nèi)的功能模塊得以模擬一些基于現(xiàn)實(shí)世界中物理運(yùn)動(dòng)，如彈出、墜落、轉(zhuǎn)動(dòng)等，來對(duì)用戶的操作進(jìn)行視覺反饋。以簡潔、直觀、高效的優(yōu)勢(shì)，使原本靜態(tài)的界面變得活躍，讓使用者利用這些圖形動(dòng)態(tài)化的優(yōu)勢(shì)更便捷明了的操作界面，豐富應(yīng)用軟件的視覺藝術(shù)內(nèi)涵，提升交互體驗(yàn)。

圖形用戶界面（即GUI）的設(shè)計(jì)者需要依托視覺、觸覺等感知維度或經(jīng)驗(yàn)維度，對(duì)用戶及產(chǎn)品本身進(jìn)行更進(jìn)一步解讀與推敲，以求更好地通過動(dòng)態(tài)圖形來表達(dá)軟件與公司、品牌等所要傳達(dá)的視覺內(nèi)涵與軟件本身的使用邏輯。合理科學(xué)的運(yùn)用動(dòng)態(tài)效果能夠提高用戶界面的交互效率和可用性，也能完善應(yīng)用的感官體驗(yàn)，它己成為移動(dòng)端應(yīng)用軟件產(chǎn)品用戶體驗(yàn)的重要因素，經(jīng)過合理設(shè)計(jì)的動(dòng)態(tài)效果能讓用戶更有效地獲取視覺信息，其功能已經(jīng)從讓用戶獲得操作反饋擴(kuò)展到現(xiàn)在的避免錯(cuò)誤操作、提高軟件使用樂趣等諸多層面。

圖1可作為近十年來圖形界面設(shè)計(jì)風(fēng)格發(fā)展過程中一個(gè)較有代表性的轉(zhuǎn)折和縮影，蘋果2013年發(fā)布的iOS 7操作系統(tǒng)的界面圖標(biāo)相比過去的iOS 6，減弱了圖形的陰影、體塊感、材質(zhì)肌理、反光、玻璃高光等一系列細(xì)節(jié)，轉(zhuǎn)而使用更加抽象、提煉化的圖形語言重新塑造了圖形界面圖標(biāo)并將這一新風(fēng)格延續(xù)至今。從蘋果iOS 6到iOS 7的視覺風(fēng)格更迭衍變，反映出早前過分注重?cái)M物、光影.明暗等細(xì)節(jié)表現(xiàn)的具象風(fēng)格因?yàn)槠溥^分的刻畫與矯飾，已步入了使受眾產(chǎn)生視覺與審美雙重疲勞的窄巷，取而代之的是盛行于當(dāng)下的去具象化風(fēng)格（扁平化風(fēng)格）。兩者之長短優(yōu)劣無法輕易一言蔽之，但日趨簡潔純粹的圖形化視覺特征的確在界面的功能信息高效傳遞上具有其優(yōu)勢(shì)，也更好地契合了動(dòng)態(tài)效果的設(shè)計(jì)邏輯，即用高度概括的、純粹的圖形化視覺語言引導(dǎo)用戶理解界面功能。而伴隨移動(dòng)端硬件（手機(jī)、平板電腦、腕部智能穿戴設(shè)備等）技術(shù)的進(jìn)步，動(dòng)態(tài)效果的運(yùn)用桎梏逐漸打破，其于界面的應(yīng)用日益廣泛，重要性也日益凸顯。倘若對(duì)“動(dòng)態(tài)效果”進(jìn)行簡單歸結(jié)，筆者認(rèn)為可將其描述為以動(dòng)態(tài)圖形的表達(dá)方式為手段，幫助界面進(jìn)行功能性視覺傳達(dá)，提升多媒體設(shè)備使用效率與交互體驗(yàn)為目的的視覺語法。

二、動(dòng)態(tài)效果的設(shè)計(jì)目標(biāo)與表現(xiàn)

作為在圖形用戶界面設(shè)計(jì)領(lǐng)域起到引領(lǐng)作用的谷歌和蘋果公司在每一代新的操作系統(tǒng)產(chǎn)品推出之時(shí)，都會(huì)對(duì)產(chǎn)品自身的視覺交互邏輯作系統(tǒng)闡述說明，并迅速地在視覺風(fēng)格、交互方式和用戶體驗(yàn)上在全球掀起手機(jī)和平板電腦等移動(dòng)端設(shè)計(jì)理念的新一輪變革。國外移動(dòng)端的研發(fā)領(lǐng)域?qū)?dòng)態(tài)效果的研究起步較早而且理論體系比較成熟，且如谷歌蘋果這樣具備05研發(fā)實(shí)力公司，都會(huì)在每一次視覺語言發(fā)生重大更新時(shí)將一些具有指導(dǎo)意義的設(shè)計(jì)原則加入到各自的設(shè)計(jì)指南中。蘋果的iOS7操作系統(tǒng)不僅推動(dòng)了圖形界面扁平化的發(fā)展趨勢(shì)，更展現(xiàn)了其對(duì)動(dòng)態(tài)效果的新的使用邏輯。蘋果在每發(fā)布～代操作系統(tǒng)的同時(shí)都會(huì)同步更新其設(shè)計(jì)原則（人機(jī)界面指南），在針對(duì)i057的更新中設(shè)計(jì)團(tuán)隊(duì)特地指出了界面圖形、動(dòng)畫、動(dòng)態(tài)效果須精于考量細(xì)節(jié)又要恰如其分，滿足視覺傳達(dá)、反饋狀態(tài)的要求，并讓各種操作進(jìn)度可視化，讓使用者能在動(dòng)態(tài)效果引導(dǎo)下憑直覺進(jìn)行操作。谷歌的安卓L系統(tǒng)在視覺設(shè)計(jì)理論上也有重大革新，Material Design“材質(zhì)設(shè)計(jì)”這一設(shè)計(jì)概念被首次提出，其核心理念在于在界面設(shè)計(jì)中充分運(yùn)用或模擬現(xiàn)實(shí)世界中某種材質(zhì)（如紙張、塑料薄膜等）的特點(diǎn)與使用邏輯來對(duì)界面模塊與層級(jí)進(jìn)行塑造，即在界面中構(gòu)建一種“世界觀”，而動(dòng)態(tài)效果在其中的作用除了豐富和強(qiáng)化視覺深度，使界面層級(jí)更明晰，還在其橫向空間構(gòu)建、隱喻化的功能、材質(zhì)塑造上起到了關(guān)鍵的作用，如圖2。

目前國內(nèi)幾家大型互聯(lián)網(wǎng)企業(yè)如騰訊、阿里、百度、網(wǎng)易等都率先在內(nèi)部設(shè)立了專門的設(shè)計(jì)研究部門，且在界面和動(dòng)效設(shè)計(jì)與研究上走在了前列，騰訊旗下應(yīng)用軟件微信和QQ等都采用了不少交互動(dòng)效去闡釋和增強(qiáng)產(chǎn)品的使用特性，例如微信早期就已加入的搖一搖和搶紅包等可交互行為動(dòng)效;而阿里旗下的天貓則是將動(dòng)態(tài)效果應(yīng)用于輔助商業(yè)營銷，制造熱鬧的活動(dòng)氛圍。此外支付寶也將動(dòng)態(tài)效果運(yùn)用于用戶的年度收支報(bào)表等內(nèi)容中，來幫助用戶了解自己的財(cái)務(wù)收支狀況，動(dòng)態(tài)效果為這些生活中常用的軟件在視覺上增添了層次與形式感，豐富了界面的趣味性和情感表現(xiàn)力，如圖3。

某些應(yīng)用軟件在輸入一些特定的內(nèi)容時(shí)也可以觸發(fā)一些出乎意料的動(dòng)態(tài)效果。淘寶、微信中便存在不少讓使用者津津樂道的隱藏動(dòng)態(tài)內(nèi)容。常見的例子是使用者用微信聊天時(shí)，發(fā)送一些特定的語句如節(jié)日、生日問候，就會(huì)在屏幕上觸發(fā)圖形墜落的特效，雖然簡短，但足以達(dá)到與使用者在情感上互動(dòng)的目的。這些動(dòng)態(tài)效果會(huì)根據(jù)特殊的節(jié)日或事件為使用者奉上新的動(dòng)態(tài)內(nèi)容，例如淘寶在2017年1月為電影《星球大戰(zhàn)》進(jìn)行了一次品牌視覺推廣活動(dòng)。當(dāng)買家在淘寶搜索與“星球大戰(zhàn)”相關(guān)的關(guān)鍵詞時(shí)，會(huì)根據(jù)搜索商品類型觸發(fā)多種不同的動(dòng)效，在不干擾買家購物的情況下給使用淘寶的星戰(zhàn)電影“粉絲”帶來不小的驚喜，如圖4。

若將圖形界面中的動(dòng)態(tài)效果根據(jù)其具體的目的指向性進(jìn)行分類，則其運(yùn)用大致可分為塑造空間邏輯、迎合意識(shí)認(rèn)知以及滿足情感需求三類。其中，塑造空間邏輯的動(dòng)態(tài)效果幫助軟件解釋其界面的縱向、橫向空間的層級(jí)關(guān)系、邏輯和操作機(jī)制，側(cè)重于體現(xiàn)空間與秩序;迎合意識(shí)認(rèn)知的動(dòng)態(tài)效果通過傳統(tǒng)動(dòng)畫創(chuàng)作法則，配合隱喻或者擬物視覺修辭手法還原符合現(xiàn)實(shí)世界物理原則的物體運(yùn)動(dòng)感、材質(zhì)肌理等，賦予界面強(qiáng)烈的代入感和沉浸體驗(yàn);滿足隋感需求的動(dòng)態(tài)效果力求能夠讓軟件使用者與軟件進(jìn)行情感溝通，通過營造不同的視覺氛圍激發(fā)共鳴，調(diào)動(dòng)使用者的情緒，具有維系使用者群體的功能。

三、關(guān)于動(dòng)態(tài)效果設(shè)計(jì)的延伸思考

在人機(jī)交互發(fā)生頻度日趨密集的當(dāng)下，可交互多媒體設(shè)備中日益受到重視的動(dòng)態(tài)圖形、動(dòng)效與圖形界面設(shè)計(jì)間的應(yīng)用整合研究仍有相當(dāng)大的可挖掘余地。另外，傳統(tǒng)動(dòng)畫藝術(shù)創(chuàng)作的基礎(chǔ)理論對(duì)動(dòng)態(tài)效果設(shè)計(jì)亦頗有裨益，如迪士尼動(dòng)畫師Ollie Johnston與Frank Thomas所著《The lllusion of Life Disney Animation》中將迪士尼動(dòng)畫創(chuàng)作元老們的經(jīng)驗(yàn)總結(jié)而成的“動(dòng)畫的十二項(xiàng)基本法則”，對(duì)動(dòng)態(tài)效果中圖形的運(yùn)動(dòng)與轉(zhuǎn)化、細(xì)節(jié)的表現(xiàn)刻畫具有重要指導(dǎo)意義，如圖5。

另一方面，動(dòng)態(tài)效果設(shè)計(jì)又需要與界面的操作使用（即人機(jī)交互）相協(xié)調(diào)，這背后涉及界面、菜單等要素的層級(jí)邏輯關(guān)系，即屏幕可視層面之下與屏幕邊界之外的“不可見”區(qū)域的設(shè)計(jì)與考量。就此而言，動(dòng)態(tài)效果某種程度上也可涉及或跨界到數(shù)字化展示空間中的設(shè)計(jì)應(yīng)用，僅僅停留在二維視覺表現(xiàn)層面來進(jìn)行思考還遠(yuǎn)遠(yuǎn)不夠。意大利策展人Paola Antonelli曾于現(xiàn)代藝術(shù)博物館（MOMA）舉辦過一場(chǎng)叫“Design and Elastic mind”的展覽，其中一部分是把空間當(dāng)作交互界面，通過動(dòng)態(tài)圖形來將展覽信息進(jìn)行視覺藝術(shù)化的呈現(xiàn)與分類，藝術(shù)與技術(shù)的共同演繹充分詮釋了動(dòng)態(tài)圖形設(shè)計(jì)所具有的綜合、多元的特征。而美國國家航空航天博物館的導(dǎo)覽系統(tǒng)，也全部運(yùn)用了直觀有趣的交互界面及動(dòng)態(tài)效果，對(duì)通過系統(tǒng)查閱資料。當(dāng)前國外對(duì)于界面設(shè)計(jì)中的動(dòng)態(tài)效果運(yùn)用相對(duì)成熟，并突破了基于屏幕的二維界面，將動(dòng)態(tài)效果的呈現(xiàn)與交互形式引入到現(xiàn)實(shí)的立體空間界面領(lǐng)域。這些實(shí)踐給國內(nèi)的相關(guān)研究也帶來不少經(jīng)驗(yàn)啟示，通過打破傳統(tǒng)的屏幕空間固化思維，將屏幕中虛擬空間與現(xiàn)實(shí)中的展陳空間聯(lián)通起來，動(dòng)態(tài)效果設(shè)計(jì)也可將圖形界面設(shè)計(jì)引領(lǐng)至新高度，如圖6。

結(jié)語

當(dāng)人們生活中更多的信息是通過移動(dòng)設(shè)備來進(jìn)行交流時(shí)，對(duì)于設(shè)備的使用者又或者是設(shè)備的界面設(shè)計(jì)者來說，都迫切地需要一種能夠超越文化和語言障礙的交流方式，使智能設(shè)備能夠與其使用者交流更加順暢自如，更加準(zhǔn)確地反映用戶與設(shè)計(jì)者雙方的訴求。于是，將使用設(shè)備過程中出現(xiàn)的繁瑣的信息通過視覺化的轉(zhuǎn)述，準(zhǔn)確清晰地呈現(xiàn)給使用者便是大勢(shì)所趨。在這樣的趨勢(shì)下，動(dòng)態(tài)效果作為圖形界面設(shè)計(jì)中一種重要的視覺表現(xiàn)形式，對(duì)于當(dāng)下及未來應(yīng)用程序的交互體驗(yàn)升級(jí)和視覺交流發(fā)展的推動(dòng)都有其時(shí)代必然性。它極大地彌補(bǔ)了目前觸摸式移動(dòng)設(shè)備的界面視覺反饋缺失、屏幕成像局限等視覺體驗(yàn)上的不足，在塑造和擴(kuò)展界面空間感上起重要作用。此外還可令圖形界面的視覺呈現(xiàn)方式更加靈動(dòng)活躍，為交互體驗(yàn)帶來視覺沖擊力，為規(guī)矩而充滿條理性的界面注入感性化因素。若通過動(dòng)態(tài)效果模擬真實(shí)世界中物體的運(yùn)動(dòng)及變化規(guī)律，令其在圖形界面的視覺與邏輯層面上營造出真實(shí)可信的隱喻空間，能夠提高使用者與界面中特定的元素進(jìn)行交互時(shí)的理解效率，在構(gòu)建使用者與界面之間的視覺交流關(guān)系上起到重要作用。動(dòng)態(tài)效果與界面內(nèi)的虛擬空間是相輔相成的，空間作為體現(xiàn)運(yùn)動(dòng)的屬性，必然在各種運(yùn)動(dòng)過程形式中被表現(xiàn)出來。物理空間（現(xiàn)實(shí)）和心理空間（虛擬）在視覺感知過程中被聯(lián)結(jié)在一起，圖形界面設(shè)計(jì)方法中的隱喻設(shè)計(jì)即利用這一點(diǎn)。設(shè)計(jì)動(dòng)效時(shí)需要充分考慮利用人眼對(duì)空間和物體的知覺方式做文章。獨(dú)特而流暢的動(dòng)態(tài)效果不但通過視覺認(rèn)知完善了觸屏界面所缺失的物理信息反饋，還能提升軟件整體的交互體驗(yàn)，因此動(dòng)態(tài)效果需要超越單一設(shè)計(jì)領(lǐng)域，從視覺設(shè)計(jì)到交互體驗(yàn)的邏輯層面進(jìn)行全面的打磨優(yōu)化。另外，正是因?yàn)閯?dòng)態(tài)效果是吸引使用者視覺注意力的有效方式，在運(yùn)用的過程中，就需要更加小心謹(jǐn)慎，確保界面在視覺上所要傳達(dá)的核心內(nèi)容與軟件的設(shè)計(jì)目標(biāo)不會(huì)被其干擾。繼續(xù)探索及研究圖形界面中動(dòng)態(tài)效果的形式和方法，能夠更好地為圖形設(shè)計(jì)在新的媒介形式中進(jìn)行新的應(yīng)用嘗試提供幫助，使其在提升應(yīng)用程序的審美、藝術(shù)附加值和視覺體驗(yàn)上發(fā)揮最大效能。.

參考文獻(xiàn)

[1]布萊思，弗林，移動(dòng)應(yīng)用的設(shè)計(jì)與開發(fā)[M]北京：電子工業(yè)出版社，2010： 116-134

[2]Clark.J.Tapworthy： Designing great apps[M] OReillyMedia，INC，2010

[3] CooperA，ReimannR，Cronin DAbout face3：the essentials of interaction desigp[M] John Wiley&Sons，2007

[4]唐納德.諾曼，情感化設(shè)計(jì)[M]電子工業(yè)出版社，2005： 001-008、087-091、127-150

[5] Apple Inc.iOS Human Interface Guidelines[M]Apple Inc.2016

[6]李剛，余天琪，解讀扁平化在智能手機(jī)界面設(shè)計(jì)中的藝術(shù)表達(dá)[J]設(shè)計(jì)， 2016，29 （13）：134-135

[7]任輝敏，丁鋼，手機(jī)界面設(shè)計(jì)中的趣味性研究[J]設(shè)計(jì)， 2016，29 （17）：64-65