基于情感化理論的UI插畫組件系統(tǒng)設計研究

繆冬昕 郁舒蘭

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

引言

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

一、情感化理論概述

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

二、UI插畫組件系統(tǒng)設計

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

三、UI插畫組件系統(tǒng)的情感化設計思路分析

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

（一）本能層設計思路

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

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

（二）行為層設計思路

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

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

（三）反思層設計思路

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

（六）應用效果展示

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

結語

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