UI設計中的視覺心理認知與情感化設計分析

陳越紅 王爍堯

引言

日本工業設計大師榮久庵憲司說：“贊美輕盈簡潔的美感，渴望提高功效、舒適、豪華和多樣性，實現美和對美的渴望是未來設計的目標?！雹佼斚挛磥硪阎?，社會整體的數字化發展讓人機交互技術膠黏糅合在人類社會活動的各方各面。UI就是讓人與機器得以交流的“信息之窗”，其設計自然被包含于“未來設計”之中，分享共通的設計理念。

隨著現代人們對心理認知研究的逐步深入，設計界也掀起了“以人為本”的理念浪潮。以“未來設計”的標準來看，產品的外觀構造不應只依附于功能存在，應該更多地考量人的視角，以感受為根，以心靈為本。美國認知心理學家唐納德·諾曼（Donald Arthur Norman）教授將這一思想概念化為“情感化設計”，并同名著有《情感化設計》一書。大趨勢下，互聯網應用開發作為新興產業自然順應形勢，情感開始作為度值介入設計理念。UI作為人機對話的最主要渠道，包攬了絕大部分情感的設計、承接與表達的職責。優質的UI設計會給予用戶高層次的產品使用體驗，正向的情緒認知增強產品的用戶黏度，大局上看能更進一步推動應用市場的經濟效益。

鑒于環境與需求的雙重發展，情感化UI設計應運而生，既是行業大勢所趨，也是人類天性驅使。這一新標準要求設計師在全面理解產品邏輯的前提下，設計出不影響產品功能且滿足用戶更高層級期望的創意表達工具，以此修正引導用戶的知覺、決策與行為。

一、互聯網軟件產品的UI設計要素

UI（User Interface，用戶界面）設計是一廣義概念，從字眼來看，UI被拆分為“用戶”與“界面”兩個部分，其研究內容卻不局限于此。數字信號經過一系列能量轉化，以像素矩陣的形式將應用界面表現在顯示屏上，所形成的圖案再投射至人的視網膜，形成一次機器到人的單向信息傳遞。在這一過程中，顯示屏是人機之間信息流通的物理渠道，應用界面是信息的內容載體。硬件與軟件共同構成“界面”的具象概念，而人是信息橋梁的另一端點，也就是“用戶”。除去這兩方面，整個過程本身也被囊括在概念里，代表了兩者間的交互關系。

結合上述三方組成，完整的UI設計工作可以被分為：用戶研究、IXD（Interaction Design，交互設計）以及GUI（Graphical User Interface，圖形用戶界面）三大流程模塊，圖1為UI設計的全套流程結構。

圖1：完整UI設計流程的結構樹狀圖，作者自繪

用戶研究的工作發展需要歸結于設計行業對用戶體驗日益加深的重視程度。產品設計理念經歷了從人適應產品到產品服務于人的重大轉變，設計重心從“功能”偏轉到“體驗”。用戶研究的步驟時序通常優先于整體設計流程，其目的在于定義產品用戶群、細化產品概念、為受眾群體繪制用戶畫像、洞察需求以滿足需求。簡而言之，只有充分理解用戶的設計團隊才能設計出真正滿足需求的應用產品。

IXD是對用戶期望切實了解后的產品模型建構。確立產品概念后的一系列工作流程包括概念設計、可用性測試、方案評估與調整、制作高保真模型以及排版。交互設計的目的在于盡可能滿足用戶對應用產品功能上的一切需求，可用性、易用性、實用性與美觀性都在交互設計的考量范疇。

GUI直意為采用圖形方式實現的計算機用戶操作界面，可被狹義概述為“界面優化”。一個應用產品只有程序開發成型后是無法被用戶接受的。由于初始的字符界面程序語句晦澀難懂，非專業者無法理解與操作，需要圖形設計師對界面接口進行圖形化整合設計，讓工整的幾何區塊替代字符語句成為信息顯示的表面形式。從審美角度來看，經過設計的色彩圖案可以直接從生物層面刺激人的視覺神經，喚醒人的本能審美取向。設計者也會使用具有象征意義的符號系統繪制功能圖標，以此迎合人建立在社會基礎上的文化認知。

若要將GUI設計分割拆解成獨立的元素，色彩因素、整體風格、圖形語言、視覺層級構圖以及交互動畫設計都屬于其內容范疇，針對UI視覺的情感化運用基本圍繞這幾點要素展開。

二、產品用戶的視覺思維與情感認知

反思用戶在界面交互過程中的現實情形，人在接收和反饋信息時主要依靠視覺感官、聽覺感官與觸覺感官，其中視覺在大多數情形下占絕對主導地位?；诖朔N特性，可以說用戶主體對軟件應用的感知與體驗取決于屏幕界面的可視顯示。

德裔美籍知覺心理學家魯道夫·阿恩海姆（Rudolf Arnheim）在其著作《視覺思維》中的一系列論證都旨在證明：感知，尤其是視知覺，具有思維的一切本領。這種本領是說視知覺本身并非低級感官，它本身已經具備了思維功能、具備了認識能力和理解能力。②傳統心理學認為視知覺只能從視覺活動中獲得某種知覺意象，而對意象整合認知的處理器仍是人類大腦。阿恩海姆否定了這種對視知覺功能的狹隘觀念，他認為人類對視覺意象的處理分為思維成分與感性成分，在我們的視覺接觸到物象的一瞬間，感性成分就已經具有了直覺判斷，這種本能的處理過程并不需要邏輯思維的參與。出生不久的嬰孩對某些顏色或圖形有著與生俱來的喜愛傾向，這一現象也證明了視覺思維中的感性成分具有獨立處理與判斷的能力。

知覺直覺是認知活動的其一方面，與理性思維并行。當主體嘗試通過邏輯理解世界時，思維也無法脫離感性本能的基礎平臺肆意發散。這意味著在消費活動中，大多數情況下，視知覺已經在“第一眼”的無意識中為顧客做出了選擇，這一現象的根源機制被阿恩海姆稱為“審美直覺心理”。這種選擇沖動生發于直覺所在的本能層，當產品的后續服務體驗超出用戶的期望閾值，用戶將更樂于為該產品賦予某種價值取向。情感沖動隨之進一步上升至反思層面，在人與物之間形成更為牢固穩定的依賴關系。

設計歷史中那些讓消費者一見傾心的、具有超高銷售額的設計產品大多有著周正圓潤的形狀輪廓、流暢優美的外形曲線或迷人舒適的色彩搭配。類比到互聯網軟件，UI就是軟件產品的包裝，是作為主導感官的視覺的主要接觸體。感官上的優質體驗不僅是產品的附加值，更是軟件整體服務的質量保障，能夠促成產品口碑與經濟效益的正向反饋。

除了直覺審美的抉擇傾向，格式塔心理學理論的引進又為視覺思維闡釋了一種新特征，即完型傾向。格式塔心理學的基本理念為：“知覺是一個整體，是一個格式塔，任何分析和還原都會破壞這種整體性?！雹郯ㄒ曋X在內的心理認知都具有將感覺元素拼合成完整經驗形式的能力與傾向，這項能力確保了人類只需要把握對象的數個主要特征即可大概掌握對象全貌，避免了人腦對信息處理的過載困擾。視覺思維的完型傾向映射到表層現象上可表現為人腦對類似人臉圖案的識別，或是僅根據局部圖案補充完整畫面。大腦在面對“不完整”的信息圖樣時會自動生成一個同型的腦場模型，這種模型的存在常被設計者利用到圖片的繪畫創作上。

在視知覺的感知活動中涉及到了情感與認知兩種心理現象，兩者同屬信息處理系統。這里的“情感”泛指人類的感情，包括情緒。情感是與生俱來的，全人類的情感表現都是相通的，美國心理學家保羅·艾克曼（Paul Ekman）曾說：“情緒表情是全球通用的，而不是在特定的文化下習得的，這是生物的本能和人類進化的產物。”④認知則是人類后天成長中潛移默化的影響塑成體，不同個體之間存在著認知差異。情感主導判斷，幫助人類迅速對環境事物產生反應；而認知則嘗試解釋世界，負責弄清本真的邏輯。情感對應著自然人的感性成分，認知則是社會人的思維成分，兩者不可分離，相互滲透。人們的所做所想在潛意識中影響著情感，而反過來，情感也會改變人類的思維方式，傾向于用本能反應來趨利避害。

人們在進行軟件操作或其他復雜生命活動時，發出的行為指令可分為“自下而上”與“自上而下”兩種（圖2）。當行為沖動由情感發起，傳遞并影響到人的認知時，被稱為“自下而上”行為；當活動由人類的理性認知發起，影響至人的情緒情感時，被稱為“自上而下”行為。

圖2：情感與認知關系簡圖，作者自繪

舉例說明，某款創意類應用的圖標設計精致華美，界面配色高級優雅，用戶的審美需求被滿足，積極情緒促使其付費買下產品，從愉悅的產生到結賬付款這一過程即“自下而上”行為；當人們在使用設計粗泛的某款產品時，因為卡頓的操作界面與殘缺不全的功能而惱怒不已，不舒適的體驗認知導致強烈負面情緒的產生，這種情況即為“自上而下”。

三、以用戶體驗為中心的UI情感化設計理論

將情感融入設計，是繼人們開始重視用戶體驗后被提出的設計理念，設計師開始強調主客體之間的情感共鳴，以此滿足內在的隱性需求。唐納德·諾曼將情感化設計及其目標明確地劃分為三層理論模型：本能層、行為層、反思層，并將三個層次對應的設計水平進行了有用的簡化：本能水平的設計對應著產品外形；行為水平的設計對應使用的樂趣與效率；反思水平的設計對應自我形象、個人滿意與記憶。⑤

“AJAX之父”杰西·詹姆斯·加勒特（Jesse James Garrett）在《用戶體驗的要素》中為用戶體驗制作了一個五層模型。

這一模型從下至上即為一般應用軟件的開發流程順序。在整個應用開發組成中，與軟件UI的功能位置對應的是表現層、框架層與結構層。若將UI設計單獨置放，其本身也可被視為一個獨立的設計流程，具有完整的用戶體驗要素，對人的本能、行為與反思均有影響作用。以下圍繞用戶體驗的不同層級，根據情感化設計的各層水平分點探討UI設計中的應用理論。

1、本能層面的UI設計

人的基層本能來自于漫長的物種進化與自然競擇，在該層面上多數個體的情感偏好是相通的。對生物而言，求生本能是種群繁衍的根基，能提供食物、安全感與生存幾率的事物與正面情感的關聯更強，其具化為視覺意象為：溫暖明亮的火光；鮮艷的高飽和度色彩；友善的微笑面孔；圓潤平滑的表面；對稱的形狀；整齊的物品擺放；生物幼崽等等。這些碎片化情境又被設計者重新分解為設計元素運用在UI市場中，以確保應用界面外觀能為大多數人接受。

除卻生存本能，后天環境的養成同樣影響著人腦本能層面的認知。在這方面，地理位置、國家種族、家族信仰、性別年齡、工作教育等社會條件都是影響個體認知形成的關鍵誘因，導致了種群之間、個體之間的差異存在，用戶研究工作也基于這種用戶群的差異性展開。某些情境下，后天養成本能會與先天本能相沖突，例如某類人群對食物口味的非主流偏好。出于能量攝取的生存需求，人類的味蕾天生更喜愛品嘗甜味、鮮味與咸味，同時為了避免毒害，更抗拒帶有酸味與苦味的食物。但在社會體系里，酒文化的風尚久興不衰，喜愛飲酒的人不在少數。酒精味道苦澀，是后天環境的影響讓部分人群克服了先天本能。在針對某些具有特定特征的人群設計應用產品時，除了先天本能外還需要考慮該群體獨有的后天本能傾向。

基于以上觀點，可以對市場上大部分產品UI的本能層設計做出幾點總結：

（1）妄圖用一套設計取悅所有人是不現實的，產品開發前應采用針對性設計策略對用戶群體與應用類型細化分類。

用戶界面的大體色調應該統一，盡量結合內容語義來使用色彩。娛樂類應用產品的表現層應當使用豐富多彩的方式呈示數據信息，使人的邊緣性注意力不斷被刺激，避免讓用戶因視覺空間狹小而感到焦慮。

（2）構圖設計的精髓是把多種功能壓縮到一個有限的空間且保持美感，簡潔的直線或流線型是常用的區塊分割設計方法。版塊的排布不一定嚴格整齊但要有規律可循，大小位置按軟件功能的重要性與使用次數順序安置，整個界面中最主要的功能區塊或圖標要在視覺上被凸顯出來。

（3）盡可能使用圖標代替文字，界面的文字說明應扼要精當。圖標的設計應簡單、圓潤且容易識別。

2、行為層面的UI設計

行為水平設計的優劣從四個方面來衡量：功能、易懂性、可用性與物理感覺。對一款應用程序而言，其功能性在于產品開發初期的策劃與反思，物理感覺在于計算機硬件的設計與組裝，易懂性、可用性在于功能性在UI中的體現程度。后兩者是交互設計的考量重點。

優秀的設計往往通透易懂，其產品外形就是其操作方法的表達，互聯網軟件的設計同理。如何讓交互界面引導用戶的操作思維是UI行為水平設計需要思考的基本問題，其中反饋是行為水平上對設計者與用戶兩者而言最為關鍵的系統機制。反饋是主客體產生理解的重要因素，一個軟件程序必須提供連續且有效的反饋，準確地表明已經發生了什么和正在發生什么，才能讓人清楚它在怎樣地運行，從而決定下一步指令。

人們對一款產品的信任程度取決于它的概念模型及從中獲取的反饋，因此在設計過程中需要不斷調整并增強產品模型，以強調信息的反饋。模型的增強需要將用戶的使用感受反饋給設計師，設計師再進行用戶體驗改良，這一過程也同樣利用反饋機制。這種方法在軟件開發領域被廣泛應用，被稱為“快速原型模型（Rapid Prototype Model）”（圖3）。代入UI設計的具體流程，該模型可具體化為一系列循環迭代的設計步驟（圖 4）。

快速原型模型在UI行為水平設計上的引入，讓設計者把界面交互重點放在了理解和滿足用戶的真實需要上。從用戶角度來看，UI最根本也最被需要的功能就是使數據信息更容易儲存、發送和共享，使用過程應盡可能地保留效能并去掉阻礙，這一目標的實現需要用戶與設計者共同的參與。

3、反思層面的UI設計

人腦在反思水平的加工是兼具社會性與個體性的。人類是“活在他者眼光中”的族群，只要生活在社會環境中，任何人都無法避免對自我形象的關注。即使是那些聲稱對別人的評論毫不在意的人群也是如此，這種思想言論本身也是對自我生活哲學的公開聲明。組織或團體中的個體會為自身打上“群體標簽”與“個體標簽”，前者幫助個體更好地融入群體，后者在于對自身個性的樹立與維護。

個體擁有的產品集合是自我形象樹立的重要成分，一個人的日常用品也在向別人訴說它的使用者是個怎樣的人。在大眾看來，高品位的、高價值的產品設計可以和高檔次的人格地位掛鉤，這便是強調情感化設計的真正價值所在：滿足人建立其自我形象和社會地位的需要。

反思水平的活動常常決定大眾對一款產品的主觀印象，某些UI設計元素對一部分人具有積極作用，但同樣的設計卻可能引起另一部分人的消極情緒。用戶研究的目的就在于讓應用開發商“對癥下藥”，根據不同人群畫像差異來打造針對性應用軟件，匹配的界面設計也應符合目標用戶的期望形象設定。當下流行的“個性化定制設計”便是為了滿足個人反思水平的審美需求。當反思水平的設計可以讓人產生足夠多的正向情緒時，情感上的價值可以彌補甚至超過行為水平的設計缺憾。

對UI的反思水平設計通常需要本能層的設計來實現，通過外形設計達成的反思認知具有公眾性與目的性。更深層次的反思認知則與產品本身設計的關聯性不大，如對家人的情感依托、對故事的紀念等，它們與個人經歷記憶有關，并非設計師能夠滿足的大眾需求。

不同水平的設計方案是有差異的，循環迭代的UI模型設計步驟在行為水平上是高效可用的，但從本能與反思水平上看，經過反復迭代的過程打磨、并經過多人數成員檢驗的設計產品是不斷折中妥協后得到的最中庸的結果。這樣呈現的外形設計雖然保證了安全、能被廣大群眾接受，但卻往往是枯燥干癟、乏善可陳的。

四、情感化設計在UI交互設計中的實際應用

情感化設計理論自提出以來便擁躉無數，受到廣大設計從業者的認可。基于該理論的UI設計應用在各類程序上處處可見，用戶的情感需求已然成為軟件市場中的核心競爭條件之一。以下選取幾個角度舉例，分析實際應用中UI設計的情感化體現。

1、啟動頁面主題展示

最好的設計始終遵從一個概念主題，具有明確的視覺重點。軟件應用通常會設定一個Slogan，用來傳達產品的核心理念，并將其作為用戶群體的代表性標簽。部分移動端APP將Slogan展示在啟動頁面上，這即是反思水平設計的一種體現，在面向年輕受眾群體的設計作品中常見這種手段。主題標語的選擇要貼合年輕人的心理定位，盡量讓產品看上去更“酷”，更與眾不同。除了擬定主題，還應當為產品應用選擇適合的主題色彩。色彩對人眼來說比文字更加直觀，能從本能層面上將產品的“情緒”傳達給用戶。

Keep是一款提倡自律自控的健身應用，致力于提供健身指導、交友及裝備購買的一站式運動問題解決方案。Keep在啟用頁面中展示的宣傳語為“自律即自由”，選擇了深灰色作為背景顏色，整個界面設計兼具工業時代的秩序感與計劃性，以及運動健美的力量感。網易云音樂作為一款音樂播放平臺，其啟動頁面宣傳語為“音樂的力量”，主題色也采用高飽和度的紅色來表現音樂的澎湃力量。

2、合理使用攝影、插畫設計裝飾界面

在現代平面設計中，插畫、攝影等圖像藝術是頗為常用的展示性元素，在UI設計中也常使用平面藝術來引導、啟發與呈現信息。在界面交互領域，“一圖勝千言”是非常經典且有用的經驗總結，除了圖像作品本身的藝術性能讓用戶感受到美之外，一張圖片所能傳達的信息與情緒也遠非一段密集的文字能媲美。不少軟件會使用具有一定審美價值的圖像作品作為啟動展示。

3、頻繁有效的反饋

對反饋的重視與優化是行為水平的情感化設計，擁有有效且頻繁的反饋機制的應用產品能很輕松地贏取用戶的信任。理財類應用、電商類應用等涉及金錢交易與隱私保護的軟件需要用戶極高的信用額度，在這類產品界面中常能見到可視化反饋機制的建構與運用。

4、個性化定制

系統為用戶提供若干套不同風格的界面皮膚來挑選，這一舉措讓設計師避免了為趨和大眾審美而殫精竭慮，用戶們只需要從眾多風格中選出一套最適合自己的即可。個性化定制讓產品的界面設計工作成為用戶體驗的延伸，個人設計滿足的不只是用戶本能層的審美需求，也滿足了用戶自我品味形象的塑造需要。

5、擬人化情感設計

人們傾向于從任何有生命或無生命的物品中讀取情感反應。為軟件設定性格、賦予人性化的語言表現，是開發企業常用的博取用戶共情的手段。這種手段是情感化設計的最為直接的表現，也往往最為有效。它讓應用產品從冷冰冰的程序變成了有感有情的“生命”，程序的通知提醒借擬人化的口吻傳達給用戶，通過對話表達情感、同理心與鼓勵，這種設計從三個層面上均有適用性。

適當的趣味設計與視覺刺激會給產品界面以及產品本身增色不少，但情感化設計不要過于強硬，不應使情感化信息侵占過多界面區域，擾亂用戶正常使用產品的信息接收。

五、結論

從人類視知覺的生理層面進行的系統化研究，是對以人為本設計思想的理論式踐行，是從生物本能的根源去挖掘，并分析人對審美的傾向天賦。人類主體通過知覺思維來認識世界，研究其涵蓋的情感與認知也是對認識行為本質的探索，成果可作為設計理論的填充基礎。情感的賦予讓冰冷的方寸之間變得生機盎然，讓程序與機器也沾染了感性的溫度。唐納德·諾曼的三層設計水平的高匹配性使其同樣適用于UI設計領域，兩者結合的UI情感化設計理論可以有效提升用戶的交互體驗，將體驗從本能的審美直覺上升至反思的情感依賴。對情感設計元素的合理運用能夠加固用戶與產品的情感樞紐，進而擴增產品的忠實粘性用戶，為應用市場帶來長遠的經濟收益。

情感化設計有效化的前提是對用戶進行細致充分的調研且讓用戶直接參與到設計流程中來。由于個體的認知差異，反思層情感化設計具有明顯的群體劃分特性，在界面概念模型成型之前需要繪制用戶群體畫像，針對不同人群進行匹配設計。在個體意識不斷覺醒的今天，UI設計行業應當繼續圍繞用戶體驗發展，借助科學量化人類的情感認知，用藝術美學與同理情感在科技與心靈之間構架交互橋梁。

注釋：

① （美）唐納德·諾曼著，付秋芳譯：《情感化設計》，北京：電子工業出版社，2006年，第83頁。

② （美）魯道夫·阿恩海姆著，滕守堯譯：《視覺思維：審美直覺心理學》，成都：四川人民出版社，1998年，第28頁。

③ （美）魯道夫·阿恩海姆著，朱疆源譯：《藝術與視知覺》，成都：四川人民出版社，1998年，第308頁。

④ （美）保羅·艾克曼著，賓國澍譯：《心理學家的讀臉術：解讀微表情之下的人際交往與情緒密碼》，北京：當代中國出版社，2014年，第37頁。

⑤ （美）唐納德·諾曼著，付秋芳譯：《情感化設計》，北京：電子工業出版社，2006年，第21頁。