什么使我們成為網(wǎng)站和 app 的忠實(shí)用戶？思考這個(gè)問題時(shí)，我們發(fā)現(xiàn)那些令人喜愛的網(wǎng)站和 app 都擁有一樣?xùn)|西：靈魂。它們是有靈性的，它們的用戶體驗(yàn)中被置入了情感化智能，并且這種情感化智能通過交互設(shè)計(jì)和反饋機(jī)制得以體現(xiàn)。

　　這些要素將“個(gè)性”賦予了網(wǎng)站或 app 產(chǎn)品，并讓產(chǎn)品最終在用戶心中留下深刻的印象。不得不說，在贏得忠實(shí)用戶這件事上，產(chǎn)品的靈魂確實(shí)扮演了一個(gè)挺重要的角色。本文中，我們將通過一些優(yōu)秀的例子來了解情感化交互，以及“個(gè)性”和“靈魂”是如何灌注進(jìn)產(chǎn)品的。

　　什么是情感化交互？

　　情感化交互設(shè)計(jì)是一種狀態(tài)，指在網(wǎng)站或 app 在顯示信息或?qū)崿F(xiàn)功能時(shí)，包含了能產(chǎn)生人性化用戶體驗(yàn)的種種細(xì)節(jié)。這些交互可能是大的體驗(yàn)（例如網(wǎng)站整個(gè)宕掉時(shí)），或者是小的體驗(yàn)（例如在表單元素旁顯示的錯(cuò)誤信息）。它可以體現(xiàn)在不同的要素中，例如提示信息、顏色、設(shè)計(jì)、對(duì)用戶輸入的響應(yīng)，以及系統(tǒng)信息輸出。將這每一種體驗(yàn)混合起來，就為網(wǎng)站創(chuàng)造了靈魂和個(gè)性，這種和用戶間的情感聯(lián)系能帶來忠誠(chéng)持久的狂熱“粉絲”。

　　情感化交互范例

　　以下部分范例來自 Little Big Details 這個(gè)天才的網(wǎng)站，我強(qiáng)烈推薦你上去看看，一定有收獲。

　　1.   Bottlenose

　　這是一個(gè)基于 Web 的 Twitter 客戶端，它給用戶提供了一種新的探索和使用 Twitter 的方式。這家網(wǎng)站在用戶初次使用時(shí)的引導(dǎo)方面做得很出色，用清晰而幽默的方式向用戶介紹它的功能。網(wǎng)站在確認(rèn)按鈕上使用了諸如“Make senese”、“Got it”一類的詞句，讓用戶感到有個(gè)性，和產(chǎn)品自身的“自信”感，這比簡(jiǎn)單的“Next”強(qiáng)多了。

　　2.   Wufoo

　　Wufoo 混合了俏皮的提示信息和觸動(dòng)人心的 UI 元素，為用戶營(yíng)造了一種友好和私人化的體驗(yàn)。例如：

• 每個(gè)頁(yè)面的標(biāo)題里會(huì)包含一句詩(shī)。雖然是隨機(jī)顯示的，但詩(shī)句強(qiáng)化了 Wufoo 典雅的產(chǎn)品形象，讓枯燥的任務(wù)（創(chuàng)建表單）變得個(gè)性生動(dòng)。

• 注意“New Form”后面的感嘆號(hào)。提到“form”，人們總是聯(lián)想到無盡的填寫，但 Wufoo 放了一個(gè)感嘆號(hào)在這里，讓這個(gè)元素充滿了能量和樂趣。

• 表單報(bào)告界面沒有數(shù)據(jù)時(shí)，Wufoo 并沒有簡(jiǎn)單給出一個(gè)空白界面，而是通過提示信息傳遞出真正有個(gè)性的東西，并且鼓勵(lì)和督促你創(chuàng)建第一份報(bào)告。

　　3.   MailChimp

　　作為最好的情感化交互的范例之一，MailChimp 從不放過每一個(gè)可以向產(chǎn)品注入靈魂的機(jī)會(huì)。

• 404頁(yè)：MailChimp 的 404 頁(yè)面很有才，準(zhǔn)確的告訴用戶目前發(fā)生了什么，并積極號(hào)召用戶采取下一步行動(dòng)，繼續(xù)先前的流程體驗(yàn)。這招很聰明、有效，并且化解了 404 的尷尬。

• 發(fā)送郵件活動(dòng)（Email Campaign）：用戶發(fā)送了一個(gè)郵件活動(dòng)后，MailChimp 總是會(huì)給予用戶慶祝和鼓勵(lì)。“This is your moment of glory”這句文案很好的緩解了用戶在創(chuàng)建郵件活動(dòng)時(shí)的恐懼和期待。

• Twitter 頁(yè)面：如果 MailChimp 宕機(jī)了，他們的 Twitter 頁(yè)就會(huì)換上一個(gè)特別的背景圖：一只悲傷的黑猩猩正在努力修復(fù)問題?，F(xiàn)在人們習(xí)慣去 Twitter 了解到底出了什么事，而這張背景圖正好強(qiáng)化了這個(gè) Twitter 賬號(hào)的個(gè)性，給用戶帶來情感化交互體驗(yàn)。

　　4.   Pinterest

　　這個(gè)當(dāng)下火熱的社交媒體網(wǎng)站在注冊(cè)賬號(hào)時(shí)，使用了一種有深度的交互設(shè)計(jì)。不同于傳統(tǒng)的即時(shí)表單驗(yàn)證信息，當(dāng)用戶輸入合法的郵箱和密碼時(shí)，網(wǎng)站會(huì)給出“Looks good！”的提示信息。雖然這只是一個(gè)很小的觸動(dòng)，但足以使注冊(cè)流程顯得人性化。

　　5.   Path

　　Path 的注冊(cè)按鈕上有一個(gè)向右的箭頭，而當(dāng)鼠標(biāo)點(diǎn)上去后，箭頭會(huì)變成笑臉。這樣，當(dāng)用戶與網(wǎng)站第一次產(chǎn)生交互時(shí)，就獲得了一個(gè)親切而個(gè)性的歡迎。這是一個(gè)有深度的細(xì)節(jié)，一般設(shè)計(jì)者和用戶都會(huì)忽略這個(gè)地方，而當(dāng)它真的出現(xiàn)了，就為接下來的體驗(yàn)定下了良好的基調(diào)。

　　6.   Hootsuite

　　這只友好的貓頭鷹是 Hootsuite 的吉祥物，吉祥物不僅僅是一張可愛的臉，它甚至代表了服務(wù)本身，如同 MailChimp 的那只黑猩猩。Hootsuite 調(diào)用 Twitter 的 API 把數(shù)據(jù)拉到自己的應(yīng)用上，由于 Twitter 有 API 調(diào)用次數(shù)限制，Hootsuite 會(huì)在用戶長(zhǎng)時(shí)間不活動(dòng)時(shí)停止向 Twitter 請(qǐng)求數(shù)據(jù)。此時(shí)，貓頭鷹會(huì)出現(xiàn)，告訴你它正在休息，如果你需要它的話，可以讓它立刻醒來。這招巧妙的把負(fù)面體驗(yàn)變成了正面體驗(yàn)，塑造了品牌形象，并為產(chǎn)品帶來了個(gè)性和靈魂。

　　7.   Feedburner

　　在 Feedburner 中，新創(chuàng)建的 RSS Feeds 由于數(shù)據(jù)積累不夠，狀態(tài)頁(yè)中沒有東西顯示。大部分網(wǎng)站不會(huì)在意這個(gè)情形，因?yàn)槌霈F(xiàn)這種狀況這并不是網(wǎng)站的錯(cuò)，而 Feedburner 則抓住了這個(gè)機(jī)會(huì)，因?yàn)樗麄冎离m然狀態(tài)頁(yè)還沒有數(shù)據(jù)，但大多數(shù)新用戶非常想立刻看到當(dāng)前的 Feed 狀態(tài)。于是他們創(chuàng)造了這段文案，告訴用戶狀態(tài)頁(yè)還沒準(zhǔn)備好，在這一過程中和用戶建立了情感聯(lián)系，讓用戶覺得安心。相對(duì)于一個(gè)毫無生氣的、沒有任何數(shù)據(jù)的空白頁(yè)面，F(xiàn)eedburner 的這個(gè)做法是一種巨大的進(jìn)步。

　　8.   OS X

　　在“關(guān)注細(xì)節(jié)”這個(gè)問題上，Apple 一直有著良好的聲譽(yù)，并且會(huì)精細(xì)到你想不到、甚至似乎沒必要的地方。例如 Text Edit 的小圖標(biāo)，放大后看，上面密密麻麻的文字其實(shí)真的是有意義的（彩蛋）——筆記本上寫的是“Think Different”宣言。這是向他們傳奇創(chuàng)始人的致敬，同時(shí)也提醒人們他們?yōu)槭裁磹?Apple。

　　9.   Highrise ios

　　在安裝 37Signal 的 Highris 應(yīng)用時(shí)，你可以和電腦玩一把九宮棋。用戶體驗(yàn)設(shè)計(jì)師常?？紤]如何用一些心理學(xué)原理去解決等待時(shí)間過長(zhǎng)這個(gè)問題，而事實(shí)上，在等待的過程中給他們一個(gè)好玩的東西，誰還在乎等待呢？37Signals 的這個(gè)方法非常簡(jiǎn)單和有效，在用戶體驗(yàn)的“死局”上展示出了高超的情感化智能。

　　10.   Mint.com

　　Mint 的網(wǎng)站維護(hù)界面在本應(yīng)該倍感壓力的時(shí)候?yàn)橛脩魟?chuàng)造了迷人的體驗(yàn)。不能訪問財(cái)務(wù)信息會(huì)讓你焦慮，而 Mint 借用這個(gè)機(jī)會(huì)，以一種搞笑的方式告訴你，雖然網(wǎng)站不能訪問了，但你的錢和信息都是安全的。

　　11.   Deviant Art

　　Deviant Art 用肖像畫框作為用戶個(gè)人信息設(shè)置的交互背景。這么做不僅貼合了網(wǎng)站的主題（美術(shù)家社區(qū)），同時(shí)對(duì)新用戶用戶完成個(gè)人信息有鼓勵(lì)作用。

　　12.   Tumblr

　　當(dāng)你在 Tumblr 里聽音頻文件時(shí)，URL 里會(huì)包含“請(qǐng)不要下載這個(gè)音頻文件，不然 Tumblr 就沒法繼續(xù)在網(wǎng)站放音頻文件了”的字樣。不得不說，這是一種更聰明的與用戶交流的方式，而不像 js 彈窗那么冷冰冰。

　　為你的網(wǎng)站注入靈魂

　　產(chǎn)品設(shè)計(jì)人員需要關(guān)注那些通常被忽視的用戶體驗(yàn)小細(xì)節(jié)，通過對(duì)這些細(xì)節(jié)的優(yōu)化，app 將產(chǎn)生個(gè)性，同時(shí)建立穩(wěn)定的忠實(shí)用戶群。重溫一下上面提到的案例，或許能幫你在未來的項(xiàng)目中舉一反三。細(xì)節(jié)確實(shí)能決定網(wǎng)站或 app 的成敗。努力創(chuàng)造良好的體驗(yàn)是我們所知的贏得用戶的最佳方式，并且能為你的網(wǎng)站帶來生命和靈魂。

　　原文：Give Your Website Soul With Emotionally Intelligent Interactions    譯者：Ven

it知識(shí)庫(kù)：用情感化交互為你的產(chǎn)品注入靈魂，轉(zhuǎn)載需保留來源！

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。