我們正在進(jìn)入一個信息復(fù)雜度遠(yuǎn)超以往的時代。我們所面對的是一個物質(zhì)和信息都極大豐富的世界，從產(chǎn)品競爭的角度上來說，越來越激烈的對抗和沖擊是必然的，許多產(chǎn)品已經(jīng)從單純的“談配置”過渡到了“談感情”的階段，情感化設(shè)計已經(jīng)在不同的設(shè)計領(lǐng)域中嶄露頭角，甚至成為了最核心的組成部分。

很多時候，我們幾經(jīng)努力，結(jié)果設(shè)計的UI常常在可用與實用的階段來回波動，那些看起來讓人愉悅無比的網(wǎng)頁或者APP都是典型的“別人家的作品”。

的確，大家都在想什么樣的UI可能會讓用戶觸動，哪些元素應(yīng)該能影響到用戶，怎樣的套路可能會讓用戶內(nèi)心波動。想要聊，誰都可以多少說一些，相關(guān)的案例也比比皆是。但是真要系統(tǒng)地探討情感和情緒是怎樣作用于設(shè)計的，語言又常常迎齒而潰。

其實配合一些最基本的心理學(xué)知識和我們的自身對于世界的認(rèn)知，并不難分析和理解情感化設(shè)計的原理。常說我們的設(shè)計要有情緒，那么做設(shè)計之前，我們先了解一下情緒和情感。

情感和情緒無處不在

的確，情緒是動物性的，是人對于外界的直接的心理反饋，很多時候會被視作為理性認(rèn)知和邏輯的對立面。但是情感和情緒又何嘗不是我們認(rèn)識世界最基本的工具之一？我們所做的哪一件事情是完全不受情緒和情感影響的？讓人高興愉悅的動效和充滿情懷的插畫給人的情緒影響是明顯的，而扁平化界面中唯一的一個擁有陰影的按鈕給人帶來的不適也是客觀存在、令人無法忽略的情緒反饋。邏輯和認(rèn)知讓我們擁有了分析和思考的能力，而情緒、情感和本能所構(gòu)成的復(fù)雜系統(tǒng)則讓我們的決策更加完善。

“Like”和“贊”的按鈕滿世界都是，“收藏”的功能遠(yuǎn)沒有這個帶著情緒標(biāo)記的功能來得好使。在我們還沒有習(xí)慣QQ表情的時候，日本的手機(jī)已經(jīng)將顏文字作為基本功能集成了進(jìn)去，現(xiàn)在的emoji更是火得不行，其中的任何一個，都比文字更易于傳達(dá)情感。喜歡還是不喜歡，高興還是不高興，我們生活中的決策過程充滿了情緒的痕跡，而情緒也確實幫我們更快地對外界信息作出反應(yīng)。

當(dāng)然，情緒和情感還是有一定差別的。情感可以是有意識也可以是無意識的，它是人類意識的基本判斷系統(tǒng)，莫名的鬧心和無緣由的緊張都是情感表現(xiàn)。而情緒是情感有意識的體驗，它有目標(biāo)性，通常也有原因，比如不可用的界面給你帶來的煩躁，好不找到的頁面打開發(fā)現(xiàn)是404，內(nèi)心崩潰沮喪，這些都是情緒。

換句話來說，設(shè)計從來都同情感相關(guān)聯(lián)，而你的設(shè)計有沒有調(diào)動起用戶對的情緒，這就是另外一個問題了。

設(shè)計的三個層次

了解人，認(rèn)識自己，明白用戶，是設(shè)計師做好設(shè)計的基礎(chǔ)。

心理學(xué)上將大腦對于外界的反饋和認(rèn)知劃分為三個不同的層次，本能層次，行為層次和反思層次。這三個層次是人類大腦的運(yùn)作的規(guī)律，映射到設(shè)計當(dāng)中，同樣是可供遵循、值得探究的三個層次。

了解了它們是如何相互作用，又是怎樣受到情緒影響，能讓你對于設(shè)計有著更深入的理解。

本能

本能層次牽涉到的人類的生物性本能，可能會有反例，但是它幾乎適用于所有人。比如對危險的規(guī)避，控高，對于美食的享受，本能是先天的。

行為

行為層次則是控制日常行為運(yùn)作的那個部分，它同樣是無意識的，它與整個情感系統(tǒng)有著緊密的關(guān)聯(lián)，讓我們的身體做好準(zhǔn)備，以應(yīng)對特定的場景，作出適當(dāng)?shù)姆磻?yīng)。

反思

反思層次則連接這我們常說的認(rèn)知和思考，它通過理性的思維和邏輯推導(dǎo)幫助我們理解周遭的世界。生存比理解更重要，所以情感比認(rèn)知更快幫我們給出反應(yīng)。

交織的三個層次

在《交互｜是時候聊聊具有直覺性的UI和交互設(shè)計了》這篇文章中，我聊過關(guān)于直覺化設(shè)計的一些想法。毫無疑問，直覺和行為是兩個截然不同的概念，但是兩者有著諸多的關(guān)聯(lián)。和行為一樣，直覺是無意識的，直覺同樣是很容易受到經(jīng)驗、訓(xùn)練、教育甚至文化觀念影響的。

一個長期使用三星智能手機(jī)的用戶，在出錯、返回和退出應(yīng)用的時候，會下意識點(diǎn)按Home鍵右側(cè)的位置來試圖完成他想要的操作。

長期使用Mac系統(tǒng)的用戶，深陷焦慮的時候可能會做各種各樣的事情，而隨著Windows XP 成長起來的用戶當(dāng)中，相當(dāng)一部分中國用戶，有在等待響應(yīng)過程中不斷點(diǎn)擊右鍵刷新的習(xí)慣。

這樣的行為當(dāng)然不是先天的、動物性的，它們是后天發(fā)展出來的，是需要一段時間的適應(yīng)、學(xué)習(xí)、習(xí)慣然后像一個半固化在后臺的應(yīng)用或者服務(wù)一樣，讓我們可以一邊開車一邊打電話，一邊做飯一邊和妻子談事情。

有意思的地方在于，絕大多數(shù)時候，這三個層面的心理行為是交織在一起的，就像我們所設(shè)計的界面一樣，是一個涉及多因素的復(fù)合體。

點(diǎn)按觸摸是我們在好奇心驅(qū)動下探索世界的本能操作，打開一個新的頁面、新的應(yīng)用，我們會下意識使用這樣的方式來做基本的探索。

探索過程中，我們以往的經(jīng)歷和經(jīng)驗開始無意識地驅(qū)動我們做決策：作為視覺索引的圓點(diǎn)在側(cè)面的話，頁面往往是需要上下翻的，而在底部的時候，頁面應(yīng)當(dāng)是左右翻。

少有應(yīng)用和游戲像 Flappy Bird 這樣，用戶一直根據(jù)經(jīng)驗和手感懟下去玩兒就好，幾乎不需要費(fèi)腦子思考或者調(diào)動認(rèn)知研究小鳥的飛行曲線，即使是最高分的榜單界面，也因為采用了通用的設(shè)計，幾乎不存在認(rèn)知障礙，相當(dāng)?shù)摹爸庇X”。

但是絕大多數(shù)的APP，尤其是B端的應(yīng)用，需要用戶仔細(xì)查看菜單選項，學(xué)習(xí)其中特定的功能的用法，甚至系統(tǒng)地學(xué)習(xí)整個應(yīng)用的運(yùn)作規(guī)律，而這就是反思和認(rèn)知所發(fā)揮作用的地方。

而這也就是說，絕大多數(shù)的應(yīng)用和網(wǎng)站，其實一直都是混合地調(diào)動這三個不同的心理層次——或者說它們本身就是設(shè)計的三個層次——來同用戶進(jìn)行溝通的。

情緒的兩個面

正面情緒和負(fù)面情緒都是設(shè)計師可以借用的利器。

如果你曾仔細(xì)琢磨大家在網(wǎng)上的各種留言會發(fā)現(xiàn)特別有意思，那些以“講真”“說實話”“不偏不黑”“中立地講”“講道理”“平心而論”開頭的內(nèi)容，少有真正剝離情緒就事論事的。至于“男人的直覺”，“女人的直覺”，“專業(yè)人士的直覺”，“圍觀群眾的直覺”這干脆就是情緒和情感的產(chǎn)物。而在歷次網(wǎng)絡(luò)撕逼大戰(zhàn)的現(xiàn)場，你會發(fā)現(xiàn)，交戰(zhàn)雙方會將正面和負(fù)面的情緒都很好地利用了起來，達(dá)成自己的目的。

隨便打開一個應(yīng)用看看吧。優(yōu)雅的界面令你愉悅，細(xì)膩的動效給你驚喜，悅耳的鈴聲不會令你緊張，而急促的提示則會讓你情緒緊繃，不同的色彩給你不同的情緒感受，不同風(fēng)格的圖標(biāo)給不一樣的體驗，快節(jié)奏的游戲配樂結(jié)合沉浸式的游戲體驗，讓你緊繃而專注，舒緩的游戲音加上清新的配色和有趣的動畫，讓你放松而享受。仔細(xì)想想，不論是APP還是網(wǎng)頁，它們的設(shè)計從來都和情緒緊密相關(guān)。

的確，我們多數(shù)時候都力圖創(chuàng)造愉悅的體驗，追求正面的情緒，但是不要忘了，情緒是復(fù)雜多面的，陰陽兩級缺一不可，正面的情緒和負(fù)面的情緒同樣重要，它們都是設(shè)計中不可或缺的部分。

最簡單的，填寫表單的時候，紅色的錯誤提示、閃動的界面和未完成時不可用的灰色按鈕都是警醒用戶，讓人緊張的存在，即使不明顯，你依然能夠感受到沮喪、緊迫的情緒，并且隨之反思錯誤，并力圖在之后的操作中糾正錯誤。

游戲這種強(qiáng)交互的應(yīng)用中，能夠調(diào)動各種情緒的設(shè)計多不勝數(shù)。而深耕游戲設(shè)計領(lǐng)域的巨擘宮本茂，甚至提出了“妻度計”的概念，他認(rèn)為能夠讓女性都為之感興趣、輕松上手的游戲是好游戲。將比男性更加敏感的女性作為游戲優(yōu)劣的評判標(biāo)準(zhǔn)，對情感化設(shè)計也是一個不錯的印證。

結(jié)語

情感化的設(shè)計需要聊的內(nèi)容太多，但是從最基本的三個層次入手，能夠讓你更好的思考設(shè)計，在用研和測試中更好地觀察用戶，印證想法。追本溯源也許枯燥，但是從頭思考卻能想的更明白。

【設(shè)計史有意思】

1. 互聯(lián)網(wǎng)變遷史：《翻天覆地！帶你總結(jié)互聯(lián)網(wǎng)設(shè)計圈這十年的巨大變遷》
2. Photoshop發(fā)展史：《生日快樂！ADOBE PHOTOSHOP喜迎25歲生日！》
3. IE瀏覽器小傳：《終于等到你！聊聊那些年我們用過的IE瀏覽器》
4. Apple Watch 誕生記：《傳奇再現(xiàn)！設(shè)計師不得不讀的APPLE WATCH 秘史》

優(yōu)設(shè)作者：@陳子木

本文由優(yōu)設(shè)網(wǎng)原創(chuàng)，請尊重版權(quán)和作者成果，轉(zhuǎn)摘請附上優(yōu)設(shè)鏈接，違者必究。謝謝各位編輯同仁配合。

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計師學(xué)習(xí)平臺，專注分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程。
【特色推薦】
設(shè)計師需要讀的100本書：史上最全的設(shè)計師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計微博：擁有粉絲量180萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導(dǎo)航：全球頂尖設(shè)計網(wǎng)站推薦，設(shè)計師必備導(dǎo)航：http://hao.uisdc.com