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