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

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

　　什么是情感化交互？

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

　　情感化交互范例

　　以下部分范例來自 Little Big Details 這個天才的網站，我強烈推薦你上去看看，一定有收獲。

　　1.   Bottlenose

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

　　2.   Wufoo

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

• 每個頁面的標題里會包含一句詩。雖然是隨機顯示的，但詩句強化了 Wufoo 典雅的產品形象，讓枯燥的任務（創(chuàng)建表單）變得個性生動。

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

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

　　3.   MailChimp

　　作為最好的情感化交互的范例之一，MailChimp 從不放過每一個可以向產品注入靈魂的機會。

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

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

• Twitter 頁面：如果 MailChimp 宕機了，他們的 Twitter 頁就會換上一個特別的背景圖：一只悲傷的黑猩猩正在努力修復問題。現在人們習慣去 Twitter 了解到底出了什么事，而這張背景圖正好強化了這個 Twitter 賬號的個性，給用戶帶來情感化交互體驗。

　　4.   Pinterest

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

　　5.   Path

　　Path 的注冊按鈕上有一個向右的箭頭，而當鼠標點上去后，箭頭會變成笑臉。這樣，當用戶與網站第一次產生交互時，就獲得了一個親切而個性的歡迎。這是一個有深度的細節(jié)，一般設計者和用戶都會忽略這個地方，而當它真的出現了，就為接下來的體驗定下了良好的基調。

　　6.   Hootsuite

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

　　7.   Feedburner

　　在 Feedburner 中，新創(chuàng)建的 RSS Feeds 由于數據積累不夠，狀態(tài)頁中沒有東西顯示。大部分網站不會在意這個情形，因為出現這種狀況這并不是網站的錯，而 Feedburner 則抓住了這個機會，因為他們知道雖然狀態(tài)頁還沒有數據，但大多數新用戶非常想立刻看到當前的 Feed 狀態(tài)。于是他們創(chuàng)造了這段文案，告訴用戶狀態(tài)頁還沒準備好，在這一過程中和用戶建立了情感聯系，讓用戶覺得安心。相對于一個毫無生氣的、沒有任何數據的空白頁面，Feedburner 的這個做法是一種巨大的進步。

　　8.   OS X

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

　　9.   Highrise ios

　　在安裝 37Signal 的 Highris 應用時，你可以和電腦玩一把九宮棋。用戶體驗設計師常常考慮如何用一些心理學原理去解決等待時間過長這個問題，而事實上，在等待的過程中給他們一個好玩的東西，誰還在乎等待呢？37Signals 的這個方法非常簡單和有效，在用戶體驗的“死局”上展示出了高超的情感化智能。

　　10.   Mint.com

　　Mint 的網站維護界面在本應該倍感壓力的時候為用戶創(chuàng)造了迷人的體驗。不能訪問財務信息會讓你焦慮，而 Mint 借用這個機會，以一種搞笑的方式告訴你，雖然網站不能訪問了，但你的錢和信息都是安全的。

　　11.   Deviant Art

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

　　12.   Tumblr

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

　　為你的網站注入靈魂

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

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

it知識庫：用情感化交互為你的產品注入靈魂，轉載需保留來源！

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。