網(wǎng)頁或App界面的情感化設(shè)計，作為用戶體驗和需求金字塔的最高層級，越來越多的受到設(shè)計師們的關(guān)注和重視。Donald Arthur Norman， 作為享譽全球的認知心理學家和尼爾森·諾曼集團的聯(lián)合創(chuàng)辦人之一，也在其名為《情感化設(shè)計》的書籍中，從本能，行為和反思三個設(shè)計維度，講述 了情感在界面設(shè)計的重要地位和作用，強調(diào)web或app設(shè)計要從情感層面吸引和留住用戶，提升用戶體驗。

但作為設(shè)計師， 究竟如何才能將情感元素巧妙地融入網(wǎng)頁或軟件設(shè)計，使界面輕松擺脫冰冷的人機交流，增強界面吸引力和引導力的同時，提升用戶認同感和忠誠度呢？

以下，本文將從六個方面為大家分析和講解UI 界面設(shè)計中應(yīng)該如何應(yīng)用情感化設(shè)計，為Web或App設(shè)計錦上添花。當然，為方便大家理解和借鑒，小編也將結(jié)合最新且充滿人情味的UI 設(shè)計實例和相關(guān)原型設(shè)計實例（本文所有原型實例都是小編使用一款簡單快速的原型工具，Mockplus，制作完成）進行介紹，希望對大家有所幫助：

首先，什么是網(wǎng)頁或App UI的情感化設(shè)計？

網(wǎng)頁或App UI的情感化設(shè)計是指，設(shè)計師利用界面元素或元素的組合，激發(fā)和帶給用戶正面，積極的情緒反映，例如快樂，喜愛，自由等等。 一定情境下，一些設(shè)計師甚至大膽使用別出心裁的頁面設(shè)計，激發(fā)用戶負面情感（比如悲傷，遺憾等等），以求引起用戶共鳴，從而拉近與用戶的心理距離，更加高效地引導用戶，提升用戶認同感。

簡而言之，情感化設(shè)計具體包括利用彩配色激發(fā)用戶情感，或高興，或溫暖，或?qū)庫o祥和；利用簡單易懂，自由流暢的交互設(shè)計，吸引用戶點擊或參與；以及利用暖心體貼的界面文本設(shè)計，打動用戶等等。

總之，好的情感化設(shè)計界面會讓用戶眼前一亮，迅速抓住用戶的心，讓用戶擁有更加暖心，愉悅的體驗。

如圖，利用界面所有元素，尤其是圖片和文案，向用戶傳達其產(chǎn)品安全而值得信賴的情感信息。

那么，如何才能設(shè)計出充滿人情味的Web或App設(shè)計？

正如以上情感化設(shè)計定義講述的那樣，Web或App設(shè)計的每一個元素或細節(jié)都可能成為用戶情緒的激發(fā)點和源頭。那么，設(shè)計師如何才能更加高效的利用簡單常見的界面元素，打造吸睛又不失人情味的頁面設(shè)計呢？為方便大家理解和借鑒，這里主要從 6 個主要方面為大家介紹：

1). 利用視覺元素的情感化設(shè)計，打動人心

視覺設(shè)計元素也可人情味十足。具體而言，設(shè)計師可以從以下幾個方面嘗試設(shè)計：

*利用色彩吸引用戶，激發(fā)用戶情感

色彩，作為頁面視覺設(shè)計中最重要的元素之一，對于Web或App UI 能否在第一眼就吸引并留住用戶發(fā)揮著至關(guān)重要的作用。無論是單個色彩的應(yīng)用，還是多種色彩的搭配使用， 例如網(wǎng)頁主色調(diào)，配色以及圖片文字色調(diào)的選擇等等，終究都是為了通過色彩帶給用戶不同的情緒反應(yīng)，獲得不同的情感體驗。

例如，黃，紅等積極的色彩或主色調(diào)的應(yīng)用，給人以熱情，青春，幸福，快樂等正面情緒，讓用戶不自覺地擁有更加積極正面的情感。而，藍，綠，黑等消極色彩或配色的應(yīng)用，給人以安靜祥和，自由舒適之感，讓用戶不自覺地平靜下來，變得更加理智而有耐心�？傊�，利用色彩引發(fā)不同的情感傾向，是頁面設(shè)計中表達情感的重要途徑之一。

如圖，作為一款中餐廳的在線網(wǎng)頁設(shè)計，設(shè)計師選擇了最具東方特色的紅，黃色作為整款設(shè)計的主色調(diào)。這樣的色彩選擇不僅讓整款設(shè)計直觀吸睛，引人入勝。而且，還營造出了極具東方之美的氛圍，讓人忍不住喜愛而躍躍欲試。

如圖，以藍，白色為主色調(diào)的 404 報錯頁面，能夠在無形中傳遞出平靜舒適之感，從而更加有效的緩解用戶突然面對報錯時的負面情緒。

*打造清晰直觀的布局和排版設(shè)計，拒絕煩亂和用戶反感

選擇或設(shè)計更加清晰，直觀，結(jié)構(gòu)化和層次化的頁面布局和排版，能夠讓用戶更加簡單快速的把握界面主次，從而避免雜亂無章或毫無層次重點的內(nèi)容設(shè)計，帶給用戶的不快和反感。

如圖，利用更加清晰直觀，且層次結(jié)構(gòu)分明的布局和排版，突出界面主次，方便用戶更加簡單快捷的查找所需內(nèi)容， 拒絕煩亂和用戶反感。

*利用網(wǎng)頁視覺元素的組合和對比，打造舒適，統(tǒng)一的設(shè)覺設(shè)計

除了利用單個視覺元素（例如色彩，圖片，文字等）吸引用戶，多種視覺元素的組合和對比，對于打造舒適，統(tǒng)一的界面設(shè)計，作用也是極佳。比如，通過圖片和文字的色彩，大小，位置，對齊方式，數(shù)量，以及層級的組合和對比，創(chuàng)建更加清晰直觀，舒適易懂的頁面設(shè)計。

如圖，通過利用Mockplus的“圖片”，“ 單行文字”以及“按鈕” 等組件的組合，結(jié)合其尺寸，位置，排版，色彩，以及對齊方式的不同，打造出視覺上舒適，統(tǒng)一的網(wǎng)頁原型設(shè)計。

標簽： 情感化設(shè)計 界面優(yōu)化 交互設(shè)計 

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請與原作者聯(lián)系。