情感，是人所產(chǎn)生的一種態(tài)度體驗(yàn)。用戶在日常的產(chǎn)品體驗(yàn)過程中，會(huì)產(chǎn)生一定的情感和喜好，相應(yīng)的，產(chǎn)品也可以在設(shè)計(jì)層喚起用戶的情感，影響用戶認(rèn)知，進(jìn)而引導(dǎo)用戶行為的發(fā)生，這就是情感化設(shè)計(jì)。那么，產(chǎn)品應(yīng)該如何做好情感化設(shè)計(jì)呢？

自從諾曼在《情感化設(shè)計(jì)》一書中提出了設(shè)計(jì)的3個(gè)層次，基本上所有情感化設(shè)計(jì)的文章都離不開本能層、行為層和反思層的設(shè)計(jì)。

▲圖1情感化設(shè)計(jì)的3個(gè)層次

那為什么情感化設(shè)計(jì)跟這3個(gè)層次相關(guān)，設(shè)計(jì)師為什么要關(guān)注情感化設(shè)計(jì)？以及設(shè)計(jì)師該如何進(jìn)行情感化設(shè)計(jì)呢？今天我們就一起來聊一聊情感化設(shè)計(jì)的底層邏輯，設(shè)計(jì)的流程和方法。

一、What | 什么是情感化設(shè)計(jì)？

要了解情感化設(shè)計(jì)，我們需要先了解情感，以下是情感在《心理學(xué)大辭典》中的定義：

▲圖2情感的定義

情感是人對(duì)客觀事物是否滿足自己需要而產(chǎn)生的態(tài)度體驗(yàn)。

通俗來講，情感是人對(duì)外界客觀事物的一種主觀生理反應(yīng)，由我們的需要和期望決定。當(dāng)我們的需要和期望得到滿足時(shí)，就會(huì)產(chǎn)生愉快、喜愛的情感，反之，就會(huì)覺得厭倦、甚至憤怒。

前面提到情感是一種態(tài)度體驗(yàn)，那態(tài)度又是什么呢？

▲圖3態(tài)度的定義

態(tài)度是個(gè)體對(duì)特定對(duì)象（人、觀念、情感或者事件等）所持有的穩(wěn)定的心理傾向，這種心理傾向蘊(yùn)含著個(gè)體的主觀評(píng)價(jià)以及由此產(chǎn)生的行為傾向性。

看到這個(gè)定義，相信敏感的交互設(shè)計(jì)師們，馬上就能夠覺察到態(tài)度的重要性了。交互設(shè)計(jì)的本質(zhì)是對(duì)人行為的設(shè)計(jì)，所以一切跟用戶行為相關(guān)的知識(shí)，我們都需要盡可能多的關(guān)注和掌握。

心理學(xué)家邁爾斯提出態(tài)度涉及到3個(gè)維度，分別是：認(rèn)知、情感和行為傾向。

▲圖4態(tài)度的構(gòu)成

1. 認(rèn)知因素就是指?jìng)€(gè)人對(duì)態(tài)度對(duì)象的主觀評(píng)價(jià)。
2. 情感因素就是指?jìng)€(gè)人對(duì)態(tài)度對(duì)象的情感體驗(yàn)。
3. 行為傾向因素就是指?jìng)€(gè)人對(duì)態(tài)度對(duì)象的默認(rèn)行為反應(yīng)。

我將三者的關(guān)系按照福格行為模型梳理如下：

▲圖5態(tài)度與行為的關(guān)系

• 認(rèn)知包含感覺，感覺中就有接收到的提示信息Prompt；
• 情感包含好惡，而好惡是用戶行為的重要?jiǎng)訖C(jī)Motivation。

認(rèn)知產(chǎn)生情感，情感影響認(rèn)知，二者密不可分，共同決定了用戶的行為傾向，外加用戶本身的執(zhí)行能力Ability，就會(huì)導(dǎo)致行為Behavior的發(fā)生。

不管是顏值正義還是體驗(yàn)經(jīng)濟(jì)，都是在試圖喚起用戶的情感，因?yàn)槲覀內(nèi)祟惗鄶?shù)時(shí)候的決策都是非理性的，所以情感的喚醒對(duì)于促進(jìn)我們行為的發(fā)生非常有效。

這就是情感化設(shè)計(jì)的底層邏輯：通過喚起用戶情感，影響和改變用戶認(rèn)知，形成特定的行為傾向，從而促進(jìn)用戶行為的發(fā)生。

▲圖6情感影響行為的案例

比如：我想下載一個(gè)網(wǎng)頁視頻，找了好幾個(gè)網(wǎng)頁都沒有下載功能，好不容易找到一個(gè)有下載功能的，點(diǎn)擊了還沒有反饋。最后用vivo瀏覽器打開，一鍵就完成了視頻下載，下載成功的興奮感（情感），讓我覺得vivo瀏覽器實(shí)在是太方便了（認(rèn)知），所以如果以后需要下載網(wǎng)頁視頻（場(chǎng)景），我都會(huì)直接用vivo瀏覽器來下載（行為）。

最后，我們給情感化設(shè)計(jì)下一個(gè)定義：

▲圖7情感化設(shè)計(jì)的定義

所謂情感化設(shè)計(jì)，是一種順應(yīng)或喚起用戶內(nèi)心情感的設(shè)計(jì)方法，旨在讓用戶產(chǎn)生積極的用戶體驗(yàn)和行為。

通過這種情感和積極的用戶體驗(yàn)，作為用戶記憶的鉤子，很容易形成用戶的內(nèi)在觸發(fā)，養(yǎng)成使用產(chǎn)品的內(nèi)在動(dòng)機(jī)和習(xí)慣。

二、Why | 為什么要進(jìn)行情感化設(shè)計(jì)？

前面我們講了情感化設(shè)計(jì)會(huì)刺激用戶行為的發(fā)生，從而促進(jìn)產(chǎn)品目標(biāo)的達(dá)成，那到底情感化設(shè)計(jì)是如何助力于目標(biāo)的達(dá)成的呢？我們可以借助用戶體驗(yàn)評(píng)價(jià)的五度模型和情感化設(shè)計(jì)的3個(gè)層次來綜合闡釋：

▲圖8用戶體驗(yàn)評(píng)價(jià)的五度模型

▲圖9情感化設(shè)計(jì)的3個(gè)層次

首先，作用于本能層的外觀、聽覺和觸感設(shè)計(jì)，如果能順應(yīng)用戶本能的情感偏好，就容易吸引用戶注意，獲得額外的感官關(guān)注，而這種關(guān)注是所有后續(xù)行為的基礎(chǔ)。

之前我們講無意識(shí)行為模型的時(shí)候講過人的感知漏斗，人類每秒會(huì)接受400億個(gè)感官信息輸入，而我們的大腦只能處理40比特，這是一個(gè)非常狹小的漏斗?；叵胍幌履闵洗巫哌^琳瑯滿目的貨架，到底你注意到了幾個(gè)商品？

▲圖10注意力的稀缺

真的可以用屈指可數(shù)來形容。而情感化的設(shè)計(jì)，就是一種能提升商品/功能被關(guān)注的工具，通過對(duì)用戶本能情感的鏈接，可以增強(qiáng)產(chǎn)品的無意識(shí)注意力。

▲圖11提升產(chǎn)品吸引度的案例

如上圖所示的香蕉牛奶的包裝，錦鯉的酒，可愛的貓爪杯，對(duì)于第一次見到這些商品的新用戶，很容易吸引他們的注意力。

（注意力是一個(gè)特別見異思遷的家伙，一旦用戶對(duì)這種新鮮的商品建立了熟悉感，這種特殊的視覺關(guān)注也就消失了，所以就迫使設(shè)計(jì)師需要源源不斷地進(jìn)行新的情感化設(shè)計(jì)開發(fā)。）

其次，作用于行為層的產(chǎn)品設(shè)計(jì)和行動(dòng)引導(dǎo)設(shè)計(jì)，可以借助用戶對(duì)過往產(chǎn)品的熟悉感、操作經(jīng)驗(yàn)和情感期待來操作產(chǎn)品，從而引導(dǎo)用戶行為的發(fā)生和完成。

▲圖12引導(dǎo)用戶行為的設(shè)計(jì)案例

比如無印良品的CD機(jī)、QQ會(huì)員的會(huì)員續(xù)費(fèi)提醒，空白頁面的引導(dǎo)提示等，都是通過喚起用戶對(duì)過往事物的聯(lián)想和情感，激勵(lì)用戶的產(chǎn)生相應(yīng)的行為。

然后，在產(chǎn)品體驗(yàn)的過程中，能夠喚起用戶情感的設(shè)計(jì)細(xì)節(jié)，往往能夠和用戶的記憶產(chǎn)生一些摩擦，形成一些記憶隆起和節(jié)點(diǎn)，成為用戶當(dāng)下推薦產(chǎn)品的一些理由和題材，同時(shí)也成為用戶滿意度回顧時(shí)的峰值體驗(yàn)，同時(shí)提升產(chǎn)品的滿意度和推薦度。

▲圖13喚起用戶情感的設(shè)計(jì)案例

比如：輸入密碼時(shí)捂眼睛的貓頭鷹，選擇金額時(shí)猴子的表情，發(fā)送生日快樂時(shí)的滿屏蛋糕等。

最后，當(dāng)產(chǎn)品能夠吸引用戶進(jìn)行體驗(yàn)，幫助用戶達(dá)成目標(biāo)的同時(shí)喚起用戶情感。在此基礎(chǔ)之上，如果產(chǎn)品還具備情感化的品牌形象和口號(hào)，會(huì)讓用戶更加認(rèn)同和喜愛產(chǎn)品，從而產(chǎn)生更具粘性的產(chǎn)品忠誠度。

▲圖14激發(fā)用戶認(rèn)同的設(shè)計(jì)案例

比如咸魚、考拉和美團(tuán)的品牌形象設(shè)計(jì)和slogan設(shè)計(jì)，都直白的闡釋了產(chǎn)品的價(jià)值觀，而且通過擬人化的形象拉近了用戶與產(chǎn)品的距離。

三、How | 如何進(jìn)行情感化設(shè)計(jì)

心理學(xué)家亞倫·瓦爾特根據(jù)馬斯洛的需求層次論，把用戶需求從下至上也劃分成4個(gè)層次，分別是：有用的、可靠的、可用的、愉悅的。

▲圖15用戶需求層次

其中愉悅性設(shè)計(jì)就是典型的用戶情感化設(shè)計(jì)。

在尼爾森的研究報(bào)告中，他們進(jìn)一步把愉悅性設(shè)計(jì)分成了表層愉悅和深層愉悅：

▲圖16用戶需求層次

結(jié)合我對(duì)愉悅性設(shè)計(jì)的理解，我把它和用戶體驗(yàn)的5個(gè)層次做了映射。不管是表層和深層，最終都要通過表現(xiàn)層來傳遞。如果是局部的、孤立的界面呈現(xiàn)，如：動(dòng)效、微文案、高清美圖、悅耳聲音等，都只能算是表層愉悅。只有結(jié)合了產(chǎn)品的功能性、并在優(yōu)良的產(chǎn)品性能和易用性的基礎(chǔ)之上，所做的渾然一體的設(shè)計(jì)表達(dá)，才能繞讓用戶使用產(chǎn)品時(shí)進(jìn)入心流狀態(tài)，進(jìn)而產(chǎn)生深層的愉悅。

作為設(shè)計(jì)師，我相信大家都非常熟悉情感化設(shè)計(jì)的界面表達(dá)，那到底如何才能夠把表層的愉悅性設(shè)計(jì)轉(zhuǎn)化成深層的愉悅性設(shè)計(jì)呢？

結(jié)合網(wǎng)絡(luò)資料和個(gè)人理解，我把深層的情感化設(shè)計(jì)分成了5個(gè)步驟：

▲圖17情感化的5個(gè)步驟

1. 明確設(shè)計(jì)目標(biāo)：根據(jù)產(chǎn)品目標(biāo)推導(dǎo)并拆解出設(shè)計(jì)目標(biāo)（具體拆解方法可回顧之前的文章：設(shè)計(jì)師如何推導(dǎo)+拆解設(shè)計(jì)目標(biāo)）。
2. 提取情感關(guān)鍵詞：結(jié)合產(chǎn)品關(guān)鍵詞和目標(biāo)任務(wù)中用戶的情感，提取出情感關(guān)鍵詞。
3. 發(fā)散情感意象和場(chǎng)景：組織工作坊，集思廣益，發(fā)散情感意象和場(chǎng)景。
4. 定位設(shè)計(jì)場(chǎng)景：根據(jù)用戶的目標(biāo)任務(wù)和產(chǎn)品設(shè)計(jì)邏輯，拆解設(shè)計(jì)可以發(fā)力的具體場(chǎng)景和元素（場(chǎng)景化設(shè)計(jì)的方法可以回顧之前的文章：一個(gè)公式教你搞定場(chǎng)景化設(shè)計(jì)）。
5. 情感可視化：將情感意象作為設(shè)計(jì)元素，融入到設(shè)計(jì)場(chǎng)景中去，完成情感的可視化和傳達(dá)。

下面我將以ofo小黃車的情感化設(shè)計(jì)案例為例，按照這幾個(gè)步驟為大家闡述他們的設(shè)計(jì)成果：

1）設(shè)計(jì)背景和目標(biāo)

▲圖18設(shè)計(jì)背景和目標(biāo)

共享單車類App，功能簡(jiǎn)單、設(shè)計(jì)重合度高，設(shè)計(jì)團(tuán)隊(duì)希望可以打造差異化的設(shè)計(jì)心智。所以決定以情感化設(shè)計(jì)為切入口，提升用戶產(chǎn)品感知度和滿意度。

2）提取情感關(guān)鍵詞

▲圖19 根據(jù)用戶和場(chǎng)景提取情感關(guān)鍵詞

考慮到ofo的用戶特征及ofo使用場(chǎng)景：ofo誕生于校園，主要面向?qū)W生及年輕群體，由于ofo小黃車顏色亮麗，輕便舒適，女生騎行比較多。

▲圖20情感關(guān)鍵詞

結(jié)合典型的用戶畫像和使用場(chǎng)景，設(shè)計(jì)團(tuán)隊(duì)與產(chǎn)品、品牌多方討論，得出了輕松、陽光、親和力三個(gè)情感關(guān)鍵詞作為情感化設(shè)計(jì)的戰(zhàn)略目標(biāo)。

3）發(fā)散情感意象

確定情感化關(guān)鍵詞后，設(shè)計(jì)團(tuán)隊(duì)通常會(huì)通過工作坊的方式來集思廣益，發(fā)散情感意象，以下是我從ofo的情感化設(shè)計(jì)中感受到的情感意象。

▲圖21發(fā)散情感意象

4）定位設(shè)計(jì)場(chǎng)景

情感意象最終都要落在具體的產(chǎn)品界面和元素上，所以定位產(chǎn)品的設(shè)計(jì)場(chǎng)景非常重要，這也是交互設(shè)計(jì)師做深度情感化設(shè)計(jì)最需要下功夫的地方之一。以下是ofo設(shè)計(jì)團(tuán)隊(duì)找出來的設(shè)計(jì)場(chǎng)景：

▲圖22 ofo的設(shè)計(jì)場(chǎng)景

5）情感可視化

找到了情感化的意象和具體的設(shè)計(jì)場(chǎng)景，接下來就是發(fā)揮設(shè)計(jì)師創(chuàng)意和魔力的時(shí)刻了：把情感設(shè)計(jì)可視化。我們可以欣賞一下ofo在各個(gè)場(chǎng)景情感可視化的案例：

▲圖23產(chǎn)品形象升級(jí)

① 產(chǎn)品形象升級(jí)：包含了從logo到界面顏色、圖形、質(zhì)感的的全面改版。從明亮的黃色和有質(zhì)感的光影呼應(yīng)輕松、陽光，圓形表達(dá)親和力。

▲圖24 增加產(chǎn)品趣味性的設(shè)計(jì)表達(dá)

② 增加產(chǎn)品趣味性：通過將車輛包裝成為特色物品、用不同形象啟動(dòng)掃碼用車，采用重力感應(yīng)搖動(dòng)小黃人眼球、采用熊本熊多款表情、設(shè)計(jì)節(jié)日氛圍圖等方式來增加用戶使用產(chǎn)品的樂趣。

▲圖25有情感的運(yùn)營設(shè)計(jì)表達(dá)

③ 有情感的運(yùn)營設(shè)計(jì)

通過比較火的集卡活動(dòng)配合七夕、國慶節(jié)日以及年終用戶個(gè)人數(shù)據(jù)盤點(diǎn)激發(fā)用戶情感。

▲圖26ofo的設(shè)計(jì)場(chǎng)景

④ 有識(shí)別性的插畫體系

結(jié)合用戶偏好、人群特征和用車場(chǎng)景，打造有識(shí)別性的插畫體系。

最后再給大家介紹9個(gè)情感化設(shè)計(jì)的方法：

▲圖27情感化設(shè)計(jì)的9個(gè)方法

① 采用吉祥物，為產(chǎn)品賦予鮮明的個(gè)性。比如盒馬，無窮大嘴，很能吃。

② 選擇合適的色彩，增加情感屬性。比如盒馬藍(lán)：生鮮來自大海，增強(qiáng)生鮮的大海聯(lián)想。

③ 采用合適的字體設(shè)計(jì)，表達(dá)情感。比如盒馬字體設(shè)計(jì)，盒字字型像一個(gè)房子（家），也像一個(gè)大廚，皿就像大廚的盤子，字體微微傾斜，想要傳遞快速送達(dá)的感覺，整個(gè)字體年輕但不幼稚，充滿親和力。

▲圖28情感化設(shè)計(jì)的9個(gè)方法

④ 用UX文案?jìng)鬟f產(chǎn)品個(gè)性：流口水、好好次、酸爽，外賣gg，你知道我在等你嘛，都體現(xiàn)出盒馬又萌又饞的樣子，讓用戶特別有代入感。

▲圖29情感化設(shè)計(jì)的9個(gè)方法

⑤ 以角色形式來傳遞信息：用角色的裝扮、表情、動(dòng)作來傳遞信息。

▲圖30ofo的設(shè)計(jì)場(chǎng)景

⑥ 為不同用戶提供個(gè)性化信息：以頭條、抖音、淘寶的個(gè)性化算法為例，通過個(gè)性化的內(nèi)容，讓用戶感覺到“懂”我。

▲圖31ofo的設(shè)計(jì)場(chǎng)景

⑦ 提供獎(jiǎng)品或驚喜：比如滴滴送優(yōu)惠券，高德西湖上的鳥飛船游，網(wǎng)易云音樂在播放哈利波特《海德薇變奏曲》時(shí)，黑膠唱片中會(huì)突然飛出一只叼著通知書的貓頭鷹，重現(xiàn)海德薇送入學(xué)通知書的經(jīng)典橋段。

▲圖32ofo的設(shè)計(jì)場(chǎng)景

⑧ 關(guān)注并扭轉(zhuǎn)負(fù)面體驗(yàn)：比如Google斷網(wǎng)時(shí)的游戲設(shè)計(jì)。

⑨ 講故事：比如前一段時(shí)間非?；鸬奈⒐馐謾C(jī)vivoX80《黑貓的煩惱》，以故事形式傳遞了X80夜拍神器的超級(jí)功效。

好了，到這里情感化設(shè)計(jì)的內(nèi)容就結(jié)束了，最后借用諾曼的一句話再傳達(dá)一下情感化設(shè)計(jì)的重要性：

每樣?xùn)|西都有個(gè)性，每樣?xùn)|西都發(fā)出情感信號(hào)。即使這不是設(shè)計(jì)師的意圖，瀏覽網(wǎng)站的人也會(huì)推斷出其個(gè)性并感受其情感?！萍{德· 諾曼

希望我們每一個(gè)設(shè)計(jì)師，都能夠通過我們的設(shè)計(jì)，把我們希望用戶感受到的情感傳遞到位，一起加油~

參考文獻(xiàn)：

1. 盒馬-服務(wù)品牌設(shè)計(jì)的路上
2. 可風(fēng)：APP界面：如何打造情感化設(shè)計(jì)？
3. 張鼎:設(shè)計(jì)師應(yīng)該懂的情感化設(shè)計(jì)
4. Tarun Kohli：The Why and How of Emotional Design