網(wǎng)頁或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)頁或軟件設(shè)計(jì)，使界面輕松擺脫冰冷的人機(jī)交流，增強(qiáng)界面吸引力和引導(dǎo)力的同時(shí)，提升用戶認(rèn)同感和忠誠度呢？

以下，本文將從六個(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)頁或App UI的情感化設(shè)計(jì)？

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

簡(jiǎn)而言之，情感化設(shè)計(jì)具體包括利用彩配色激發(fā)用戶情感，或高興，或溫暖，或?qū)庫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)單常見的界面元素，打造吸睛又不失人情味的頁面設(shè)計(jì)呢？為方便大家理解和借鑒，這里主要從6個(gè)主要方面為大家介紹：

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

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

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

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

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

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

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

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

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

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

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

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

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

此外，一定形狀，網(wǎng)格以及動(dòng)畫的添加，也能夠非常有效地幫助設(shè)計(jì)師創(chuàng)建更具視覺魅力的頁面設(shè)計(jì)。

如圖，通過Mockplus的快速格子和自動(dòng)填充功能制作極富視覺魅力的網(wǎng)格，并結(jié)合其“單行文字”和“多行文字”組件，設(shè)計(jì)出層次結(jié)構(gòu)清晰，排版布局直觀易懂的網(wǎng)頁原型設(shè)計(jì)，為用戶提供更加簡(jiǎn)單流暢的體驗(yàn)。

總之，把握好各種視覺元素以及元素之間相互組合的基本設(shè)計(jì)規(guī)律，有目的的營造出一定的頁面情感，從而實(shí)現(xiàn)與用戶情感層面的對(duì)話，給用戶留下極佳的第一映像。

2). 利用便捷流暢的交互設(shè)計(jì)，提供愉悅的用戶體驗(yàn)

Web或App設(shè)計(jì)之中，交互設(shè)計(jì)不僅能夠滿足用戶需求，體現(xiàn)其功能性和實(shí)用性，而且還能夠激發(fā)用戶的愉悅心情，提升用戶體驗(yàn)。換而言之，一款優(yōu)質(zhì)的網(wǎng)頁或應(yīng)用的交互設(shè)計(jì)，不僅要簡(jiǎn)單易懂，讓用戶輕松的知道做什么，怎么做，以滿足其需求。而且還能允許用戶自由流暢地完成交互設(shè)計(jì)，成功購買或了解相關(guān)軟件或產(chǎn)品，提供愉悅的交互體驗(yàn)，加深用戶印象。

如圖，以上的交互設(shè)計(jì)，不僅讓用戶了解到在登錄時(shí)需要做什么。而且，當(dāng)用戶輸入密碼時(shí)，上面的動(dòng)態(tài)人偶還會(huì)相應(yīng)的捂住雙眼。當(dāng)用戶密碼輸入錯(cuò)誤時(shí)，輸入的密碼不僅會(huì)變紅，提醒用戶。 而且，人偶也會(huì)相應(yīng)的給出反映?？傊?，整款設(shè)計(jì)給人以俏皮安全之感?？梢哉f是十分暖心的設(shè)計(jì)了。

當(dāng)然，交互設(shè)計(jì)也需要符合實(shí)際情境，再簡(jiǎn)單流暢的交互設(shè)計(jì)，不符合相應(yīng)情境，也可能引起用戶不滿而反感。

3).采用獨(dú)具魅力的設(shè)計(jì)風(fēng)格和主題，打造有趣特別的用戶體驗(yàn)

采用獨(dú)具魅力的頁面設(shè)計(jì)風(fēng)格和主題，不僅能夠提升其頁面設(shè)計(jì)的趣味性和獨(dú)特性，還能夠極大的加深用戶對(duì)產(chǎn)品或品牌的印象，讓用戶戀戀不忘，從而成為軟件或產(chǎn)品的直接傳播者或推廣者。而設(shè)計(jì)師可以從以下幾個(gè)方面嘗試進(jìn)行情感化設(shè)計(jì)：

*利用不同的設(shè)計(jì)技巧或風(fēng)格，簡(jiǎn)化或優(yōu)化界面設(shè)計(jì)

極簡(jiǎn)主義設(shè)計(jì)風(fēng)格，能夠極大的簡(jiǎn)化網(wǎng)頁界面設(shè)計(jì)，讓界面更加快速實(shí)用，從而緩解用戶因頁面加載而不得不等待的焦躁乏味之感。（點(diǎn)擊了解更多簡(jiǎn)約網(wǎng)頁設(shè)計(jì)技巧）

如圖，簡(jiǎn)約設(shè)計(jì)的風(fēng)格，帶給用戶簡(jiǎn)單便捷的瀏覽體驗(yàn)。

扁平化設(shè)計(jì)風(fēng)格，作為時(shí)下最流行的界面設(shè)計(jì)風(fēng)格之一，能夠讓頁面設(shè)計(jì)更加平滑，突出頁面內(nèi)容的視覺層級(jí)，從而更加方便用戶簡(jiǎn)單快速的查找需要的界面內(nèi)容。（點(diǎn)擊了解更多的扁平化設(shè)計(jì)技巧）

如圖的實(shí)例設(shè)計(jì)，設(shè)計(jì)師可以利用Mockplus的“圖標(biāo)”（Mockplus封裝了超過3000個(gè)矢量圖標(biāo)的強(qiáng)大圖標(biāo)庫，方便設(shè)計(jì)師更具需要選擇和使用）組件，簡(jiǎn)單設(shè)計(jì)出具有扁平化設(shè)計(jì)風(fēng)格的網(wǎng)頁原型，讓頁面更加平滑流暢，視覺層級(jí)突出，使用戶更加方便快捷的查找和使用需要的信息。

漸進(jìn)式設(shè)計(jì)技巧，隱藏部分界面功能，減少界面噪音對(duì)用戶的干擾，從而讓用戶更加直觀快速的完成需要的操作。（點(diǎn)擊鏈接更多漸進(jìn)式設(shè)計(jì)技巧）

如圖，漸進(jìn)式設(shè)計(jì)技巧，對(duì)于提升網(wǎng)頁用戶體驗(yàn)，作用也是極佳的。

總之，多樣的設(shè)計(jì)技巧和風(fēng)格的應(yīng)用，能夠帶給用戶不一樣的體驗(yàn)。

*分析受眾特點(diǎn)，選擇不同的設(shè)計(jì)主題，帶給用戶不同的情感體驗(yàn)

在具體的網(wǎng)頁或軟件設(shè)計(jì)中，設(shè)計(jì)師也要注意分析和把握軟件或產(chǎn)品受眾特點(diǎn)，選擇不同的設(shè)計(jì)主題，表達(dá)不同的情感，從而提供不同的情感體驗(yàn)。例如，面向兒童的網(wǎng)頁或App設(shè)計(jì)，就需要更多的添加明亮色彩，可愛有趣的卡通形象，動(dòng)畫以及游戲，吸引受眾的同時(shí)，體現(xiàn)網(wǎng)站對(duì)兒童的喜愛。

*利用幽默風(fēng)趣的設(shè)計(jì)，快速引起用戶注意和共鳴

幽默風(fēng)趣的設(shè)計(jì)風(fēng)格，最能直接快速的引起用戶注意，激發(fā)用戶情感共鳴，留住用戶的同時(shí)，提升用戶參與度。所以，在具體的情感化設(shè)計(jì)中，也可在界面設(shè)計(jì)中，嘗試多設(shè)計(jì)和添加一些幽默視頻，圖片，插畫或動(dòng)畫，更加有效的吸引和留住用戶。

如圖，幽默風(fēng)趣的設(shè)計(jì)風(fēng)格，給人以輕松自由之感，應(yīng)用到各種報(bào)錯(cuò)頁面，能夠非常有效的緩解用戶的負(fù)面情緒。

總之，不同設(shè)計(jì)風(fēng)格，技巧以及主題選擇和應(yīng)用，能夠極大地簡(jiǎn)化或優(yōu)化頁面，帶給用戶不同的情感體驗(yàn)。

4). 利用暖心文本設(shè)計(jì)，激發(fā)用戶好感和共鳴

直擊心靈的文本設(shè)計(jì)也是實(shí)現(xiàn)與用戶情感交流的重要途徑。相較于冰冷且毫無人情味的界面說明，報(bào)錯(cuò)信息，通知以及反饋，帶有設(shè)計(jì)師主觀情感，溫暖，貼心的文本設(shè)計(jì)，更能激發(fā)用戶好感，引導(dǎo)用戶行為的同時(shí)，加深用戶對(duì)軟件和產(chǎn)品的認(rèn)可和喜愛。

如圖，暖心的文本設(shè)計(jì)，結(jié)合擬人化的圖標(biāo)設(shè)計(jì)，實(shí)現(xiàn)與用戶在情感方面的交流，提共更佳的情感體驗(yàn)。

如圖，委婉而不失趣味性的文本設(shè)計(jì)，讓頁面更具吸引力的同時(shí)，能夠有效地緩解用戶的負(fù)面情緒。

此款Mockplus網(wǎng)頁原型設(shè)計(jì)，除了通過可愛的企鵝簡(jiǎn)筆畫吸引用戶注意，而且還巧妙的添加帶有撒嬌賣萌意味的文本設(shè)計(jì)，讓用戶看完后，忍不住點(diǎn)擊了解詳情。這就是文本設(shè)計(jì)的魅力。

5). 別出心裁的創(chuàng)意設(shè)計(jì)，賦予網(wǎng)頁或App個(gè)性

創(chuàng)意，創(chuàng)意，創(chuàng)意！ 無論哪種設(shè)計(jì)，失敗與成功之間，差的，始終只是創(chuàng)意。這也是設(shè)計(jì)師們時(shí)常會(huì)在著手設(shè)計(jì)之前，大量瀏覽最新的網(wǎng)頁或情感化設(shè)計(jì)資源，以激發(fā)設(shè)計(jì)靈感的原因。別出心裁的創(chuàng)意設(shè)計(jì)，能夠賦予頁面?zhèn)€性和靈氣，讓用戶感受到對(duì)方是 “有血有肉的人”，而非冰冷的工具或機(jī)器。（點(diǎn)擊下載更多的最新設(shè)計(jì)資源和素材）

如圖， 利用文本與圖片相互呼應(yīng)的創(chuàng)意，傳達(dá)頁面情感，達(dá)到與用戶情感層面的交流。

而這一方面，為更加簡(jiǎn)單快捷的原型化，測(cè)試并迭代各種情感化設(shè)計(jì)創(chuàng)意，小編建議大家可以嘗試使用功能強(qiáng)大的Mockplus.

首先，Mockplus提供了強(qiáng)大的組件庫，圖標(biāo)庫以及樣式庫，能夠幫助設(shè)計(jì)師快速的將設(shè)計(jì)創(chuàng)意原型化。而且，其提供的8種演示和分享方式，對(duì)于設(shè)計(jì)師及時(shí)測(cè)試，獲取反饋并迭代相應(yīng)創(chuàng)意，也非常實(shí)用。

當(dāng)然，如若，需要團(tuán)隊(duì)協(xié)作完成某些Web或App UI的情感化設(shè)計(jì)，其團(tuán)隊(duì)版和企業(yè)版的團(tuán)隊(duì)協(xié)作和管理功能也是非常值得嘗試的。

6).其它打動(dòng)用戶的細(xì)節(jié)設(shè)計(jì)

情感化設(shè)計(jì)，可以應(yīng)用到網(wǎng)頁或App很多頁面設(shè)計(jì)中，以緩解用戶負(fù)面情緒，更加高效的引導(dǎo)用戶行為，并提升用戶對(duì)品牌的認(rèn)同感和忠誠度。比如，登錄注冊(cè)，引導(dǎo)，反饋，加載，404報(bào)錯(cuò)等頁面的細(xì)節(jié)設(shè)計(jì)，不僅能夠打動(dòng)用戶，讓原本冰冷的人機(jī)交互充滿人情味，還能夠有效的促成購買，實(shí)現(xiàn)其商業(yè)價(jià)值。（點(diǎn)擊查看更多最新創(chuàng)意404報(bào)錯(cuò)設(shè)計(jì)）

如圖，搜索框圖標(biāo)變化的細(xì)節(jié)設(shè)計(jì)，讓界面更加暖心而有活力。

如圖，登錄頁面的歡迎語句的添加，讓死板枯燥的頁面多了一絲暖意。

所以，細(xì)節(jié)設(shè)計(jì)也能決定成敗。設(shè)計(jì)師在平時(shí)的UI設(shè)計(jì)中要重視每一個(gè)細(xì)節(jié)，讓界面處處都流露出真情，使用戶不忍離開。

總之，希望以上提及界面情感化設(shè)計(jì)技巧和最新設(shè)計(jì)實(shí)例，能對(duì)你有所啟發(fā)。

最后，情感化設(shè)計(jì)過程中有哪些注意事項(xiàng)呢？

情感化Web或App界面設(shè)計(jì)的過程中，設(shè)計(jì)師們也需要牢記一些注意事項(xiàng)，避免適得其反的情況出現(xiàn)：

*情感化設(shè)計(jì)在于把握和激發(fā)用戶的情感，而不僅僅是設(shè)計(jì)師感情的抒發(fā)

適當(dāng)在設(shè)計(jì)中添加代表個(gè)人態(tài)度的圖片，文字或交互，體現(xiàn)設(shè)計(jì)師的情感和立場(chǎng)，目的是為激發(fā)用戶相應(yīng)的情緒反應(yīng)，引起共鳴，從而加深用戶對(duì)品牌和產(chǎn)品的印象，增加產(chǎn)品銷量，提升用戶忠誠度。但，設(shè)計(jì)師需要牢記，萬萬不能將其作為個(gè)人情感抒發(fā)，甚至發(fā)泄的平臺(tái)，過多主觀情感的添加，反而會(huì)激起一部分用戶的不滿，帶來不好的效果。

如圖，一定引語的添加，能夠有效的表明設(shè)計(jì)師的情感和立場(chǎng)，引起共鳴。 但過多的主觀情感的添加，則可能引起用戶反感，結(jié)果反而會(huì)適得其反。

*情感化設(shè)計(jì)具有一定的時(shí)效性

同時(shí)，設(shè)計(jì)師也需要了解：情感化設(shè)計(jì)具有一定的時(shí)效性。時(shí)代在變化，代表某一情感的象征（例如文字，圖片，圖標(biāo)，事物等），也在發(fā)生變化。所以，設(shè)計(jì)師在情感化設(shè)計(jì)的過程中，也需要考慮到這一點(diǎn)，適時(shí)的更新相應(yīng)的情感設(shè)計(jì)。

*情感化設(shè)計(jì)要以軟件功能為基礎(chǔ)

無論是本文所提到的情感化設(shè)計(jì)，還是小編之前分析過的頁面視覺層級(jí)設(shè)計(jì)，亦或是網(wǎng)頁設(shè)計(jì)風(fēng)格的選擇等等，都需要以簡(jiǎn)單實(shí)用，且滿足用戶需求的軟件功能為基礎(chǔ)。脫離功能的情感設(shè)計(jì)，再暖心，也會(huì)因無用，而被用戶無情的拋棄。

*情感化設(shè)計(jì)要注意情境的把控

幽默可以給用戶帶來輕松愉悅的體驗(yàn)，但并不是所有情景都適合幽默風(fēng)趣的調(diào)調(diào)。其它情感設(shè)計(jì)風(fēng)格和細(xì)節(jié)也是如此。所以，設(shè)計(jì)要注意情境的把控，避免引起用戶不滿和反感。

結(jié)語

網(wǎng)頁或App界面設(shè)計(jì)不再僅僅依賴于其功能性，實(shí)用性以及適用性的提高，具有更高層級(jí)的功能界面人性化設(shè)計(jì)，也越來越多的受到設(shè)計(jì)師們關(guān)注和重視，以便為用戶提供更加愉悅，暖心的用戶體驗(yàn)。而情感化設(shè)計(jì)作為人性化設(shè)計(jì)的重要組成部分，對(duì)于網(wǎng)站能否在第一眼直擊用戶心靈，吸引和留住用戶，提升用戶認(rèn)同感和忠實(shí)度，甚至在潛移默化中將用戶轉(zhuǎn)化成軟件或產(chǎn)品的宣傳者等等，都發(fā)揮著不容小覷的作用。

所以，設(shè)計(jì)師在Web或App界面設(shè)計(jì)中，要注意適當(dāng)添加情感元素，情感化界面的各個(gè)模塊，讓冷冰冰的人機(jī)交流變得暖意洋洋，帶給用戶不一樣的情感體驗(yàn)。

總之，希望以上講解的Web或App UI 情感化設(shè)計(jì)技巧，最新設(shè)計(jì)實(shí)例以及原型相關(guān)設(shè)計(jì)實(shí)例，能對(duì)你有所幫助。