論動(dòng)效設(shè)計(jì)在用戶界面設(shè)計(jì)中的應(yīng)用與維度分析

楊旺功

論

摘要：文章分析動(dòng)效設(shè)計(jì)在用戶界面設(shè)計(jì)中的影響因素。追溯了動(dòng)效設(shè)計(jì)的概念和淵源，并分析了動(dòng)效設(shè)計(jì)在移動(dòng)界面設(shè)計(jì)的使用的理論，闡述動(dòng)效設(shè)計(jì)對(duì)用戶體驗(yàn)的影響，最后提出了影響動(dòng)效設(shè)計(jì)對(duì)用戶注意力影響程度的維度。動(dòng)效設(shè)計(jì)彌補(bǔ)了靜態(tài)視覺設(shè)計(jì)的先天不足。未來的用戶界面設(shè)計(jì)不僅強(qiáng)調(diào)界面視覺和交互設(shè)計(jì)，而且對(duì)動(dòng)效的要求更加強(qiáng)烈。

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

檢索：www.artdesign，org.cn

中國分類號(hào)：TP3

文獻(xiàn)標(biāo)志碼：A

文章編號(hào)：1008-2832（2016）05-0047-03

引言：動(dòng)效設(shè)計(jì)是平面和動(dòng)畫的結(jié)晶，它可被藝術(shù)愛好者應(yīng)用于電影片頭，也可創(chuàng)造字體的動(dòng)態(tài)表現(xiàn)。由于智能手機(jī)的普及和移動(dòng)應(yīng)用的普及，傳統(tǒng)用戶界面之間聯(lián)系的缺失性與扁平化的設(shè)計(jì)思想成為動(dòng)效設(shè)計(jì)在用戶界面設(shè)計(jì)使用的源動(dòng)力。

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

動(dòng)效設(shè)計(jì)的英文是Motion Design，是運(yùn)動(dòng)圖形設(shè)計(jì)（MotionGraphic Design）的簡(jiǎn)稱，也稱為動(dòng)態(tài)設(shè)計(jì)。運(yùn)動(dòng)圖形設(shè)計(jì)遵循平面設(shè)計(jì)和視聽語言的雙重標(biāo)準(zhǔn)，通過視頻或動(dòng)畫來創(chuàng)作成動(dòng)態(tài)影像的藝術(shù)形式。嚴(yán)格意義上講，運(yùn)動(dòng)圖形設(shè)計(jì)是動(dòng)效設(shè)計(jì)的一個(gè)分支，而它具有眾多的藝術(shù)表現(xiàn)形式和作品，所以這兩者的概念逐漸趨同。下文所談的動(dòng)效設(shè)計(jì)即動(dòng)態(tài)設(shè)計(jì)，或運(yùn)動(dòng)圖形設(shè)計(jì)'不做細(xì)微區(qū)分。

雖然動(dòng)效設(shè)計(jì)起源于20世紀(jì)50年，但是由于其實(shí)踐性較強(qiáng)，所以到目前為止還沒有權(quán)威的定義。由于動(dòng)效設(shè)計(jì)的概念不明確性，使其內(nèi)容形式越來越廣泛，不僅包括字體的動(dòng)態(tài)變化，運(yùn)動(dòng)圖形的電影片頭等。

上述實(shí)踐活動(dòng)停留于運(yùn)動(dòng)的圖形的表象，而動(dòng)效設(shè)計(jì)的價(jià)值在于詳盡的說明事物發(fā)生的過程和內(nèi)在原理。動(dòng)效設(shè)計(jì)的基本表現(xiàn)元素不是圖像，而是圖形。由于圖像具有直觀性、明確性和具體性的特征；圖像具有抽象性、普遍性、歸納性，因此可以從多張圖像概括歸納形成圖形，圖形就上升到抽象性的概念。動(dòng)效設(shè)計(jì)的楊心不在于是否配有音樂和解說，而在于通過符合的變化表達(dá)意義，用于解釋和說明功能。動(dòng)效設(shè)計(jì)堅(jiān)守核心價(jià)值，放開表現(xiàn)手法后，其生命力更加旺盛，表現(xiàn)形式愈發(fā)豐富。

二、動(dòng)效設(shè)計(jì)的起源

比利時(shí)物理學(xué)尤瑟夫普拉托（Joseph A F.Ptateau）被認(rèn)為是“近代有記載的Motion Graphic第—人”。早在1832年他和他的兒子發(fā)明了叫視覺暫留轉(zhuǎn)盤（Phenakistoscope）的動(dòng)畫裝置。這種動(dòng)畫裝置將兩個(gè)圓盤安裝在同一轉(zhuǎn)軸，每個(gè)圓盤被均勻地分成16個(gè)扇形區(qū)域，有序地扇形區(qū)域內(nèi)繪制系列的舞蹈動(dòng)作圖案，圖案邊沿有相同的裂縫，圓盤的圖案面對(duì)鏡子，當(dāng)轉(zhuǎn)動(dòng)圓盤時(shí)，人們可以在圓盤背面從裂縫中看見舞蹈連貫的動(dòng)作。該裝置第一次讓觀眾看到運(yùn)動(dòng)的幻想。

20世紀(jì)五六十年代，著名美國平面設(shè)計(jì)大師薩羅·巴斯（saul Bass）在動(dòng)效設(shè)計(jì)領(lǐng)域做出了卓越的貢獻(xiàn)。其制作了一些的動(dòng)效設(shè)計(jì)的電影片頭，包括《臂人》（TheManWithThe GoldenArm）、《西北偏北》（Northby Northwest）、《精神病患者》（Psycho）等。薩羅_巴斯也因此成為了電影動(dòng)態(tài)片頭的鼻祖。

20世紀(jì)80年代后，得益于電腦軟件的使用，動(dòng)效設(shè)計(jì)得到了空前絕后的發(fā)展，制作越發(fā)便捷，效果越發(fā)華麗。動(dòng)效設(shè)計(jì)的參與者不在局限于電視臺(tái)和設(shè)計(jì)師，以至于動(dòng)效設(shè)計(jì)的作品在各大媒體上使用，使得動(dòng)--效設(shè)計(jì)進(jìn)入全新時(shí)代。

經(jīng)典作品《功夫熊貓》就是動(dòng)效設(shè)計(jì)與電影結(jié)合的表現(xiàn)形式，劇情中將實(shí)景與動(dòng)效融合，為觀眾展現(xiàn)出一個(gè)亦真亦幻的動(dòng)人世界，以至于讓觀眾不把影片的片尾的演員名單不罷休。圖1是功夫熊貓的動(dòng)效設(shè)計(jì)。

在信息技術(shù)飛速發(fā)展，物聯(lián)網(wǎng)和大數(shù)據(jù)技術(shù)的應(yīng)用，互動(dòng)營銷已經(jīng)成為一種趨勢(shì)，經(jīng)過動(dòng)效設(shè)計(jì)的互動(dòng)營銷不僅讓營銷形式更加炫目，而且讓客戶嘗試全新的視覺盛典。畢竟動(dòng)態(tài)交互圖文的吸引力遠(yuǎn)高于靜態(tài)的文字和圖像，動(dòng)效設(shè)計(jì)和互動(dòng)性和包容性目前還未被其它的藝術(shù)形式所超越。

三、動(dòng)效在用戶界面中的應(yīng)用

在用戶界面設(shè)計(jì)中，若將單獨(dú)的頁面視圖視為一個(gè)節(jié)點(diǎn)，那么節(jié)點(diǎn)之間的聯(lián)系通過何種方式表示：A困擾著設(shè)計(jì)師。隨著扁平化設(shè)計(jì)的出現(xiàn)，不同頁面視圖之間的聯(lián)系可通過頁面的切換動(dòng)效來表達(dá)，即通過切換動(dòng)畫形式來表達(dá)頁面之間的過渡，從而表達(dá)頁面之間的因果關(guān)系和內(nèi)在聯(lián)系。傳統(tǒng)的用戶界面設(shè)計(jì)，還僅限于時(shí)間關(guān)系，動(dòng)效設(shè)計(jì)不僅可以表達(dá)頁面的時(shí)間關(guān)系，還可以敘述因果關(guān)系。

2013年，蘋果發(fā)布了iOS7之后，扁平化設(shè)計(jì)（Flat Design）的思想逐步深入人心。事實(shí)上，蘋果并非扁平化設(shè)計(jì)的首創(chuàng)者，微軟早于蘋果之前已經(jīng)將扁平化設(shè)計(jì)應(yīng)用于Metro Design，但是蘋果將扁平化設(shè)計(jì)得到普及，將其做到極致。在ios人機(jī)交互界面指南中，這樣描述道，謹(jǐn)慎添加動(dòng)效，尤其是在不能提供沉浸式體驗(yàn)的應(yīng)用中。

之所以扁平化設(shè)計(jì)的設(shè)計(jì)風(fēng)格難以展示對(duì)象之間的層級(jí)關(guān)系和重要性的差別，是因?yàn)樯省⑿螤?、大小、距離等設(shè)計(jì)元素本身的局限性。如果將動(dòng)畫的時(shí)間元素融合到扁平化設(shè)計(jì)中，那么對(duì)象的重要性將得到表達(dá)，如對(duì)象到達(dá)屏幕的速度快，那就是提醒客戶注意它，自然而然層級(jí)關(guān)系和重要性就表現(xiàn)出來了。

iOS7的視覺美學(xué)使它相對(duì)于iOS6更加扁平化，因此去掉了很多質(zhì)感設(shè)計(jì)，僅僅為了避免對(duì)內(nèi)容的干擾而保留的十分微弱的質(zhì)感。這一方法完全符合iO57的設(shè)計(jì)理念：內(nèi)容優(yōu)先、透氣。對(duì)iOS6的繁雜的ul進(jìn)行精簡(jiǎn)，剔除多余的設(shè)計(jì)元素，選擇性的保留，統(tǒng)一質(zhì)感。

ios7的另外一個(gè)設(shè)計(jì)原則是：用深度層次表達(dá)（use Depth tocommunicate）。在頁面設(shè)計(jì)上，具有前后層次的區(qū)分，通過縱深感來表達(dá)內(nèi)容之間的層次關(guān)系。而動(dòng)效的利用，完美解決了內(nèi)容層次之間關(guān)系的表達(dá)。通過模擬的縱深和動(dòng)畫，讓用戶感知頁面的從屬關(guān)系。

動(dòng)效設(shè)計(jì)不僅受到蘋果重視，同樣也得到谷歌的青睞。原質(zhì)化設(shè)計(jì)（Material Design）是googLe發(fā)布的Android L所提及的設(shè)計(jì)思想。其核心原則是，材質(zhì)的隱喻（Material is the metaphor）。它是通過提煉物理真實(shí)世界的不同材質(zhì)的特性，然后根據(jù)需要組合使用的—種設(shè)計(jì)方法。原質(zhì)化設(shè)計(jì)從視覺上是通過卡片式設(shè)計(jì)來體現(xiàn)材質(zhì)的隱喻。但是材質(zhì)的特性往往需要互動(dòng)的手段才得以體現(xiàn)，通過與對(duì)象互動(dòng)產(chǎn)生的動(dòng)效來體現(xiàn)它的材質(zhì)特性。

原質(zhì)化設(shè)計(jì)不僅利用動(dòng)效，而且將動(dòng)效的優(yōu)先級(jí)提高到了前所未有的高度。動(dòng)效不僅使對(duì)象的表現(xiàn)更優(yōu)秀，而且提高了可用性。谷歌如是描述動(dòng)效設(shè)計(jì)，應(yīng)用界面大、小元素都可以考慮動(dòng)效設(shè)計(jì)，小到圖標(biāo)的小動(dòng)效，大到關(guān)鍵性轉(zhuǎn)場(chǎng)和交互動(dòng)效，都可以構(gòu)建沉浸式的用戶體驗(yàn)，不經(jīng)美觀，還可以完善功能。

雖然蘋果和谷歌兩家公司對(duì)動(dòng)效設(shè)計(jì)的思想比較類似，但是他們對(duì)動(dòng)效的認(rèn)識(shí)還有細(xì)微的差別。谷歌主張考慮周到的動(dòng)效，轉(zhuǎn)場(chǎng)本來就是設(shè)計(jì)應(yīng)有的，用以提供有意義的、令人愉悅的體驗(yàn)。相比之下，蘋果的設(shè)計(jì)則更為謹(jǐn)慎，只建議在適當(dāng)情況下使用動(dòng)效。

四、動(dòng)效的作用

動(dòng)效不僅以有趣的視覺效果吸引用戶的注意力，而且讓用戶具有流暢的用戶體驗(yàn)感，動(dòng)效讓原本處于靜止?fàn)顟B(tài)的頁面和狀態(tài)之間填補(bǔ)了微妙的變化過程，賦予界面對(duì)象以生命力。

Dan Saffer是美國舊金山的產(chǎn)品咨詢公司Kicker SttJdio的負(fù)責(zé)人，是交互設(shè)計(jì)領(lǐng)域的是思想先行者和國際性演講人。他是如此描述動(dòng)效的作用，微交互盡管微小的讓人不易察覺，但是其作用已經(jīng)深入人心，有時(shí)讓你怦然心動(dòng)，有時(shí)讓你為豁然開朗。優(yōu)秀的產(chǎn)品往往注重細(xì)節(jié)，如細(xì)微的交互，這些會(huì)讓你的產(chǎn)品更加精彩。筆者總結(jié)，歸納了動(dòng)效設(shè)計(jì)在移動(dòng)應(yīng)用產(chǎn)品中的作用，從五個(gè)角度分別加以闡述。

（一）流暢過渡

界面設(shè)計(jì)在于布局UI界面元素的位置和靜態(tài)效果（顏色、形狀、大小等視覺元素），而動(dòng)效設(shè)計(jì)的重心在于讓靜態(tài)界面元素在時(shí)間維度上進(jìn)行演進(jìn)。動(dòng)效設(shè)計(jì)會(huì)表現(xiàn)出每一秒鐘界面元素顏色、形狀、大小、和位置等視覺元素。通過動(dòng)效的詮釋，用戶與產(chǎn)品的交互更加的流暢和自然。

（二）高效反饋

動(dòng)效設(shè)計(jì)作為人機(jī)交互的方式，因此，動(dòng)效設(shè)計(jì)的反饋特征必不可少。當(dāng)用戶對(duì)應(yīng)用發(fā)出指令時(shí)，用戶很迫切知道現(xiàn)在系統(tǒng)正在發(fā)生什么。良好的反饋設(shè)計(jì)可以讓用戶了解當(dāng)前進(jìn)展?fàn)顟B(tài)和操作結(jié)果，不至于用戶誤認(rèn)為自己操作錯(cuò)誤而撤銷上一步操作，從而降低用戶的迷茫感和困惑。iOS9的滑動(dòng)解鎖輸入密碼的頁面，當(dāng)輸入錯(cuò)誤密碼時(shí)，不僅密碼標(biāo)識(shí)符晃動(dòng)，而目手機(jī)發(fā)生震動(dòng)，明確給用戶密碼錯(cuò)誤的反饋。另外，在眾多的網(wǎng)絡(luò)應(yīng)用加載的內(nèi)容較多，或者翻頁重新加載內(nèi)容時(shí)，經(jīng)常會(huì)出現(xiàn)加載動(dòng)畫，或者加載動(dòng)效圖標(biāo)，通過動(dòng)效設(shè)計(jì)明確告知用戶數(shù)據(jù)正在加載中，請(qǐng)耐心等。

（三）增強(qiáng)操縱

直接操縱（Direct operation）是對(duì)用戶界面設(shè)計(jì)的高標(biāo)準(zhǔn)要求。它要求用戶可以與真實(shí)世界的可視化表示交互，交互對(duì)象的行為結(jié)果具有可預(yù)測(cè)性，這樣不需要任何提示的情況下，交互行為完全符合用戶對(duì)真實(shí)世界的認(rèn)知，即用戶在界面中的操作是完全符合現(xiàn)實(shí)生活中熟悉的事物操作進(jìn)行。動(dòng)效設(shè)計(jì)增強(qiáng)了對(duì)現(xiàn)實(shí)的模擬，消除虛擬交互對(duì)象與現(xiàn)實(shí)對(duì)象操作的障礙，因而動(dòng)效設(shè)計(jì)增強(qiáng)了產(chǎn)品的直接操作。

（四）幫助引導(dǎo)

由于移動(dòng)終端的界面空間有限，設(shè)計(jì)師不可能將所有功能放置于同一個(gè)界面，另外為了增強(qiáng)體驗(yàn)，在陌生的應(yīng)用，或版本更新時(shí)，我們會(huì)常用一些新的手勢(shì)，因而動(dòng)效設(shè)計(jì)可以提示隱藏功能，指導(dǎo)新功能和手勢(shì)的作用。在優(yōu)酷的新版本使用了上滑，下滑實(shí)現(xiàn)聲音的控制，這樣的新功能通過動(dòng)效設(shè)計(jì)予以提示，引導(dǎo)用戶的使用，否者用戶很難知道該新功能。ios9的滑動(dòng)鎖屏功能提示動(dòng)效是從左到右的漸變效果，用戶很容易沿著該指示方向完成操作。

（五）升華體驗(yàn)

恰到好處的動(dòng)效使得產(chǎn)品更具有新穎感和科技感，為應(yīng)用添加亮點(diǎn)，具有良好的可用性。目前為止，動(dòng)效設(shè)計(jì)是界面設(shè)計(jì)的制高點(diǎn)，也是產(chǎn)品取勝的關(guān)鍵因素。為產(chǎn)品融入動(dòng)態(tài)效果，不僅可以提升用戶體驗(yàn)，還可以表達(dá)出應(yīng)用的感情取向。如產(chǎn)品的動(dòng)態(tài)標(biāo)識(shí)可以為產(chǎn)品增加魅力和特色。

用戶體驗(yàn)五要素是一個(gè)非常經(jīng)典的框架體系，包括戰(zhàn)略層、范圍層、結(jié)構(gòu)層、框架層和表現(xiàn)層。從動(dòng)效對(duì)用戶體驗(yàn)的作用分析，動(dòng)效設(shè)計(jì)不僅為范圍層提供支持，而且還在表現(xiàn)層發(fā)揮作用。

五、影響動(dòng)效的因素

用戶體驗(yàn)（User Experience，簡(jiǎn)稱uE/UX）是一種純主觀在用戶使用產(chǎn)品過程中建立起來的感受。動(dòng)效設(shè)計(jì)關(guān)鍵是保證物體運(yùn)動(dòng)的物理感，同時(shí)不犧牲物體運(yùn)動(dòng)的優(yōu)雅感、簡(jiǎn)約感、美感，讓物體的運(yùn)動(dòng)充滿魔力，打造無縫式的用戶體驗(yàn)。

動(dòng)效的迅捷反饋，可以讓用戶充滿信任感和愉悅感。當(dāng)用戶與應(yīng)用交互時(shí)，所反饋的動(dòng)效不但極具美感，符合物理邏輯，而且能夠愉悅用戶。反饋動(dòng)效的設(shè)計(jì)必須深思熟慮且具有目的性，而不能隨性設(shè)計(jì)，反饋動(dòng)效應(yīng)溫和，不讓用戶分心。

動(dòng)效設(shè)計(jì)核心的價(jià)值在于其吸引用戶的注意力。如果在展示面積一定的情況下，基本設(shè)計(jì)元素對(duì)用戶注意力的吸引程度，動(dòng)態(tài)最高，其次是顏色，最后是形狀。本文從影響動(dòng)效對(duì)人類注意力的吸引程度的兩個(gè)因素，時(shí)間維度和面積維度進(jìn)行研究，并在時(shí)間和面積組成的二維坐標(biāo)軸中，將空間分為四個(gè)象限，下面對(duì)其特征分別加以闡述。

（一）第Ⅰ象限

第Ⅰ象限動(dòng)效特征是相對(duì)面積大，時(shí)間長(zhǎng)。此類動(dòng)效的整個(gè)畫面都是動(dòng)效，其它靜止和小面積內(nèi)容往往處于被忽視的狀態(tài)。在第一象限動(dòng)效特征的狀態(tài)下，畫面?zhèn)鬟_(dá)的信息不是某一個(gè)細(xì)節(jié)特征，或者文字信息，而是給客戶一種感知認(rèn)識(shí)，或視覺體驗(yàn)，所以此類應(yīng)用多為應(yīng)用的介紹頁或產(chǎn)品介紹頁。

百度APP新春?jiǎn)?dòng)頁面是長(zhǎng)時(shí)間的動(dòng)效，用戶的注意力基本停留在頁面的動(dòng)畫效果，而非進(jìn)入應(yīng)用的本身，這樣的頁面的核心價(jià)值在于品牌的宣傳，讓用戶感知產(chǎn)品是服務(wù)于百姓生活，是一種溫馨的啟示。

（二）第Ⅱ象限

第Ⅱ象限動(dòng)效特征是相對(duì)面積大，時(shí)間短。此類動(dòng)效的動(dòng)效位于整個(gè)頁面，但是動(dòng)效發(fā)生的時(shí)間較短，稍瞬即逝。此類動(dòng)效用于表達(dá)界面之間的時(shí)間和因果關(guān)系，提高了用戶的注意力，并且使得用戶跟容易理解前后頁面的關(guān)系。因此第二象限的動(dòng)效多用于展示界面之間的空間關(guān)系。

iOS9自帶日歷應(yīng)用啟動(dòng)后自動(dòng)進(jìn)入整個(gè)年份界面，當(dāng)選擇其中的日期后，會(huì)以鏡頭拉伸的方式進(jìn)入具體日期。使用戶感知日期包含于月份之間的層級(jí)關(guān)系。整個(gè)視覺特征與實(shí)際關(guān)系相一致，視覺感受流暢統(tǒng)一。

（三）第Ⅲ象限

第Ⅲ象限動(dòng)效特征是相對(duì)面積小，時(shí)間短。此類動(dòng)效占據(jù)頁面的面積相對(duì)較小，并且動(dòng)效持續(xù)時(shí)間很短。通常是用于比較輕的引導(dǎo)、反饋和提示功能。該動(dòng)效特征不能打斷應(yīng)用的主流程，僅僅是輕微吸引注意力，所以此類動(dòng)效多應(yīng)用于情感化設(shè)計(jì)頁面。

支付寶Alipay的客戶端的口碑頁面內(nèi)容，下拉拖動(dòng)屏幕的功能是重新加載刷新頁面，該頁面正常顯示情況下，并沒有任何提示，但是當(dāng)用戶單擊向下拖動(dòng)后，頁面上面的加載小動(dòng)畫就逐漸顯示出了，因此加載小動(dòng)畫與實(shí)際功能更完全一致，給用戶以暗示，恰到好處。

（四）第Ⅳ象限

第Ⅳ象限動(dòng)效特征是相對(duì)面積小，時(shí)間長(zhǎng)。此類動(dòng)效通常在整個(gè)界面占據(jù)的面積相對(duì)較小，但是動(dòng)畫本身的持續(xù)時(shí)間較長(zhǎng)，因此其本身的重要性較高，目的是保持用戶的關(guān)注。第Ⅳ象限的動(dòng)效多用于提示用戶關(guān)注應(yīng)用的功能。

i0S9版本的滑動(dòng)解鎖功能是第四象限特效的典型實(shí)現(xiàn)?；瑒?dòng)解鎖主要是為了通過動(dòng)效引起用戶的注意，并引導(dǎo)用戶操作?；瑒?dòng)解鎖的動(dòng)效對(duì)于屏幕來講，占用的空間較小，但是持續(xù)時(shí)間較長(zhǎng)。

因此，動(dòng)效的相對(duì)面積和動(dòng)效持續(xù)時(shí)間的選擇必須根據(jù)預(yù)期功能、預(yù)期用戶體驗(yàn)的影響的具體情況決定。這兩個(gè)因素必須認(rèn)真思考，仔細(xì)斟酌。精心設(shè)計(jì)的動(dòng)效可以有效的引導(dǎo)客戶注意力，改善用戶體驗(yàn)，是—種個(gè)性的表達(dá)。

六、總結(jié)

界面、交互、動(dòng)效構(gòu)成了情感化設(shè)計(jì)的三大載體。動(dòng)效是最?yuàn)Z人眼球的工具之一，正確的使用會(huì)在與用戶的對(duì)話中起到很好的引導(dǎo)。不過也正因?yàn)樗膹?qiáng)勢(shì)，所以一定要梳理好設(shè)計(jì)目標(biāo)，不要讓其變?yōu)楦蓴_，畢竟用戶的注意力和時(shí)間都變得越來越少，我們要做的是更合理的利用動(dòng)效來傳達(dá)我們的信息。