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

繆冬昕 郁舒蘭

關(guān)鍵詞：UI設(shè)計(jì) 插畫組件系統(tǒng) 情感化設(shè)計(jì) 視覺(jué)設(shè)計(jì) 用戶體驗(yàn)

引言

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

一、情感化理論概述

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

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

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

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

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

（一）本能層設(shè)計(jì)思路

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

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

（二）行為層設(shè)計(jì)思路

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

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

（三）反思層設(shè)計(jì)思路

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

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

四、移動(dòng)辦公平臺(tái)UI插畫組件系統(tǒng)的情感化設(shè)計(jì)

（一）項(xiàng)目背景與設(shè)計(jì)目標(biāo)

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

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

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

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

（三）本能層情感化設(shè)計(jì)：視覺(jué)規(guī)范

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

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

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

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

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

（四）行為層情感化設(shè)計(jì)：延展設(shè)計(jì)

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

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

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

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

（五）反思層情感化設(shè)計(jì)：情境設(shè)計(jì)

反思層的情境設(shè)計(jì)模型如圖8.a所示。該模型的中心層即為調(diào)研部分所提出的情感需求，即“驚喜”“陪伴”“見證”和“安慰”。第二層是觸發(fā)這些情感需求的具體事件，例如生日派對(duì)、入職儀式、入職紀(jì)念日都是對(duì)用戶有特殊意義的時(shí)間點(diǎn)，在這些時(shí)間點(diǎn)上設(shè)置提醒可以使用戶感到驚喜。第三層則對(duì)應(yīng)情境中具有代表性的人物行為，如生日驚喜中的“送禮物”“開派對(duì)”或是“鼓掌慶賀”。第四層是在情景中增加實(shí)物，起到烘托氛圍、配合人物行為以及豐富畫面層次的作用。實(shí)物通常是場(chǎng)景中的典型事物，如生日?qǐng)鼍爸械纳盏案狻⑾灎T、禮花等。“驚喜”“陪伴”“見證”“安慰”的情境意象庫(kù)分別如圖8.b、8.c、8.d、8.e所示。

（六）應(yīng)用效果展示

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

結(jié)語(yǔ)

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