編輯導(dǎo)讀：排行榜組件在交互設(shè)計(jì)中常用于表達(dá)用戶(hù)參與深度、產(chǎn)品關(guān)注熱度，通過(guò)榜單營(yíng)造氛圍感，進(jìn)而激勵(lì)用戶(hù)行為。我們常見(jiàn)的形式有游戲化榜單設(shè)計(jì)，這是因?yàn)橛螒蚧駟卧O(shè)計(jì)體驗(yàn)沉浸度往往較高，對(duì)行為對(duì)激勵(lì)效果更加有效，設(shè)計(jì)原理來(lái)源于心流理論，這種由全神貫注所產(chǎn)生的心流體驗(yàn)，被認(rèn)為是一種最佳的體驗(yàn)。

01 榜單目的

1. 用戶(hù)維度

排行榜作為用戶(hù)體驗(yàn)中鏈接篩選、搜索或追趕機(jī)制的中端環(huán)節(jié)，多投放于生活服務(wù)類(lèi)業(yè)務(wù)場(chǎng)景，是一種與用戶(hù)心智模型緊密相關(guān)的情感化設(shè)計(jì)。

心理學(xué)大師佛洛依德說(shuō)過(guò)：“一個(gè)人做事的動(dòng)機(jī)不外乎兩點(diǎn)，性沖動(dòng)和渴望偉大。”

攀比在心理學(xué)上被界定為中性略陰性的心理特征，即個(gè)體發(fā)現(xiàn)自身與參照個(gè)體發(fā)生偏差時(shí)產(chǎn)生負(fù)面情緒的過(guò)程。當(dāng)不同行為之間存在差異化和比較的時(shí)候，我們總是希望比別人更強(qiáng)。排行榜中常用的“追趕機(jī)制”便由此得來(lái)。

而用戶(hù)需求隨認(rèn)知不斷攀升，“馬斯洛需求層次”中提到的社交、需求尊重和自我實(shí)現(xiàn)是情感化設(shè)計(jì)的核心觀點(diǎn)。

如微信運(yùn)動(dòng)的步數(shù)統(tǒng)計(jì)，當(dāng)步數(shù)超越好友并占據(jù)TOP1時(shí)，自定義背景圖還會(huì)出現(xiàn)在好友封面。這一細(xì)節(jié)設(shè)計(jì)極大的滿(mǎn)足了虛榮攀比心理，若想占據(jù)更多人的榜單，就需要投入更多的運(yùn)動(dòng)量，通過(guò)獲取用戶(hù)的真實(shí)行為從而增強(qiáng)了粘性。

微信讀書(shū)通過(guò)每周24h結(jié)算，將用戶(hù)使用數(shù)據(jù)可視化，并結(jié)合用戶(hù)間相互PUSH的交互設(shè)計(jì)，煥發(fā)了“沉默用戶(hù)”的活力，并維系了用戶(hù)間的好友關(guān)系。而通過(guò)好友列表的書(shū)單，也大幅幫助用戶(hù)縮短了篩選的時(shí)間，提升了決策效率。

由此聯(lián)想到螞蟻森林的種樹(shù)模式，或許有朝一日用戶(hù)還可通過(guò)捐贈(zèng)自己的周閱讀量/時(shí)常，以換取購(gòu)書(shū)折扣或兌換紙質(zhì)書(shū)資源，來(lái)幫助貧困地區(qū)的孩子們。

由此根據(jù)用戶(hù)認(rèn)知模型可總結(jié)為以下三點(diǎn)：

• 本能層：尋找權(quán)威，輔助決策，減少關(guān)注成本
• 行為層：激發(fā)參與，場(chǎng)景觸達(dá)，增強(qiáng)粘性
• 反思層：理念認(rèn)同、身份象征、自我實(shí)現(xiàn)

2. 產(chǎn)品維度

獲取數(shù)據(jù)：促活冷啟動(dòng)用戶(hù)/信息流體系，帶動(dòng)UGC模式

精耕運(yùn)營(yíng)：數(shù)據(jù)反雛，帶動(dòng)渠道引流；優(yōu)化流量分配，構(gòu)建盈利模式閉環(huán)

02 內(nèi)容承載形式

榜單的內(nèi)容承載形式通常根據(jù)功能優(yōu)先級(jí)確定，根據(jù)需求采取不同的設(shè)計(jì)策略，多以彈窗和頁(yè)面為主。彈窗排行榜常見(jiàn)場(chǎng)景：短小活動(dòng)中，例如跳一跳，作為一個(gè)快速附件，不打斷操作流程且對(duì)用戶(hù)有即時(shí)的刺激。而頁(yè)面排行榜常見(jiàn)場(chǎng)景則是：稍大型活動(dòng)中，不太能夠刺激用戶(hù)行為，且需要打斷操作的場(chǎng)景。

• 彈窗：信息文字量較少，可讀性強(qiáng)，操作熱區(qū)面積較小且集中、即時(shí)刺激、強(qiáng)引導(dǎo)性
• 頁(yè)面：可視化信息承載量大，多層級(jí)分類(lèi)、差異化排序、沉底錨點(diǎn)個(gè)人定位、長(zhǎng)效周期

03 榜單分類(lèi)

根據(jù)用戶(hù)使用過(guò)程中的決策動(dòng)機(jī)，將排行榜類(lèi)型分為“4+1”類(lèi)。其中用戶(hù)參與型、內(nèi)容搜索型、關(guān)鍵影響因子型和純信息型，是以排行榜本身為載體的功能組件設(shè)計(jì)?！皬?fù)合組件”則作為鏈接前后的過(guò)渡，給予用戶(hù)友好的緩沖體驗(yàn)。

1. 用戶(hù)參與型

游戲類(lèi) 社交類(lèi) 電商類(lèi)

代表案例：王者榮耀、網(wǎng)易狼人殺、消消樂(lè)

特征：頂部切換榜單類(lèi)別、頭部玩家排行置頂、沉底錨點(diǎn)定位個(gè)人信息（追趕機(jī)制）

2. 內(nèi)容搜索型

社交、熱點(diǎn)話題

代表案例：雪球、抖音、微博

特征：可視化標(biāo)簽、多層信息注釋入口、UV反哺?jìng)€(gè)性化推送

3. 關(guān)鍵影響因子型

小游戲、公益類(lèi)、養(yǎng)成類(lèi)

代表案例：螞蟻森林、微信運(yùn)動(dòng)

特征：實(shí)時(shí)動(dòng)態(tài)榜單、關(guān)鍵影響因子數(shù)據(jù)可視化、可操作性變量

4. 純信息型

新聞?lì)悺⒁魳?lè)類(lèi)、讀書(shū)類(lèi)

代表案例：網(wǎng)易云音樂(lè)、樊登讀書(shū)

特征：深度嵌套內(nèi)容主題、沉浸式瀑布分類(lèi)、“不斷電”用戶(hù)體驗(yàn)、定向合輯推送、UV數(shù)據(jù)指標(biāo)

組件小結(jié)：

5. 復(fù)合組件“榜單+篩選”

除了游戲化榜單設(shè)計(jì)，在生活服務(wù)類(lèi)APP使用場(chǎng)景中（如尋找房源、找工作、選購(gòu)商品等），榜單的功能同質(zhì)化于功能排序，有時(shí)也可轉(zhuǎn)換成一種單維度的篩選。當(dāng)內(nèi)容的復(fù)雜性和需要的專(zhuān)注度較高時(shí)，則結(jié)合篩選控件，一起構(gòu)建“用戶(hù)使用搜索前”的閉環(huán)。

常見(jiàn)的復(fù)合組件形式有：?jiǎn)晤l篩選+綜合排序，多重組合篩選。

單頻篩選，是一種入口型篩選。篩選條件作為查詢(xún)結(jié)果的前提，把高頻的篩選項(xiàng)直接用tab展示。設(shè)計(jì)篩選條件時(shí)，最好不要多于三項(xiàng)；較為復(fù)雜且無(wú)必要事先決定的篩選內(nèi)容可放在后續(xù)列表頁(yè)去做二次篩選，提高信息篩選的效率。

單頻篩選+綜合排序，結(jié)合入口型篩選模態(tài)，將需要用戶(hù)決策的其他條件，用抽屜或列表的形式收納在綜合排序框架中。其中，側(cè)邊式設(shè)計(jì)模態(tài)，承載的信息量更多，操作區(qū)域偏右，相對(duì)來(lái)說(shuō)更方便用戶(hù)操作，但對(duì)頁(yè)面阻礙感比較強(qiáng)，需要退出后才能進(jìn)行其他篩選項(xiàng)的選擇；下拉式更方便切換選擇其他的篩選項(xiàng)，且適用于有多層級(jí)聯(lián)動(dòng)的篩選。

飛豬采用單頻加綜合篩選的方式，第一層是常規(guī)篩選，第二層綜合排序，第三個(gè)是獨(dú)立篩選按鈕。有三個(gè)獨(dú)立的篩選入口，分別為位置，星級(jí)和推薦。飛豬在頂部使用了一個(gè)篩選按鈕入口，點(diǎn)開(kāi)會(huì)下拉出現(xiàn)9個(gè)子類(lèi)目，對(duì)應(yīng)右側(cè)提供了單選和復(fù)選兩種狀態(tài)。并將用戶(hù)決策目標(biāo)“標(biāo)簽化”設(shè)計(jì)，及時(shí)標(biāo)注，便于用戶(hù)選擇后進(jìn)行刪減。

用戶(hù)的篩選維度和頻率有高度相關(guān)性，對(duì)于尋找房源來(lái)說(shuō)，最先考慮的可能是地理位置，品牌和星級(jí)，其次是推薦排序。設(shè)計(jì)思路是把高頻的篩選項(xiàng)直接用tab展示，把低頻的篩選項(xiàng)收起。如飛豬在第二層提供了9個(gè)可定制切換的子類(lèi)目，將會(huì)有更高的效率，同樣的操作在攜程需要至少三步甚至更多操作，三級(jí)標(biāo)簽全部外露，大量的信息會(huì)給用戶(hù)造成一定干擾。

同時(shí)，在用戶(hù)完成排序和篩選時(shí)，飛豬使用“查看酒店”，引導(dǎo)用戶(hù)點(diǎn)擊按鈕，使目標(biāo)感更強(qiáng)。而攜程使用的“完成”更像篩選流程的完結(jié)。

04 榜單設(shè)計(jì)總結(jié)

設(shè)計(jì)前期，明確產(chǎn)品目標(biāo)和期望的用戶(hù)行為是什么，該行為是否可以用排行榜組建來(lái)激勵(lì)；

設(shè)計(jì)中期，利用權(quán)重影響因子來(lái)主動(dòng)提高某些場(chǎng)景的價(jià)值預(yù)期

設(shè)計(jì)后期，關(guān)注用戶(hù)操作前后的榜單模態(tài)及反饋

排行榜組建利用榜單營(yíng)造氛圍感，通過(guò)用戶(hù)渴望“榜上有名”和游戲化“追趕機(jī)制”來(lái)影響用戶(hù)，制造“頭部玩家稀缺感”可以刺激用戶(hù)完成期望行為，但也要考慮差異化設(shè)計(jì)會(huì)不會(huì)帶來(lái)不可控但負(fù)面效應(yīng)。

而在“榜單+篩選”復(fù)合組件中，則是一個(gè)幫助用戶(hù)快速定位信息的過(guò)程，目的在于縮短用戶(hù)對(duì)于數(shù)據(jù)的尋找時(shí)間；但在設(shè)計(jì)過(guò)程中往往會(huì)遇到多種維度的排序信息，用戶(hù)對(duì)它們的需求頻次是不同的，設(shè)計(jì)前期不妨先對(duì)各種維度劃分優(yōu)先級(jí)，然后再選擇的合理的篩選的形式，最后根據(jù)信息內(nèi)容多少來(lái)規(guī)劃排序與篩選的展現(xiàn)方式。

本文由 @理財(cái)佳 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

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