插圖來自作者Muriel：https://dribbble.com/M64

文章前言：

什么是情感化設計？

情感化設計是一種設計方法，用于創建可為用戶帶來良好且積極的產品體驗。我們設計師使用這種設計方法來設計創意界面，以達到觸發用戶積極的情感共鳴。

產品產生的情緒可能會對用戶對產品的感知產生很大影響。積極的經歷會引起人們的好奇心和喜好，而消極的經歷會保護我們避免重復犯錯...

而我將從情感化設計說起，通過分享相關案例并結合文字，讓更多設計師了解一些情感化設計的基礎同時掌握相關理論知識點，同時在文章底部也會推薦相關的書讓大家去了解。

誰推導了情感化設計？

那我們就來先來介紹一下

情感化設計的先行者

唐納德·A·諾曼（Donald Arthur Norman，1935- ）

一位享譽全球的認知心理學家，認知心理學學科創始人，工業設計界領袖。加州大學圣地亞哥分校教授，《大英百科全書》編委，為惠普、摩托羅拉等公司提供過咨詢服務，擔任過蘋果公司先進技術部門的副總裁?！对O計心理學》、《情感化設計》等著作至今都是設計專業必讀書目。他所闡明的以人為本的設計原則已深入人心。

在他的《情感化設計》一書中，一開始他用他收藏的三個茶壺來舉例：

而每一個代表著不同的含義和作用。

一個是代表他的過去-對缺少實用性的產品的抗議

另一個是代表了他的未來-我對美的不懈追求

最后一個則代表了實用性和魅力的完美結合

...

這則茶壺的故事，間接闡述了產品設計的三個組成要素：可用性（或缺乏美學）、美學、和實用性。

情感化設計的細分

同時在書中他將情感化分為三層

即：本能層 行為層 反思層

情感化設計的三層其實在廣義上的比較接近（除了劃分不一）與馬斯洛人類需求五層次理論(Maslow's Hierarchy of Needs)，都是從基礎本能/生理需求，到反思/自我實現的同一方向。

所以，基于兩個理論，我們在做好一款產品的體驗和可用性時，產品必須為用戶提供價值。它需要功能，可用和好用。好的設計是“錦上添花”的，其中功能方面是處于優先級，但是為了提供給用戶在使用過產品過程中的滿足感，也必須考慮情感方面。

我們分別來說說三個層面的案例

A.本能層設計

本能層是基于我們最天生的情感，而做出自然的潛意識反應，

它通過外觀和感覺以及感官參與來設計把控產品外在的優秀品質。

良好的本能層設計會讓用戶感到愉悅和興奮。

生活中的范例：

當刺猬被其他動物攻擊時，它們會本能的把自己卷曲起來防御外界將會帶來的傷害，而嬰兒看到奶嘴會本能的想去允吸，我們看到彩虹會覺得很漂亮...

互聯網產品范例：

1.富有吸引力的微交互

最右新版本的話題態度點贊

在最右新版本App上，話題板塊的點贊做的很新穎，模擬思考用戶在當前話題會產生的情緒，用動態emoji的方式，準確生動的表達情感含義，同時讓產品更加活潑有趣，讓人眼前一亮，符合產品獨特的風格調性。

來自作者TMATM：https://www.zcool.com.cn/work/ZNDI1NzUxNzY=.html

2.基于現實的聯系參考

蘋果鬧鐘的時間設置

像我們早前都是靠實體鬧鐘調整后面的齒輪轉動時針分針來叫醒自己的，而蘋果利用真實的鐘表盤的轉動手勢，結合設計體現來可視化的調整你的作息時間，較為真實的將生活中的小場景融入到產品當中，形成了現實與虛擬產品之間的聯系。

Yahoo天氣應用的當前天氣顯示

像雅虎天氣/蘋果天氣等其他軟件的天氣都會實時更新地區當前的天氣情況并動態擬真的顯示，這樣從產品角度出發，用眼睛所看到的現實場景，產品更加真實的顯示了目前的天氣狀況，比需要理解的icon更加有識別度。

百度搜索的小彩蛋之一

你在百度中搜索“黑洞”兩個關鍵字，在網頁中心真的會出現一個仿真“黑洞”，它會把你的網頁上的圖片和整個網頁一層一層全部吞噬掉，讓你在搜索黑洞相關的文章時，先給你一個更加逼真的體驗，讓你知道黑洞的原理。

3.有趣的微交互

京東購物車微交互

首先呢，在現實生活中，我們會把商場里購買的商品放進購物車，我們不想要的，可以在購物車里拿出來放回去，而在互聯網產品上呢？

購物車功能是在電商產品內一個很常見的功能，它需要視覺設計和標準語言。同時，試想我們把他當作一個現實中“容器”的概念模型，而這個“容器”，我們可以“放商品”進去“推車（購物車）里”，以及可以把商品從推車里“拿出來”。而我們可以在動作上花心思，讓它可“動”，比如說京東在加入購物車的時候，會把商品縮小成一個“圓球”，然后會掉進購物車的按鈕里，從而生動形象的完成了對商品的加入動作。而這種簡單而有趣的交互，會加深用戶對產品的體驗好感和讓人心情愉悅。

4.引導你的良好情緒

追波404頁面設計

當我們在Dribbble上瀏覽作品的時候，當前作品突然出現故障，導致了404，追波就會在這個頁面上把同顏色的一個個作品拼成404數字，讓人眼前一亮，消除了用戶不愉快的心情，引導用戶查看其他作品。

5.插畫傳遞品牌意味

google主頁品牌logo的設計

你有沒有注意到，偶爾在google的搜索主頁上，它的logo不定期都會傳達出各種各樣的主題，同時進行個性化但不會脫離本身品牌logo插畫設計，讓公司一成不變的logo變得趣味性和企業形象有了重新的認識。

6.不同場景的情感關懷

高德地圖的天氣提醒

設想一個場景，此刻你在地鐵里，過兩分鐘準備下地鐵去面試，你從地鐵口要走去那家沒去過的公司，此刻提前打開了高德地圖App，而你發現，此刻App首頁上，有當前區域外面正在下雨的提示，它間接讓你注意下雨天路滑，雨天要注意安全...  是的，就一個細節的天氣顯示，會提醒你要注意天氣注意安全，產品在設計的過程中，充分考慮到你會面臨諸多的一些比如天氣/路段維修等一些真實的使用環境，恰好在合適的時間，給予你幫助，讓你感到暖心。

7.使用產品的愉悅感

Nomo相機讓人驚喜的風格

nomo相機設計看起來像把手機變成了拍立得，設計就十分獨特，另外也會模擬拍立得洗照片出來的等待時長，以拍立得的風格調性和微質感，滿足人們對專業和仿真拍立得拍照體驗的愉悅與渴望，也同時讓人一眼就喜歡這款產品。

行為層設計

行為層設計區別本能層設計，不以外觀為主要設計途徑，重要的是功能的實現，同時注重易用性/易理解性的實踐主義，經過行為層設計過的產品，結合產品內涵的主要原理 帶來不一樣的真實感受。

生活中的范例：

登山沖鋒衣的防水科技

無印良品雨傘把上設計的小凹槽可以提供掛東西和袋子

公共場所里的各類指示牌

一次性垃圾袋子上方便人們拎的提繩

......

互聯網產品中的范例：

1.安全有效的體驗

滴滴打車司機端的語音輸入目的地

設想一下：當你下班打滴滴回家時，你中途要修改前往的地點，司機會問你路，然后你大概率在打車的時候觀察到這樣一個細節，他會對著應用來進行語音輸入，然后帶你前往目的地，是的，而我們在用軟件打車的時候 大部分都是手動輸入地點或修改，而司機這邊，由于處于一個駕駛狀態，需要高度集中，所以語音輸入位置相比于打字輸入，減少了他對屏幕的操作步驟和避免駕駛途中分心的不安全感，從而高效便捷且安全的使用產品。

2.節省成本 準確高效

騰訊視頻網頁端封面的快速預覽

騰訊視頻在封面每個視頻上有一個功能，就是你可以在還沒點開這視頻封面進去觀看的時候，你只需在封面上左右移動下光標，它就可以在外部封面縮略查看視頻的進度情況，很方便的讓用戶知道里面大致講的是什么內容，讓用戶都不用點進去，避免浪費用戶打開時間。其次也就是視頻網站體量內容過大，降低了用戶打開瀏覽的成本同時，也間接穩定了產品的留存。

同理之下，bbilibili視頻下方的波動幅度條（高能進度條）也是類似的功能，B站的做法是波峰值越高，表示當前視頻節點彈幕越多，也同樣是讓B站用戶能夠快速的看到“高能時刻”。這樣的微交互，更方便的考慮用戶的真實使用場景。

3.功能的可拓展性

微信的相機新功能

9.2版本的微信的掃一掃，比之前更加好用了，不光可以掃碼，還可以支持識別當前拍攝的物體，并展示物品相對應的信息和價格，讓我們不用切到其他程序就能知道一些價格等信息（另外還支持翻譯功能），十分的方便。

4.能夠準確傳達信息

微信的公眾號文章“點贊” 到“在看”的文案轉變，為什么就單單改變了文案，這個文案大家有沒有思考過改變的原因。

首先： 點贊是一種現代社交網絡孵化而出的一種社交行為  當別人在公眾號或者朋友圈等社交媒體上po出的社會發生故事 新聞和自己的生活  大家覺得好就會自發的點贊，出發點是沒錯的。

但公眾號的在看和點贊 有什么本質上的區別嗎？ 其實這就是中國博大精深的文字語言藝術了，點贊是一種正向的 積極的操作，用肢體來表達就是我豎起了大拇指，表示支持和覺得你厲害 ，而在看 它代表的是一種狀態，在公眾號里發布內容，假如說是關于一些負面的一些新聞，或者是存在傷心悲觀的一些文字，這樣 我們如果還是去點贊，心里是十分別扭的，其實這個文案是有問題的，而“在看”就很好的解決了這個問題，我在看，代表的是我在關注，我同時也愿意更多人能看到。

它用在這里是一個中性的詞匯 ，不會導致用戶想分享出一些負面的東西而顯示的卻是點贊，解決了用戶的心里的疑慮糾結。同時也會讓產品語言更加嚴謹科學。

5.服從用戶積極心理

美團讓用戶填寫外賣評價的文案細節

當我們點外賣后，打開外賣很多都能收到紅包返現的小卡片，商戶想讓我們進行評價打分，增加商鋪的分數級別，但有很多因為需要湊夠字數才能給你一個返現紅包，而美團的評價做的十分用心，一個小小的提示“還差10字即可發布！”，比“評論不能低于10個字”的文案改變，帶給用戶感受就不一樣了，用戶心理活動會想“原來10個字就可以評論”，一方面會讓用戶覺得很簡單，而去開心的評論。第二增加評論功能的完成率與活躍度，第三是提高了對每個店家評論次數和真實評論度，同時以便讓用戶更為真實的知道評論。

而“不低于10個字”帶給我們的，更像是一種考試寫作文不低于多少字一樣的“壓迫感”，語言不夠友好，在沒有外力(紅包)輔助的情況下，讓用戶從心里就不想去評論，而減少了評論的幾率。

同樣是評論10個字，換個文案就給人語氣和心理大不同了。

6.營造產品的使用氛圍

知乎App底部標簽欄按鈕 按壓時發出的聲音反饋

當你手機是響鈴模式下，知乎App的底部標簽欄按鈕，你按下按鈕就會發出類似“de de 或 du du”的聲音反饋，這種聲音首先會讓人覺得很有趣，并且它的聲音像是你在進行某種手工/文字創作的敲打聲或制作聲，會有一種很專業的感覺...

同樣的，其他一些產品例如輸入法的敲擊鍵盤聲、消息發送成功的反饋聲、解鎖屏幕的聲音...等都是為了用戶提出了聲音和操作的同步反饋，也帶來了更好的用戶體驗。

產品的貼心稱呼

在愛彼迎的個人資料中，關于你的昵稱資料，會只顯示你的名字，而不會顯示姓氏，這樣的做法是信息的不準確性嗎？

其實在我理解看來，首先我們要知道愛彼迎是一個在全世界范圍內都有服務的產品，在中國或者很多國家，人們總是喜歡稱呼親切熟悉的人不會帶上姓氏，會讓人覺得很“見外”，而親切的稱呼你的名字，并且以介紹自己的語氣，來展示自己的身份信息。在同類型的產品內，是拉近了產品與“我們”之間的距離，讓人覺得格外親切。這樣的細節 難免會讓用戶對產品產生溫度和情感，讓產品不再是冷冰冰的工具而已。

7.真實感與智能化的聯系

得物（毒）App的球鞋預覽

得物App作為一個潮流物品交易展示社區，球鞋展示這塊有一個3D空間，可以方便你360度全方位查看這雙球鞋的細節，讓你可以省去實體店或者看其他人評論圖，同時也間接提升購買產品的轉化率。

讓天貓精靈“放個屁”

其實談到這個話題 大家都會覺得很搞笑+有趣，是沒錯，即使你沒有買過天貓精靈等同系列的產品，你也聽過讓“天貓精靈”放個屁的段子，是的，首先產品這個行為就足夠搞有趣，我們在使用提出這個響應對話出于什么需求？有用嗎？大部分可覺得沒用，沒用嗎？不 其實它帶來的 是對于語音交互產品的更加擬人化，更加去思考人的真實行為，讓我們產生共情，也同時更加像和朋友同事之間的打趣一樣，讓人覺得很有笑點，發自內心的笑點。雖然目前做的還不夠好一些諸如人機對話的僵硬感，對話回答不上來....，而當產品更加像人一樣去對話，在AI技術還沒很成熟的今天，一些小小的情感對話響應，也許這就是在進步。

C.反思層設計

反思層是我們在行為層和本能層上通過感官肢體產生的某種行為，而去反思思考意義所在，它可能是正向的也可能是相反的，可以增強你對自身行為（或產品）的肯定和升華其在后面隱藏的意義，或者是反作用抑制它。

生活中的范例：

因看了一些紀錄片而腦海中時常想起畫面

獲得別很多人沒有的東西而驕傲開心

坐過山車的刺激感而后帶來的征服愉悅感

欣賞博物館收藏的具有諸多歷史/人文價值的作品并回到家反思...

互聯網產品范例：

1.滿足榮譽（令人驕傲等）的復雜心理因素

星巴克的會員星級就是一個很好的例子，將會員等級拆分為數個級別，每次消費一杯就能提升半顆星，增加難度的同時，也抓住用戶的心智，讓用戶樂于提升自己的星級（同類用戶群體下的互相比較），同時還能享受其他單品的折扣等優惠活動，積極的帶動了產品的消費，也滿足的用戶之間比較（Pan bi）或是累積的心理需求。

產品的每日打卡分享

在keep健身App里，很多用戶每天的運動都可以打卡的形式來積累，一方面是讓你保持鍛煉（產品粘性），其二就是一個累計的過程，會讓你增強對自身行為的肯定，增強愉悅感和滿足感。同時也會在朋友圈之類的社交產品上， 分享自己的每日打卡，向其他的人展示自身的一些良好的習慣和自我形象的塑造。

2.藝術傳播學習與文化共情

每日故宮App

作為藝術作品集合的各類博物館，它綜合的包含了太多的方方面面的價值，而每日故宮App也是如此，作為每日分享故宮博物院的一件珍品or藝術品的產品來說，當人們在欣賞的同時，它是令人深思的，會思考這件珍品后面的歷史故事和人文價值、它所處在的時代與之前所擁有者信息等等...

所以諸如此類的產品或網站 都是體現出反思層設計的深層所在。

高考倒計時App的每日一句

專為正奮戰在高考的學生們設計的一款倒計時應用，除了距離高考還剩多少天的字樣，另外就是會每天精選一句激勵性的文字語言，和相對應的“學子說”板塊，這個簡單的程序充滿情感的交織，讓他們都能激發自己的斗志和勇氣去積極面對。

利器-靈感生成器的語錄分享

利器-靈感生成器是一個在Chrome上的拓展程序（插件）你安裝上了它，除了它的一些功能，還有每次新建網頁都能夠看一句很隨心的話，這些話來自生活和工作乃至技術等方方面面，總有一條會讓你產生共鳴而去聯想思考為什么/怎樣做... 或者教會你一些你之前不懂的知識等... 讓你可能是愉悅、或者讓你思考回味...

3.社會責任與人文價值

百度百科里搜索結果網頁悼念逝者的黑白風格

我們總是在惋惜很多為人類社會做出貢獻的逝者，有人會在家里哭泣，有些人會去街上聚齊起來進行吊唁... 而在百度百科里，近期（近幾天）逝去的人件，或者是一些較為嚴重的事故事件，搜索結果整個網頁將都是黑白的（通過顏色來傳達情緒），結合人們對于葬禮的黑白認知和嚴肅感，也傳達出企業悼念逝者、尊重逝者的社會責任和引發人們反思共情的深度意味。

支付寶螞蟻森林的種樹功能

這個想必身邊很多人都有大半夜“偷”別人能量的事情啦，支付寶螞蟻森林的種樹功能，首先挖掘了我們用戶對做公益的積極態度，以網上來種樹，耗費較少的時間和點點手指就能做到的事，讓我們不停積攢收集能量，是讓自己能夠即使在網上，也能幫助祖國的沙漠地區，“種出”屬于自己的一份力量，同時還能看到自己種下的樹...讓用戶對公益事業有真實的參與感，也活躍了整個產品。

疫情地圖/辟謠科普查詢等

丁香園、今日頭條、高德、微信等各大平臺都在進行提供現今新冠肺炎疫情的各類幫助，不論是實時動態還是咨詢等各種幫助服務，對于企業都是需要花大量人力物力撐起來，這些公司的行為都是體現出來對人文設計、和企業價值觀對社會的助力了！

4.傳承紀念、傳遞品牌深度

京東/支付寶等App的節日主題首頁

京東和支付寶在正值傳統節日的同時，首頁從圖標到背景顏色和插畫都進行節日風格的創意設計，這樣設計的出發點一方面紀念比較有意義的傳統節日，其二就是讓平時比較呆板的界面偶爾傳播些有趣味性的設計，也能提升公司品牌形象的內涵，另外就是讓用戶感受到了節日的氣氛，同時謹記我們中國文化的傳統節日。

（啟動頁/節日海報等也類似）

以上三類的情感化設計的互聯網產品十分多，大家可以自己去體驗思考很多類似的。

這三個層次在很大程度上相互作用互相聯系影響，并不會單單的存在一層里面。（起碼是倆層以上）

舉個生活上的例子來說：我們在買衣服的時候，不可能從一方面就考慮買下它，你第一眼覺得這衣服很好看，

但是你或許還是要看下它的價格、或它適合什么場合穿...等等，以上如果沒有，也是需要看合適的尺碼的。

舉個產品的例子來說：我們常用的Emoji表情來說，本能層，第一眼，我們確實會被它的顏色和擬人化的表情所吸引，而在反思層呢？

我們發送給別人，其實是一種情緒的傳達，各類表情表達開心、生氣、無語等等，而收到的人就會反思，我做什么讓她很開心/很生氣。

所以，這三個層次都是互相緊密聯系影響的。

劃個重點，那我們應該怎么去做好情感化設計呢？

情感化設計現階段并沒有做到大范圍使用在產品里，但它又是不可或缺的，而我們需要拿捏一個度，不能濫用它，因為過度情感化會讓產品失去對用戶，但也同時不能輕視它帶來的積極作用。合理的利用用戶的情感化情緒，使一些有價值的情緒帶來產品上的一些成功，在實際挖掘當中，我們可以利用一些技術型+設計方法去進行，例如：眼睛跟蹤（眼動測試）等技術，問卷調查反饋和前期數據分析等方法。

實際工作中個人的一些理解：

1.同團隊溝通明確方案

闡述我們為什么要這樣做，這方面需要同公司團隊一起探討確認目標。

通過ROI（投入產出比）來商談可實施的步驟，是全面進行推動，還是部分實驗進行等。

定好對應的方案，做到團隊內成員的互相配合、有序的實現這些目標，從而高效的產出優秀的方案，進而達成目標。

2.提煉訴求關鍵字

我們可以通過產品原本的數據反饋或調查問卷來得知用戶反饋的數據，然后去分析，提煉用戶的情感化訴求，更為準確的可以通過關鍵詞去概括。

例如：感覺缺少品牌感、看上去沒什么活力、感覺使用起來很僵硬...這些就可以歸納為關鍵字：品牌感、活潑、微交互...

3.由點到面優化全局

當我們得到了很多情感化訴求的方向，我們著手一個出發點去實驗推展。

例如：通過后臺數據反饋，某外賣App的評論很少，轉化一直很低下，結合問卷調查的諸多方式，細分到（按鈕問題、文案問題、系統狀態問題等），假設得知是文案問題，我們展開優化文案的幾個點（例如：文案過長/文案難理解/文案過于嚴謹）并具體的進行校正。

然后可映射到其他點的功能文案，并以這種方式找到產品的全部可優化的方向面，逐個擊破，完成全局的情感化設計。

4.后期驗證方案成果

驗收這一步其實很重要，很多設計師即使做了前面的步驟，覺得我已經設計完了，應該就會達成預期目標。其實我們應該理性的看待各類方案，即使你認為好，但用戶恰巧不是這樣認為的... 所以需要后期去跟進反饋的情況，是否還存在可優化的點。通過前期的數據埋點/后期的調查問卷（方法很多種 定性or定量）去得知用戶的轉化情況，從而驗證整體情感化設計方案是否能提升產品的各個層面。

薦書環節：

唐納德 諾曼 《設計心理學3：情感化設計》

本書詳細探討情感元素的三個不同層面：包含本能的（ 產品的外觀式樣與質感）、行為的（ 產品的功能）和反思的（ 個人的感受與想法），并提出因應不同層面的設計原則；對目前越來越重視客制化與互動設計的服務產業來說，情感設計將是未來發展的關鍵。（摘自京東書籍介紹）

作者后記

如今的互聯網產品公司，設計團隊與公司都在談用戶體驗，談服務設計，談創新設計...

確實，在如今社會的進步大環境下，互聯網產品的迭代創新是十分迅速的，每個專業都不缺乏人才，

但近幾年很多人都像找到了新的賺錢崗位一樣，很多跨行業或者培訓班入行產品設計行業，對于基本的設計理論卻沒有很了解。

希望各位愛學習的設計師不要浮躁，能更了解表象之下的設計理論，為你的設計提供構建在理論基礎之上。

作者：章三瘋  如翼推薦