楊旺功

論

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

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

檢索：www.artdesign，org.cn

中國分類號：TP3

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

文章編號：1008-2832（2016）05-0047-03

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

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

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

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

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

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

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

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

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

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

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

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

在用戶界面設(shè)計(jì)中，若將單獨(dú)的頁面視圖視為一個節(jié)點(diǎn)，那么節(jié)點(diǎn)之間的聯(lián)系通過何種方式表示：A困擾著設(shè)計(jì)師。隨著扁平化設(shè)計(jì)的出現(xiàn)，不同頁面視圖之間的聯(lián)系可通過頁面的切換動效來表達(dá)，即通過切換動畫形式來表達(dá)頁面之間的過渡，從而表達(dá)頁面之間的因果關(guān)系和內(nèi)在聯(lián)系。傳統(tǒng)的用戶界面設(shè)計(jì)，還僅限于時間關(guān)系，動效設(shè)計(jì)不僅可以表達(dá)頁面的時間關(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)慎添加動效，尤其是在不能提供沉浸式體驗(yàn)的應(yīng)用中。

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

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

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

動效設(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ì)的特性往往需要互動的手段才得以體現(xiàn)，通過與對象互動產(chǎn)生的動效來體現(xiàn)它的材質(zhì)特性。

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

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

四、動效的作用

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

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

（一）流暢過渡

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

（二）高效反饋

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

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

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

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

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

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

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

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

五、影響動效的因素

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

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

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

（一）第Ⅰ象限

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

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

（二）第Ⅱ象限

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

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

（三）第Ⅲ象限

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

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

（四）第Ⅳ象限

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

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

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

六、總結(jié)

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