論動效設計在用戶界面設計中的應用與維度分析

楊旺功

論

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

關鍵詞：動效設計；扁平化設計；用戶體驗；用戶界面設計

檢索：www.artdesign，org.cn

中國分類號：TP3

文獻標志碼：A

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

引言：動效設計是平面和動畫的結晶，它可被藝術愛好者應用于電影片頭，也可創造字體的動態表現。由于智能手機的普及和移動應用的普及，傳統用戶界面之間聯系的缺失性與扁平化的設計思想成為動效設計在用戶界面設計使用的源動力。

一、動效設計的概念

動效設計的英文是Motion Design，是運動圖形設計（MotionGraphic Design）的簡稱，也稱為動態設計。運動圖形設計遵循平面設計和視聽語言的雙重標準，通過視頻或動畫來創作成動態影像的藝術形式。嚴格意義上講，運動圖形設計是動效設計的一個分支，而它具有眾多的藝術表現形式和作品，所以這兩者的概念逐漸趨同。下文所談的動效設計即動態設計，或運動圖形設計'不做細微區分。

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

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

二、動效設計的起源

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

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

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

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

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

三、動效在用戶界面中的應用

在用戶界面設計中，若將單獨的頁面視圖視為一個節點，那么節點之間的聯系通過何種方式表示：A困擾著設計師。隨著扁平化設計的出現，不同頁面視圖之間的聯系可通過頁面的切換動效來表達，即通過切換動畫形式來表達頁面之間的過渡，從而表達頁面之間的因果關系和內在聯系。傳統的用戶界面設計，還僅限于時間關系，動效設計不僅可以表達頁面的時間關系，還可以敘述因果關系。

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

之所以扁平化設計的設計風格難以展示對象之間的層級關系和重要性的差別，是因為色彩、形狀、大小、距離等設計元素本身的局限性。如果將動畫的時間元素融合到扁平化設計中，那么對象的重要性將得到表達，如對象到達屏幕的速度快，那就是提醒客戶注意它，自然而然層級關系和重要性就表現出來了。

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

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

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

原質化設計不僅利用動效，而且將動效的優先級提高到了前所未有的高度。動效不僅使對象的表現更優秀，而且提高了可用性。谷歌如是描述動效設計，應用界面大、小元素都可以考慮動效設計，小到圖標的小動效，大到關鍵性轉場和交互動效，都可以構建沉浸式的用戶體驗，不經美觀，還可以完善功能。

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

四、動效的作用

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

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

（一）流暢過渡

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

（二）高效反饋

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

（三）增強操縱

直接操縱（Direct operation）是對用戶界面設計的高標準要求。它要求用戶可以與真實世界的可視化表示交互，交互對象的行為結果具有可預測性，這樣不需要任何提示的情況下，交互行為完全符合用戶對真實世界的認知，即用戶在界面中的操作是完全符合現實生活中熟悉的事物操作進行。動效設計增強了對現實的模擬，消除虛擬交互對象與現實對象操作的障礙，因而動效設計增強了產品的直接操作。

（四）幫助引導

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

（五）升華體驗

恰到好處的動效使得產品更具有新穎感和科技感，為應用添加亮點，具有良好的可用性。目前為止，動效設計是界面設計的制高點，也是產品取勝的關鍵因素。為產品融入動態效果，不僅可以提升用戶體驗，還可以表達出應用的感情取向。如產品的動態標識可以為產品增加魅力和特色。

用戶體驗五要素是一個非常經典的框架體系，包括戰略層、范圍層、結構層、框架層和表現層。從動效對用戶體驗的作用分析，動效設計不僅為范圍層提供支持，而且還在表現層發揮作用。

五、影響動效的因素

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

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

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

（一）第Ⅰ象限

第Ⅰ象限動效特征是相對面積大，時間長。此類動效的整個畫面都是動效，其它靜止和小面積內容往往處于被忽視的狀態。在第一象限動效特征的狀態下，畫面傳達的信息不是某一個細節特征，或者文字信息，而是給客戶一種感知認識，或視覺體驗，所以此類應用多為應用的介紹頁或產品介紹頁。

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

（二）第Ⅱ象限

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

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

（三）第Ⅲ象限

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

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

（四）第Ⅳ象限

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

i0S9版本的滑動解鎖功能是第四象限特效的典型實現。滑動解鎖主要是為了通過動效引起用戶的注意，并引導用戶操作。滑動解鎖的動效對于屏幕來講，占用的空間較小，但是持續時間較長。

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

六、總結

界面、交互、動效構成了情感化設計的三大載體。動效是最奪人眼球的工具之一，正確的使用會在與用戶的對話中起到很好的引導。不過也正因為它的強勢，所以一定要梳理好設計目標，不要讓其變為干擾，畢竟用戶的注意力和時間都變得越來越少，我們要做的是更合理的利用動效來傳達我們的信息。