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

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

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

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

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

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

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

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

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

人們在玩的游戲——游戲化設(shè)計

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

對于許多像Akar Sumset的產(chǎn)品設(shè)計師而言，游戲化設(shè)計的關(guān)鍵不在于讓用戶本身獲得樂趣，而是通過樂趣引導(dǎo)他們?nèi)ゲ扇∧承┬袨?。比如：成就、等級、排行榜就是利用了人們對自尊的基本需求，激發(fā)競爭力，并且敦促用戶做你想讓他們做的事情；比如：獲得成就，用戶就會不斷的回到應(yīng)用中或者在社交媒體上分享。

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

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

這對你的界面設(shè)計意味著什么呢？

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

游戲化設(shè)計案例：Gemini 2 和 Duolingo

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

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

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

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

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

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

最終，你開始將Duolingo與成就感和自豪感聯(lián)系起來，這會促使你繼續(xù)學(xué)習(xí)。

你一定是在開玩笑——幽默感設(shè)計

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

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

你想讓你的界面設(shè)計也能使用戶產(chǎn)生這種反應(yīng)嗎？

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

幽默感設(shè)計案例：Authentic Weather and Slack

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

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

“沒關(guān)系，向外看了解更多信息。”

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

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

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

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

讓世界動起來——動效設(shè)計

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

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

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

“我們習(xí)慣于看運動中的事物，由于光線的原因，我們周圍的一切都在移動或改變外觀，靜態(tài)等于死亡。”

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

動效設(shè)計案例：Encrypto and Shazam

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

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

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

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

藝術(shù)無處不在——插畫設(shè)計

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

Sleek，有著專業(yè)化的設(shè)計，但它的如微笑般的個性化、人性化的細節(jié)才是關(guān)鍵，自定義藝術(shù)才能成就這些細節(jié)。

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

我們的產(chǎn)品設(shè)計師Max Kukurudziak說過：

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

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

插畫設(shè)計案例：Gemini Photos and Google Calendar

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

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

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

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

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

吉祥物

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

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

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

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

訣竅是時機。

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

吉祥物設(shè)計案例：RememBear and Yelp

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

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

就像RememBear一樣，Yelp（一款廣為人知的餐廳評論應(yīng)用）祥物出現(xiàn)時機也非常完美。有趣的倉鼠首先出現(xiàn)在iOS應(yīng)用設(shè)置的底部，這樣用戶就像發(fā)現(xiàn)復(fù)活節(jié)彩蛋一樣發(fā)現(xiàn)它。

Yelp的產(chǎn)品設(shè)計經(jīng)理Yoni De Beule說：

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

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

總結(jié)

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

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

原文作者：Alice Kotlyarenko

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

翻譯：小永

校審：行云

本文由 @小永 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議