設計必讀經典《情感化交互設計指南》的超全讀書筆記來了！

這幾天看了一本書，書名是《怦然心動：情感化交互設計指南》。最開始了解交互是在優設網的細節獵人欄目，里邊有很多產品的設計細節，通過這些細節，你會記住一款產品，當時我把這些小的細節看成產品的交互行為。

直到看到這本「怦然心動」，我才發現交互是一棵根扎到很深很深的大樹。

這本書主要講了什么呢？用作者的話說就是──如何通過有趣好玩的活動來影響人類的行為。更具體的說，就是將如何吸引異性的策略運用到人和交互設備的交互中去。

交互如何讓人怦然心動

1. 為什么要做交互？

每天都有很多網絡公司成立，各式各樣的產品讓人眼花繚亂，如何在眾多產品中脫穎而出？那就需要讓產品吸引用戶。

2.?交互行為為什么會有效？

學習柔道的時候，你會在取得黑帶的過程中獲得各種色帶，這就是一種吸引用戶的方法。試想一下，如果教練對你說：「堅持吧，十年之后你就會獲得黑帶。」要是這樣，那黑帶目標對你來說真的很渺茫了，你會有隨時放棄的可能。

就像很多學習類產品，通過設置關卡，給你傳達了一個信息：看，我在不斷進步！

那它為什么這么有效呢？是因為這個行為牽扯到了心理學：

• 行為拆分：當把復雜的任務分解成較簡單的任務時，我們更容易采取行動。
• 適度的挑戰：挑戰才有樂趣，特別是難度適中，不會困難到無從下手，也不會簡單到無聊透頂的的挑戰。
• 地位：我們常常評估，相對于他人和自己的最佳紀錄，交互是如何加強或削弱我們的地位。
• 成就：我們更趨于參加各種有意義的活動，受到大家認可的成就。

所以你應該明白了，為什么同樣的學習 app，設置關卡等級類的學習 app 更受青睞。

3. 產品進化模式圖

如上圖，是一個基本的產品進化模式圖。看完這個層級后，我想了想平時使用的 app 有哪些做到了意義深遠，發現「微信讀書」「嗶哩嗶哩」光榮上榜。

前五點就不具體闡述，光說最高級別的意義深遠一點。微信讀書讓我養成了看書的好習慣，每年完成對應的書單。嗶哩嗶哩讓我養成了看紀錄片的習慣，關于藝術關于歷史等等，都讓我看到嗶哩嗶哩的閃光點。一款產品，如果做到讓用戶意義深遠，我想這就很成功了吧。

在互聯網的浪潮中，如果你已經擁有了穩定可用的產品，如果想讓它發展到下一級別，意味著你要專注于更感性的東西，比如情感、表達和美學。

4. 美學·美的三種模式

設計師 Cennydd Bowles 在他的博客中闡述道，美具有三種模式：公認的、文化的和主觀的。

• 公認的美與基本的設計美學原則有關，如對稱、協調、三分法則和黃金比例。這些是美觀設計的傳統基礎。心理學和進化生物學為這些公認的原則提供了許多解釋。我們的視覺系統趨于在事物中組織信息、尋找模式和建立秩序。
• 文化的美指的是在某個時刻從某種方面我們發現某種文化的迷人之處。瑪麗蓮·夢露是世界上最有名的人物之一。不過，如果她現在還活著，她會不會成為美的典范就很難說了。在網上，思考點在于不同時代流行于不同群體間的各種文體風格。
• 主觀的美就是你個人覺得對象具有美，這與你個人的品味和偏好有關。也許你覺得 Quora 的斯巴達美學很對你的胃口，或者你覺得相當無趣。

Bowles 繼續暗示這三種模式具有等級關系：主觀的美壓倒文化的美，文化的美勝過公認的美。

可以這樣理解：

• 公認的美：平時做設計使用的一些設計規范，比如黃金分割、斐波那契數列等等；
• 文化的美：前幾年流行擬物化風格，最近幾年是扁平化風格......關于某個時間段的「美」；
• 主觀的美：每個人對設計的主觀感受。

5. 小結

最后作者的結論讓我驚呆了：現實真的是這樣。平時的設計稿，領導主觀的美壓倒一切，不管你用了什么流行的風格，用了什么法則，統統被領導主觀的美打敗。其次是關于公認的美和文化的美，兩個設計稿，同樣運用了黃金分割法則，最后現在流行的扁平化風格一定會完勝擬物化風格，這就是作者的結論。

交互設計該如何展開誘惑

1. 你的設計有趣嗎？

要試著在設計中使用幽默，通過交互設計中的一點兒幽默，可以使設計更加人性化，引導用戶產生積極的心理效應。當人們心情好的時候，解決問題就會更加有創造力，而且還能有效地理順思維。

但是你需要考慮到這樣一個問題：你不知道面對的是什么樣的用戶群體，你的幽默可能被用戶當真，可能會冒犯到用戶，所以這也迫使你去了解你的用戶。

舉個例子，某國外網站的郵件預覽效果的交互設計。人們預覽郵件的時候，會有一只猴子張開雙臂。如果郵件預覽窗口太寬，猴子的手臂就會突然斷裂，而且噴出鮮血，可能現在我們覺得好恐怖啊，其實這樣的設計似乎很迎合英國人的口味。

所以要記住一點：要正確的使用幽默，不是看運用在何種行業，而是看運用在何種情況下。

不過倘若你使用了幽默的交互設計，用戶沒有發現，也并不是一件壞事，因為相比起別人告訴它某個幽默的設計小細節，用戶更青睞于自己發現它。

2. 你的設計令人驚喜嗎？

說到驚喜，可能你會想到很多驚喜的設計細節。這里作者將驚喜與獎勵結合了起來。

可預知的可變獎勵

當你準備放棄的時候，又贏回一點點。不管贏回的多么少，也暗示著你還有機會，只要繼續玩下去。這種獎勵可能看上去很隨機，但實際上它們已經被計算好了，能讓你不斷往機器投入硬幣。如果獎勵太多，你就會渴望贏，一旦幾次沒有贏，你便容易退出。如果獎勵太少，你就會放棄。這種手法通常被訓犬師用來訓狗，或被父母用來培養孩子。

如果你每次進行這項行為，都能得到獎勵，你就會變得對它有所期待；如果得到獎勵完全是隨機的，你就會對它上癮。

對于「老虎機」獎勵，你可以知道最終結果不是輸就是贏，但是你不知道下一次是輸還是贏，所以把它稱作可預知的可變獎勵。

不可預知的可變獎勵

這種類型的獎勵真的是隨處可見，比如你入住某個酒店，酒店為你提供了一場免費電影，或者贈送你一塊絨布紙巾。當你去地下倉庫搬東西，上樓梯時候看到臺階上寫了一行能量滿滿的字：

相信這個時候，你一定會不由自主地嘴角上揚：一切真的都會好起來。

這一系列的獎勵相當于這款產品給予用戶的贈禮，說到贈禮，這里要提到一個名詞──「互惠主義」。

所謂互惠主義就是贈予他人禮物，但是不期望得到回報。但是有些公司會把它延伸一點，暗示了回饋網站的方式：收藏或者分享該網頁。這種行為沒有不對，但是需要處理好，不然用戶會覺得你在強迫他。

當你不求回報付出時，通常會得到一些很有意義的回報。

比如某款產品的驚喜獎勵會讓用戶四處宣傳這款產品。但是如果別的公司也給予了用戶相同的獎勵，那它將不再是給予用戶的贈禮，因為它已經是一種期望，它希望用戶收禮后也去宣傳他們的產品。

生活中這樣的例子太多了：「親，好評給五元紅包哦」「親，送你一個小禮物，請掃一下二維碼哦」......所以這些場景是不是可以換一種贈予方式去實施這些行為呢？

3. 你的設計令人興奮嗎？

以 Dopplr 網站為例，創始人為世界上每個城市指定了一種顏色。

為防止大家對這么多顏色是怎么取出來的感到好奇，給大家解釋一下：以「MD5」算出城市的名稱，轉換為十六進制，然后將前六個字母作為 CSS RGB 的值。具體我也不懂，你只需要知道是可以取出這么多顏色的就對了。

這樣的話，用戶頭像的邊緣顏色就會反映你的旅行進程，當你換一個城市的時候，頭像邊緣就會更換不同的顏色。

和上邊說到的一樣，當用戶自己發現這一獨特設計后，體驗會更好。

4. 你的設計有神秘感嗎？

這個問題的基礎──人的好奇心。因為人好奇，所以才讓對象顯得更加神秘，說到好奇，就需要了解一個理論──「信息差理論」。

當某些事情從已知（或者我們認為的已知）變為未知狀態時，我們便會好奇。通俗一點，當我們發覺有知識空缺時，便會開始好奇。

案例1

當我們離開某個酒店的時候，對方送給我們一張包起來的禮品卡：「您下次入住我們酒店的時候，我們會為您拆開，里邊有大禮呦。」相信你會對此充滿好奇。

另外，保管一件有價值的東西是激發人們好奇心的關鍵部分。

案例2

脈脈app，它會在用戶主頁向你透露某大廠的某人查看了你的資料，若想知道是哪個大廠查看的，就需要付費成為會員。很多產品將用戶的好奇心運用到了這一交互設計中去。

5. 你的設計能讓人們表現自己嗎？

看到這一章節的時候，滿腦子都是支付寶的小雞和螞蟻森林這兩款產品設計。

人們想要在某個事物上留下自己的標記，證明自己來過；想要在筆記本上貼滿各種貼紙......這便是人的自我表現力，人們想要通過這些行為表現自己的個性與感受。

網絡身份表現力

常見的便是微博、QQ、微信朋友圈可以自己設置背景圖。除此之外，QQ 還可以讓用戶展示自己最近在玩的游戲、聽的歌曲。微博會在首頁展示用戶最近參與的一些話題。這一些功能構成了你的網絡身份，并將它反映給別人。

控制表現力

當人們被允許控制某些事物時，便會體現出自我表現力。以支付寶小雞為例，人們會在螞蟻莊園場景中擁有一只屬于自己的虛擬小雞，可以對它進行裝飾打扮，小雞的外在形象其實就是用戶的理想形象。

驅動表現力

以支付寶螞蟻森林為例，用戶會通過收集能量來種植自己喜歡的樹，他們希望種越來越多的樹，而且也希望別的用戶看到自己成果──在好友列表排前幾名。

6. 小結

通過有趣、驚喜感、興奮感、神秘感、表現力這五個方面的闡述，讓我們把交互設計與生活中和我們貼近的產品聯系起來。是不是覺得交互設計誘惑力很強大？既然逐漸了解了交互設計的誘惑，那就要細心發現更多誘惑了，然后去深入了解它們，這應該是每個設計師應該重視的問題。

「誘惑」這種含蓄的藝術

之所以選擇闡述誘惑這個話題，是因為通過這種藝術，我們可以改變界面的一些小細節，當然是可以立刻實現的那種，然后就會產生很大的影響。

1. 第一小步

行為引導

案例：注冊界面同意用戶協議前邊的默認勾選按鈕。

通過這個默認選項設計，推動人們邁出第一步，增加了人們注冊以及了解某產品的可能性。

分享地點

案例：鼓勵人們拍攝、上傳照片。

某服務鼓勵人們拍攝上傳照片到平臺，當你在注冊過程中，它會提出一些問題：你最喜歡去哪三個地方吃飯、你周末經常去什么地方等等問題。

注冊完畢，當你首次打開平臺，它會給你第一個拍攝任務，它不會說：「現在，請去拍你最喜歡的地方吧。」而是說：「聽說XXX是你最喜歡的地方之一，為什么不去拍下來呢？」

平臺通過這樣一個微小的語言表達方式讓用戶邁出了第一步。

賦予進度效果

案例：某洗車店會給每次洗完車的客戶發一張洗車卡片，卡片上有八個章，蓋滿八個章將會得到一次免費洗車的服務。

但是區別是：A 卡片有八個章，B 卡片有十個章，但是前兩個已經蓋上。你認為哪種卡片擁有者得到免費洗車服務比較多呢？

最后結果表明，B 卡片用戶是 A 卡片用戶的近二倍人數，得到了免費洗車服務，而且時間更短。這種行為便是「賦予進度效果」。

通過已經完成的兩個章，讓人們走出了第一小步，而且章蓋得越多，越接近蓋滿，人們完成任務的欲望就會越強烈，這被稱為目標實現。

行為拆分

和賦予進度效果聯系很緊密的還有一個原則──行為拆分，上面已經具體分析過這一原則，是說要把一個行為拆分成多個行為，這次我們分享一個有力支持這一原則的案例。

案例：下圖是兩個不同的網站關于鼓勵用戶完善個人資料的方式，最后結果顯示圖二的完善進度大于圖一。

△ 圖一

△ 圖二

為什么會這樣呢？

你需要了解一種設計方法，這種方法稱為內關聯行為：不要向人們展示四個選項，而只展示出兩個。僅當人們猶豫著是否點擊「不感興趣」的選項時，再顯示另外三個明確的選項。你將一系列可能的常見選擇簡化為一個簡單的選擇，再展示出來。就像一本「模擬歷險情境」的書籍，你對操作進行了拆分。

2. 避免展示過多信息

以上邊的兩張圖片案例為例，圖二設計師將眾多的列表框隱藏起來，讓界面更加簡潔，其實并沒有縮小人們的選擇范圍。

有時候即使列表不能隱藏，你也可以迷惑視覺系統：

△ 圖一

△?圖二

這個案例把四個問題變成了兩個，從視覺上將姓名合二為一，將郵件和電話集合到聯系方式標簽下，其實實質沒有變，還是四個問題，但是這種視覺效果，會讓用戶覺得這種方式更自然。

那是不是任何情況都要保證避免展示過多信息呢？不是的。

某理財機構網站有一個調查服務，調查人們的理財行為，但是其中的問題竟然涉及到了你喜歡的音樂風格。這和理財有什么關系呢？

一種解釋是，網站實際上具有某種非常巧妙的算法，可以根據個人的娛樂偏好來推斷人們的性格特點。在這樣的前提下，網站通過間接的問題來了解重要的理財信息。這是可能的。另一種（更可能的）推斷是，問問題是假，真正的目的是讓你更投入整個調查過程。真正的理財問題可能只有四個，但是通過添加這些「僅供娛樂」的問題，也許真的能令更多人完成表格。無論是哪種原因，這是一個值得借鑒的案例，也是另一種運用細節的方式，十分具有誘惑力。

3. 吸引注意力

我們會通過設計合適的按鈕、運用合適的字體字號、鼠標懸停在按鈕上的效果等方式去吸引人們的注意，關于這些就不做分析。這里我想提另一種吸引注意力的方式。

案例：每天早上打開電腦，固定時間固定位置會出現某牙科醫院的廣告，關閉一個彈出另一個，而且還是視頻播放，確實吸引了工作中的我的注意力，但是一個又一個的廣告視頻簡直讓人崩潰，而且我對該醫院的印象已經很差。

像這樣的吸引注意力方式用戶當然不會買單，如果變一下，結果可能會不一樣。

該醫院其實可以運用對比來吸引人們的注意：通過改變廣告發送頻率，不再讓人厭煩。這屬于對比中的時間對比，當然還有動畫對比，比如頁面中可以添加一個閃爍的按鈕來吸引注意力。

4. 建立最省力的途徑

在兩個選擇之間，我們更傾向于選擇無需付出任何代價的那個，這種行為被稱為「現狀偏見」。

以我們生活中的案例為例：中午到了飯點，A 說我們去哪里吃飯？B 說我們要不要去XXX地吃飯？如果是你，你會接受哪個吃飯建議？大多數會選擇 B，因為這個建議更直接：把「去哪里吃飯」變為了「我們要不要去哪里吃飯。」

案例：某茶葉網站開發了一個茶葉評級系統，系統中設計了一個小小的刻度線，重點就是這條刻度線，當你把鼠標放在某個刻度上時，就會顯示你曾經評價過的茶葉名稱以及等級，這樣是不是更有助于你在兩種茶葉間進行比較呢？

所以這個評價系統就在人們對茶葉評價不一致的問題上建立了一條捷徑。

5. 語言的魅力

印象比較深刻的是「你」的問題，以每次公眾號標題為例，我會盡量把「你」加進去，因為這樣能夠證明我寫的這篇文章是和你有關的，會讓你覺得自己看完有所收獲。而數據也顯示，標題中有「你」字的文章，點擊率明顯比沒有「你」的高，當然也不能勉強添加，要視內容而定。

關于語言的魅力，除了設計，和我們的生活也息息相關，比如一個洗衣機的廣告：我們的洗衣機很實惠，究竟有多實惠呢？節省的水電費可以讓你再買一臺洗衣機！購買人群：太好了，一兩年之內我可以再節省出一臺洗衣機，當然買買買了。

6. 商業目標與行為目標

平時設計，你會不會想出很多好的點子？當然會，但是公司會采納嗎？這就不一定了，那怎樣讓公司為你的這些想法投資呢？

要將行為目標和商業目標結合起來。

案例：假設我們確定了一個商業目標是提高油管的視頻上傳質量，高層領導已經確定了這一目標。但是面臨的問題是油管逐漸發展成了讓越來越多人群上傳各種視頻的大眾平臺。那么我們該怎么辦？

這時候就需要你把商業目標翻譯成行為目標了：提高視頻上傳質量，是某些行為進行改變后的結果。所以真正的行為目標是：鼓勵人們對視頻進行選擇。

我們可以通過限制視頻上傳數來達成這一行為目標，比如每個人只能上傳兩個視頻，這樣是否就能讓用戶在上傳之前思考一下視頻質量呢？

我們也可以給予高質量視頻上傳者更多的特權；可以給用戶發送一些權威人士的視頻制作技巧......通過這些方法，是不是將行為目標轉化成了商業目標呢？

情感化交互設計 ── 游戲篇

交互設計指南最后討論的是「游戲」。

說到游戲，你腦海里會浮現出什么？王者榮耀？英雄聯盟？開心消消樂？或許還有很多，但是浮現之后呢？你有沒有想過這些你脫口而出的游戲為什么會讓你如此著迷？我們就來扒一扒究竟是什么讓人們對游戲有源源不斷的熱情。

1. 游戲設計原理

一個游戲好不好玩，取決于該游戲的玩法。玩耍也是一種游戲，但是它和游戲是不同的，玩耍可以沒有任何規則，可以隨時展開，而游戲是有規則有目標的。所以正是這些元素引發了人們的焦慮、興奮與喜悅等感情。

所以一些網站為了挽留用戶，設計了用戶積分、領取徽章的游戲模式，但是這并不能將它變成一種游戲，至少不能變成一個值得長期玩的游戲，當然，更不能帶來樂趣。

作者羅列了一系列游戲，然后總結出了多數游戲所屬的類別：

• 玩耍和挑戰
• 矛盾和選擇
• 反饋回應
• 目標和獎勵
• 虛構的世界

這些便是作者的「游戲設計原理」模型的基礎。

2. 教學態度與游戲的激勵手段

自我激勵

老師：「這個課程很無聊，我會盡力去講，但是你必須自己努力去學一些知識。」

我們把它稱為「自我激勵」態度，你必須自己學習這些內容，當然沒有了樂趣，學習已然成為了一項枯燥的任務。這正是現在部分軟件的真實寫照：你購買了某產品，如果你不懂怎么操作，那你就只能去看說明書。如果你不想看，那就不懂怎么操作。所以這部分產品只是滿足了用戶產品起作用的需求。

「裹糖衣」

老師：「這節課不太有趣，但是我加入了某些小活動，讓它變得有趣。」

課程本身沒有興趣，但是通過給它裹上一層糖衣，讓學生更容易接受。市場上也有這樣的產品，通過一層趣味拉攏了用戶，但是這樣的用戶不長久，因為用戶感興趣的是那層糖衣，而不是這個產品。所以現在很多產品：（玩耍+挑戰）+（獎勵+目標）=游戲，你越是強調獎勵，用戶對產品本身會更沒興趣。

真實的挑戰

老師：「這節課非常有趣，我會給大家展示它為什么重要。首先我為大家準備了一道題目。」

這種教學態度，將無聊的課程以一種啟發人的形式展示出來，前邊的這道題目會有一定挑戰性，但是一旦成功，學生會對這一課程產生強烈的興趣。

學習如此，游戲亦是這樣，我們需要了解用戶想提升的能力，然后找到核心挑戰，最后設法用一種有趣的方式（游戲）來展現它。這樣，挑戰伴隨的獎勵所帶來的興趣將會持續下去。

3. 如何讓挑戰更令人興奮？

稀缺

伴隨著稀缺產生的是壓力，但是它也帶來了不少樂趣。某票務網站提示你某某演出的門票只剩下三張、某藝術家的現存售賣作品只剩下了兩份......最杰出的還是域名注冊，通過利用每個域名的稀缺性，從而鼓勵人們注冊域名。

稀缺性通過限制時間和權力表現出來。

以支付寶能量為例，如果超過了一定時間，能量就會消失，通過時間的稀缺性來督促用戶及時打開支付寶收取能量。

權利的稀缺性很多產品都有利用：只有會員才擁有某項特權，從而促使用戶注冊會員。

及時反饋

我們希望我們的行為能夠以某種形式影響著世界──因果效應。

以新浪微博為例，你被多少人關注，通過粉絲數向別的用戶及時反饋，這就讓用戶樹立了一個目標：獲取更多粉絲。

行為與積分（等級、排行榜、徽章）聯系起來

• 行為目標：一封郵件只允許打開一次。
• 游戲設計：第一次打開獎勵十個積分；第二次打開，扣掉十個積分；第三次打開，積分數量變為負十。

添加社交暗示

挑戰自己的記錄會讓你有動力，但是和社交聯系起來，你會更有動力──我的記錄和朋友們比起來怎么樣？他們是不是比我更厲害還是不如我？

4. 這些機制為何能激發人的積極性？

• 心理原則：目標實現原則
• 娛樂性：故事、美感

除了以上那些原則，一個游戲讓人著迷的還包括它的敘事性、音樂以及界面設計。正是這些娛樂性的元素，吸引我們，帶我們進入了游戲的世界。

5. 如何維持人們的興趣？

很多人列舉了自己使用多年的產品，這些產品都很枯燥，但是用戶使用它們的理由更吸引人：

• 它有用，并不斷地更新應用
• 它工作得當
• 非常可靠，并且買得起
• 具有可信度，易使用
• 不復雜
• 可以進行管理，自定義和排版
• 做某件特別的事做得很好
• 我的朋友也在用
• 其應用很實用
• 沒有別的選擇

忽然想到有些產品，在不斷的升級更新中，添加了新功能，但是忽視了基本功能，這就會讓用戶不滿，因為它不再滿足基本需求。

6. 如何運用以上內容？

以上提到的這些內容，如果你想運用到生活工作中，要挑選而且要互相搭配，就好比做飯，你只需挑選自己需要的食材即可。

總結

所有這一切：誘惑也好，游戲也罷，我們是為了讓用戶長久喜歡，而不是一次性買賣──通過欺騙來拉攏用戶。

《怦然心動：情感化交互設計指南》這本書到這里就結束了，看了很久，也看了多遍，把我的理解寫了這篇讀書筆記。之所以選擇這種方式是因為剛開始書中的「誘惑」內容比較新鮮，所以陸陸續續就開始了。關于交互設計，這本書不會教你怎么去畫某個產品的邏輯框架圖，而是從生活行為到行為設計到產品設計，循序漸進去講解，運用起來還是很難的。

歡迎關注作者的微信公眾號：「Pony歐尼的日常」