基于情感體驗的移動應用動效設計研究

高小汶 胡偉峰

關鍵詞：動效 情感體驗 移動應用 情感設計 產品調性

引言

移動應用已經深入到用戶生活各個場景、各個領域。用戶在選擇產品和服務的時候會考慮更多的因素，用戶對產品的需求也不再僅僅是物質上的滿足，轉而越來越在意產品使用過程中帶來的愉悅體驗和情感寓意。因此，設計師關注情感體驗，從人們的情感需求出發進行情感化設計，這已經是一種設計趨勢。動效作為提升產品情感化的重要表現形式，現在被廣泛應用到移動應用設計中。然而現有移動應用動效設計缺乏系統的設計方法論，基于情感體驗對移動應用動效設計的研究，讓界面的信息更為有效地傳遞、引發情感溝通，有利于提升產品用戶黏度。

一、動效及其因素分解

動效是指產品中用來傳達信息的圖形動態表現形式。動作分析專家拉班提出運動分析理論（LMA），LMA理論指出運動主要有五個組成部分：運動主體、空間、運動強度、形變、關系，其中運動強度主要受速度、重量、時間的影響[1] 。基于LMA理論以及對動效的調研，筆者最終總結動效基本運動元素可以分為運動主體、時間、運動曲線、位移、縮放、形變、旋轉。

（一）運動主體。動效的運動主體以圖形表現為主，主要有扁平化、C4D立體風、插畫風等主要動效圖形風格。

（二）時間。運動時間是運動主體動作的時間，時間影響用戶對動效的感知度、也表現了動效的質量和情緒。谷歌出品的Material design明確指出動效設計時間的基本規范，是動效設計師遵從的基本標準。在動效基本時間規范內，時間較長的動效常給人沉穩、寧靜的感覺;較短的動效常給人干凈利落的感覺。

（三）運動曲線。運動曲線是動效運動主體運動的速度，在現實生活中，物體在運動過程由于阻力等影響很少有勻速進行的。在實際的動效設計過程中，設計師要遵循現實生活中的物理規律，常用緩動曲線進行動效的設計[2] 。

（四）位移。位移是指在運動主體發生了位置的變化。圖1.1中banner圖的切換就是最常見的位移動效，把用戶想要的信息以卡片左右移動的方式切換到界面視覺中心處。

（五）縮放。縮放是指運動主體進行等比的放大縮小，縮放動效在按鈕點擊、tab切換等多種地方都較為常見，圖1.2中按鈕通過點擊放大展示詳細信息。

（六）旋轉。旋轉是指運動主體圍繞界面中的某個軸線或點，進行角度的變化，常用于頁面的跳轉或加載。如圖1.3，頁面過渡時以手機屏幕Y軸線旋轉180度實現頁面切換。

（七）變形。形狀變化是指運動主體的外形發生變化。動效中的變形模仿了現實世界物體運動過程中的形變規律，更加具有真實性，也使界面的信息展示更加靈活。圖1.4通過按鈕點擊，方形按鈕逐漸形變成多個圓形標簽球，從而更生動地傳達信息。

二、情感體驗

人們在情感產生時伴隨的主觀感受被稱之為情感體驗。心理學家沙赫特提出情感的波動與產生來源于三個因素的綜合作用，即：環境、生理、認知[3] 。唐諾德·諾曼基于情感認知總結了情感化三層次：給用戶帶來感官刺激的部分是本能層;控制人身體行為的部分是行為層;大腦思考的部分是反思層[4] 。結合前人理論成果，筆者總結了移動應用動效的情感體驗過程。如圖2所示，用戶在移動應用動效的接觸過程中，情感體驗經歷了認識、交互與情感反思三個階段。首先通過感覺器官感受到動效營造的情境;在與使用界面進行交互過程中，結合用戶自身的經驗與認知水平，判斷使用過程中動效信息傳達等主要功能是否滿足用戶需求以及與用戶交互方式上是否友好等;最后在動效交互完成后用戶會對動效有整體的感知與評價：動效以及其他表現層設計是否具有一致性、是否給用戶留下深刻的情感記憶等，最終通過提升用戶的情感體驗來影響產品的用戶黏度。

三、基于情感體驗的移動應用動效設計模型

如圖3所示，基于情感體驗的移動應用動效設計模型可分為三個層次：本能層產品氛圍營造的五感設計、行為層目標為導向的交互體驗設計、反思層符合產品調性的情感設計[5] 。

（一）本能層產品氛圍營造的五感設計。環境是用戶情感產生的重要觸發點，因此此層面上的動效設計要便于用戶認知，同時更符合產品整體的風格定位，使用戶更快地理解和適應產品環境。動效的五感設計包括視覺、觸覺、聽覺三個角度的設計，其中視覺是移動應用動效情感體驗的第一接觸點，同時視覺設計也是目前國內動效設計最為關注的方面，因此本文對動效五感設計的研究以視覺為主。

1.符合用戶認知的動效圖形與運動形式的組合。動效設計需要盡可能模仿物理現實的動作，以此降低用戶的陌生感。因此動效的表現形式需要貼近用戶所熟悉的生活場景，總結用戶過往經驗和認知中的圖形運動，抽象提取轉化成界面的動效設計要素[6] 。如圖4所示“卡片切換”的動效設計，通過手勢滑動的方式將卡片靈活的劃出屏幕外，同時下一個卡片緩慢放大并逐漸呈現到屏幕界面視覺中心處。整個動效與交互的過程模擬了現實生活中卡片切換的方式，降低用戶陌生感。

筆者結合LMA理論并通過對動效相關文獻的調研，將運動元素進一步分類和拆解，構建動效元素雛形，見表1，動效設計可以根據這些元素的組合構建虛擬物理現實的運動形式。比如以上文卡片滑動動效為例，運動主體以扁平化圖形為主，運動形式是位移與縮放，卡片滑出屏幕的動效可以設計為：卡片圖形以X軸方向大幅度位移同時伴隨小幅度的縮小，其中具體運動的速率和時間將作為單獨的變量進行設計。

2. 統一的產品調性。產品調性表現在動效的本能層主要包括產品品牌色彩與品牌字體等基本視覺風格，動效的圖形視覺風格要保持與產品整體視覺風格一致，運動形式更加符合產品整體情感基調。動效與其他視覺因素共同營造出產品特有的風格使用戶快速融入產品氛圍，給用戶帶來產品獨特的情感記憶。

（二）行為層目標導向的交互設計。動效的行為層受很多因素的影響，包括產品功能屬性、用戶的目標、自身習慣經驗、動效的任務等。不同類型的動效有其主要功能和目的性，在實用功能上看，動效展現出了元素之間的空間關系與邏輯關系、增強用戶的操縱感;在審美層方面，動效為產品增加了趣味性與品牌體驗。當動效能夠很好地實現功能屬性要求，并達到合理的交互，則用戶會在使用過程中感受到愉悅。

1.易用性：滿足動效功能目標及設計原則[7] 。表2詳細列舉了主要類型動效的功能目標與設計原則，用戶在此兩方面得到滿足才會獲得積極的情感體驗。以擬真動效為例，擬真動效最核心的目的是傳達信息，通過提醒的方式降低用戶學習成本，如在翻書擬真動效中，模仿現實生活中翻書的視覺效果與交互行為來進行動效設計，方便用戶預測交互行為，給用戶帶來更好的情感體驗。

2. 符合用戶預期的交互方式。行為層設計需要考慮與動效交互過程中，交互方式符合用戶的行為習慣，滿足用戶的預期。比如tab切換頁利用左右滑動交互方式進行頁面切換，頁面隨著手指滑動方向實現轉場過渡，動效滿足用戶操作的預期，也指明了頁面層級的邏輯和位置關系。

（三）反思層符合產品調性的情感定位。產品調性是指移動應用中設計要素所展現出的產品整體感知形象，是視覺設計、功能屬性、交互方式等因素綜合作用的結果。動效設計情感風格要與產品中其他設計因素所表現出的產品調性保持一致。移動應用產品調性的主要影響因素有三個方面：品牌基因、產品定位、用戶情感需求[9] 。

1.品牌基因。品牌基因是體現品牌差異化的關鍵特征屬性。品牌基因通常有顯性和隱性基因兩種表達類型。隱性品牌基因可以被語言或詞匯等進行間接表達，如品牌文化、品牌特征、品牌核心價值觀等。顯性品牌基因是可以直接通過感知系統感知到的部分，如移動應用的插畫、動效、界面布局、音效等。隱性品牌基因對顯性品牌基因進行約束，同時隱性品牌基因需要顯性品牌基因來傳達[10] 。以無印良品為例，無印良品的品牌核心價值是自然與極簡，其隱性品牌基因也可以用“自然、簡樸”等形容詞描述。無印良品的商城App采用“無色系”配色、簡約的布局、簡潔明快的動效這些顯性品牌特征體現其“自然、簡樸” 的隱形品牌基因。

2.產品定位。產品定位主要從產品的主要功能、行業屬性以及核心價值等緯度進行思考。故宮App作為一款“線上文化典藏博物館”應用，動效相對舒緩、風格設計莊重典雅，符合傳統文化行業的屬性特征。

3.滿足目標用戶審美需求。每個移動應用都有自己獨特的產品定位與細分用戶群體，由于目標用戶群的文化背景、認知水平不同，所以用戶的情感需求與價值取向也不同。比如針對企業項目管理類移動應用產品“worktitle”，以白領階層為目標用戶，產品調性更加偏向商務風、簡潔化，在動效上更加注重信息傳達的效率，因此交互動效設計力求流暢、快捷，減少不必要的等待。同為時間管理類的移動應用產品的“超級課程表”，以學生為目標用戶，產品調性更加偏向趣味化和清爽風格，同時動效設計更加活潑。

動效情感語義詞庫的確定。產品調性從風格上約束動效設計，因此需要建立和產品調性相匹配的動效風格。動效情感風格可以用情感語義詞來形容，可以通過調研和訪談的方式進行詞庫的確定：首先搜集不同類型的動效并將其統一處理成合格的被測試樣本;通過文獻資料法和問卷調研法篩選描述動效風格的情感語義詞匯。其次選取一定數量的典型用戶對動效樣本進行情感風格詞匯的感性意象測試，最后結合專家評估法對意象測試得到的形容詞進行分類和篩選，最終形成正反義詞對作為移動應用動效風格情感語義詞庫。以社交類移動應用動效情感詞匯收集為例，筆者查閱文獻與相關書籍，搜集到描述動效的情感詞匯100余種。

其次，筆者搜集QQ、soul、中老年生活等社交產品動效，以及dribble上相關動效共59個動效作為實驗樣本，選取10位用戶對照動效實驗樣本在動效情感詞匯中篩選出能夠描述這些動效的情感詞，最終確定50個動效形容詞樣本。最后通過對形容詞進行分類與篩選，最終得到以下9個形容詞詞對，作為社交類App動效設計的形容詞庫，如表3。

四、基于情感體驗的動效設計方法和流程

基于前文的理論構建進一步總結針對移動應用動效設計的方法和流程，并以“偕老”App動效設計為例進行流程呈現和案例研究。基于情感體驗的移動應用動效設計的流程主要分為六個階段。

（一）移動應用動效設計功能需求的確定。首先，梳理移動應用中所需要設計的動效類型與所對應的功能目標。“偕老”App是由筆者參與設計的，針對中老年人的社交軟件。針對中老年用戶群體，動效的認知性是重要的設計目標。其中“匹配好友”功能是產品的主要功能，因此作為主要的動效設計對象。“匹配好友”屬于反饋動效與擬真動效，主要傳達出“尋找好友”的信息，目的是幫助用戶快速了解其功能與使用方式。

（二）基于產品調性，動效設計的情感需求的定位。語義差異法獲取描述產品調性的情感詞匯，并找到與之對應的動效風格語義詞，同時構建產品的顯性基因設計規范。比如提取“偕老”產品的品牌色彩與標準字體等作為動效的視覺規范。其次，通過挑選目標用戶進行“偕老”App的使用體驗，并要求用戶使用意象詞匯描述對產品的印象，最終將用戶選擇最多的幾組詞匯通過專家篩選與總結，作為最能概括“偕老”產品調性的情感詞匯，即：“低調、簡約”。在社交應用動效情感詞匯庫中抽取與偕老產品調性相匹配的情感詞如“輕柔、簡約”，以此作為動效設計的情感風格。

（三）符合用戶認知的動效原型的選擇。如前文所述，動效表現形式的設計需要符合目標用戶群體的認知，具體可以通過意象看板和頭腦風暴的方法找到用戶生活經驗中的動效原型。如選擇以“雷達和信號波”這類較復古的信號元素作為“匹配好友”的基本動效原型，通過波紋的擴散和雷達掃射區域旋轉變化模擬 “正在匹配”的動態效果。

（四）動效原型的綜合設計。選擇合適的動效圖形風格與運動形式模擬動效原型 [11] 。在匹配好友的動效設計中，結合前期總結的視覺設計規范：品牌紅色作為動效設計的基本色，同時動效圖形延續“偕老App”的扁平風。通過前文總結的動效元素進行分析，“信號波紋”的運動方式主要是圓形的擴散，“雷達掃射”的運動方式是扇形圍繞中心點旋轉。同時選擇先加速后減速的運動曲線，以及較慢的運動時間來滿足“輕柔、簡約”的設計風格。

（五）動效原型的設計。如圖5所示，是筆者基于前文分析后完成的動效設計原型圖：初次進入匹配好友頁，頁面默認狀態下用戶頭像周圍有圓形向外擴散，其中一些圓點淡入淡出，以此模擬“周圍有好友”的信號;當用戶點擊“為我匹配”后，除了有“正在匹配”的文字進行提示之外，以用戶頭像為中心點的“扇形雷達掃射區域”開始旋轉，同時伴隨的周圍好友頭像淡入淡出，傳達出“正在匹配好友”的信息。動效圖形延續品牌紅色、運動速度較為舒緩，以此體現統一的產品調性。

（六）測試與評估。挑選若干目標用戶進行動效的交互，分別從本能、行為、情感反思等層面進行問卷測試與評估。如表4所示，是筆者結合動效功能與原則進行用戶調研測試，最終獲取的動效設計情感體驗反饋評價。

結語

用戶對產品的情感體驗是提升產品競爭力的關鍵，而動效是提升移動應用情感化的重要設計因素。筆者基于情感體驗的動效設計研究，分析了動效設計因素與情感體驗流程之間的關系，探索了情感體驗動效設計的層次模型。此外，筆者基于情感體驗動效設計模型總結了移動應用動效設計的方法與流程，為移動應用動效的設計提供了新思路。然而針對不同類型的產品，動效的類型與情感風格有其獨有的特征，因此對于不同類型產品的動效情感風格研究未來還需要進一步探索。

3875501908266