基于情感化理論的UI插畫組件系統設計研究

繆冬昕 郁舒蘭

關鍵詞：UI設計 插畫組件系統 情感化設計 視覺設計 用戶體驗

引言

互聯網行業的高速發展給UI設計師帶來巨大挑戰。為了應對用戶需求的激增和產品業務線的不斷拓展，許多互聯網品牌推出了UI插畫組件系統，有效提升了團隊的工作效率。然而，UI插畫組件系統的廣泛流行造成了界面視覺同質化的問題，最終導致了用戶的審美疲勞。另一方面，現有的UI插畫組件系統大多強調功能而忽視了情感表達。基于這一背景，文章將情感化設計理論與UI插畫組件系統設計進行有機結合，著重分析了情感化設計的三層次理論，并在此基礎上提出各層次視角下的設計思路。文章旨在探尋構建UI插畫組件系統的新思路，為該域的研究者和從業者提供參考。

一、情感化理論概述

情感化理論是指用設計觸發用戶情緒反應以提升用戶體驗的設計理論。20世紀之初，簡約主義的設計風格盛極一時。改風格強調產品的功能性和實用性，崇尚“少即是多”，在視覺上展現出極強的工業風。然而，隨著物質生活的提升，用戶開始更加注重心理與情感層面的寄托。在這一背景下，情感化設計理論應運而生。該理論強調用戶的感性認知和心理感受，為產品帶來了溫度和“人情味”。如今，在情感化設計理論的引領下，互聯網產品設計走向了以用戶體驗為中心的時代。情感化理論的核心部分是三層次理論：人類大腦活動可分為本能層、行為層以及反思層，這三個層次分別對應了不同的情緒反應，且三者之間相互作用、相互調節[1]。三層次理論用科學的方式對人類復雜的情緒反應進行梳理歸類，為情感化設計提供了理論依據。

二、UI插畫組件系統設計

UI插畫組件系統是一套架構嚴謹、規則統一的視覺框架體系。該體系以原子設計理論（Atomic Design）為基礎，按照原子構成特征將UI插畫拆解為不同層次的組件，實現了插畫的模塊化運作以及元素的統一化管理。UI插畫組件系統的具體應用優勢主要體現在模塊化、系統化和平臺化三個特性：首先，模塊化的運作模式使得插畫素材具有可復用性，能夠有效避免界面中相同元素的重復生產，成倍地降低了產品視覺的修改和優化成本；其次，系統化的設計思維保證產品視覺在風格上維持統一，從而打造出具有辨識度的品牌形象，強化用戶認知；第三，構建組件系統本質上是將原本單一的素材庫拓展為綜合性設計平臺，實現產品團隊全鏈路、跨職能的高效協作，用設計驅動品牌發展。

三、UI插畫組件系統的情感化設計思路分析

文章基于對情感化三層次理論的研究提出了UI插畫組件系統的設計思路，總體思路如圖1所示。

（一）本能層設計思路

本能層根據感官刺激判斷環境，幫助生物趨利避害。該層次的情緒反應由生物因素決定，遵從自然法則。由此可知，符合自然規律或人類基本認知規律的感官形式能夠給用戶帶來本能層上的愉悅。例如，自然界中大多數生物擁有對稱的生理結構，而非對稱的形體通常代表著基因或生長缺陷，因此，用戶會對具有對稱結構的視覺形式抱有天生的好感。

本能層對應組件系統中的最小顆粒度單位，即畫面中的視覺元素，具體包括造型、形象、顏色和構圖。視覺元素決定了UI插畫的視覺表現，優秀的視覺表現能夠引發用戶的審美心理，激發用戶對產品的使用興趣。因此，在本能層應當對視覺元素制定規范，以達到較好的視覺效果。首先，造型設計應當風格統一、外形流暢、比例和諧，給用戶留下良好的第一印象；其次，人物形象應當貼合用戶審美，提高用的戶好感度；第三，在顏色的應用上，盡量選用高明度、高純度的色彩，打造鮮艷明亮的畫面效果，同時色彩搭配上突出冷暖、明暗對比，提升視覺沖擊力；第四，構圖的布局形式應當貼合頁面特點，而景別設置要聚焦于人物組件，突出畫面中的主次關系。

（二）行為層設計思路

維持人類基礎行為的部分被稱為行為層。在這一層次中，大腦分析刺激信號，并對運動系統發出行動指令。行為層的情緒由行為的完成度和流暢度決定，當行為得以順利完成，人們便會獲得成就感，并隨之產生喜悅、開心等正面情緒；反之，若行為受到阻礙，人們則會有挫敗感，并隨之產生困惑、生氣等負面情緒。

行為層對應產品的功能和操作，在該層次中需要為UI插畫組件賦予功能性和可操作性，使其從單一的元素變為實用的組件。行為層的具體做法為：從角色設定、面部表情和肢體動態三個方面對本能層的人物元素進行延展，形成生動、活潑的系列化人物組件，滿足實用需求。角色設計是指為人物組件增添身份、性別、性格等特征點，以適應多角色互動的業務場景，為了增強用戶代入感，角色的具體設定應當與用戶畫像緊密結合；表情設計是情感在人物面部上的具象化表達，在設計時要選取具有代表性的情感指標；動態設計即對人物動作、行為的設計，應符合人體的結構特征。

（三）反思層設計思路

反思層是大腦進化的最高階段，是人類獨有的行為層次，涉及歷史、文化、社會環境等多個領域，因此最為復雜和特殊。反思層的情感是經過大腦深層思考后產生的，具體表現為：當事物符合個人價值觀或是能觸發美好回憶時，就會在反思層引發積極情緒；反之，若事物違背個人價值觀或是引起人的痛苦回憶時，會讓人產生消極情緒。

反思層的視角是綜合性、多維度的，其情感反饋涉及多種環境因素而非獨立存在，因此需要創建完整情境承載并引導用戶情感[2]。在組件系統中，情境是對多個組件的合理搭配，最終以模塊的形式呈現。在進行情境設計時可以采用逐層遞進的發散思維，即從情感主題出發，按照從抽象到具象的順序逐一確定情境中的事件、行為、實物等元素，做到表里呼應、情景交融。情感、事件、行為、實物共同構成了情境的意象庫，四者緊密結合、相互促進，共同建立起插畫與用戶的情感紐帶。

四、移動辦公平臺UI插畫組件系統的情感化設計

（一）項目背景與設計目標

移動辦公平臺是數字化工作系統，其功能包括智能考勤、即時通訊、共享云盤，可以遠程滿足個人工作、團隊協作、企業管理等多層次商務需求。自疫情爆發以來，移動辦公平臺需求急劇擴大，各大互聯網巨頭紛紛入駐移動辦公賽道。然而，目前大部分的移動辦公平臺只注重功能的研發，忽視了對員工的關懷，導致用戶產生抗拒心理。基于這一背景，文章展開設計實踐，旨在為移動辦公平臺打造具有情感化的UI插畫組件系統，優化用戶體驗。

（二）用戶及其情感需求分析

移動辦公平臺目前主要應用于互聯網企業。由于企業員工的更新速度快，員工整體呈現年輕化趨勢，年齡約在20歲至35歲之間。在價值觀上，由于目標群體受教育程度較高且獲取信息的渠道多、視野開闊，大多堅持多元、包容、平等的價值取向；在消費態度上，目標群體的經濟條件較好，且注重自身感受，愿意為高品質生活買單；在審美上，該群體深受泛娛樂化的影響，喜愛具有沖擊力的視覺形式和以二次元為代表的“萌”系形象。為了明確用戶的情感需求點，文章采用了訪談調研法，對5名互聯網在職員工進行訪談。訪談對象分布于不同互聯網企業，工齡在0.5年到3年之間，崗位包括程序員、設計師、HR和產品經理，使用的移動辦公平臺包括釘釘、企業微信以及企業自研產，具有代表性。本次實踐的設計路徑是，強化用戶工作中的正面情感，引導并轉化負面情感，因此，訪談重點聚焦用戶在工作時的情緒狀態。從訪談中可知，用戶工作中的正面情緒主要有：工作取得成果而收獲的自豪感；工作中有同事陪伴而產生愉悅心情。工作中產生的負面情緒有：重復性工作消磨積極性，引起厭煩；工作強度、難度大，形成焦慮情緒。

根據訪談結果，可將用戶的情感需求總結為以下四點：（1）“驚喜”，用驚喜感打破日常工作的沉悶，增強用戶對工作的積極性；（2）“陪伴”，以朋友或同事的視角關懷用戶，增強用戶的愉悅心情；（3）“見證”，對用戶的工作成果進行可視化展示，強化用戶的自豪心情；（4）“安慰”，在用戶遇到困難時給予安慰，化解用戶的焦慮情緒。

（三）本能層情感化設計：視覺規范

1.造型規范。第一，為了確保風格統一，本次實踐統一采用扁平設計風格，在外形輪廓上凸顯出強烈的幾何特征，主要使用圓形和矩形等面性幾何元素概括物體。內部用線條簡要勾勒結構即可，舍棄細節和裝飾，突出用整體感。第二，根據格式塔心理學可知，人類對事物的認知是整體大于局部的，因此造型設計應當按照從整體到局部的順序，即先用幾何圖形塑造輪廓再往內細化，保證外觀造型的完整流暢，以免細節堆砌導致視覺零散。第三，在比例設計上要以真實比例為基礎，以免造成用戶的認知偏差。

文章以人物組件為例，對造型規范的推演進行說明，具體設計過程如圖2所示。首先，分析當前職場上的流行穿搭，可見，當前流行中性風格、寬松舒適的服裝，在廓形上可以提煉為“H形”。該廓形削弱了肩、腰、臀之間的差異，化曲為直，外形輪廓更流暢，為人體賦予包容性和延展性，貼合用戶追求平等、包容的價值取向。由于“H形”廓形在幾何圖形中對應矩形，接下來用矩形概括出基本人體，頭部則用正圓形表示。第三步，繼續用圓形和矩形的組合概括四肢，注意倒角處的圓潤感。最后，明確人體部分比例關系。本次實踐采用接近模特身材的比例設定，并提高腰線，拉長腿部，迎合用戶對身材的追求。比例具體數值為：以頭部為基本單位a，身高為11a，腿部高度為7a，軀干與腿部長度比為0.57，接近黃金比例；手臂寬度0.9a，長度4.5a，肩寬2.5a，大腿寬1.25a。

2.人物形象規范。文章分析了當前目標群體中普遍流行的IP形象：泡泡瑪特、米菲兔和熊本熊，提取其設計的成功之處應用于本次實踐。泡泡瑪特的五官集中，眼睛較大，面部體現出明顯的幼態特征，突顯“萌”的氣質；米菲兔的視覺特征在于“豆豆眼”和“x”形嘴，簡潔可愛；熊本熊的優勢在其黑色和紅色的顏色對比和憨態可掬的表情。本次實踐的人物形象在扁平風格的基礎上結合了三者的優點：首先，五官位置偏下且相對集中，突出孩子般可愛稚氣的面部特征；第二，眼睛使用了“豆豆眼”，在簡潔的同時突顯“呆萌”的氣質；第三，臉部突出腮紅，豐富臉部色彩，并突顯情感屬性。人物基本形象如圖3所示。

3.顏色規范。本次實踐中的顏色參考了Ant Design基礎色板。該色板利用先進技術捕捉了自然中不同色彩在自然光下的變化規律，形成了鮮艷明亮、富有自然美感的主色，并借助美術素描思路對主色進行深色和淺色的延伸，構成了完整的色系。色彩心理學強調，顏色對人的心理和生理有明顯的影響作用，例如，暖色調讓人聯想到溫暖，對人的心理有積極影響。因此，本次實踐選擇了Ant Design色板中的三個暖色色相，如薄暮紅、日暮橙、金盞花黃；此外，為了增強視覺張力，還選用了拂曉藍和青檸綠兩個冷色調以形成色相上的冷暖對比。本次實踐的基礎顏色規范如表1所示。

4.構圖規范。構圖包括平面上的布局設計和縱深上的景別設計，需要與其載體形式相匹配。本次實踐選擇彈窗載體進行討論。彈窗屬于模態視圖，出現時會打斷用戶操作以確保信息的有效傳達。該觸發機制具有強烈的阻斷感，會大大降低用戶體驗，因此需要融入插畫以緩和用戶的抵觸情緒。布局是指將視覺元素在平面上進行合理排布。如圖4.a所示，本次實踐在布局上使用了“三分法”：首先將彈窗整體高度分為三等分，將文案放于頂部的1/3面積內，余下2/3面積用于容納插畫；接下來再次對插畫部分進行橫向和豎向的三等分，得到4個等分線匯集的焦點，用于定位畫面焦點。利用“三分法”布局的畫面元素均衡、緊湊有力，適用于扁平插畫一類平行焦點的畫面。景別是指主體物在畫面中呈現范圍的區別。其中，遠景和全景可以呈現完整人體和較多景物，但是人物臉部較小難以透傳情感，因此不適合情感化設計；特寫則聚焦于人物肩部以上，雖然能夠放大表情，但是畫面缺少動作和場景描寫，過于單一。可見，本次實踐應當選擇中景和近景的景別設置（如圖4.b）：中景包含人物膝蓋以上的部分，適用于多個人物互動的場景；近景聚焦于人物胸部以上，適用于描繪單個人物。

（四）行為層情感化設計：延展設計

1.角色延展設計。為了適應職場中多角色互動的場景，在行為層需要對人物進行角色延展。角色設定從用戶畫像出發，將身份、性別、性格等特征融入細節設計中，增強用戶的代入感。本次實踐以職場中的崗位類別作為角色的劃分依據，如圖5所示，具體包括以下四個角色：（1）技術員：負責項目技術實現的員工，如程序員。該角色精通計算機技術，熱愛科技，性格直率、不善言辭。因此，選用象征沉穩、冷靜、具有科技感的藍色作為其代表色。服飾款式簡單，裝飾較少，符合角色不善打扮的個性，在臉部特別增添了眼鏡作為視覺特征。（2）團隊維護：服務管理企業團隊的員工，如人力資源師和行政服務人員。該角色代表企業形象，因此在服裝上選擇了相對正式的職業套裝，色彩上選擇溫暖的黃色。（3）策劃者：負責項目的發起和策劃，如產品經理、項目策劃。該角色樂于表現、思維活躍，因此在服裝款式上選擇了活潑的衛衣和中褲，在色彩上使用具有生命力的綠色。

（4）設計師：負責項目的創意及視覺部分，如插畫師、平面設計師。該角色設計細節最為豐富，如服飾上使用了具有沖擊力的撞色花紋、發型具有層次感，這些細節突出了角色具有較高審美力和創造力。

2.表情延展設計。表情是情感在人物面部的具象化呈現，在情感化設計中具有重要意義。為了確保表情的有效性和代表性，本次實踐查閱了代爾夫特大學情感研究實驗室提出的人類61個基本情感指標，該情感指標有大量的研究樣本支撐，可信度較高。接下來，根據調研部分提煉的情感需求，文章從61個情感指標中挑選出相關度最高的6個情感：驚喜、歡快、活力、愉悅、自豪、滿意、失望、焦慮。最后，用五官的細微變化刻畫出這6種情感，具體設計如圖6所示。例如，驚喜表情中，眉毛上揚，嘴巴張大，體現出驚訝，而同時嘴角上揚表現喜悅。

3.動態延展設計。為了保證人物動態的方便和協調，本次實踐學習了動畫制作中的“動作骨骼”技術。利用這一方法，動態變化信息得以從人物主體中抽離，單獨記錄于“動作骨骼”上，降低了動態設計的難度，并且實現了角色之間的動作共享。如圖7所示，將人物造型關節處的圓心相連即可獲得動作骨骼，將四肢繞節點旋轉、移動可快速設計出目標動作。

（五）反思層情感化設計：情境設計

反思層的情境設計模型如圖8.a所示。該模型的中心層即為調研部分所提出的情感需求，即“驚喜”“陪伴”“見證”和“安慰”。第二層是觸發這些情感需求的具體事件，例如生日派對、入職儀式、入職紀念日都是對用戶有特殊意義的時間點，在這些時間點上設置提醒可以使用戶感到驚喜。第三層則對應情境中具有代表性的人物行為，如生日驚喜中的“送禮物”“開派對”或是“鼓掌慶賀”。第四層是在情景中增加實物，起到烘托氛圍、配合人物行為以及豐富畫面層次的作用。實物通常是場景中的典型事物，如生日場景中的生日蛋糕、蠟燭、禮花等。“驚喜”“陪伴”“見證”“安慰”的情境意象庫分別如圖8.b、8.c、8.d、8.e所示。

（六）應用效果展示

圖9展示了利用該UI插畫組件系統制作的實際應用效果。圖9.a為“驚喜”情境中的“生日”場景，整體以紅色為主色調，突出歡樂的氛圍，人物動作為“鼓掌”和“送蛋糕”，實物以蛋糕為主，背景中襯托了飛出的禮花；圖9.b是“陪伴”情境中的“上班簽到”場景，色彩以象征活力的橙色為主，人物動作為“喝咖啡”，背景中用太陽和日歷暗示時間；圖9.c是“見證”情境中的“轉正”場景，人物揮舞工牌突出轉正這一信息，背景中充斥了象征榮譽的小紅花，整體色調以黃色為主，暗示榮譽與成功；圖9.d是“安慰” 情境中的“提案失敗”場景，主色調設置為藍色，暗示角色低落的心情，通過人物間的親密舉動向用戶傳達關懷與鼓勵的情感，力求轉化用戶的消極情緒。

結語

UI插畫是幫助人們理解界面信息的視覺語言，在界面設計中占有重要地位。組件系統運用系統化、模塊化、平臺化的思維來運作UI插畫，其組織邏輯清晰、結構層次分明；而情感化設計則是從感性的角度出發，聚焦于用戶內心情感。構建情感化的UI插畫組件系統本質上是將理性邏輯與感性認知相結合，共同促進UI界面設計的升級與發展。