【編者按】本文翻譯自Smashing Magazine ，譯者為@C7210 ，發佈於其個人博客BeForWeb。文中所指的情感化設計，目標是在人格層面與用戶建立關聯，使用戶在與產品互動的過程中產生積極正面的情緒。
從案例中介紹了讓用戶更好的使用產品，展現如何使用戶獲得更愉悅的體驗，這些都是為了讓用戶主動向他人分享和推廣這些正面的經驗。
Flickr為用戶準備了很多有意思的登錄歡迎語，這其實是一個容易被忽略的細節，但Flickr的整體設計風格與產品氣質也正是由許許多多這樣的細節構成的。也許，只有當這些細節從產品中消失的時候，我們才會發現並開始懷念它們。
我(英文原文作者)會特別在意這些細節，因為它們可以觸髮用戶的情感響應。如果運用方式得當，這些細節當中的小魔鬼可以幫助我們打造出更具人格的產品，並使用戶在與之進行互動的過程中產生積極的情感響應；而這種積極的態度會有效的促使用戶主動傳播和擁護你的產品。這種在人格層面與用戶建立關聯的設計思路也被稱作“情感化設計”。
一點小理論
“情感化設計(Emotional Design)”一詞由Donald Norman在其同名著作當中提出。而在Designing for Emotion一書中，作者Aarron Walter將情感化設計與馬斯洛的人類需求層次理論聯繫了起來。正如人類的生理、安全、愛與歸屬、自尊和自我實現這五個層次的需求，產品特質也可以被劃分為功能性、可依賴性、可用性和愉悅性這四個從低到高的層面，而情感化設計則處於其中最上層的“愉悅性”層面當中。
一個有效的情感化設計策略通常包括兩個方面：
- 你創造出了獨特並且優秀的風格理念，令用戶產生了積極響應。
- 你持續的使用該理念打造出一整套具有人格層面的設計方案。
接下來，我們將一起了解一下情感化設計的組成要素及相關策略，看一看有哪些產品在這些方面做的比較有代表性；另外，我們還會通過幾個案例分析來感受一下從整體角度持續使用情感化設計理念所帶給產品的“人格魅力”。
情感化設計的組成要素
情感化設計的目標是在人格層面與用戶建立關聯，使用戶在與產品互動的過程中產生積極正面的情緒。這種情緒會逐步使用戶產生愉悅的記憶，從而更加樂於使用你的產品。另外，在正面情緒的作用下，用戶會處於相對愉悅與放鬆的狀態，這使得他們對於使用過程中遇到的小困難與細節問題的容忍能力也變得更強。
情感化設計大致由以下這些關鍵性的要素所組成，我們可以從這些關鍵點出發，在產品中融入更多的正面情感元素。誠然，用戶最終會產生的反應還將取決於他們各自的生活背景、知識技能等方面的因素，但是我們所抽像出的這些組成要素是具有普遍適用性的。
- 積極性
- 驚喜：提供一些用戶想不到的東西。
- 獨特性：與其他的同類產品形成差異化。 (相關閱讀：iOS Wow體驗– 用戶體驗的差異化策略)
- 注意力：提供鼓勵、引導與幫助。
- 吸引力：在某些方面有吸引力的人總是受歡迎的，產品也一樣。
- 建立預期：向用戶透露一些接下來將要發生的事情。
- 專享：向某個群體的用戶提供一些額外的東西。
- 響應性：對用戶的行為進行積極的響應。
下面，我們來看一看這些要素是怎樣被細化並運用到實際產品當中的。
情感化設計的產品實例
在接下來的這些實例當中，我們可以了解到情感化設計的組成要素是怎樣以不同的表現形式被運用到互聯網產品當中的。要記得，這些實例當中的設計方式未必適合於你的產品所需要的人格氣質，你可以把這些當作參考，並結合實際情況思考更加適用的情感化設計方案。
模仿人類的情緒
微笑
彼此欣賞的人會下意識的模仿對方的行為。當你看到自己喜歡的人正在微笑時，你多半也會如此。我們可以將這一點運用在設計當中。圖片會在一定程度上左右人的情緒思維，尤其是以人物或事件為主題的圖片。我們來看一張同時包含這兩方面主題的產品介紹圖片：
通過這張圖片，Highrise向我們展示了一個快樂的人，還有他使用該公司產品的故事。來自實際客戶的微笑以及讚許之辭，這是非常正面的、非常容易促使潛在用戶認同並期望獲取其產品的宣傳形式。
平凡的幸福
Threadless的購物車在沒有商品放入時會呈現出憂傷的表情，反之則會表現的非常開心。這樣的小細節會讓你覺得平凡而有趣，甚至會不由自主的笑起來。即使用戶最終沒有產生購物行為，他們也會記住這個可愛的購物車。
留住用戶
福利
曾經有段時間，如果你試著在Audible取消訂閱，並告訴他們你的設備無法享受他們的服務，Audible就會送你一張100美金的Amazon代金券，希望你可以購買到合適的閱讀設備並繼續使用他家的服務。即使用戶最後仍選擇取消訂閱，他們也會牢牢的記住Audible的誠意。
音樂
Etsy會在用戶退訂之後播放Paul Young的”Every Time You Go Away”。這種方式無法讓用戶留下來，但可以給他們留下深刻的印象。當用戶再一次在Etsy平台上瀏覽商品時，多半會想起這個有意思的小環節，或許他們無論在哪裡聽到這首歌的時候還會想到Etsy呢。
鋒利的幽默
這方面最經典的案例莫過於Groupon的著名段子，”懲罰Derrick”。雖然這個過場發生在用戶確認退訂之後，但它通過真實的人物以及鋒利而又自嘲的幽默，切實拉近了用戶與網站之間的距離。在這個多多少少會使退訂用戶產生內疚的段子之後，Groupon還會再慫恿用戶重新進行訂閱。雖然你清楚的知道這是他們玩的小伎倆，但在如此具有代入感的段子麵前，多數用戶會覺得非常有趣，正面情緒和狀態完全被調動起來。
文案
文案是最容易展現產品個性的途徑。無論你希望自己的品牌變的更加好玩、嚴肅、滑稽或是時髦，文案都可以有效的幫助你向目標邁進。
恭維
在”Everyday”應用當中，如果你還沒有向媒體庫中添加照片，那麼系統就會非常友好的提示你去給自己“漂亮的臉蛋”拍些照片放到庫中——簡單的詞彙定義了提示信息甚至是產品的基調，換句話說，就是個性。
對比
Skitch的隱私提示很簡短，但其中運用到了兩個方面的對比，一是文案當中模擬警告音效的”Pssst!”，另外還有代表警示的字色。這兩者的組合使得提示信息無論在語氣還是視覺效果上都與頁面當中的其他內容形成了鮮明的對比，在情緒上引起了用戶的注意，有效的傳達了信息內容。
類似的，在Cupid中，當用戶輸入自己所處的地理位置時，系統會很積極的做出回應，一聲”Ahh”就表達出了“好的！”或是“我們了解了，歡迎你的到來！”這些方面的意味。不要放過這種在細節當中進行“真實化”交流的機會。
註釋和說明
Hunch註冊頁面當中的文案與我們通常能夠見到的那種有所不同，他們會在輸入郵件的文本框旁邊告訴你“垃圾郵件是魔鬼，我們可不干這事”，還會在選擇郵件訂閱的地方提示你“這會是值得一讀的郵件，而且來的不會太頻繁”。在這些很普通的地方稍稍花些心思，製造一些細微的差異化，這會增強產品的代入感，使用戶的注意力更集中，跟隨設計的指引完成操作目標。
Milk家的細節處理方式會讓用戶更加樂於訂閱他們的新聞郵件。他們的做法與Hunch類似，都是在文案中明確的告訴用戶新聞郵件的重要性，而且不會很頻繁。
下面的範例來自我的一個個人項目，用戶需要邀請碼才可以試用這個產品。在提交申請的地方，我使用“我要獲取邀請！”來代替傳統的“提交”作為按鈕當中的文案，希望這可以調動起用戶的情緒，並使他們感受到一種更加真實、更加有針對性的互動。另外我也起草了一份簡單的說明文案，讓用戶放心，我們絕不會發送垃圾郵件。
出錯頁面
沒有什麼比服務無法使用更能讓用戶覺得煩惱和沮喪的了，尤其當他們特別需要使用你的產品來完成重要事項的時候。如果這種情況因為某些客觀因素而難以徹底避免，那麼情感化設計至少能夠在一定程度上緩解用戶的負面情緒。
有趣的文案提示
用戶在Flickr進行系統維護或升級期間會看到”Flickr正在做按摩”的提示，如果有興趣的話還可以到他們的官方博客或是微博當中查看當前的具體狀況。這樣的文案比起簡單粗暴的出錯提示來說更能讓用戶接受。
說聲抱歉並提供有誠意的處理方式
同樣來自於Flickr的案例。當系統發生了一些更加嚴重的問題時，他們會告訴用戶：“額，我們的管道堵塞了！”，然後使用非常口語化的文案表示了歉意。除此之外，他們還為用戶設置了一個小任務，也就是將當前頁面打印出來，為兩個圓環填色，然後拍下來，等到站點恢復正常後傳到Flickr上；Flickr團隊會挑選出優勝者，向他們贈送一年的高級帳號。
很抱歉，不過…
生活中還有其他一些重要的事情要做。之前Tumblr掛掉的時候，他們告訴用戶，問題正在緊急處理當中，我們很抱歉；同時還提醒用戶，當前還有另外一些更嚴重的問題(2011年日本9級地震)，也許我們可以在這期間一同做點什麼。
其他煩惱
漫長的頁面加載時間也是十分惱人的，但在某些情況下，頁面或其中的某些功能確實需要相對較長的時間來加載。當你的網站或應用正忙著傳送和收集數據以備呈現的時候，不妨在界面上放置些臨時性的小提示來吸引用戶的注意力，減弱他們對響應時間的感知。
驗證工具Captcha在如今被很多網站所使用，但這不意味著用戶真的喜歡這東西，很多時候Captcha確實會令人感到煩惱和挫敗。我們暫時無法改變這個工具本身的工作機制，但至少可以像Stack Overflow那樣通過一幅有趣的圖片搭配說明文案，向用戶解釋為什麼要使用這個煩人的工具，籍此獲得用戶的理解，減少負面情緒的產生。
智能化
對用戶進行智能化的響應式輸出，這也是情感化設計策略之一。我喜歡在自己還沒有輸入個人詳細信息之前就能得到系統提供的智能化個性化的服務。
Thermo應用的著陸頁可以判斷用戶所處的地理位置，並在左側以高度擬真的視覺表現形式來告訴用戶當地的氣溫情況。
而37signals則通過左上角的當日問候語來簡單而有效的拉近了網站與用戶之間的情感距離。
Email的設計
郵件是非常有用的工具，但在多數時候，用戶會把這些郵件當作干擾，他們希望能夠只接收到那些最有價值的產品信息。其實，可以被訂閱的對像不僅限於產品信息，我們可以通過其他方面的內容來增強用戶對於郵件快報的好感度。
講故事
Zaarly在他們的郵件快報中講了一些具有神秘色彩的小故事，這種方式提升了郵件的吸引力，使用戶不由自主的對其中的內容以及這個網站提供服務產生好奇，而不是一味的排斥。
個性化內容
Quora會在郵件當中向用戶推薦他可能感興趣的內容。如果你的網站或應用有足夠的數據來支持這樣的個性化服務，那麼就考慮一下吧。
驚喜
提醒類的郵件通常沒有什麼花頭，只是起到告知的作用。如果能像CD Baby那樣在其中添加一些特別的東西，用戶的興致就有可能被帶動起來。這封郵件被發送出去之後，“CD Baby私人噴氣機”在Google當中產生了超過2萬條記錄。
故事情節
故事情節可以有效的吸引人們的注意力。有些產品在講故事方面做的非常引人入勝，Ben the Bodyguard就是其中一個不錯的範例。這是一款用來保護手機當中隱私數據的iPhone應用，整個產品概念都是圍繞著一位名叫Ben的法國私家保鏢角色來設計的。其minisite通過非常精彩的交互方式讓用戶跟隨這名私家保鏢穿行在街道上，隨著故事情節的發展來了解這款應用的特色，讓你不由自主的沉浸在其中。
而在實際的iPhone環境當中，這款應用也仍然保持著一種故事角色的姿態，它會模仿法式英語的口語習慣與用戶進行交流。
彩蛋
彩蛋通常會令人開心。即使是整體氣質相對嚴肅的Google也會時不時的在產品中加上那麼一兩個有意思的彩蛋，例如著名的Let it snow下雪效果。
彩蛋通常與產品服務沒有直接的關聯，它的主要目的就是讓用戶覺得驚喜和快樂，激發他們積極的情緒狀態，而處於這種狀態的用戶是非常樂於將他們的發現分享給其他人的。
吉祥物
MailChimp在情感化設計方面的一個特色之處就是他家的吉祥物，猩猩Freddie。這傢伙會在你的個人資料頁打開之後為你歡呼，而且每次刷新頁面之後都會冒出一些隨機的笑話或鏈接。
不過這種情感化的表現方式也有失敗的前例。還記得Microsoft Office裡那位每當你要做些什麼的時候都會跳出來的曲別針君嗎？與之相比，Freddie不會干擾你與服務之間的交互流程。
登錄頁面
是的，登錄頁面同樣可以被設計的很有趣。仍以MailChimp為例，每逢一些特定的日子，他家的登錄頁面會發生相應的變化。 這個Flickr相片集專門收錄了MailChimp的各種特殊登錄頁。真心贊。
在很多時候你未必需要做的如此特別。以Pocket為例，他們的登錄頁面具有很強的“歡迎”色彩，一幅巨大的背景圖片烘托出了該應用的使用場景，讓用戶覺得身臨其境，在情緒上產生共鳴。
細節當中的吸引力
對界面元素細節的雕琢可以體現出你對產品的信念以及對用戶的尊重。來看看Quip的動態loading圖標。
這張圖片當中的動畫效果是循環的，但在實際站點中，它只會在加載數據的那段時間當中出現。為了看這個動畫效果，我甚至會反復加載頁面。這樣的圖標也會讓用戶在等待加載的時間段裡將注意力集中在很酷的動畫效果上，使他們對於加載時間的感知有所減弱。當然，對於這類能夠吸引註意力的元素，如果運用不當，也會造成負面影響，干擾用戶的正常閱讀與使用流程。
Dropbox剛剛起步的時候曾經在Digg中發布了一段demo視頻，並宣稱自己的產品是“來自麻省理工學院的Google Drive殺手”。雖然口氣很大，但他們在視頻中精心打造了各種有意思的細節，牢牢的抓住了觀眾的視線與情緒，例如在演示上傳文件的功能時使用了名為“Keira Knightley有夠熱辣!!”的圖片。
情感化設計的綜合案例
到目前為止，我們已經了解了一些情感化設計要素在不同產品當中的各種具有代表性的表現形式。下面我們來看三個更具綜合性的產品案例。
案例一：Gidsy
在Gidsy中，用戶可以自發的組織探索觀光、購物、討論會一類的本地化活動。鑑於這個產品的性質，設計師自然要考慮怎樣使網站具有更廣泛的吸引力。
在配色方面，Gidsy的頁面以藍色與白色為主，這樣的組合使網站整體風格清晰簡潔，讓人容易接受並產生信任。所以說Facebook、Twitter、Linkedin以及其他眾多站點都會使用類似的配色方案並不是巧合。
Gidsy的產品人格是由一系列復古風格的圖片、從容自然的文案以及驚喜等方面的情感化設計元素所構成的。
感覺的傳達：Gidsy裡到處都是複古風格的圖片，他們通過反複使用同種風格視覺元素的方式來著重強調產品的人格氣質。
驚喜：瀏覽到頁腳，你會發現鼓勵你免費創建活動的圖標與文案，當鼠標懸停在圖標上的時候，一道絢麗的彩虹會突然冒出來，它的動畫效果所指向的正是引導用戶這個操作的按鈕。
文案：網站當中隨處可見簡短而幽默的文案，譬如“你好啊靚人！”、“嘭！你的照片被刪除了”等等。
這些細節有效的為產品塑造了友好的人格氣質。另外值得一提的是，Gidsy同樣在其使用手冊當中運用了情感化的設計方式。住所周知，類似說明文檔和用戶手冊這樣的東西通常是單調乏味的，但Gidsy的方式改變了人們的看法。
最後來看看Gidsy的新聞郵件，這封郵件恰巧在這個時候出現在我的郵箱當中。
同樣是一幅與其站點風格相一致的複古照片。另外，注意到他們用來發送郵件的郵箱名稱沒？與常見的做法不同，Gidsy在這裡使用了”please-reply”，以此向用戶表達自己樂於傾聽意見的姿態。
案例2：Automattic
Automattic(產品包括WordPress等)將幽默感融入到了一個缺乏幽默感的領域——代碼編寫，並儘其最大可能去秉承Matt Mullenweg的“代碼如詩”的精神。
幽默：在Automattic的“關於”頁面中充滿了和善幽默的自我介紹，感興趣的用戶在閱讀時就能感受到他們那種充滿樂趣的工作環境。
標語：Automattic的標語之一是“比起俳句，我們更擅長寫代碼”。正是這種看似嚴肅認真的幽默感，或者說看似幽默的認真，奠定了他們的產品基調。
文案：在wordpress.com首頁的頁腳當中有一段每次加載頁面都會發生變化的簽名語，有時是“來自Automattic的產品”，有時變為“來自Automattic的樂章”。這種細節體現了他們對於自己產品的熱愛。
驚喜：在Automattic另外一個產品Jetpack的站點中，每次打開首頁都會看到三個背著噴射背包的傢伙向天際飛去的動畫。這種用心和幽默既能給用戶帶來有趣的感受，同時還加深了其產品名稱所關聯的含義在用戶頭腦中的印象。
彩蛋：在WordPress的self-comparison當中有個彩蛋。為了防止相同版本的文章進行自我比較，Automattic創建了一個小機制，無論是其中的文案還是視覺風格都模仿了黑客帝國當中的段子。 這篇文章會教你怎樣在WordPress當中找到這個彩蛋。
在一個技術色彩如此濃重的產品領域中，Automattic通過對情感化設計的有效運用，為自己的產品賦予了充滿個性的人格特質。
案例3：Clear
良好的情感化設計可以將用戶轉變為產品的傳播者，他們會與其他人分享自己的良好體驗，幫助你的產品建立口碑。人們喜歡口口相傳那些有意思的故事，而你要做的就是給他們講一個這樣的故事。
前一段時間，來自Realmac的待辦事項類應用Clear非常火爆。它固然不是市面上的第一款待辦事項應用，但他們很聰明的瞄準了iPhone用戶，特別是其中那些追求個性的設計師們。最小化的界面設計(參考閱讀：最小化可用性設計)以及獨特的交互方式、視覺效果都使它與市面上的其他同類應用形成了明顯的差異化。這正是它所針對的用戶群體所追尋的。
建立預期：Realmac在Clear正式發布之前推出了一段充滿創意和驚奇色彩產品演示視頻，有效的吊起了用戶的胃口，使他們充滿期待，並提前幫助產品進行了傳播。
好玩：Clear的一個重要賣點就是新鮮有趣的交互方式。 “好玩”成為了這個產品的一個基調。在應用內的引導視圖中(參考閱讀：具有引導性的移動應用界面設計模式)，設計者也強調了” Play”的概念。
驚喜、專享：在應用中打開主題設置界面後，安裝了Tweetbod的用戶會收到一條消息，恭喜他們獲得了專享的額外主題。這些用戶很可能因為受到了特殊照顧而感到開心，另外，這個群體在口碑傳播方面的作用是相當大的。
另外，如果你follow了Clear開發者的Twitter帳號，那麼還能獲取另外一款獎勵主題。這個彩蛋的作用依然在於傳播。人們會分享他們的熱忱，甚至談論他們獲得或是錯過了哪些主題。
這是情感化設計所產生的重要效應之一。這些驚喜、專享一類的元素不僅會讓人們更加喜歡你的產品，而且他們會分享自己的愉悅體驗。看看人們在Twitter當中的表現：
細節：如果當前的待辦事項為空，Clear會提醒你進行創建。
而再次清空之後，提示語會發生變化，這裡引用的是一段來自愛迪生的勵志名言。
收益與風險
凡事都具有兩面性，情感化設計同樣存在風險。當你在為系統錯誤而道歉的時候，過於輕鬆愉悅的文案未必會讓用戶所有感到舒服。時刻記得自己的產品所面向的用戶群體特質，並有針對性的充分展示產品個性。
我們在本文中並沒有談論到那些相對失敗的案例，不過在此我有一點小小的建議：如果你希望產品表現出一種風趣狡黠的個性，那麼要記得觀察用戶的反應。如果某些設計元素沒有起到正面效果，一定要及時主動的道歉並改進，以此表現你的誠意，展示願意聆聽意見並改正錯誤的態度。這可以保證你的產品處於正確的人格位置。
再次以MailChimp為例，他們提供了一種“party掃興模式”，那些對幽默風格不感冒的用戶可以在這裡禁用那些有意思的設計元素。
或者也可以採用相反的做法，例如Facebook提供了一種“海盜”模式，可以將傳統風格的文案變為海盜風格的用語。
這一切的核心就在於：讓用戶更好的使用產品，獲得更愉悅的體驗，並主動向他人分享和推廣這些正面的經驗。
特別注意：本站所有轉載文章言論不代表本站觀點，本站所提供的攝影照片，插畫，設計作品，如需使用，請與原作者聯繫，文章轉自alibuybuy