情感化手機端界面動態效果設計研究

邸小松，封姿羽

(長春工業大學 藝術設計學院， 吉林 長春 130000)

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

一、何謂情感化設計

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

二、手機界面中動態效果設計情感化需求分析

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

三、手機界面中動態效果的情感化設計

(一)設計要素

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

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

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

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

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

(二)設計形式

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

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

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

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

(三)交互體驗

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

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

四、結語

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