這篇文章跟大家分享了情感化設(shè)計(jì)的思路和方法，并結(jié)合豐富的例子，讓大家更直觀的感受情感化設(shè)計(jì)，以及情感化設(shè)計(jì)的妙用。

時(shí)至今日，大家都已經(jīng)深切的明白情感化設(shè)計(jì)的重要性和必要性。但毫不客氣的說，情感化設(shè)計(jì)依然是很難的一個(gè)環(huán)節(jié)，即使掌握了情感化設(shè)計(jì)的理論基礎(chǔ)和設(shè)計(jì)思想，卻時(shí)常還是感覺不知道從何下手，就需要結(jié)合大量的案例來具體領(lǐng)會(huì)。情感化設(shè)計(jì)的理論基礎(chǔ)已附在文末《情感的藝術(shù)—諾曼·情感化設(shè)計(jì)》

一、案例分享：諾曼《情感化設(shè)計(jì)》的三層理論模型

下面以諾曼《情感化設(shè)計(jì)》的三層理論模型為依據(jù)，分別介紹每一層級(jí)上的設(shè)計(jì)案例。

1. 本能層

（1） 俏皮的設(shè)計(jì)

可口可樂的營(yíng)銷案例：字可能看不清，左圖寫著“你算老幾”，當(dāng)喝完可樂就會(huì)看見答案“我的知己”

（2） 情景化設(shè)計(jì)

這是蘋果的天氣設(shè)計(jì)，很多天氣類軟件都有類似的設(shè)計(jì)：展現(xiàn)的情景跟當(dāng)前的天氣狀況是實(shí)時(shí)對(duì)應(yīng)的，白天云朵會(huì)飄，晚上甚至能看見星星。

（3） 彩蛋給人驚喜

Chrome瀏覽器搜索“滅霸”，點(diǎn)擊右上角的“超能手套”，網(wǎng)頁開始消失。真的有一種滅霸打個(gè)響指的感覺。如果聲音外放，還能聽見音效。

（4） 小變化給人新意

下圖分別來自B站、微博和即刻。在點(diǎn)贊后會(huì)發(fā)生一些與眾不同的變化，給人帶來新意。

B站會(huì)出現(xiàn)B站小電視、微博再給林志玲點(diǎn)贊后會(huì)出現(xiàn)vow的表情、即刻更是喂貓前后分別用小魚和魚骨代替。不同情境下點(diǎn)贊，還會(huì)出現(xiàn)不同的動(dòng)態(tài)效果。

（5） 別出心裁的設(shè)計(jì)讓人眼前一亮

一加用小人托起卡針，雖然好像并沒什么作用，但能感覺到設(shè)計(jì)師用心了，用心的產(chǎn)品總能讓人放心。

一加

（6） 安全感

readme、Bilibili在輸入密碼的時(shí)候，會(huì)遮住眼睛，我試著感受下潛臺(tái)詞：我不看，你放心輸入吧。

readme

Bilibili

（7） doodle情感化設(shè)計(jì)

doodle先特指在logo上進(jìn)行的一些創(chuàng)意表達(dá)，Google在這方面玩得最早也最多。

（8） 擬人化

Bilibili極力地在打造二次元形象，甚至能感覺到兩位小姐姐的身高、體重、性格、心情，在Bilibili中就像有兩位小姐姐一直在陪伴著。

Bilibili

夸克瀏覽器語音助手界面，兩只眼睛忽閃忽閃的，可愛極了，像一只小精靈。

夸克

（9） 小游戲

Google瀏覽器在斷網(wǎng)的時(shí)候會(huì)出現(xiàn)小恐龍游戲，也是很有趣。

Google瀏覽器

（10） 微動(dòng)畫

以google pay為例，它為每一筆交易獎(jiǎng)勵(lì)一張刮刮卡，這個(gè)微動(dòng)畫增強(qiáng)了感知。

google pay

2. 行為層

（1） 充分考慮用戶使用場(chǎng)景

Word模式網(wǎng)絡(luò)小說，這簡(jiǎn)直是摸魚神器啊，我是不會(huì)告訴你這是鳳凰網(wǎng)書城的。強(qiáng)烈建議知乎加上，這樣我摸魚寫文章的時(shí)候，就不用先在Word寫好再復(fù)制過來了，類似的操作還有網(wǎng)易云閱讀。

還有酷我音樂的這個(gè)“節(jié)奏燈光”把我逗笑了，它會(huì)根據(jù)節(jié)奏或者人聲來控制閃光的頻率，配合DJ食用效果更佳：“如果我是DJ你會(huì)愛我嗎？”

酷我音樂

（2） 貼心關(guān)懷

騰訊視頻在夜深的時(shí)候，頂部會(huì)出現(xiàn)提示：夜深了，并帶上時(shí)間。雖然并沒有什么卵用，我還是會(huì)繼續(xù)看，但那一秒真的被觸動(dòng)到了。

騰訊視頻

我知道美團(tuán)外賣只是想促進(jìn)轉(zhuǎn)化，但這樣恰逢時(shí)宜的提示，就不至于讓人非常反感。

美團(tuán)外賣通知

網(wǎng)易云音樂居然知道我生日，還讓我挺意外的，不知道哪里泄露了隱私。不過先不管這么多，聽聽推薦的生日歌還是挺有感覺的。

網(wǎng)頁云音樂生日提醒

（3） 進(jìn)度提示

很多產(chǎn)品的成功頁都會(huì)有個(gè)流程展示，流程的展示能給用戶以確定的預(yù)期，從而消除因不確定而帶來的焦慮感。

這里再舉個(gè)Zenly的例子：在加載聯(lián)系人的過程中，會(huì)不斷地出現(xiàn)新的文案并配合不同的表情。本來枯燥的等待過程，變得有趣起來，不然我可沒有耐心等待那么長(zhǎng)時(shí)間。

（4） 文案

Medium提醒我登錄的文案與眾不同：先是給我道歉：“抱歉打斷你了”，非常有禮貌，不過確實(shí)是打斷我了，因?yàn)槲耶?dāng)時(shí)正打開一篇新的文章。

緊接著灰色小字寫著：“我們發(fā)現(xiàn)您以前在Medium閱讀過，這里有個(gè)個(gè)性化的體驗(yàn)等著您，只需點(diǎn)擊幾步即可，現(xiàn)在去創(chuàng)建屬于你自己的Medium嗎？”

文案寫得好才不至于那么令人反感，如果是很生硬的登錄提示，當(dāng)時(shí)我就直接點(diǎn)關(guān)閉了。

Medium

還有各種各樣風(fēng)騷賣萌的文案：

夸克：網(wǎng)頁大師乘坐著404航班去追尋詩和遠(yuǎn)方了。

Colorful Pro：梧桐更兼細(xì)雨，到黃昏，點(diǎn)點(diǎn)滴滴。

webflow：嗯哼……那個(gè)藍(lán)色的按鈕一定很重要……

（5） 反饋

這里先舉個(gè)QQ音樂、網(wǎng)易云音樂和蝦米音樂在無音樂版權(quán)情況下的反饋：

• QQ音樂：我們的目標(biāo)是星辰大海，哪里不滿意的告訴我，我買！——土豪有錢任性
• 網(wǎng)易云音樂：這事不賴我，合作方要求的，我替你找合作方說理去！
• 蝦米音樂：這事咱低調(diào)處理，沒版權(quán)我也沒辦法，給您道歉了。

傳達(dá)出來的態(tài)度完全不一樣。

這三個(gè)反饋都是截止到2019.7.10的最新版，上一版是這樣：

• QQ音樂：一如既往的壕氣十足；
• 網(wǎng)易云音樂：大哥饒命，我們一直在努力；
• 蝦米音樂：我們一直在努力，可否先看個(gè)MV先。

其實(shí)我更喜歡網(wǎng)易上一版的文案，語氣弱一些并用了個(gè)可憐的表情，弱勢(shì)的語氣更能獲得諒解。

還有各種各樣反饋的例子：微信轉(zhuǎn)賬如果兩筆金額一致，會(huì)出現(xiàn)確認(rèn)框，避免誤操作。

微信轉(zhuǎn)賬

iPhone充電，如果充電口存在液體，會(huì)出現(xiàn)安全提示。

iPhone充電提示

QQ音樂會(huì)員到期提示，用了我最愛的偶像周杰倫，并改編了周杰倫的歌詞作為文案，讓我感覺很親切，雖然依舊是變成花樣騙我錢，但這次并沒有那么抗拒。

QQ音樂會(huì)員到期提示

3. 反思層

（1） 情懷

張小龍的七星級(jí)產(chǎn)品—QQ郵箱，在登錄的時(shí)候總會(huì)隨機(jī)的出現(xiàn)一句話。

有時(shí)候是許巍的《藍(lán)蓮花》、有時(shí)候會(huì)是兩歲小孩的一幅畫、有時(shí)候是一句名言……但下面這句話有點(diǎn)風(fēng)騷，我不敢翻譯：“Across the Great Wall we can reach every corner in the world.”

QQ郵箱

（2） 回味

扇貝是我天天用的一款軟件，它每天都會(huì)帶來一幅很精美的圖片和一句讓人回味無窮的話。每天打開扇貝，感覺又開啟了有逼格的一天。

扇貝啟動(dòng)頁

（3） 價(jià)值觀和社會(huì)價(jià)值

Bing搜索和騰訊網(wǎng)404 no found界面用來做走失兒童公益。為了能讓大家看得更清晰一些，這兩張圖我就不縮小了，希望寶貝能盡快回家。

Bing搜索

騰訊網(wǎng)

丁香園404 no found界面展現(xiàn)了因惡性醫(yī)患遇害的同道，向他們表示哀悼。

丁香園

（4） 人文關(guān)懷

下圖分別來自Pinterest和微信，Pin在搜索輸入depress、suicide等極度負(fù)面情緒詞匯的時(shí)候，會(huì)出現(xiàn)“Can we help”提示，告訴用戶這些圖片會(huì)讓人情緒低落，如果你或別人正在經(jīng)受困難，甚至想自殺或者傷害自己，我們可以幫助你，你并不是孤單一個(gè)人。

這正體現(xiàn)了一個(gè)企業(yè)的社會(huì)價(jià)值。

在Facebook修改了自己的感情狀態(tài)，看到了這樣的一則官方幫助貼，有點(diǎn)暖心了。

Facebook

在淘寶搜索穿山甲，心里一驚，居然有搜索結(jié)果，然后……

給阿里點(diǎn)個(gè)贊吧，還是希望全民都能建立起保護(hù)意識(shí)，也希望盡快研制出新型藥物。讓我們一起來保護(hù)這個(gè)可愛的小家伙吧。

在淘寶搜索穿山甲

好例子太多了，以后有遇見好的例子會(huì)繼續(xù)更新。

這里需要說明的是，無論是在哪一層級(jí)上的設(shè)計(jì)，都會(huì)對(duì)其他兩層產(chǎn)生影響。

比如一個(gè)好看的界面設(shè)計(jì)，會(huì)讓用戶更能接受并理解他，從而得出這個(gè)產(chǎn)品不錯(cuò)的結(jié)論。也就是說，情感化設(shè)計(jì)是整體性的，設(shè)計(jì)的時(shí)候都是需要綜合考慮的，不存在只針對(duì)某個(gè)層級(jí)的設(shè)計(jì)。只是說諾曼將“情感化設(shè)計(jì)”分為三個(gè)層級(jí)后，讓我們找到了設(shè)計(jì)的側(cè)重點(diǎn)，更加方便我們?cè)O(shè)計(jì)了。

比如我們可以從本能層為切入點(diǎn)切入，思考得到一個(gè)設(shè)計(jì)方案后，再通盤考慮對(duì)行為層和反思層的影響，最后通過修正得到一個(gè)更恰當(dāng)?shù)慕鉀Q方案。 下文根據(jù)層級(jí)對(duì)案例進(jìn)行分類，只是為了更方便的進(jìn)行闡述。

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

這是個(gè)老生常談的問題，所謂的情感化設(shè)計(jì)就是以用戶情感角度為出發(fā)點(diǎn)的設(shè)計(jì)方式，以期讓用戶和產(chǎn)品發(fā)生情感上的連接。

現(xiàn)在流量明星都在努力塑造自己的人設(shè)，并主動(dòng)頻繁更新動(dòng)態(tài)，讓粉絲能更輕易的與自己互動(dòng)，并發(fā)生情感上的連接。他們已經(jīng)不像老一輩明星那樣讓人感覺遙不可及高高在上，反而讓人感覺親密無間，這些青春靚麗的小哥哥小姐姐成為了多少人的云戀愛對(duì)象。

產(chǎn)品也一樣，早就不應(yīng)該是冷冰冰的機(jī)器。我們也應(yīng)該給產(chǎn)品一個(gè)性格：逗逼、小可愛、穩(wěn)重大叔、極客、情懷、可靠……

這些有血有肉有溫度有感情的產(chǎn)品，更能讓用戶產(chǎn)生情感上的共鳴。每個(gè)人都喜歡跟自己趣味相投的人在一起，對(duì)待產(chǎn)品也一樣。

三、情感化的設(shè)計(jì)思路是什么？

我查閱了大量資料，也跟做用戶體驗(yàn)的同事交流后發(fā)現(xiàn)，確實(shí)業(yè)內(nèi)現(xiàn)在并沒有一個(gè)統(tǒng)一的標(biāo)準(zhǔn)化的設(shè)計(jì)思路。但幸運(yùn)的是，我們浸淫情感化設(shè)計(jì)多年，形成了一套我們覺得切實(shí)可行的情感化設(shè)計(jì)思路，今天就將其傾囊相授：

1. 首先需要明確目標(biāo)，不是為了情感化而情感化

作為一個(gè)設(shè)計(jì)團(tuán)隊(duì)，我們要先明確當(dāng)前急需解決的問題，有策略有節(jié)奏的進(jìn)行執(zhí)行，大家方向統(tǒng)一目標(biāo)一致，這樣才有可能高效產(chǎn)出，并取得高分答卷。

假設(shè)：現(xiàn)在的目標(biāo)是提升產(chǎn)品的品牌認(rèn)知。

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

我們需要找到用戶情感的訴求點(diǎn)，或者我們想傳達(dá)的情感價(jià)值觀。并將這些關(guān)鍵詞提取出來，作為設(shè)計(jì)的核心關(guān)鍵詞。

假設(shè)：提取的情感化關(guān)鍵詞是活力、陽光和親和。

3. 尋找切入點(diǎn)

切入點(diǎn)有非常多，比如統(tǒng)一的視覺系統(tǒng)、文案語言風(fēng)格、驚喜感、趣味性、微交互等等。

假設(shè)：我們以統(tǒng)一的視覺系統(tǒng)入手，可以對(duì)logo、色調(diào)、視覺元素、圖片、插畫等進(jìn)行整體升級(jí)。

4. 具體方案細(xì)節(jié)設(shè)計(jì)

我們對(duì)找到的切入點(diǎn)進(jìn)行全盤的把握，然后再逐個(gè)擊破，最后形成新版的情感化的設(shè)計(jì)方案。

以上是情感化設(shè)計(jì)的思路，總結(jié)起來就是如下：

情感化設(shè)計(jì)思路

四、情感化設(shè)計(jì)的作用

情感化設(shè)計(jì)的作用有很多：

1. 情感化設(shè)計(jì)可以緩解用戶的負(fù)面情緒。比如等待、產(chǎn)品出bug、無內(nèi)容空白頁、斷網(wǎng)、服務(wù)器失聯(lián)、錯(cuò)誤操作等等；
2. 情感化設(shè)計(jì)可以引導(dǎo)用戶行為。情緒是可以影響用戶的感知、決策甚至是記憶的。我們可以利用這一點(diǎn)，比如當(dāng)用戶完成某項(xiàng)任務(wù)時(shí)，心理處于愉悅狀態(tài)，我們就可以引導(dǎo)用戶到應(yīng)用商店給我們五星好評(píng)。再比如如果用戶要注銷賬號(hào)時(shí)，賣個(gè)萌，是否可以讓用戶再考慮一下；
3. 情感化設(shè)計(jì)可以提升品牌認(rèn)同。持續(xù)的正面情感反饋，會(huì)讓用戶欲罷不能，并將這種情感投射到品牌上。這種極強(qiáng)的情感認(rèn)同，會(huì)讓用戶產(chǎn)生極強(qiáng)的忠誠度；
4. 情感化設(shè)計(jì)可以促進(jìn)增長(zhǎng)。這是一個(gè)潛移默化的過程，好口碑自然會(huì)有好增長(zhǎng)。

有個(gè)誤區(qū)：情感化設(shè)計(jì)大家似乎都在追求正向的情感，但實(shí)際上負(fù)面的情感也不是不能用。

比如緊迫感：紅包有時(shí)限、下單必須多長(zhǎng)時(shí)間內(nèi)支付。

心理學(xué)上的解釋就是，當(dāng)人類處于負(fù)面情緒時(shí)，會(huì)更集中注意力去解決當(dāng)前的困境；當(dāng)人類處于正面情緒的時(shí)候，思維會(huì)更開闊更有創(chuàng)造力。這也是人類進(jìn)化而來的結(jié)果，正所謂飽暖思淫欲，饑寒起盜心。

這也是為什么常常有產(chǎn)品經(jīng)理抱怨：明明這個(gè)按鈕那么明顯，用戶為什么看不見呢？因?yàn)楫?dāng)用戶處于困境的時(shí)候，真的就是進(jìn)行重復(fù)操作，而讓自己處于死循環(huán)中，最后無奈退出，退出的時(shí)候還要罵一句這產(chǎn)品真笨蛋。

還有個(gè)使用負(fù)面情緒的例子是共享按摩椅。

它的喇叭剛好就放在頭枕的位置，喇叭里面循環(huán)播放著廣告詞。正常路過的時(shí)候，并不會(huì)感覺很刺耳，但只要人往那一坐，是戴上耳機(jī)也無濟(jì)于事；想瞇一會(huì)兒，被這廣告詞吵得睡不著，但又不想放棄這么舒服的座椅；最后在幾經(jīng)掙扎下，還是乖乖掃碼買單按摩了。仿佛耳邊飄來一個(gè)聲音：這個(gè)問題充錢就可以解決了，都是被人算計(jì)好了的。

五、情感化設(shè)計(jì)的風(fēng)險(xiǎn)

情感化設(shè)計(jì)的好處很多，但它的缺點(diǎn)也會(huì)對(duì)產(chǎn)品造成很大的傷害，我們不能不了解情感化設(shè)計(jì)的風(fēng)險(xiǎn)：

1. 情感化設(shè)計(jì)存在時(shí)效性，一時(shí)新穎的設(shè)計(jì)，可能很快就會(huì)過時(shí)；

2. 每個(gè)人成長(zhǎng)環(huán)境不同、理解力不一樣，這導(dǎo)致情感化設(shè)計(jì)存在較強(qiáng)的主觀性。有人覺得還OK的設(shè)計(jì)，另外一撥人甚至感覺受到了冒犯；

比如下面優(yōu)酷贈(zèng)送會(huì)員的浮窗，理性看用戶領(lǐng)取會(huì)員是最佳選擇，優(yōu)酷也想從文案上讓原本二選一的選擇題變成唯一答案的必選題。但這一句“不要了，我愛看廣告”讓我感覺受到了羞辱和嘲笑。我選擇都不選，退出并清理后臺(tái)。

優(yōu)酷視頻

3. 情感化設(shè)計(jì)有時(shí)候會(huì)影響產(chǎn)品的可用性。因?yàn)樗诜稚⒂脩舻淖⒁饬Γ幚聿缓玫脑?，反而?huì)讓用戶偏離重心；

4. 全球化的產(chǎn)品，一定要考慮到不同國家地區(qū)、不同種族和不同文化背景的感受。

從小眾產(chǎn)品做到大眾產(chǎn)品，情感化設(shè)計(jì)越來越難，因?yàn)楸娍陔y調(diào)。每一次設(shè)計(jì)，都會(huì)有人跳出來反對(duì)，甚至同一個(gè)人，因?yàn)樗约盒那榈淖兓部赡軐?duì)同一個(gè)設(shè)計(jì)作出相左的評(píng)論。

為了讓我們更安全的進(jìn)行情感化設(shè)計(jì)，我們總結(jié)出了一些原則：

1. 在不常見的頁面做情感化設(shè)計(jì)，比如登錄注冊(cè)頁、退出登錄、空白頁、斷網(wǎng)、弱網(wǎng)、服務(wù)器失聯(lián)等邊界場(chǎng)景，還可以在產(chǎn)品引入新功能時(shí)，用戶完成里程碑式操作或成長(zhǎng)時(shí);

2. 結(jié)合節(jié)假日或值得紀(jì)念的日子出現(xiàn)情感化設(shè)計(jì);

3. 盡量采用細(xì)微的變化;

4. 不要欺騙用戶情感。

我收到了即刻的一條通知“你好，我們應(yīng)該認(rèn)識(shí)很久了。”我一激動(dòng)，這會(huì)是誰呢？慕名而來？

結(jié)果打開一看，是即刻的新功能介紹。那一刻我感覺到了欺騙。

即刻

5. 不要太刻意，無意間的發(fā)現(xiàn)更能讓用戶驚喜。也可以準(zhǔn)備一些彩蛋，給用戶不期的驚喜。

6. 不要干擾用戶主線操作。

7. 只做適合自己的情感化設(shè)計(jì)，不要為了情感化而情感化。情感化設(shè)計(jì)是飯后甜點(diǎn)，不能當(dāng)正餐。

以上。

本文由 @湯涌 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議。