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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

如圖，以藍(lán)，白色為主色調(diào)的 404 報(bào)錯(cuò)頁(yè)面，能夠在無形中傳遞出平靜舒適之感，從而更加有效的緩解用戶突然面對(duì)報(bào)錯(cuò)時(shí)的負(fù)面情緒。

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

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

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

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

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

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

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

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