情感，是人所產生的一種態度體驗。用戶在日常的產品體驗過程中，會產生一定的情感和喜好，相應的，產品也可以在設計層喚起用戶的情感，影響用戶認知，進而引導用戶行為的發生，這就是情感化設計。那么，產品應該如何做好情感化設計呢？

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

▲圖1情感化設計的3個層次

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

一、What | 什么是情感化設計？

要了解情感化設計，我們需要先了解情感，以下是情感在《心理學大辭典》中的定義：

▲圖2情感的定義

情感是人對客觀事物是否滿足自己需要而產生的態度體驗。

通俗來講，情感是人對外界客觀事物的一種主觀生理反應，由我們的需要和期望決定。當我們的需要和期望得到滿足時，就會產生愉快、喜愛的情感，反之，就會覺得厭倦、甚至憤怒。

前面提到情感是一種態度體驗，那態度又是什么呢？

▲圖3態度的定義

態度是個體對特定對象（人、觀念、情感或者事件等）所持有的穩定的心理傾向，這種心理傾向蘊含著個體的主觀評價以及由此產生的行為傾向性。

看到這個定義，相信敏感的交互設計師們，馬上就能夠覺察到態度的重要性了。交互設計的本質是對人行為的設計，所以一切跟用戶行為相關的知識，我們都需要盡可能多的關注和掌握。

心理學家邁爾斯提出態度涉及到3個維度，分別是：認知、情感和行為傾向。

▲圖4態度的構成

1. 認知因素就是指個人對態度對象的主觀評價。
2. 情感因素就是指個人對態度對象的情感體驗。
3. 行為傾向因素就是指個人對態度對象的默認行為反應。

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

▲圖5態度與行為的關系

• 認知包含感覺，感覺中就有接收到的提示信息Prompt；
• 情感包含好惡，而好惡是用戶行為的重要動機Motivation。

認知產生情感，情感影響認知，二者密不可分，共同決定了用戶的行為傾向，外加用戶本身的執行能力Ability，就會導致行為Behavior的發生。

不管是顏值正義還是體驗經濟，都是在試圖喚起用戶的情感，因為我們人類多數時候的決策都是非理性的，所以情感的喚醒對于促進我們行為的發生非常有效。

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

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

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

最后，我們給情感化設計下一個定義：

▲圖7情感化設計的定義

所謂情感化設計，是一種順應或喚起用戶內心情感的設計方法，旨在讓用戶產生積極的用戶體驗和行為。

通過這種情感和積極的用戶體驗，作為用戶記憶的鉤子，很容易形成用戶的內在觸發，養成使用產品的內在動機和習慣。

二、Why | 為什么要進行情感化設計？

前面我們講了情感化設計會刺激用戶行為的發生，從而促進產品目標的達成，那到底情感化設計是如何助力于目標的達成的呢？我們可以借助用戶體驗評價的五度模型和情感化設計的3個層次來綜合闡釋：

▲圖8用戶體驗評價的五度模型

▲圖9情感化設計的3個層次

首先，作用于本能層的外觀、聽覺和觸感設計，如果能順應用戶本能的情感偏好，就容易吸引用戶注意，獲得額外的感官關注，而這種關注是所有后續行為的基礎。

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

▲圖10注意力的稀缺

真的可以用屈指可數來形容。而情感化的設計，就是一種能提升商品/功能被關注的工具，通過對用戶本能情感的鏈接，可以增強產品的無意識注意力。

▲圖11提升產品吸引度的案例

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

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

其次，作用于行為層的產品設計和行動引導設計，可以借助用戶對過往產品的熟悉感、操作經驗和情感期待來操作產品，從而引導用戶行為的發生和完成。

▲圖12引導用戶行為的設計案例

比如無印良品的CD機、QQ會員的會員續費提醒，空白頁面的引導提示等，都是通過喚起用戶對過往事物的聯想和情感，激勵用戶的產生相應的行為。

然后，在產品體驗的過程中，能夠喚起用戶情感的設計細節，往往能夠和用戶的記憶產生一些摩擦，形成一些記憶隆起和節點，成為用戶當下推薦產品的一些理由和題材，同時也成為用戶滿意度回顧時的峰值體驗，同時提升產品的滿意度和推薦度。

▲圖13喚起用戶情感的設計案例

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

最后，當產品能夠吸引用戶進行體驗，幫助用戶達成目標的同時喚起用戶情感。在此基礎之上，如果產品還具備情感化的品牌形象和口號，會讓用戶更加認同和喜愛產品，從而產生更具粘性的產品忠誠度。

▲圖14激發用戶認同的設計案例

比如咸魚、考拉和美團的品牌形象設計和slogan設計，都直白的闡釋了產品的價值觀，而且通過擬人化的形象拉近了用戶與產品的距離。

三、How | 如何進行情感化設計

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

▲圖15用戶需求層次

其中愉悅性設計就是典型的用戶情感化設計。

在尼爾森的研究報告中，他們進一步把愉悅性設計分成了表層愉悅和深層愉悅：

▲圖16用戶需求層次

結合我對愉悅性設計的理解，我把它和用戶體驗的5個層次做了映射。不管是表層和深層，最終都要通過表現層來傳遞。如果是局部的、孤立的界面呈現，如：動效、微文案、高清美圖、悅耳聲音等，都只能算是表層愉悅。只有結合了產品的功能性、并在優良的產品性能和易用性的基礎之上，所做的渾然一體的設計表達，才能繞讓用戶使用產品時進入心流狀態，進而產生深層的愉悅。

作為設計師，我相信大家都非常熟悉情感化設計的界面表達，那到底如何才能夠把表層的愉悅性設計轉化成深層的愉悅性設計呢？

結合網絡資料和個人理解，我把深層的情感化設計分成了5個步驟：

▲圖17情感化的5個步驟

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

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

1）設計背景和目標

▲圖18設計背景和目標

共享單車類App，功能簡單、設計重合度高，設計團隊希望可以打造差異化的設計心智。所以決定以情感化設計為切入口，提升用戶產品感知度和滿意度。

2）提取情感關鍵詞

▲圖19 根據用戶和場景提取情感關鍵詞

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

▲圖20情感關鍵詞

結合典型的用戶畫像和使用場景，設計團隊與產品、品牌多方討論，得出了輕松、陽光、親和力三個情感關鍵詞作為情感化設計的戰略目標。

3）發散情感意象

確定情感化關鍵詞后，設計團隊通常會通過工作坊的方式來集思廣益，發散情感意象，以下是我從ofo的情感化設計中感受到的情感意象。

▲圖21發散情感意象

4）定位設計場景

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

▲圖22 ofo的設計場景

5）情感可視化

找到了情感化的意象和具體的設計場景，接下來就是發揮設計師創意和魔力的時刻了：把情感設計可視化。我們可以欣賞一下ofo在各個場景情感可視化的案例：

▲圖23產品形象升級

① 產品形象升級：包含了從logo到界面顏色、圖形、質感的的全面改版。從明亮的黃色和有質感的光影呼應輕松、陽光，圓形表達親和力。

▲圖24 增加產品趣味性的設計表達

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

▲圖25有情感的運營設計表達

③ 有情感的運營設計

通過比較火的集卡活動配合七夕、國慶節日以及年終用戶個人數據盤點激發用戶情感。

▲圖26ofo的設計場景

④ 有識別性的插畫體系

結合用戶偏好、人群特征和用車場景，打造有識別性的插畫體系。

最后再給大家介紹9個情感化設計的方法：

▲圖27情感化設計的9個方法

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

② 選擇合適的色彩，增加情感屬性。比如盒馬藍：生鮮來自大海，增強生鮮的大海聯想。

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

▲圖28情感化設計的9個方法

④ 用UX文案傳遞產品個性：流口水、好好次、酸爽，外賣gg，你知道我在等你嘛，都體現出盒馬又萌又饞的樣子，讓用戶特別有代入感。

▲圖29情感化設計的9個方法

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

▲圖30ofo的設計場景

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

▲圖31ofo的設計場景

⑦ 提供獎品或驚喜：比如滴滴送優惠券，高德西湖上的鳥飛船游，網易云音樂在播放哈利波特《海德薇變奏曲》時，黑膠唱片中會突然飛出一只叼著通知書的貓頭鷹，重現海德薇送入學通知書的經典橋段。

▲圖32ofo的設計場景

⑧ 關注并扭轉負面體驗：比如Google斷網時的游戲設計。

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

好了，到這里情感化設計的內容就結束了，最后借用諾曼的一句話再傳達一下情感化設計的重要性：

每樣東西都有個性，每樣東西都發出情感信號。即使這不是設計師的意圖，瀏覽網站的人也會推斷出其個性并感受其情感?！萍{德· 諾曼

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

參考文獻：

1. 盒馬-服務品牌設計的路上
2. 可風：APP界面：如何打造情感化設計？
3. 張鼎:設計師應該懂的情感化設計
4. Tarun Kohli：The Why and How of Emotional Design