作為 UI 設(shè)計師來說，掌握產(chǎn)品設(shè)計中的每個組成要素是非常必要的，所謂精細(xì)化的設(shè)計就是把控好每一個細(xì)節(jié)的深入。隨著大屏手機的普及，在人機交互的探索上面設(shè)計師追求著更多提高用戶體驗的設(shè)計方式，不過萬變不離其宗，用戶體驗沉淀下來的行為習(xí)慣依然影響著我們的設(shè)計。

 

就拿導(dǎo)航設(shè)計來深入探索，隨著產(chǎn)品設(shè)計的不斷推進(jìn)，很多新穎的設(shè)計呈現(xiàn)帶給用戶更多的操作體驗。本文就以移動端底部標(biāo)簽欄導(dǎo)航為案例分析，和大家一起探索一下底部標(biāo)簽欄導(dǎo)航設(shè)計的千奇百態(tài)。

 

 

 

 

分享目錄

 

一、關(guān)于底部標(biāo)簽導(dǎo)航

二、UI 設(shè)計注意事項

三、UI 表現(xiàn)層類別分析

四、移動端線上案例分析

五、總結(jié)

 

 

 

一、關(guān)于底部標(biāo)簽導(dǎo)航

 

移動端導(dǎo)航欄設(shè)計相當(dāng)于自身的骨架，是支撐產(chǎn)品中功能交互和內(nèi)容傳播的血肉。導(dǎo)航系統(tǒng)指引著用戶的操作軌跡，引導(dǎo)用戶抵達(dá)目的地和進(jìn)行相關(guān)的操作，將零散的內(nèi)容和功能進(jìn)行組織形成結(jié)構(gòu)化的可視軌跡。導(dǎo)航的存在因此顯得格外重要，也是梳理功能結(jié)構(gòu)需要重點確定的內(nèi)容，以此來形成整個產(chǎn)品的脈絡(luò)。

 

 

移動端導(dǎo)航欄比較常見的有：底部標(biāo)簽欄導(dǎo)航、舵式導(dǎo)航、頂部標(biāo)簽(Tab)導(dǎo)航、宮格式導(dǎo)航、輪播（平鋪）式導(dǎo)航、懸浮 icon 導(dǎo)航、列表式導(dǎo)航欄、抽屜式導(dǎo)航、下拉導(dǎo)航/菜單導(dǎo)航等等。我們比較常見的產(chǎn)品中采用底部標(biāo)簽欄導(dǎo)航的居多，便于用戶進(jìn)行頻繁的操作，這也是本文接下來重點和大家探索的話題方向。

 

在移動端產(chǎn)品中底部標(biāo)簽欄導(dǎo)航是最常用的導(dǎo)航模式，常作為一級目錄的導(dǎo)航，位于產(chǎn)品界面底部。根據(jù)用戶對于界面的操作熱區(qū)來看，底部是用戶可以輕松點擊的區(qū)域，無論用戶單手還是雙手操作都十分便利。

 

在底部標(biāo)簽欄導(dǎo)航的基礎(chǔ)上進(jìn)行拓展欄設(shè)計也是比較常見的形式，也就是舵式導(dǎo)航。突出中間的功能強化用戶的關(guān)注度，引導(dǎo)用戶使用更多延展功能。底部標(biāo)簽欄導(dǎo)航和底部（舵式）拓展欄都屬于底部導(dǎo)航的范圍，本文將會重點以此類型為主進(jìn)行梳理。

 

 

 

 

二、UI 設(shè)計注意事項

 

底部標(biāo)簽欄導(dǎo)航非常直觀的告訴用戶當(dāng)前的位置，也便于用戶進(jìn)行同一層級間的不同模塊切換。由于具有很強的包容性，不會與其他功能模塊形成干擾，也能與多種導(dǎo)航模式進(jìn)行組合使用。

 

底部標(biāo)簽欄導(dǎo)航在模塊的選擇上面通常是 3-5 個，比較常見的為 5 個，3 個模塊相對比較松散，運用案例不是很多，除非業(yè)務(wù)功能較少。在設(shè)計表現(xiàn)形式上面有：icon + 文字、純 icon、純文字形式，比較主流的還是 icon + 文字的形式，可以降低用戶的理解成本和記憶負(fù)擔(dān)，提高用戶的操作體驗。

 

 

底部（舵式）拓展欄是為了突出中間功能設(shè)計，吸引用戶關(guān)注度，提高更多隱藏功能的使用概率。這種導(dǎo)航模式較為常見，比如轉(zhuǎn)轉(zhuǎn)、抖音、馬蜂窩旅游、閑魚等等均有使用。可以提高導(dǎo)航欄設(shè)計的趣味性和特征性，引導(dǎo)用戶操作更多功能和貢獻(xiàn)更多內(nèi)容。不過這樣的設(shè)計由于關(guān)注度被吸引，進(jìn)而影響其它一級模塊的關(guān)注度，由于隱藏的功能增加了用戶的記憶負(fù)擔(dān)和操作負(fù)擔(dān)，利弊權(quán)衡需要產(chǎn)品設(shè)計師進(jìn)行評估。

 

在進(jìn)行設(shè)計的過程中，功能模塊的確定需要起到牽引的重要作用，鏈接起整個產(chǎn)品的功能脈絡(luò)；設(shè)計表現(xiàn)上面需要區(qū)分默認(rèn)和點擊狀態(tài)，可以跳出規(guī)范的束縛，但是需要在不影響其它業(yè)務(wù)模塊的前提下進(jìn)行。

 

 

 

 

三、UI 表現(xiàn)層類別分析

 

底部標(biāo)簽欄導(dǎo)航在 UI 表現(xiàn)層方面也是千奇百態(tài)，除了常規(guī)的置底形式，設(shè)計師也發(fā)散了更多新穎的表現(xiàn)。突破現(xiàn)有規(guī)范的束縛，不被固有化思維所限制，才能不斷的進(jìn)行設(shè)計創(chuàng)新。

 

 

3.1 最穩(wěn)定的常規(guī)設(shè)計形式

底部標(biāo)簽欄導(dǎo)航最常見的設(shè)計形式依然是置于底部的常規(guī)形式，通常是 3-5 個功能模塊為主，其中 5 個功能模塊是較為常見的。形成差異化的是在圖標(biāo)設(shè)計上面進(jìn)行發(fā)揮，難度較大的設(shè)計是結(jié)合品牌基因或者特征性元素表達(dá)，也有一些是純文字的設(shè)計形式。

 

除了圖標(biāo)上面進(jìn)行發(fā)揮以外，也有一些會在背景上面進(jìn)行裝飾，體現(xiàn)產(chǎn)品差異化。不過最常見的依然還是單色為主，或者根據(jù)模塊的需求在切換的過程中選擇使用不同的背景體現(xiàn)。雖然是最常規(guī)的導(dǎo)航模式，但是設(shè)計師依然可以在布局形式、圖標(biāo)風(fēng)格、配色關(guān)系、背景裝飾等方面進(jìn)行發(fā)揮。

 

 

 

3.2 動靜結(jié)合的微動效表現(xiàn)

微動效在產(chǎn)品設(shè)計中的運用逐漸變得頻繁，相較于靜態(tài)的表現(xiàn)更能引起用戶的關(guān)注度，也能帶來趣味性和互動性。在底部標(biāo)簽欄導(dǎo)航中的圖標(biāo)設(shè)計上面，默認(rèn)的采用靜態(tài)展示，而點擊狀態(tài)以動效的形式進(jìn)行演變過度也是非常常見的設(shè)計處理。

 

在進(jìn)行動效設(shè)計的時候，可以采用整個圖標(biāo)位移形成動效，這是最簡單的動效表現(xiàn)，通常是上下彈跳位移。比較復(fù)雜的是圖標(biāo)本身的結(jié)構(gòu)動效，這也是圖標(biāo)動效轉(zhuǎn)換比較連貫的形式。

 

 

 

3.3 突出規(guī)范框架的束縛表現(xiàn)

雖然大部分產(chǎn)品設(shè)計都會優(yōu)先采用官方的設(shè)計規(guī)范，但是為了突出設(shè)計的差異化，也會進(jìn)行一些突出規(guī)范框架的設(shè)計。在保持原有不變的導(dǎo)航設(shè)計中，我們可以針對局部功能模塊進(jìn)行突出表現(xiàn)（比如舵式導(dǎo)航），也可以將點擊狀態(tài)進(jìn)行突出表現(xiàn)。

 

 

 

3.4 懸浮層增強空間感

一些產(chǎn)品為了增強界面結(jié)構(gòu)的空間感，針對底部標(biāo)簽欄導(dǎo)航設(shè)計采用懸浮層的設(shè)計來進(jìn)行表現(xiàn)，使得界面的通透性和呼吸感更強。這種設(shè)計形式依然保留了原本的結(jié)構(gòu)，只是預(yù)留了左右和底部的間距，也有一些產(chǎn)品結(jié)合交互動效的形式表達(dá)，滑動過程中采用隱藏部分功能，增加瀏覽過程的內(nèi)容輸出面積。

 

 

 

3.5 底部拓展/隱藏式設(shè)計

隨著一些工具型產(chǎn)品的使用，功能模塊變得復(fù)雜而繁多，也有將更多功能隱藏在底部標(biāo)簽欄里面，上拉交互時顯示。這種設(shè)計形式將底部標(biāo)簽欄進(jìn)行了深度的開發(fā)利用，但是功能隱藏比較深，曝光度受到了一定的影響，不適合較為重要的功能模塊設(shè)計。

 

 

 

3.6 小結(jié)

底部標(biāo)簽欄導(dǎo)航在 UI 表現(xiàn)層方面還有更多可以給予設(shè)計師發(fā)揮的空間，設(shè)計沒有固定不變的形式，在于不斷的發(fā)現(xiàn)、總結(jié)和創(chuàng)新。期待大家發(fā)現(xiàn)更多設(shè)計解決方案和進(jìn)行更多設(shè)計創(chuàng)新，下面將會為大家梳理線上的優(yōu)秀案例，讓我們可以站在巨人的肩膀上不斷超越。

 

 

 

四、移動端線上案例分析

 

移動端底部標(biāo)簽欄導(dǎo)航設(shè)計在眾多產(chǎn)品中浮現(xiàn)出很多優(yōu)秀的案例，對于線上案例的分析將有助于我們進(jìn)行落地性的思考，新穎的設(shè)計不再是飛機稿，而是可以實現(xiàn)的創(chuàng)意。創(chuàng)新是建立在不斷的發(fā)現(xiàn)、總結(jié)、分析和改變，希望這些案例可以帶給你點滴靈感。

 

 

4.1 背景結(jié)合特定節(jié)日增強氛圍

在大部分情況下底部標(biāo)簽欄導(dǎo)航的背景為單色的居多，不干擾信息的傳遞而保障用戶的瀏覽體驗。也有在特定節(jié)日結(jié)合氛圍營造對背景進(jìn)行簡單的裝飾，可以在節(jié)假日或者特殊時期引起用戶的共勉，增強產(chǎn)品的情感化設(shè)計。

 

比如寶寶巴士兒歌 APP 的底部標(biāo)簽欄導(dǎo)航設(shè)計，在之前的一些版本迭代過程中，結(jié)合特定氛圍營造進(jìn)行背景設(shè)計，也是一種非常不錯的設(shè)計表達(dá)形式。由于屬于兒童類產(chǎn)品，點擊功能模塊切換的過程中還伴隨著音樂，視聽體驗的結(jié)合使得操作體驗備受關(guān)注。

 

 

 

4.2 強化消息提示的關(guān)注度

系統(tǒng)通知或者消息提示往往都會被用戶所忽略，盡管很多產(chǎn)品都會將消息作為單獨的功能模塊來設(shè)計，但是依然擺脫不了被忽略的問題。微信讀書將通知和私信等消息提示結(jié)合在個人中心的設(shè)計中，以氣泡彈出的形式展示在圖標(biāo)紅點提示上方。以此來吸引用戶的關(guān)注度，增加消息閱讀率。

 

 

 

4.3 特異設(shè)計引導(dǎo)功能模塊關(guān)注度

在底部標(biāo)簽欄導(dǎo)航的多個功能模塊中，為了突出或者引導(dǎo)使用某個功能時，會采用特異構(gòu)成的設(shè)計做法，在原本的設(shè)計規(guī)范上面突出表現(xiàn)個例，以此來引起用戶的關(guān)注度。比如騰訊動漫在第一次進(jìn)入 APP 時，圈子的圖標(biāo)設(shè)計會特意突出，點擊之后恢復(fù)原樣，以此吸引用戶對該欄目的關(guān)注，增強功能模塊的使用率。

 

 

 

4.4 圖標(biāo)設(shè)計的年輕化趨勢

隨著 95 后成為互聯(lián)網(wǎng)原住民，產(chǎn)品設(shè)計逐漸趨向于“年輕化”的探索和挖掘。優(yōu)酷 V9.0 升級后設(shè)計風(fēng)格更年輕化，底部標(biāo)簽欄圖標(biāo)設(shè)計采用低純度、高明度的多色漸變，結(jié)合微動效使得風(fēng)格更加青春活潑，符合年輕一代的審美需求。年輕化的設(shè)計不僅提高感官體驗，也拉近了產(chǎn)品與用戶之間的親和力。

 

 

 

4.5 趣味性的情感化設(shè)計融入

情感化的設(shè)計能夠拉近產(chǎn)品與用戶之間的親和力，這也是設(shè)計師在不斷探索并延展的設(shè)計方向。QQ 作為社交工具而言，如何更加符合年輕化的設(shè)計需求，在底部標(biāo)簽欄圖標(biāo)的設(shè)計上面也是用盡了心思。消息模塊的圖標(biāo)設(shè)計成各種搞怪的表情，在拖拽的時候會切換不同的表情，帶給用戶更加趣味性的體驗，讓人會心一笑。

 

 

 

4.6 首頁圖標(biāo)強化品牌曝光

為了強化產(chǎn)品品牌的曝光度，在進(jìn)行底部標(biāo)簽欄圖標(biāo)設(shè)計的時候，會將首頁圖標(biāo)的點擊狀態(tài)切換為品牌 LOGO 的形式，以此來增加品牌的曝光度。設(shè)計上面的選擇有 LOGO 圖形、吉祥物、應(yīng)用圖標(biāo)、品牌局部圖形等，會根據(jù)品牌 LOGO 的造型靈活選擇。

 

 

 

4.7 舵式導(dǎo)航轉(zhuǎn)一轉(zhuǎn)增強關(guān)注度

底部（舵式）拓展欄導(dǎo)航是突出中間功能模塊設(shè)計來強化關(guān)注度，除了靜態(tài)的表達(dá)以外，結(jié)合微動效更能起到強化突出的作用。轉(zhuǎn)轉(zhuǎn)結(jié)合吉祥物和微動效運用在舵式導(dǎo)航的設(shè)計中，不僅提高用戶的關(guān)注度，情感化的設(shè)計還能增強產(chǎn)品的親和力。

 

 

 

4.8 結(jié)合營銷內(nèi)容多層共用

產(chǎn)品中的營銷結(jié)合是最為常見的，產(chǎn)品設(shè)計師也在不斷地思考更多可結(jié)合的功能模塊，舵式導(dǎo)航的區(qū)域被充分利用是最為便利的。芒果 TV 將營銷內(nèi)容與會員模塊圖標(biāo)進(jìn)行結(jié)合，在保持原有功能操作的基礎(chǔ)上強化營銷活動的曝光度，鼓勵更多用戶參與活動。

 

 

 

4.9 微動效結(jié)合多層功能運用

微動效運用到底部標(biāo)簽欄導(dǎo)航圖標(biāo)動效中較為常見，可以帶給用戶趣味性的點擊體驗。對于一些首頁采用瀑布流設(shè)計的產(chǎn)品，也會在用戶上滑瀏覽內(nèi)容到一定量的時候?qū)⑹醉撟兓癁?ldquo;置頂”的操作，方便用戶快速置頂。比如愛奇藝 APP 將品牌色強化在圖標(biāo)的設(shè)計中，結(jié)合微動效的變化帶給用戶趣味性和強化品牌記憶，在首頁圖標(biāo)和置頂圖標(biāo)切換的過程中也采用了微動效的形式，過度更加自然流暢，也能更加醒目的提示用戶。

 

 

 

4.10 微動效結(jié)合突出框架的束縛

一些尋求突破的產(chǎn)品，在設(shè)計的時候也嘗試了突出規(guī)范框架的束縛表現(xiàn)，點擊狀態(tài)會突出局部來強化。結(jié)合動效的變化形成自然過度，突出的設(shè)計更能引起用戶的關(guān)注度，明確自己當(dāng)前所處的位置。這樣的表現(xiàn)形式不僅可以形成設(shè)計差異化，也能讓用戶操作路徑更加明顯，比如愛奇藝早期版本、美團(tuán)外賣等產(chǎn)品。

 

 

 

4.11 懸浮層設(shè)計突破底部標(biāo)簽欄常規(guī)表現(xiàn)

設(shè)計師都在不斷的探索設(shè)計的差異化，敢于創(chuàng)新才能尋求新的可能性。脈脈在最近的迭代中將底部標(biāo)簽欄的設(shè)計采用懸浮層的形式表現(xiàn)，使得界面內(nèi)容呈現(xiàn)的呼吸感更強，也增加了界面結(jié)構(gòu)的空間感。在保持基本設(shè)計規(guī)范的前提下進(jìn)行小小的變化，就能帶來設(shè)計的差異表現(xiàn)，也能帶給用戶較為新穎的感官體驗。

 

 

 

4.12 懸浮層設(shè)計結(jié)合交互動效的雙向運用

交互動效是 UI 設(shè)計師在靜態(tài)設(shè)計稿中要逐步突破的一種技能，交互動效可以讓我們的設(shè)計表達(dá)更加直觀，提高產(chǎn)品的互動性和趣味性。馬蜂窩旅游在進(jìn)行底部標(biāo)簽欄突破的過程中，除了采用新穎的懸浮層設(shè)計以外，在上滑瀏覽內(nèi)容時采用隱藏局部功能的處理方式，讓內(nèi)容的輸出面積更大。在下滑或者停頓的過程中恢復(fù)默認(rèn)導(dǎo)航，探知用戶行為習(xí)慣并給出不同的交互反饋，帶給用戶更高的操作體驗和互動趣味性。

 

 

 

4.13 底部拓展設(shè)計承載更多功能模塊

對于一些功能模塊較多的產(chǎn)品，產(chǎn)品設(shè)計師會盡可能的開發(fā)每一個常規(guī)的功能，拓展出更多可以進(jìn)行設(shè)計延展的模塊。釘釘 APP 在進(jìn)行底部標(biāo)簽欄設(shè)計的時候，就將更多功能模塊隱藏在上拉展開欄中，方便用戶進(jìn)行快捷操作。充分的對底部標(biāo)簽欄進(jìn)行了深度挖掘，利用手勢的變化實現(xiàn)更多功能模塊的切換，提高了用戶的操作體驗。

 

 

關(guān)于移動端底部標(biāo)簽欄導(dǎo)航設(shè)計還有很多非常不錯的線上案例，這里就不一一列舉啦！優(yōu)秀的案例總結(jié)能夠帶給我們更多的靈感參考，基于優(yōu)秀之上我們才能設(shè)計出更新穎的作品，希望以此拋磚引玉，期待大家發(fā)現(xiàn)更多好玩的設(shè)計。

 

 

 

五、總結(jié)

 

對于 UI 設(shè)計師來說，產(chǎn)品體驗是一種習(xí)慣的養(yǎng)成，結(jié)合體驗的日記化摘錄形成設(shè)計思路的總結(jié)。總結(jié)是為了形成最終可供靈感借鑒的經(jīng)驗，基于優(yōu)秀的案例分析才能形成更多的設(shè)計解決方案。

 

本文以移動端底部標(biāo)簽欄導(dǎo)航設(shè)計的經(jīng)驗分析為大家進(jìn)行梳理，任何的設(shè)計表達(dá)都不是不變的規(guī)律，掌握的是這種設(shè)計分析和總結(jié)的思路，以此反推出更多的設(shè)計總結(jié)。希望本文的思路作為拋磚引玉，帶給你更多的思路。

你一定也發(fā)現(xiàn)了，在這個時代下只要處在同一賽道的產(chǎn)品，大多數(shù)免不了日趨同質(zhì)化，不論是功能還是形式、內(nèi)容還是算法。就拿內(nèi)容型產(chǎn)品來舉例：去掉顏色，以下四個產(chǎn)品的首頁，你能分得清誰是誰嗎？

 

 

 

 

雖然可以做品牌差異化，但很多產(chǎn)品在招牌打響前，也會經(jīng)歷相當(dāng)漫長的一段成長期。而在大家都卷的分不清誰是誰的時候，通過趣味性來建立情感鏈接倒是一個獨辟蹊徑的狠招。

 

之前在團(tuán)隊有幸負(fù)責(zé)過一次產(chǎn)品趣味性的探索，雖未全部落地，但沉淀了不少經(jīng)驗。今天，我將這些經(jīng)驗以文章的方式分享給你，希望對你有所啟發(fā)。

 

 

 

為什么產(chǎn)品需要趣味性

 

1.符合本能需求

馬斯洛的“需求層次理論”（Hierarchy of Needs）你一定聽過。這個理論提出人類的需求狀態(tài)是持續(xù)不斷的，一段時間內(nèi)，個人的動機或許可以獲得暫時性的滿足。但從人的成長角度來看，人類的需求永遠(yuǎn)不會止步于一個階段。類似的還有亞倫·瓦爾特基于此提出的需求層次理論——有用的、可靠的、可用的、愉悅的。在滿足了溫飽階段后，自然會需要情感的滿足。

 

尤其現(xiàn)在這個相對嚴(yán)峻、內(nèi)卷成風(fēng)的時代下，大家都渴望在上了一天班之后，自己用的產(chǎn)品可以給自己解壓，而不只是個單純的冷血工具。

 

 

 

 

 

 

 

2.影響用戶行為

 

產(chǎn)品傳達(dá)趣味性的信息，那么這些信息便更容易被用戶接受、甚至激發(fā)興趣。正如用戶關(guān)系和精準(zhǔn)化運營的先驅(qū)——史蒂文·貝萊格姆的那句話：“趣味是設(shè)計產(chǎn)品中最人類化,最直接,最能引起人們興趣的因素。”

 

根據(jù)艾達(dá)模型這個經(jīng)典理論，一旦用戶對某件事產(chǎn)生興趣后，則更容易促成他的決策、乃至最后行為的發(fā)生。畢竟我們絕大多數(shù)的決策并非源自理性。

 

 

 

 

 

另外，《瘋傳》這本書提及過一個重要的概念：情緒喚醒。當(dāng)情緒喚醒度較高時，往往會更容易激發(fā)用戶的分享行為（比如愉悅、驚喜這樣的正面情緒，當(dāng)然也會包括憤怒、恐懼這樣的負(fù)面情緒）。而產(chǎn)品所呈現(xiàn)的趣味性，很大程度上更容易引發(fā)用戶的高喚醒情緒，從而主動采取一些產(chǎn)品希望他實施的行為。

 

 

 

3.緩解負(fù)面情緒

 

使用一款產(chǎn)品的過程中，必然會出現(xiàn)不夠正向的反饋，比如404、斷網(wǎng)、填寫格式錯誤、輸入隱私信息等等。一旦超出了用戶的容忍能力，很容易造成行為中斷甚至流失。

 

但此時如果通過一種趣味性的方式呈現(xiàn)，很大程度上可以緩解用戶的負(fù)面情緒。

 

比如readme的登錄頁面，當(dāng)你輸入密碼時，貓頭鷹捂住雙眼，很好得緩解了用戶的不安全感。再比如餓了么，惡劣天氣下會實時記錄當(dāng)前的天氣狀態(tài)，通過同理心的觸發(fā)也可以緩解用戶等待時產(chǎn)生的焦慮。

 

 

 

 

 

 

 

4.實現(xiàn)情感鏈接

 

對應(yīng)諾曼在《情感化設(shè)計》中的「反思層」，通過品牌差異、獨有內(nèi)涵等方式來喚起用戶深層的記憶和情感，產(chǎn)生情感共鳴，從而形成認(rèn)知，建立起深厚的情感鏈接，以讓用戶越來越忠實于產(chǎn)品。此時產(chǎn)品作用更多的是作為一個承擔(dān)情感的載體。

 

我們旅游時經(jīng)常會購買一些貌似沒什么實用性的紀(jì)念品，明信片、木雕、徽章等等，可能最多只能放在房間當(dāng)裝飾。但是紀(jì)念品的關(guān)鍵意義，在于承載著旅游時的記憶。類似的還有單機游戲發(fā)售時，除了標(biāo)準(zhǔn)版外，往往會同步發(fā)售包含手辦、美術(shù)設(shè)定集等物品的豪華版，同樣用來承載玩家的情懷。

 

最典型的例子，就是Google的Doodle設(shè)計，在不同的節(jié)日、紀(jì)念日、或者緬懷一些先驅(qū)、藝術(shù)家時，會投入很高的成本起設(shè)計各種趣味性的插畫logo，豐富有趣，而且很多時候可以支持互動游戲。比如18年的萬圣節(jié)，就做了一個有趣的多人對戰(zhàn)的小游戲。

 

 

 

 

Doodle不僅是Google文化、價值觀的象征，也通過這種趣味性的創(chuàng)意讓用戶實現(xiàn)更深層次的情感交流，建立情感紐帶并增加粘性，不會輕易得流失到其他替代品中。

 

 

 

趣味性是什么

關(guān)于這個概念，有三條相對客觀專業(yè)的說法。

 

德國古典哲學(xué)創(chuàng)始人康德《實用人類學(xué)》中，指出趣味性是人類由于受到外部環(huán)境的影響而對客觀事物產(chǎn)生的直接的感性反應(yīng)，不具有普遍性和必然性。通俗來講是人們對身邊的事物感到新奇、有趣、有意思，從而心理產(chǎn)生愉悅的變化。

 

另外，康德在《判斷力批判》也指出，趣味是指主體以積極主動的姿態(tài)，在超功利的層次上對某一對象表現(xiàn)出喜愛和愉悅的情緒狀態(tài)。

 

《漢語詞典》將趣味釋義為：使人感到愉快，能引起興趣的特性。

 

看似各不相同，但根據(jù)這三個概念提煉下，可以發(fā)現(xiàn)他們都是在融入一種正向的情緒加以解釋。

 

那么，趣味性背后的情緒到底是什么？

 

 

 

趣味性背后的情緒

情緒這東西千變?nèi)f化，為了避免主觀臆斷的不準(zhǔn)確，我搜羅了關(guān)于情緒的研究資料，目前相對權(quán)威的有三個：plutchik情緒輪、日本感性工學(xué)、諾曼的三層理論。

 

后兩者未對情緒進(jìn)行指標(biāo)的定義，所以這里只聚焦在情緒輪上。

 

情緒輪由羅伯特·普洛特契克開創(chuàng)，這個理論指出人類的基本情緒一共由8種，生氣、厭惡、恐懼、悲傷、期待、愉悅、意外和信任。撇去那些負(fù)面情緒，能夠符合趣味性帶來的情緒基本就三種：愉悅、期待和意外。

 

 

 

 

 

為了為產(chǎn)品所用，就需要提煉出更具象的特征。下面，我通過腦暴的方式對每類情緒進(jìn)行發(fā)散聯(lián)想。

 

 

 

關(guān)于愉悅感

 

聯(lián)想了大量可以引發(fā)愉悅情緒的事物，比如可愛的貓貓、各類好玩的表情包、毛絨玩具、影視作品里那些會突然說話的動物、解壓神器等等。

 

我發(fā)現(xiàn)這些事物，一般具備了以下特征：

 

1.會給予我們即時反饋；

 

2.擬人化，比如帶有人類才有的表情，或者是人類的動作語言；

 

3.柔軟的、毛茸茸的、圓潤的、有溫度的；

 

4.會動的、解壓的

 

 

 

 

 

 

 

關(guān)于期待感

 

聯(lián)想了大量可以引發(fā)期待情緒的事物，比如被買爆的泡泡瑪特盲盒，商家售賣的福袋，各種諸如擲骰子、老虎機的隨機性游戲，各類抽獎活動，一些游戲開局roll屬性點的環(huán)節(jié)（比如金2、河洛等游戲，當(dāng)年玩的時候我驚訝得發(fā)現(xiàn)我居然能roll上一整天）

 

這些事物大致會帶有這些特征：

 

1.未知的、神秘的；

 

2.滿足人類的好奇心的；

 

3.對結(jié)果能滿懷希望的；

 

4.隨機的正向獎賞；

 

5.只需要一步簡單到發(fā)指的操作（打開容器、拉動拉桿、點擊按鈕等等），不需要任何的行動門檻，也沒有等待時間

 

 

 

 

 

 

 

關(guān)于驚喜感

 

比如《設(shè)計中的設(shè)計》這本書中提到的出入境的印章案例、一蘭拉面碗底的細(xì)節(jié)、電影或者游戲中突然出現(xiàn)的彩蛋、iPhone第一代的發(fā)布現(xiàn)場、突然發(fā)現(xiàn)的世外桃源、突襲的生日驚喜等等。

 

這些事物大致會帶有這些特征：

 

1.超出原有預(yù)期的；

 

2.未提前告知的；

 

3.正向結(jié)果的；

 

4.產(chǎn)生共鳴的

 

 

 

 

 

 

那么，這些特征又該如何更具象得落地成策略，產(chǎn)品中又是如何利用這些策略，引導(dǎo)用戶產(chǎn)生這些情緒的呢？

 

下面，我將基于這三類維度，并結(jié)合大量的大廠案例來為一步步你抽絲剝繭。

 

 

 

 

如何制造愉悅感

 

 

1.關(guān)于擬人化

 

基于上面的挖掘，我發(fā)現(xiàn)能引發(fā)愉悅感的一個明顯特征，就是擬人化，這個非常有意思。

 

克利福德·納斯在《the man who lied to his laptop》這本書中提出過一個觀點：人們對待電腦的方式，與我們在與他人交流時使用的社會規(guī)范是一致的。我們對電腦的反應(yīng)，就好像它們是人類一樣。

 

 

 

 

 

 

也正因此，很多原本沒有生命體征的物體，一旦被賦予了擬人形象，就容易被大家所接納、引發(fā)愉悅。

 

做一下細(xì)分的話，擬人化基本涵蓋了三個方面：語言、形象和表情。

 

 

 

 

 

 

 

1.1擬人化的語言

 

人對于具體的擬人形象更容易產(chǎn)生情感，其中便包含擬人化的口吻。使用這種口吻與用戶交流，而非冷冰冰的設(shè)備語言，就可以提升產(chǎn)品溫度，引導(dǎo)用戶對產(chǎn)品產(chǎn)生正向情感，關(guān)于這塊我總結(jié)了兩方面。

 

一方面，文案盡量得接地氣、輕松。

 

拿京東這款產(chǎn)品舉例，文案從口吻上都會采用一種很輕松、接地氣的擬人語氣，來拉近和用戶間的距離。比如在引導(dǎo)詞后加入“哦~”“~”這種輕松的語氣詞。

 

另外，「京東問答」版塊的引導(dǎo)詞：傳統(tǒng)產(chǎn)品是“添加問答”，是不是平平無奇。但京東使用了“我來助你一臂之力~”

 

 

 

 

 

 

 

QQ瀏覽器的評論暗提示，也不是傳統(tǒng)的“寫評論”“輸入評論”，而是像日常聊天那樣“我來說兩句”，非常接地氣、生活化。知乎直接套用了流行語，詼諧的同時引導(dǎo)用戶注意言論。

 

 

 

 

 

 

另一方面，人類富有情緒變化，所以一旦用戶觸發(fā)了某個正面/負(fù)面行為，就可以給與情緒反饋。

 

在用戶完成商品評價后，京東不僅僅是很傳統(tǒng)得反饋“評價成功”，而是又加入了“感謝您！”的感謝詞。看似加了三個字，但行動過后的正向感激反饋，和我們?nèi)粘Ｉ钪惺艿秸蚍答佉粯樱粏酒鹫虻挠鋹偳榫w。并愿意繼續(xù)這個行為。

 

知乎的圈子業(yè)務(wù)，在用戶完成簽到后，反饋完成的基礎(chǔ)上，使用了正向的情感反饋“ 我就知道你會再來看我”，仿佛是一位關(guān)系不錯的老朋友，來喚起用戶正向情緒。

 

另外，知乎在改版后，回答收到贊也不僅僅是“點贊成功”這類冷冰冰的機器語言，而是“已收到你的喜歡，謝謝！”并且配以作者頭像，非常形象得傳出對對方對我們的感謝反饋。這種正向反饋，相比”點贊成功“更有效得喚起正向情緒，形成正向激勵。

 

 

 

 

當(dāng)然，用戶的消極行為也可以產(chǎn)生情緒反饋。

 

比如現(xiàn)在很多產(chǎn)品的取關(guān)反饋，不是傳統(tǒng)的“確認(rèn)”“取消”，而是用“殘忍取關(guān)”和“給個機會”這種融入情感的文案來做挽留，就好像真的有個活生生的人，在被你否定后反饋給你的情緒，請求你再給個機會。有趣的同時一定程度上也可以喚醒用戶的同情。（雖然這種做法過于業(yè)務(wù)導(dǎo)向，且有綁架用戶的嫌疑）

 

 

 

 

 

1.2擬人化的形象

 

人對于具體的擬人形象更容易產(chǎn)生情感。因此，樹立一個擬人化的品牌形象（也就是我們常說的IP），可以使用戶對產(chǎn)品快速建立情感聯(lián)系，也可以強化品牌感知。比如優(yōu)酷的猴子、高德地圖的老鷹、釘釘?shù)难嘧印inefriends等等。

 

 

 

 

 

 

世界杯的吉祥物也是同理，每一屆的吉祥物必定會融入擬人化的特征，憑著親切、可愛的形象和全世界的觀眾一起熱情互動。

 

 

 

 

 

說到產(chǎn)品，以京東的這只狗子為例，兜底頁、缺省頁、啟動頁，都做了狗這個擬人形象的貫穿。

 

 

 

 

 

 

如果你記得沒錯的話，形象改版之前這只狗還是四腳坐地上的，但改版后就兩腳著地了。這同樣是通過更擬人的形象來賦予「人格」，以此提升愉悅感，拉近距離。

 

 

 

 

 

 

再比如夸克，它甚至單獨新增了底tab入口，通過3d品牌形象，實現(xiàn)與用戶的智能交流。另外，卡片和語音搜索都做了形象貫穿，后者還使用了形象的眼睛，來通過眼睛的變化進(jìn)行情感交流。

 

 

 

 

 

 

 

1.3擬人化的表情

 

一段文字在加入了表情后，我們就能迅速了解到對方的情緒（比如我們?nèi)粘５牧奶欤Ｒ虼吮砬檫@一招，也可以用以加深用戶與產(chǎn)品的情感交流。

 

它可以和語音、形象靈活結(jié)合使用。通過全面的擬人化，來大幅提升用戶對產(chǎn)品的形象感知，促進(jìn)用戶情感的產(chǎn)生、加深用戶和產(chǎn)品的情感鏈接。

 

比如用語言輸入，當(dāng)系統(tǒng)未識別清楚時，傳統(tǒng)的方案可能是一個錯誤圖標(biāo)加上「未識別聲音，請再試一遍」的文案，但夸克中則使用了品牌形象的雙眼來傳達(dá)失落的表情，并結(jié)合了擬人化的語言。

 

同樣做法的還有百度的未開麥提示、段子頭圖，快速傳達(dá)產(chǎn)品的情緒，和用戶情感交流。

 

 

 

 

 

 

另外，閑魚設(shè)置昵稱時，正在輸入時、以及超出了限定字?jǐn)?shù)，右側(cè)的形象表情也會發(fā)生變化。

 

 

 

 

 

 

除了擬人化能引發(fā)愉悅外，還有一個很容易被忽略的要素同樣能起到作用——動畫反饋。

 

 

 

2.動畫反饋

 

提起動畫的作用，我們更多人首先想到的可能是強引導(dǎo)、注意力吸引，但動畫同樣能觸發(fā)用戶愉悅。比如當(dāng)動畫更加貼近現(xiàn)實，或者結(jié)合擬人化的特征時。

 

 

2.1貼近現(xiàn)實

 

最典型的例子，就是蘋果appstore從卡片到詳情頁的轉(zhuǎn)場過渡，點按的預(yù)備動作、卡片的放大展開、緩出的曲線、轉(zhuǎn)場完成的慣性等等，都很貼近現(xiàn)實物理世界的運動規(guī)律。而這種自然的絲滑也更能引發(fā)用戶的愉悅。

 

 

 

 

 

 

2.2結(jié)合擬人化

 

比如知乎的加載動畫，結(jié)合了擬人化的特征，讓這個過程變得格外有趣。劉看山奮筆疾書的動作也很符合知乎這款產(chǎn)品的定位。

 

 

 

 

 

如何制造期待感

 

 

隨機給與內(nèi)容

 

根據(jù)我們對期待感的腦暴，發(fā)現(xiàn)能觸發(fā)這種情緒最典型的特征，就是隨機性。

 

在產(chǎn)品中，則可以通過隨機給予用戶有價值的內(nèi)容來引發(fā)用戶的關(guān)注。結(jié)果的不確定使過程充滿神秘，這種狀態(tài)讓用戶興奮和滿懷期待，不會輕易離開。

 

比如網(wǎng)易新聞在進(jìn)行新聞加載的操作時，會在加載動畫上加入一個隨機的小貼士。內(nèi)容大致有三類：黃歷、名言和一句話新聞。而且這些內(nèi)容完全是隨機出現(xiàn)，這種刷新過程好像在開盲盒，你無法預(yù)知會給你什么內(nèi)容，非常有趣。而且它們?nèi)肟谏睿桓蓴_；內(nèi)容對用戶也具有價值。

 

 

 

 

 

同樣的還有丁香醫(yī)生。在首頁每次下來刷新后，都會出現(xiàn)不一樣的健康類的小貼士。隨機性很強，富有趣味。而且可以很好得滿足求知欲。

 

 

 

 

 

雪球的個人頁上，上劃時也會隨機給一條關(guān)于投資、市場的名言和網(wǎng)友的熱門觀點。

 

 

 

 

 

 

 

 

隨機性游戲

 

 

把現(xiàn)實生活中的游戲搬到了手機，同樣能激發(fā)用戶的好奇和期待。比如微信讀書的翻牌子、搖一搖、老虎機。還有天貓的翻牌子。

 

 

 

 

 

 

 

如何制造驚喜感

 

 

格雷戈里·伯恩斯曾做個關(guān)于腦部區(qū)域的研究，發(fā)現(xiàn)大腦不僅探尋未知，而且實際上還渴望未知。相比那些已知的日常慣例，新鮮新穎的事物更容易引人注意。所以提供一些以往沒有過的、出乎意料的事物或互動，不但能引起注意力，而且也會帶來驚喜感。

 

 

 

 

 

產(chǎn)品中的驚喜感設(shè)計，可以說是使用瞬間能夠觸達(dá)我們內(nèi)心的一種短暫性愉悅，一個體驗的峰值。

 

根據(jù)對驚喜感的挖掘，一個典型的特征就是超出預(yù)期，并且未提前預(yù)料。

 

比如Figma使用過程中，團(tuán)隊成員和你同時長按鼠標(biāo)，并且靠在一起后，就可與觸發(fā)擊掌的動畫彩蛋，非常有意思。

 

 

 

 

 

 

比如京東在五星好評后，會放煙花慶祝。

 

 

 

 

 

 

比如很多內(nèi)容型產(chǎn)品，在詳情頁長按點贊按鈕后，會觸發(fā)全屏的「爆贊」動畫。

 

 

 

 

 

 

再比如用戶生日當(dāng)天，通過啟動頁、彈窗等場景送上生日祝福等等。

 

 

 

 

 

這些能夠超出用戶預(yù)期的細(xì)節(jié)，即便多么細(xì)枝末節(jié)、出現(xiàn)頻率多低，但只要能夠被觸發(fā)，都可能因為驚喜感而生成情緒峰值，加深用戶和產(chǎn)品的情感鏈接。

 

 

 

 

最后

 

以上，便是趣味性背后的情緒挖掘和案例講解。

 

作為設(shè)計師，我們在工作中總是強調(diào)以用戶為中心，通過不斷的調(diào)研、跟訪、可用性測試來了解、分類用戶，但更多的結(jié)果可能只是讓產(chǎn)品不斷得貼合用戶的心智、符合預(yù)期。但如何增加粘度、建立深層鏈接，就需要通過趣味性這種情感化表達(dá)方式，來為用戶制造愉悅、期待甚至驚喜。

 

正像諾曼在「情感與設(shè)計」中說的那樣，每個產(chǎn)品都需要令人更放松、更愉悅的設(shè)計，以此來增強產(chǎn)品的適用性。

 

希望這篇文章能對你有所啟發(fā)。