本文分享了五個讓用戶界面更情感化的原則：游戲化、幽默感、動畫、插圖和吉祥物，來幫助大家如何為無聊的APP設計出情趣化的界面。

用戶使用產品執行重復性的任務，很容易就會失去興趣，而解決這一困境恰是UI的價值所在。接下來，將要探討一些能夠讓界面更加情趣化的設計原則。

“隨著一連串的“0”和“1”消失在黃色管子后面，一只熊從管子中彈出，管子底部也出現了一行文字：“Start your bear-owsing！”。最后，一只熊掌出現在屏幕上，并指向我的瀏覽器工具欄上?！?/p>

在一片驚訝聲中，我完全忘記了想要瀏覽的內容。

像VPN這類服務產品很少會引起用戶的情感波動，因為這不是它們的工作，它們也不需要這樣做。但TunnelBear卻做了，因此在眾多的VPN中，我選擇了它，并將其推薦給我的朋友，這樣他們就可以在日常生活中感受到一些快樂。

眾所周知，人們不能長時間地忍受枯燥、無聊的情緒，這也是那些不能引起情緒興奮的、執行重復性任務的產品很容易被人遺忘的原因。

據心理學家研究：枯燥只不過是因為缺乏激勵，一種本來應該在活動中得到滿足卻未得到滿足的欲望。

那么，問題來了，如何通過界面設計給用戶帶來激勵呢？

我和MacPaw的產品設計師在我們頭腦還比較清醒的時候，一起設計了像重復查找器和加密APP等無趣的產品。同時也分享了五個讓用戶界面更情感化的原則：游戲化、幽默感、動畫、插圖和吉祥物。

人們在玩的游戲——游戲化設計

在用戶界面設計中應用游戲化設計還存在一些爭議：曾經有24個案例來研究游戲化設計應用的效果，可結果卻各不相同。但我想說，游戲化設計應用的效果取決于你將其應用的場景。

對于許多像Akar Sumset的產品設計師而言，游戲化設計的關鍵不在于讓用戶本身獲得樂趣，而是通過樂趣引導他們去采取某些行為。比如：成就、等級、排行榜就是利用了人們對自尊的基本需求，激發競爭力，并且敦促用戶做你想讓他們做的事情；比如：獲得成就，用戶就會不斷的回到應用中或者在社交媒體上分享。

游戲化設計在產品中的使用可能成功也可能失敗，但它最終所要達到的是一種情緒反應。我們的大腦充滿了控制多巴胺含量的細胞，多巴胺是產生幸福感受的主要神經化學物質之一。

當“愉快事件”發生時，這些神經元就會發揮作用，觸發細胞釋放多巴胺進入血液。更進一步來說說，如果“愉快事件”是有規律可循并可預測的系列事件（如游戲中玩家等級），那么多巴胺就會在事件發生之前釋放。

這對你的界面設計意味著什么呢？

這將使得用戶在使用產品的過程中，會因為期待“愉快事件”（如獲得新成就）發生而獲得快樂。

游戲化設計案例：Gemini 2 和 Duolingo

在設計Gemini 2時（一款在Mac上的重復查找器優化版本），我們遇到了一個棘手的問題。查找大文件是件讓人精神崩潰的事情，有用戶抱怨到他們會在文件查找完成前結束任務。

因此，我們所做的就是嘗試利用成就系統來強化用戶“劃掉”已完成事項的感受（擁有待做事項列表是繁瑣任務處理過程中的唯一利好）。

對于游戲化設計來說，外太空相關主題是可以完美應用的，如將相關主題設置為app的名稱，并在用戶界面的設計中應用這些主題。我們的目標用戶是看著“星球大戰”和“星際迷航”等太空電影長大的，所以他們對科幻靈感的事物會很熟悉。

在Gemini 2發布的幾天后，我們開始收到來自用戶的推文，要求在復活節彩蛋上提供線索，以解鎖最終的成就。發布一年后，因為“清晰而富有情感的設計”，Gemini 2 獲得紅點獎。所以，盡管很難衡量成就系統對用戶的激勵程度，但它確實不會讓人感到枯燥。

Duolingo是另一個成功案例，它是一款為用戶提供在線學習語言服務的應用，是我見過的最具游戲化界面的產品。我們都知道，從零開始學習外語是多么困難的事情，尤其是在只有一臺筆記本電腦卻沒有老師幫助的情況下?？紤]到人們很容易失去學習外語的興趣，Duolingo就想方設法地讓你迷戀外語學習，當然它也做到了。

每當你在Duolingo中完成一個5分鐘的課程時，你就可以獲得10分，連續上課30天會獲得一個成就等級，完成20節課且沒有一個錯字，就會解鎖另一個成就。對于你邁出的每一步，你的感官會感受到歡呼聲和絢麗圖像的獎勵，而這會觸發釋放快樂的多巴胺。

最終，你開始將Duolingo與成就感和自豪感聯系起來，這會促使你繼續學習。

你一定是在開玩笑——幽默感設計

Victor Yocco設計了一款有著幽默感的成功產品，創造了令人難忘的體驗，并且能夠讓你的工作脫穎而出。幽默感最大的作用在于它們很情緒化。雖然我們還沒有完全理解幽默的本質，但有一點很清楚：它會讓人感到快樂。

根據腦成像研究：有趣的漫畫會激活大腦邊緣系統中的獎勵神經網絡（這是響應飲食、音樂、性和情緒改變藥物的神經網絡）。換句話說，一個好笑話會給人們一種情感上的升華。

你想讓你的界面設計也能使用戶產生這種反應嗎？

答案是肯定的。但最棘手的問題不僅是主觀的幽默感，而且是取決于場景的反饋方式。比如：在開機屏上放一個雙關語，肯定會讓人混淆。雖然所有人都享受著各種形式的幽默，但了解用戶是件至關重要的事情：他們覺得什么是熱鬧的？什么看起來不合適？粗糙的或不適時的？這與現實生活中的笑話沒有什么不同？

幽默感設計案例：Authentic Weather and Slack

Authentic Weather是一款應用幽默感設計用戶界面的app，它不是將幽默作為一種附加的戲劇性調劑，而是作為一個獨特的“賣點”。天氣類app是工具性產品，用來幫助用戶獲取天氣信息。但通過使用Authentic Weather，你獲得遠不止于此。

無論天氣狀況如何，Authentic Weather都會以像“低溫凍結”、“回家過冬”這樣尖銳的語句來“打擊”用戶，而我個人最喜歡的一句話是：

“沒關系，向外看了解更多信息?！?/p>

當你使用?Authentic Weather時，你不會因為想看天氣信息而打開它，而是因為你想看看它接下來會發生什么，就像查看天氣這樣的日常任務一樣成為了早晨期待的事情。

如今，app中的充斥著臟話的評論，不會對我父母那一代人有吸引力。 但是，脾氣暴躁的千禧一代，卻覺得很搞笑，這也證明著如果你了解你的用戶，那么幽默將會是很好的設計手段。

另一個兼具好玩和好用的app就是Slack。作為一款與工作緊急相關的app，Slack創造出了更加人性化的體驗，不僅是因為它的妙語趣話，而且從屏幕加載到看到所有聊天內容的過程中，當你看不到它的時候，它就會開個玩笑。

對于不同的文化環境，同一個幽默可能是善意的，也可能是惡意的。所以，Slack采用穩妥的雙關語和善意的對手的類型，這種笑話并不會使你高興地在地上打滾，也不會惹惱或冒犯他人。 最好的情況，用戶會在他們的某個頻道中竊笑并分享屏幕截圖; 最壞的情況，他們只會滾動眼睛。

讓世界動起來——動效設計

幾乎每個界面都會用到動效，這是從一種狀態過渡到另一種狀態的自然方式。但界面設計中的動效可以達到更多效果，而不是僅表示狀態的改變（比如：它們可以幫助你保持注意力并，傳達比靜態視覺更好的效果）。動效可以激勵視覺和運動知覺的學習，這意味著用戶更有可能保持專注并理解如何使用這些東西。

這些都是將動效融入到設計中的好理由，但為什么它會引發用戶情感呢？

參與Encrypt和Gemini Photos兩款app設計的Simon Grozyan認為，這是因為在物理世界中，我們將動的事物理解為有生命的：

“我們習慣于看運動中的事物，由于光線的原因，我們周圍的一切都在移動或改變外觀，靜態等于死亡?！?/p>

除了可靠和逼真的質量之外，動效能夠給用戶帶來愉悅感，這種愉悅感是與驚喜相同的。因此，將動效用在非常規頁面轉場的地方，使得你的產品使用起來更有趣。

動效設計案例：Encrypto and Shazam

Encrypto是一款小巧精致的Mac應用，它可以對您的文件進行加密、解密，以便您可以安全地將文件發送給別人。對于那些關心數據安全和隱私的人來說，這是一個不可缺少的但又不是時常想到的工具。

盡管如此，從設計方面來說，Encrypto是迄今為止我最喜愛的MacPaw應用，這要感謝矩陣式風格的動畫欄：動畫欄滑過文件，將其轉換為新的安全體。

Encrypto模擬生活中的場景，它不再是你計算機上的一個沉悶的程序，它有著迷人的數字魔法。

Shazam是一款將動效，作為其界面設計中的核心工作的app。當你使用Shazam進行識別音樂時，點擊開始按鈕后，按鈕開始向外發送同心圓。這種類似于跳動的音樂揚聲器的設計，讓界面看起來很有生命感，就像你在一個強大的聲音系統中播放你最喜歡的專輯一樣。

藝術無處不在——插畫設計

正如Blair Culbreth所言：對于界面而言，光漂亮是不夠了。

Sleek，有著專業化的設計，但它的如微笑般的個性化、人性化的細節才是關鍵，自定義藝術才能成就這些細節。

與普通圖形不同的是插圖是有情感的，因為它傳達的不僅僅是其所包含的意義。它與每個孩童時代看過漫畫的人有著積極的關聯性，以更有趣、更有想象力的方式展現了一些東西。最重要的是，它包含了藝術家的個性。

我們的產品設計師Max Kukurudziak說過：

“我認為，當一位藝術家創作插圖時，他們總會將他們的一些個人經歷、背景和故事注入其中?！?/p>

這個理論說明了人情味更有可能激發情感。

插畫設計案例：Gemini Photos and Google Calendar

我們最新的產品Gemini Photos是一款iPhone應用，可以幫助您刪除手機中一些不需要的照片。就像Gemini 2的桌面版一樣，有冗長的說明文字，所以即使有一個漂亮的的用戶界面，我們也很難吸引的注意力，并且讓他們感覺很好。

與我們之前許多app一樣，我們使用動畫和聲音來激活界面，但自定義藝術已成為體驗的亮點。如上所述，令人驚喜愉快的事物會導致一種快樂化學物質涌入我們的血液，所以在意想不到的地方使用搞怪的插圖，不僅填滿了空白的屏幕，也給單調的行為增加了一點樂趣?。

另一個可以證明插圖如何讓產品更可愛的案例就是Google日歷。 直到最近，網絡版和iOS?app之間還是有著明顯的差別。 雖然前者具有電子表格的吸引力，但后者以一個殺手級的細節，立即贏得了用戶的芳心。

對于不同類型的事件，Google日歷會根據從事件標題中提取的關鍵字，用插圖進行說明。 這樣一來，即使你所要做的只是健身和牙醫預約，但你本周的計劃也會看起來非常令人興奮。

但這還不是最好的。我注意到，無論何時我創建新事件，我都默默的希望Google日歷能夠創建它的插圖，而當這一幕發生時，我會很開心。而且，很明顯，插圖實驗并不單單適用于我，因為最近Google推出新版網頁版的日歷也同樣采用了。

吉祥物

多年來，模仿產品的可愛角色，一直在網頁設計和營銷中使用（想想Ronald McDonald 和?the Michelin Man）。在界面中，應用還不算多。用戶界面中的吉祥物可能被視為侵入性的和煩人的，特別是當它們阻礙用戶重要行為或阻斷視線時。

微軟的Clippy是應用吉祥物的失敗案例：它引起的只是恐懼和厭惡（當然，這是情緒，而不是你想的那種）。

同時，研究表明：即使是簡單的幾何圖形，人們也很容易將事物擬人化。栩栩如生的生物就更容易聯系和理解其行為，并且通常對其有感覺。

此外，動畫角色更容易將個性歸因于個人，因此你可以通過該角色來表現產品的特征，使其變得俏皮和愚蠢、熱心和樂于助人，或者任何你期望的特征。憑借這種未開發的潛力，吉祥物非常適合非情感的產品。

訣竅是時機。

Clippy非常鄰人討厭的原因，是因為他經常不請自來，打斷了完全不相關的任務。但是，如果吉祥物在相對閑置的時間出現。例如：當用戶剛剛完成了一項任務時，它做出可愛的動作。

吉祥物設計案例：RememBear and Yelp

TunnelBear公司最近推出了形如按鈕可愛的產品（不是雙關語），RememBear是一個密碼管理器，人們是不會拿密碼開玩笑。RememBear中的卡通熊的聰明之處在于，當你正在做一些嚴肅、重要的事情時（比如創建一個新的記錄時），它們就不會隱身。

相反，當您完成應用注冊的第一階段但還沒有進入第二階段時，您會得到熊的擁抱，這是保存你的第一個密碼。RememBear通過這種方式，在我意想不到的地方搏我一笑。

就像RememBear一樣，Yelp（一款廣為人知的餐廳評論應用）祥物出現時機也非常完美。有趣的倉鼠首先出現在iOS應用設置的底部，這樣用戶就像發現復活節彩蛋一樣發現它。

Yelp的產品設計經理Yoni De Beule說：

“在Yelp，我們一直努力使我們的產品和品牌讓人感到有趣和愉悅。我們要在每件事情上都要表現Yelp的個性，從我們有趣的海報設計、有趣的版本說明，到內部黑客馬拉松項目和Yelp 精英派對。當我們發現我們的iPhone設置頁面在娛樂方面嚴重缺乏時，我們決定擼起袖子來完善它?！?/p>

隨后，倉鼠成為了公司app在iOS應用商店里的商標，因為在此之前，該團隊為Android版本設計了一個迅猛龍，為網頁版設計了一條狗。 因此，無論何時何地，當你使用Yelp時，你幾乎會看完所有的評論，這樣你可以看到另一個令人愉快的角色版本。

總結

并非所有的產品都具有游戲或社交媒體app的天然樂趣，即使是公共事業也不一定只有實用的。處理重復性任務的app通常與留住用戶相沖突，因為人們常常感到無聊而放棄它們，而無聊就是缺乏刺激。

通過使用像幽默、動效、插畫、游戲化元素和可關聯角色等正面激勵，我們可以讓用戶感受到一種更加興奮、更少分心、更加快樂的不同方式。

原文作者：Alice Kotlyarenko

原文鏈接：https://www.smashingmagazine.com/2018/04/designing-emotional-interfaces-boring-apps/

翻譯：小永

校審：行云

本文由 @小永 翻譯發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議