基于情感體驗的移動應(yīng)用動效設(shè)計研究

高小汶 胡偉峰

關(guān)鍵詞：動效 情感體驗 移動應(yīng)用 情感設(shè)計 產(chǎn)品調(diào)性

引言

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

一、動效及其因素分解

動效是指產(chǎn)品中用來傳達(dá)信息的圖形動態(tài)表現(xiàn)形式。動作分析專家拉班提出運動分析理論（LMA），LMA理論指出運動主要有五個組成部分：運動主體、空間、運動強度、形變、關(guān)系，其中運動強度主要受速度、重量、時間的影響[1] ?；贚MA理論以及對動效的調(diào)研，筆者最終總結(jié)動效基本運動元素可以分為運動主體、時間、運動曲線、位移、縮放、形變、旋轉(zhuǎn)。

（一）運動主體。動效的運動主體以圖形表現(xiàn)為主，主要有扁平化、C4D立體風(fēng)、插畫風(fēng)等主要動效圖形風(fēng)格。

（二）時間。運動時間是運動主體動作的時間，時間影響用戶對動效的感知度、也表現(xiàn)了動效的質(zhì)量和情緒。谷歌出品的Material design明確指出動效設(shè)計時間的基本規(guī)范，是動效設(shè)計師遵從的基本標(biāo)準(zhǔn)。在動效基本時間規(guī)范內(nèi)，時間較長的動效常給人沉穩(wěn)、寧靜的感覺;較短的動效常給人干凈利落的感覺。

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

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

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

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

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

二、情感體驗

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

三、基于情感體驗的移動應(yīng)用動效設(shè)計模型

如圖3所示，基于情感體驗的移動應(yīng)用動效設(shè)計模型可分為三個層次：本能層產(chǎn)品氛圍營造的五感設(shè)計、行為層目標(biāo)為導(dǎo)向的交互體驗設(shè)計、反思層符合產(chǎn)品調(diào)性的情感設(shè)計[5] 。

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

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

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

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

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

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

2. 符合用戶預(yù)期的交互方式。行為層設(shè)計需要考慮與動效交互過程中，交互方式符合用戶的行為習(xí)慣，滿足用戶的預(yù)期。比如tab切換頁利用左右滑動交互方式進(jìn)行頁面切換，頁面隨著手指滑動方向?qū)崿F(xiàn)轉(zhuǎn)場過渡，動效滿足用戶操作的預(yù)期，也指明了頁面層級的邏輯和位置關(guān)系。

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

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

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

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

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

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

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

基于前文的理論構(gòu)建進(jìn)一步總結(jié)針對移動應(yīng)用動效設(shè)計的方法和流程，并以“偕老”App動效設(shè)計為例進(jìn)行流程呈現(xiàn)和案例研究。基于情感體驗的移動應(yīng)用動效設(shè)計的流程主要分為六個階段。

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

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

（三）符合用戶認(rèn)知的動效原型的選擇。如前文所述，動效表現(xiàn)形式的設(shè)計需要符合目標(biāo)用戶群體的認(rèn)知，具體可以通過意象看板和頭腦風(fēng)暴的方法找到用戶生活經(jīng)驗中的動效原型。如選擇以“雷達(dá)和信號波”這類較復(fù)古的信號元素作為“匹配好友”的基本動效原型，通過波紋的擴散和雷達(dá)掃射區(qū)域旋轉(zhuǎn)變化模擬 “正在匹配”的動態(tài)效果。

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

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

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

結(jié)語

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

3875501908266