這篇文章會跟大家分享情感化設計的思路和方法，并結合豐富的例子，讓大家更直觀的感受情感化設計，以及情感化設計的妙用。
導語：時至今日，大家都已經深切的明白情感化設計的重要性和必要性。但毫不客氣的說，情感化設計依然是很難的一個環節，即使掌握了情感化設計的理論基礎和設計思想，卻時常還是感覺不知道從何下手。所以就需要結合大量的案例來具體領會。
情感化設計的理論基礎已附在文末《情感的藝術—諾曼·情感化設計》
一、案例分享
下面以諾曼·《情感化設計》的三層理論模型為依據，分別介紹每一層級上的設計案例。
諾曼·《情感化設計》的三層理論模型
本能層
1、俏皮的設計
可口可樂的營銷案例。字可能看不清，左圖寫著“你算老幾”，當喝完可樂就會看見答案“我的知己”（右圖）
2、情景化設計
這是蘋果的天氣設計，很多天氣類軟件都有類似的設計。展現的情景跟當前的天氣狀況是實時對應的，白天云朵會飄，晚上甚至能看見星星。
3、彩蛋給人驚喜
Chrome瀏覽器搜索“滅霸”，點擊右上角的“超能手套”，網頁開始消失。真的有一種滅霸打個響指的感覺。如果聲音外放，還能聽見音效。
4、小變化給人新意
下圖分別來自B站、微博和即刻。在點贊后會發生一些與眾不同的變化，給人帶來新意。
B站會出現B站小電視，微博再給林志玲點贊后會出現vow的表情，即刻更是喂貓前后分別用小魚和魚骨代替。不同情境下點贊，還會出現不同的動態效果。
5、別出心裁的設計讓人眼前一亮
一加用小人托起卡針，雖然好像并沒什么作用，但能感覺到設計師用心了。用心的產品總能讓人放心。
一加
6、安全感
readme、Bilibili在輸入密碼的時候，會遮住眼睛，我試著感受下潛臺詞：我不看，你放心輸入吧。
readme
Bilibili
7、doodle情感化設計
doodle先特指在logo上進行的一些創意表達，Google在這方面玩得最早也最多。
8、擬人化
Bilibili極力地在打造二次元形象，甚至能感覺到兩位小姐姐的身高、體重、性格、心情，在Bilibili中就像有兩位小姐姐一直在陪伴著。
Bilibili
夸克瀏覽器語音助手界面，兩只眼睛忽閃忽閃的，可愛極了，像一只小精靈。
夸克
9、小游戲
Google瀏覽器在斷網的時候會出現小恐龍游戲，也是很有趣。
Google瀏覽器
10、微動畫
以google pay為例，它為每一筆交易獎勵一張刮刮卡。這個微動畫增強了感知。
google pay
行為層
1、充分考慮用戶使用場景
Word模式網絡小說，這簡直是摸魚神器啊，我是不會告訴你這是鳳凰網書城的。強烈建議知乎加上，這樣我摸魚寫文章的時候，就不用先在Word寫好再復制過來了。類似的操作還有網易云閱讀。
還有酷我音樂的這個“節奏燈光”把我逗笑了。它會根據節奏或者人聲來控制閃光的頻率，配合DJ食用效果更佳。“如果我是DJ你會愛我嗎？”
酷我音樂
2、貼心關懷
騰訊視頻在夜深的時候，頂部會出現提示：夜深了，并帶上時間。雖然并沒有什么卵用，我還是會繼續看，但那一秒真的被觸動到了。
騰訊視頻
我知道美團外賣只是想促進轉化，但這樣恰逢時宜的提示，就不至于讓人非常反感。
美團外賣通知
網易云音樂居然知道我生日，還讓我挺意外的，不知道哪里泄露了隱私。不過先不管這么多，聽聽推薦的生日歌還是挺有感覺的。
網頁云音樂生日提醒
3、進度提示
很多產品的成功頁都會有個流程展示，流程的展示能給用戶以確定的預期，從而消除因不確定而帶來的焦慮感。
這里再舉個Zenly的例子。
在加載聯系人的過程中，會不斷地出現新的文案并配合不同的表情。本來枯燥的等待過程，變得有趣起來，不然我可沒有耐心等待那么長時間。
4、文案
Medium提醒我登錄的文案與眾不同。
先是給我道歉：“抱歉打斷你了”。非常有禮貌，不過確實是打斷我了，因為我當時正打開一篇新的文章。
緊接著灰色小字寫著：“我們發現您以前在Medium閱讀過，這里有個個性化的體驗等著您，只需點擊幾步即可。現在去創建屬于你自己的Medium嗎？”
文案寫得好才不至于那么令人反感，如果是很生硬的登錄提示，當時我就直接點關閉了。
Medium
還有各種各樣風騷賣萌的文案：
夸克：網頁大師乘坐著404航班去追尋詩和遠方了。
夸克：網頁大師乘坐著404航班去追尋詩和遠方了。
Colorful Pro：梧桐更兼細雨，到黃昏，點點滴滴
Colorful Pro : 梧桐更兼細雨，到黃昏，點點滴滴
webflow：嗯哼……那個藍色的按鈕一定很重要……
webflow：嗯哼……那個藍色的按鈕一定很重要……
5、反饋
這里先舉個QQ音樂、網易云音樂和蝦米音樂在無音樂版權情況下的反饋。
QQ音樂：我們的目標是星辰大海，哪里不滿意的告訴我，我買！——土豪有錢任性
網易云音樂：這事不賴我，合作方要求的，我替你找合作方說理去！
蝦米音樂：這事咱低調處理，沒版權我也沒辦法，給您道歉了。
傳達出來的態度完全不一樣。
這三個反饋都是截止到2019.7.10的最新版，上一版不這樣。
QQ音樂：一如既往的壕氣十足
網易云音樂：大哥饒命，我們一直在努力
蝦米音樂：我們一直在努力，可否先看個MV先
其實我更喜歡網易上一版的文案，語氣弱一些并用了個可憐的表情，弱勢的語氣更能獲得諒解。
還有各種各樣反饋的例子：
微信轉賬如果兩筆金額一致，會出現確認框。避免誤操作。
微信轉賬
iPhone充電，如果充電口存在液體，會出現安全提示。
iPhone充電提示
QQ音樂會員到期提示，用了我最愛的偶像周杰倫，并改編了周杰倫的歌詞作為文案。讓我感覺很親切，雖然依舊是變成花樣騙我錢，但這次并沒有那么抗拒。
QQ音樂會員到期提示
反思層
1、情懷
張小龍的七星級產品—QQ郵箱，在登錄的時候總會隨機的出現一句話。有時候是許巍的《藍蓮花》、有時候會是兩歲小孩的一幅畫、有時候是一句名言……但下面這句話有點風騷，我不敢翻譯。“Across the Great Wall we can reach every corner in the world.”
QQ郵箱
“Across the Great Wall we can reach every corner in the world.”
2、回味
扇貝是我天天用的一款軟件，它每天都會帶來一幅很精美的圖片和一句讓人回味無窮的話。每天打開扇貝，感覺又開啟了有逼格的一天。
扇貝啟動頁
3、價值觀和社會價值
Bing搜索和騰訊網404 no found界面用來做走失兒童公益。為了能讓大家看得更清晰一些，這兩張圖我就不縮小了，希望寶貝能盡快回家。
Bing搜索
騰訊網
丁香園404 no found界面展現了因惡性醫患遇害的同道，向他們表示哀悼。
丁香園
4、人文關懷
下圖分別來自Pinterest和微信，Pin在搜索輸入depress、suicide等極度負面情緒詞匯的時候，會出現“Can we help”提示，告訴用戶這些圖片會讓人情緒低落，如果你或別人正在經受困難，甚至想自殺或者傷害自己。我們可以幫助你，你并不是孤單一個人。
這正體現了一個企業的社會價值。
在Facebook修改了自己的感情狀態，看到了這樣的一則官方幫助貼，有點暖心了。
在淘寶搜索穿山甲，心里一驚，居然有搜索結果，然后……給阿里點個贊吧，還是希望全民都能建立起保護意識，也希望盡快研制出新型藥物。讓我們一起來保護這個可愛的小家伙吧。
在淘寶搜索穿山甲
好例子太多了，以后有遇見好的例子會繼續在這里更新。
這里需要說明的是，無論是在哪一層級上的設計，都會對其他兩層產生影響。比如一個好看的界面設計，會讓用戶更能接受并理解他，從而得出這個產品不錯的結論。 也就是說，情感化設計是整體性的，設計的時候都是需要綜合考慮的，不存在只針對某個層級的設計。 只是說諾曼將“情感化設計”分為三個層級后，讓我們找到了設計的側重點，更加方便我們設計了。比如我們可以從本能層為切入點切入，思考得到一個設計方案后，再通盤考慮對行為層和反思層的影響，最后通過修正得到一個更恰當的解決方案。 下文根據層級對案例進行分類，只是為了更方便的進行闡述。
二、什么是情感化設計？
這是個老生常談的問題，所謂的情感化設計就是以用戶情感角度為出發點的設計方式，以期讓用戶和產品發生情感上的連接。
現在流量明星都在努力塑造自己的人設，并主動頻繁更新動態，讓粉絲能更輕易的與自己互動，并發生情感上的連接。這些明星已經不像老一輩明星那樣讓人感覺遙不可及高高在上，反而讓人感覺親密無間。這些青春靚麗的小哥哥小姐姐成為了多少人的云戀愛對象。
產品也一樣，早就不應該是冷冰冰的機器。
我們也應該給產品一個性格。逗逼、小可愛、穩重大叔、極客、情懷、可靠……這些有血有肉有溫度有感情的產品，更能讓用戶產生情感上的共鳴。每個人都喜歡跟自己趣味相投的人在一起，對待產品也一樣。
三、情感化的設計思路是什么？
我查閱了大量資料，也跟做用戶體驗的同事交流后發現，確實業內現在并沒有一個統一的標準化的設計思路。
但幸運的是，我們浸淫情感化設計多年，形成了一套我們覺得切實可行的情感化設計思路，今天就將其傾囊相授。
1、 首先需要明確目標，不是為了情感化而情感化。作為一個設計團隊，我們要先明確當前急需解決的問題，有策略有節奏的進行執行，大家方向統一目標一致，這樣才有可能高效產出，并取得高分答卷。
假設：現在的目標是提升產品的品牌認知
2、 提取情感化關鍵詞。我們需要找到用戶情感的訴求點，或者我們想傳達的情感價值觀。并將這些關鍵詞提取出來，作為設計的核心關鍵詞。
假設：提取的情感化關鍵詞是活力、陽光和親和
3、 尋找切入點。切入點有非常多，比如統一的視覺系統、文案語言風格、驚喜感、趣味性、微交互等等
假設：我們以統一的視覺系統入手，可以對logo、色調、視覺元素、圖片、插畫等進行整體升級。
4、 具體方案細節設計。我們對找到的切入點進行全盤的把握，然后再逐個擊破，最后形成新版的情感化的設計方案。
以上是情感化設計的思路，總結起來就是如下：
情感化設計思路
四、情感化設計的作用
情感化設計的作用有很多：
1、情感化設計可以緩解用戶的負面情緒——比如等待、產品出bug、無內容空白頁、斷網、服務器失聯、錯誤操作等等
2、情感化設計可以引導用戶行為——情緒是可以影響用戶的感知、決策甚至是記憶的。我們可以利用這一點，比如當用戶完成某項任務時，心理處于愉悅狀態，我們就可以引導用戶到應用商店給我們五星好評。再比如如果用戶要注銷賬號時，賣個萌，是否可以讓用戶再考慮一下。
3、情感化設計可以提升品牌認同——持續的正面情感反饋，會讓用戶欲罷不能，并將這種情感投射到品牌上。這種極強的情感認同，會讓用戶產生極強的忠誠度。
4、情感化設計可以促進增長——這是一個潛移默化的過程，好口碑自然會有好增長。
有個誤區：情感化設計大家似乎都在追求正向的情感，但實際上負面的情感也不是不能用。
比如
緊迫感：紅包有時限、下單必須多長時間內支付。
心理學上的解釋就是，當人類處于負面情緒時，會更集中注意力去解決當前的困境。當人類處于正面情緒的時候，思維會更開闊更有創造力。這也是人類進化而來的結果，正所謂飽暖思淫欲，饑寒起盜心。
這也是為什么常常有產品經理抱怨：明明這個按鈕那么明顯，用戶為什么看不見呢？這就是因為當用戶處于困境的時候，真的就是進行重復操作，而讓自己處于死循環中，最后無奈退出。退出的時候還要罵一句這產品真傻逼。
還有個使用負面情緒的例子是共享按摩椅。
它的喇叭剛好就放在頭枕的位置，喇叭里面循環播放著廣告詞。正常路過的時候，并不會感覺很刺耳，但只要人往那一坐，是戴上耳機也無濟于事。想瞇一會兒，被這廣告詞吵得睡不著，但又不想放棄這么舒服的座椅。最后在幾經掙扎下，還是乖乖掃碼買單按摩了。仿佛耳邊飄來一個聲音：這個問題充錢就可以解決了。都是被人算計好了的。
五、情感化設計的風險
情感化設計的好處很多，但它的缺點也會對產品造成很大的傷害，我們不能不了解情感化設計的風險。
1、情感化設計存在時效性，一時新穎的設計，可能很快就會過時。
2、每個人成長環境不同、理解力不一樣，這導致情感化設計存在較強的主觀性。有人覺得還OK的設計，另外一撥人甚至感覺受到了冒犯。
比如下面優酷贈送會員的浮窗，理性看用戶領取會員是最佳選擇，優酷也想從文案上讓原本二選一的選擇題變成唯一答案的必選題。但這一句“不要了，我愛看廣告”讓我感覺受到了羞辱和嘲笑。我選擇都不選，退出并清理后臺。
優酷視頻
3、情感化設計有時候會影響產品的可用性。因為它在分散用戶的注意力，處理不好的話，反而會讓用戶偏離重心。
4、全球化的產品，一定要考慮到不同國家地區、不同種族和不同文化背景的感受。
5、從小眾產品做到大眾產品，情感化設計越來越難，因為眾口難調。每一次設計，都會有人跳出來反對。甚至同一個人，因為他自己心情的變化，也可能對同一個設計作出相左的評論。
為了讓我們更安全的進行情感化設計，我們總結出了一些原則：
1、在不常見的頁面做情感化設計，比如登錄注冊頁、退出登錄、空白頁、斷網、弱網、服務器失聯等邊界場景，還可以在產品引入新功能時，用戶完成里程碑式操作或成長時。
2、結合節假日或值得紀念的日子出現情感化設計。
3、盡量采用細微的變化。
4、不要欺騙用戶情感。
我收到了即刻的一條通知“你好，我們應該認識很久了。”我一激動，這會是誰呢？慕名而來？
結果打開一看，是即刻的新功能介紹。那一刻我感覺到了欺騙。
即刻
5、不要太刻意，無意間的發現更能讓用戶驚喜。也可以準備一些彩蛋，給用戶不期的驚喜。
6、不要干擾用戶主線操作。
7、只做適合自己的情感化設計，不要為了情感化而情感化。情感化設計是飯后甜點，不能當正餐。
以上。
如下是產品經理系列文章：
湯涌：干貨 | 產品經理入門完整版—能力模型、常用工具、書單、快速入門法?zhuanlan.zhihu.com湯涌：如何進行需求收集？?zhuanlan.zhihu.com湯涌：需求分析方法論?zhuanlan.zhihu.com湯涌：從需求到落地，產品全鏈路實現流程?zhuanlan.zhihu.com湯涌：從需求到產品，如何做一份無懈可擊的產品設計?zhuanlan.zhihu.com湯涌：情感的藝術—諾曼·情感化設計?zhuanlan.zhihu.com湯涌：情感化設計·實戰案例篇?zhuanlan.zhihu.com
非常感謝大家關注我的專欄《產品說》，一起學習完整的產品理論和實操方法。 (#^.^#)
