2012-12-26 藍藍設計的小編
轉載藍藍設計( axecq.cn )是一家專注而深入的設計機構 ，為期望卓越的國內外企業提供有效的 BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
來源： http://beforweb.com/node/103
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
Flickr為用戶準備了很多有意思的登錄歡迎語，這其實是一個容易被忽略的細節，但Flickr的整體設計風格與產品氣質也正是由許許多多這樣的細節構成的。也許，只有當這些細節從產品中消失的時候，我們才會發現并開始懷念它們。
我(英文原文作者)會特別在意這些細節，因為它們可以觸發用戶的情感響應。如果運用方式得當，這些細節當中的小魔鬼可以幫助我們打造出更具人格的產品，并使用戶在與之進行互動的過程中產生積極的情感響應；而這種積極的態度會有效的促使用戶主動傳播和擁護你的產品。這種在人格層面與用戶建立關聯的設計思路也被稱作“情感化設計”。
“情感化設計(Emotional Design)”一詞由Donald Norman在其同名著作 當中提出。而在Designing for Emotion 一書中，作者Aarron Walter將情感化設計與馬斯洛的人類需求層次理論聯系了起來。正如人類的生理、安全、愛與歸屬、自尊和自我實現這五個層次的需求，產品特質也可以被劃分為功能性、可依賴性、可用性和愉悅性這四個從低到高的層面，而情感化設計則處于其中最上層的“愉悅性”層面當中。
一個有效的情感化設計策略通常包括兩個方面：
接下來，我們將一起了解一下情感化設計的組成要素及相關策略，看一看有哪些產品在這些方面做的比較有代表性；另外，我們還會通過幾個案例分析來感受一下從整體角度持續使用情感化設計理念所帶給產品的“人格魅力”。
情感化設計的目標是在人格層面與用戶建立關聯，使用戶在與產品互動的過程中產生積極正面的情緒。這種情緒會逐步使用戶產生愉悅的記憶，從而更加樂于使用你的產品。另外，在正面情緒的作用下，用戶會處于相對愉悅與放松的狀態，這使得他們對于使用過程中遇到的小困難與細節問題的容忍能力也變得更強。
情感化設計大致由以下這些關鍵性的要素所組成，我們可以從這些關鍵點出發，在產品中融入更多的正面情感元素。誠然，用戶最終會產生的反應還將取決于他們各自的生活背景、知識技能等方面的因素，但是我們所抽象出的這些組成要素是具有普遍適用性的。
下面，我們來看一看這些要素是怎樣被細化并運用到實際產品當中的。
在接下來的這些實例當中，我們可以了解到情感化設計的組成要素是怎樣以不同的表現形式被運用到互聯網產品當中的。要記得，這些實例當中的設計方式未必適合于你的產品所需要的人格氣質，你可以把這些當作參考，并結合實際情況思考更加適用的情感化設計方案。
彼此欣賞的人會下意識的模仿對方的行為。當你看到自己喜歡的人正在微笑時，你多半也會如此。我們可以將這一點運用在設計當中。圖片會在一定程度上左右人的情緒思維，尤其是以人物或事件為主題的圖片。我們來看一張同時包含這兩方面主題的產品介紹圖片：
通過這張圖片，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則通過左上角的當日問候語來簡單而有效的拉近了網站與用戶之間的情感距離。
郵件是非常有用的工具，但在多數時候，用戶會把這些郵件當作干擾，他們希望能夠只接收到那些最有價值的產品信息。其實，可以被訂閱的對象不僅限于產品信息，我們可以通過其他方面的內容來增強用戶對于郵件快報的好感度。
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的頁面以藍色與白色為主，這樣的組合使網站整體風格清晰簡潔，讓人容易接受并產生信任。所以說Facebook、Twitter、Linkedin以及其他眾多站點都會使用類似的配色方案并不是巧合。
Gidsy的產品人格是由一系列復古風格的圖片、從容自然的文案以及驚喜等方面的情感化設計元素所構成的。
感覺的傳達 ：Gidsy里到處都是復古風格的圖片，他們通過反復使用同種風格視覺元素的方式來著重強調產品的人格氣質。
驚喜 ：瀏覽到頁腳，你會發現鼓勵你免費創建活動的圖標與文案，當鼠標懸停在圖標上的時候，一道絢麗的彩虹會突然冒出來，它的動畫效果所指向的正是引導用戶這個操作的按鈕。
文案 ：網站當中隨處可見簡短而幽默的文案，譬如“你好啊靚人！”、“嘭！你的照片被刪除了”等等。
這些細節有效的為產品塑造了友好的人格氣質。另外值得一提的是，Gidsy同樣在其使用手冊當中運用了情感化的設計方式。住所周知，類似說明文檔和用戶手冊這樣的東西通常是單調乏味的，但Gidsy的方式改變了人們的看法。
最后來看看Gidsy的新聞郵件，這封郵件恰巧在這個時候出現在我的郵箱當中。
同樣是一幅與其站點風格相一致的復古照片。另外，注意到他們用來發送郵件的郵箱名稱沒？與常見的做法不同，Gidsy在這里使用了"please-reply"，以此向用戶表達自己樂于傾聽意見的姿態。
Automattic (產品包括WordPress等)將幽默感融入到了一個缺乏幽默感的領域——代碼編寫，并盡其最大可能去秉承Matt Mullenweg的“代碼如詩”的精神。
幽默 ：在Automattic的“關于”頁面中充滿了和善幽默的自我介紹，感興趣的用戶在閱讀時就能感受到他們那種充滿樂趣的工作環境。
標語 ：Automattic的標語之一是“比起俳句，我們更擅長寫代碼”。正是這種看似嚴肅認真的幽默感，或者說看似幽默的認真，奠定了他們的產品基調。
文案 ：在wordpress.com首頁的頁腳當中有一段每次加載頁面都會發生變化的簽名語，有時是“來自Automattic的產品”，有時變為“來自Automattic的樂章”。這種細節體現了他們對于自己產品的熱愛。
驚喜 ：在Automattic另外一個產品Jetpack 的站點中，每次打開首頁都會看到三個背著噴射背包的家伙向天際飛去的動畫。這種用心和幽默既能給用戶帶來有趣的感受，同時還加深了其產品名稱所關聯的含義在用戶頭腦中的印象。
彩蛋 ：在WordPress的self-comparison當中有個彩蛋。為了防止相同版本的文章進行自我比較，Automattic創建了一個小機制，無論是其中的文案還是視覺風格都模仿了黑客帝國當中的段子。這篇文章 會教你怎樣在WordPress當中找到這個彩蛋。
在一個技術色彩如此濃重的產品領域中，Automattic通過對情感化設計的有效運用，為自己的產品賦予了充滿個性的人格特質。
良好的情感化設計可以將用戶轉變為產品的傳播者，他們會與其他人分享自己的良好體驗，幫助你的產品建立口碑。人們喜歡口口相傳那些有意思的故事，而你要做的就是給他們講一個這樣的故事。
前一段時間，來自Realmac的待辦事項類應用Clear 非常火爆。它固然不是市面上的第一款待辦事項應用，但他們很聰明的瞄準了iPhone用戶，特別是其中那些追求個性的設計師們。最小化的界面設計(參考閱讀：最小化可用性設計 )以及獨特的交互方式、視覺效果都使它與市面上的其他同類應用形成了明顯的差異化。這正是它所針對的用戶群體所追尋的。
建立預期 ：Realmac在Clear正式發布之前推出了一段充滿創意和驚奇色彩產品演示視頻，有效的吊起了用戶的胃口，使他們充滿期待，并提前幫助產品進行了傳播。
好玩 ：Clear的一個重要賣點就是新鮮有趣的交互方式。“好玩”成為了這個產品的一個基調。在應用內的引導視圖中(參考閱讀：具有引導性的移動應用界面設計模式 )，設計者也強調了"Play"的概念。
驚喜、專享 ：在應用中打開主題設置界面后，安裝了Tweetbod的用戶會收到一條消息，恭喜他們獲得了專享的額外主題。這些用戶很可能因為受到了特殊照顧而感到開心，另外，這個群體在口碑傳播方面的作用是相當大的。
另外，如果你follow了Clear開發者的Twitter帳號，那么還能獲取另外一款獎勵主題。這個彩蛋的作用依然在于傳播。人們會分享他們的熱忱，甚至談論他們獲得或是錯過了哪些主題。
這是情感化設計所產生的重要效應之一。這些驚喜、專享一類的元素不僅會讓人們更加喜歡你的產品，而且他們會分享自己的愉悅體驗。看看人們在Twitter當中的表現：
細節 ：如果當前的待辦事項為空，Clear會提醒你進行創建。
而再次清空之后，提示語會發生變化，這里引用的是一段來自愛迪生的勵志名言。
凡事都具有兩面性，情感化設計同樣存在風險。當你在為系統錯誤而道歉的時候，過于輕松愉悅的文案未必會讓用戶所有感到舒服。時刻記得自己的產品所面向的用戶群體特質，并有針對性的充分展示產品個性。
我們在本文中并沒有談論到那些相對失敗的案例，不過在此我有一點小小的建議：如果你希望產品表現出一種風趣狡黠的個性，那么要記得觀察用戶的反應。如果某些設計元素沒有起到正面效果，一定要及時主動的道歉并改進，以此表現你的誠意，展示愿意聆聽意見并改正錯誤的態度。這可以保證你的產品處于正確的人格位置。
再次以MailChimp為例，他們提供了一種“party掃興模式”，那些對幽默風格不感冒的用戶可以在這里禁用那些有意思的設計元素。
或者也可以采用相反的做法，例如Facebook提供了一種“海盜”模式，可以將傳統風格的文案變為海盜風格的用語。
這一切的核心就在于：讓用戶更好的使用產品，獲得更愉悅的體驗，并主動向他人分享和推廣這些正面的經驗。