邸小松，封姿羽

(長春工業(yè)大學(xué) 藝術(shù)設(shè)計學(xué)院， 吉林 長春 130000)

數(shù)字化科技發(fā)展到今天，伴隨著以用戶為中心的新型人文關(guān)懷時代的到來，用戶體驗與界面交互設(shè)計在產(chǎn)品生產(chǎn)與使用中，所涉及的視覺體驗越來越受各行業(yè)的重視，在各類軟件市場中形成了良性的競爭。數(shù)據(jù)截止到2020年9月末，國內(nèi)APP總量為349萬款，在同類型軟件更迭換代如此頻繁的環(huán)境中，競爭早已從單純的功能與外觀層面，上升到產(chǎn)品整體的體驗性、交互性等更深層更細致的設(shè)計理念上。為了增強用戶的依賴性和建立品牌形象上，需要設(shè)計師從各個方面掌握并響應(yīng)用戶的情感訴求，使用戶的視覺和功能體驗等方面得到滿足，探索更加符合用戶交互式情感體驗的動態(tài)效果的設(shè)計方法。

一、何謂情感化設(shè)計

情感化設(shè)計是著名的心理學(xué)家唐納德·諾曼(Donald Norman)在《設(shè)計心理學(xué)》系列叢書中提出的理論，經(jīng)過與心理學(xué)教授安德魯·奧托尼(Andrew Ortonyhe)和威廉·雷維爾(William Revelle)的共同研究，最終發(fā)現(xiàn)人腦活動分為三個層次：本能層、行為層、反思層。每個層次在整體機能中雖然有著不同的作用，但是無法真正的分割，這三個層次相互聯(lián)系組建成一個強大的體系，互相影響又互相調(diào)節(jié)。人的情感是與生俱來的，我們無法忽視它的存在和影響力。情感影響著人腦解決問題時所做出的選擇，也可以潛移默化地改變我們的認(rèn)知系統(tǒng)理解世界。我們所接觸的任何事物都需要經(jīng)過大腦對其認(rèn)知，以及情感上對其賦予的價值內(nèi)涵。[1]另外，情感化三個層次的融合協(xié)作活動，在對產(chǎn)品設(shè)計的解析中扮演著重要角色。從時間順序上來看，在接觸到產(chǎn)品的同時，首先本能層就會對外觀先做出視覺感受的反饋，其次，通過實際的操作體驗，行為層會對其功能性和易用性等特征有了一定的認(rèn)知和判斷。最后，反思層的體驗時間可能會比前兩者時間久，從第一眼見到開始到使用很久之后，會通過聯(lián)系記憶、經(jīng)歷等產(chǎn)生情感共鳴。飽含豐富情感的產(chǎn)品可以更順利地融入人們的生活，能夠讓冰冷的數(shù)字化產(chǎn)品變得親切有溫度。

二、手機界面中動態(tài)效果設(shè)計情感化需求分析

用戶界面動效是指用戶與移動終端通過交互所呈現(xiàn)出的動態(tài)效果，可以說是界面設(shè)計與交互設(shè)計的交集。那么，動態(tài)效果與靜態(tài)頁面相比，動態(tài)效果的加入，最大的差異是可以讓視覺感官更豐富，傳遞更多的信息內(nèi)容，并且?guī)椭脩衾斫馀c想象，讓無限的內(nèi)容不再局限于有限的屏幕中。以鐵路訂票APP12306為例，作為國家企業(yè)的代表，鐵路客戶服務(wù)面向的用戶是全年齡段，定位為實用型工具軟件，便捷與高效性便是首要設(shè)計原則。但是，其界面設(shè)計實際上存在著許多的問題。例如，在車票查詢的頁面上，下拉刷新并沒有像首頁那樣有著“立即刷新”“正在刷新”“刷新完成”的文字提示，雖然在頁面中央添加了載入的動畫效果，可是設(shè)計者并沒有考慮到現(xiàn)在5G時代的網(wǎng)速，已經(jīng)快到瞬間即可加載完成。如果，刷新前后頁面內(nèi)容沒有明顯變化，用戶在使用過程中就不能清楚地接收到刷新的過程及結(jié)束信息，反而造成用戶的疑問和困擾。極端的追求速度快，也未必就是最佳的呈現(xiàn)方式，一閃而過的提示，并不能有效地反饋給用戶信息，這樣就不符合常規(guī)的邏輯和認(rèn)知體驗。動效設(shè)計應(yīng)該是解決問題、提升體驗的有效工具，并且存在明確的功能性和目的性。它一定是某個元素的功能載體，任何動效都應(yīng)該具有內(nèi)涵，從而有效地補充用戶獲取信息時理解能力的差距。在這里，不得不提到隨處可見的彈窗廣告，它們常以炫目的色彩、不斷閃爍的動態(tài)特效來吸引用戶的目光。利用動態(tài)效果使用戶“被迫”注意到廣告內(nèi)容，然而這樣粗淺的手段，很容易發(fā)現(xiàn)自己的本能層無意識的被利用，繼而激發(fā)他人厭惡的情緒，效果適得其反。動效作為界面設(shè)計中的重要組成部分，確實存在著目的指引不明確、惡意吸引注意力和整體規(guī)劃不協(xié)調(diào)等問題，這嚴(yán)重影響到產(chǎn)品的易用性與觀賞情緒。關(guān)于傳遞的信息內(nèi)容，用戶不該花時間去學(xué)習(xí)如何操作，而應(yīng)該輔助用戶更順利地盡快投入掌握，在保證用戶執(zhí)行任務(wù)效率的前提下，可以在和諧的氛圍中，體驗有溫度的交互內(nèi)容，使動畫更加生動、更具趣味性，來正確引導(dǎo)用戶的情緒。

三、手機界面中動態(tài)效果的情感化設(shè)計

(一)設(shè)計要素

人類本能地會被運動的物體吸引。[2]在界面設(shè)計中，可以充分利用這一點，用動態(tài)元素吸引視覺注意力，來達到引導(dǎo)用戶視覺焦點的作用。人眼會首先捕捉到界面中的動態(tài)元素，其元素的運動方式、形態(tài)變化直接影響視覺感官反饋。在設(shè)計一套內(nèi)外兼修的動效時，既要了解目標(biāo)用戶群的審美需求，也要找到交互體驗中每個元素相對和諧的運動方式，就可以從形變、旋轉(zhuǎn)、縮放、位移、路徑、時間、速度、不透明度等眾多要素進行綜合搭配。

在界面交互中，可以利用動效展示讓用戶關(guān)注到某一模塊的變化，讓變化區(qū)域成為視覺焦點來有效傳達信息，讓用戶更清晰地感知到各個元素之間的層級關(guān)聯(lián)。為了用戶能更好地讀懂動效的含義，設(shè)計時就要考慮整體與局部的關(guān)系，在有限的視覺空間內(nèi)建立運動秩序，分清主次內(nèi)容，從而清楚表現(xiàn)運動過程中元素間的邏輯層級。

當(dāng)點擊底部標(biāo)簽欄的圖標(biāo)切換頁面時，圖標(biāo)會有一系列的動效變化進行信息反饋。例如，當(dāng)下流行的直播型軟件“花椒直播”的Tab Bar設(shè)計，圖標(biāo)從默認(rèn)狀態(tài)的線性圖標(biāo)切換到激活狀態(tài)的線性圖標(biāo)(如圖1所示)，這個過程時間是550ms。太短的動效如果變化太快，可能會造成用戶無法捕捉到這個運動變化，無法成功吸引到注意力，而由于速度太快所造成反復(fù)看不清的經(jīng)歷(例如前文提到的12306APP的下拉刷新功能)，會給用戶帶來閱讀的壓力，降低產(chǎn)品易用性；而動效時間過長，會讓用戶陷入焦慮的等待，消磨好奇心。那么效果比較簡單的Tab Bar動效案例，例如站酷、愛奇藝的時間一般控制在450ms以內(nèi)；而細節(jié)比較復(fù)雜的動畫，例如花椒直播、土豆視頻的時間也在600ms以內(nèi)，既保障了效果流暢的同時，又不會造成學(xué)習(xí)負擔(dān)。在過渡兩種狀態(tài)的動效設(shè)計中，通過觀察圖標(biāo)自身特點，結(jié)合本身的獨特細節(jié)加入動畫，會比單純統(tǒng)一的縮放、彈性、透明度的變化增加了識別性，有助于品牌視覺的建立。比如代表首頁的圖標(biāo)中間有圓角三角形，在點擊的瞬間會形變成點到線，運動路徑繞圖標(biāo)一周，結(jié)束的位置緊接著從無到有地出現(xiàn)粉色的面性元素，放大后再回彈到正常大小，符合物理學(xué)的回彈效果，讓整體的設(shè)計更加具有趣味性，與簡單的線性路徑縮放相比，也更有視覺張力。這樣調(diào)整運動曲線，可以避免單一的線性變化速度，致使物體的運動看起來機械呆板。在點擊后變化的圖標(biāo)周圍，背景還有一層透明度不高的灰色圓圈，這期間的效果如水波擴散放大直至消失，人眼完全可以捕捉到，補足了形式上的視覺反饋。其他幾個底欄圖標(biāo)點擊反饋的動效原理相同，并且做到了運動方式、空間與時間三方面的銜接與統(tǒng)一。由于每個圖標(biāo)的樣式細節(jié)不同，所以可引導(dǎo)繞圈的路徑軌跡也有所不同，從而有效地區(qū)分了各個不同模塊。在整體與局部之間找到了平衡，既做到樣式獨特、風(fēng)格統(tǒng)一，又為產(chǎn)品增添了秩序感，并滿足了人們對產(chǎn)品個性化與趣味的需求，這樣真正言之有物的動態(tài)效果，才能提升品牌認(rèn)同感。

圖1 花椒直播TabBar(圖片來源：花椒直播手機版APP界面設(shè)計截圖)

采用類似設(shè)計的還有當(dāng)下比較流行、關(guān)注度比較高的嗶哩嗶哩APP。其在視頻緩沖時加載的動畫，無論是過去抖動的小電視，還是演變到今天循環(huán)的路徑動畫，其設(shè)計目的都是希望用戶耐心等待，吸引用戶的注意力，來模糊人們對等待時間的感知，使用戶感受到的時間流逝快于真實等待的消耗時間。相比于緩沖加載動畫，下拉刷新的實際使用則更為頻繁，因為下拉的操作可以擁有更豐富的手勢操控路徑，可操作性的區(qū)域比點擊響應(yīng)更大，可以輕松地在屏幕的任何區(qū)域完成上下左右的滑動操作，在這里動態(tài)效果也有更廣闊的設(shè)計空間。嗶哩嗶哩的下拉刷新是可以根據(jù)手勢操作方向改變形態(tài)的半透明波紋，用力程度和拖拽幅度的不同，所反饋的形態(tài)效果也不同，通過變換速度與節(jié)奏，都可以控制顯示效果，這樣貼合生活的物理性質(zhì)，會讓用戶在使用過程中產(chǎn)生舒適的愉悅感，減少違和，這樣細膩的交互動效，一定程度上能增強科技感和品質(zhì)感。

(二)設(shè)計形式

在提升界面交互設(shè)計中用戶的感知體驗，除了完善其功能性、增強易用性，動效原型的形式設(shè)計也尤為重要。使其既具備優(yōu)良的外觀審美，又能與其對應(yīng)的功能設(shè)計和內(nèi)容展示相輔相成。同時界面外觀作為品牌形象、內(nèi)容信息傳遞和理念表達的重要符號，在造型、色彩、布局等方面都應(yīng)盡量簡約大方，符合產(chǎn)品整體調(diào)性又能讓人眼前一亮。

嗶哩嗶哩APP的主要用戶群體是年輕人，圖標(biāo)和界面主要以粉色和白色為主色調(diào)。進入軟件的登錄界面，點擊賬號輸入時，頁面上方的品牌IP形象2233娘是睜大眼睛可愛期待地望著你；而在點擊下方密碼輸入時，2233娘的表情會瞬間變成雙手捂住眼睛的形象，細微動作卻傳遞出希望用戶放心使用的保證與安撫的信息。從本能層來看，這樣的交互設(shè)計，品牌IP漫畫形象動作可愛調(diào)皮，藍色頭發(fā)、時尚的穿搭造型，都符合年輕人的審美喜好。最難得的設(shè)計是在反思層，不僅使用戶加深了對品牌IP形象的記憶，增強了產(chǎn)品整體感，起到了強調(diào)突出洗腦的效果；更是在信息安全隱患頻頻曝光的高科技時代，對用戶不安的心進行安撫，用可愛的方式作出保護的承諾，使用戶對品牌產(chǎn)生認(rèn)同感和增加信任度。讓形式不拘泥于外觀，更賦予了深刻的內(nèi)涵。

另外，嗶哩嗶哩投幣功能在點擊之后，也會出現(xiàn)Q版造型的22娘，上劃或點擊22娘，會挑起碰到頭頂?shù)姆綁K進行投幣(如圖2所示)，這個動作和音效，會使用戶回憶起超級馬里奧這個游戲吃金幣的場景，對大多數(shù)用戶來說，這個游戲是童年的回憶，聯(lián)想起來是輕松愉悅的，情感反映的是個人的體驗、聯(lián)想和記憶。通過形式上的適當(dāng)提取運用，用戶可以在使用的同時，將過去的情感帶入其中，可以說，在反饋層的精巧設(shè)計為產(chǎn)品注入了靈魂。

圖2 嗶哩嗶哩彈幕網(wǎng)投幣功能圖(圖片來源：嗶哩嗶哩視頻號博主——popo的動態(tài)森林)

(三)交互體驗

2020年初，在新冠肺炎疫情席卷全國、日本樂隊RADWIMPS為身處抗疫中的人們創(chuàng)作了一首歌曲《Light The Light》，在網(wǎng)易云音樂上架并發(fā)起了光源行動。這首歌的播放界面有一個特殊彩蛋(如圖3)。其頂部導(dǎo)航欄的右側(cè)有一個圖標(biāo)按鈕，默認(rèn)狀態(tài)是寫著歌名縮寫的白色圓圈，外側(cè)是動態(tài)的兩個細圓環(huán)通過縮放和不透明度的改變，模擬水滴落擴散至消失的效果。當(dāng)音樂播放時點擊圖標(biāo)，圓圈的顏色會變成暖黃色并散發(fā)著光暈，如圓月般柔和明亮，有無數(shù)個向外運動的光斑，宛若星空。在點擊圖標(biāo)發(fā)生動態(tài)效果變化之后，手機后側(cè)的閃光燈會隨著音樂的節(jié)奏閃爍，每一次的燈光閃爍都照亮了身處黑暗的我們，這一系列的交互設(shè)計，由本能層到反思層傳遞著一個信念——光終將驅(qū)散黑暗。一個并不復(fù)雜、沒有過多技巧的動效，卻做到了通過簡單交互操作傳遞出了最震撼的內(nèi)容，無限的感動與希望觸動著觀看者的情感。

圖3 網(wǎng)易云音樂《Light The Light》歌曲界面(圖片來源：網(wǎng)易云音樂手機版APP歌曲播放界面截圖)

四、結(jié)語

用戶對產(chǎn)品的預(yù)期中，情感內(nèi)涵和品牌精神價值的重視度逐漸占據(jù)重要地位。對于界面設(shè)計的需求也更加全面細致。在滿足功能性與實用性的需求后，交互體驗與情感價值逐漸成為設(shè)計重點，有溫度的交互設(shè)計，往往是與用戶情感共鳴的橋梁。產(chǎn)品終歸是服務(wù)于人的，設(shè)計時要站在用戶體驗的角度上，揣摩其情感體驗、審美喜好，研究用戶行為習(xí)慣和生活經(jīng)歷，這樣的設(shè)計更能抓住用戶的需求痛點，所表達傳遞的信息也能被更好的接受。