本文我們來(lái)了解下關(guān)于榜單的概念、榜單的類別和入口形式，以及我們?cè)谠O(shè)計(jì)的時(shí)候是有哪些元素是可以從游戲榜單中借鑒的呢？

之前曾有朋友跟我說(shuō)她最近在做榜單，建議我碼一篇榜單的相關(guān)文章。說(shuō)實(shí)話我一直覺(jué)得市面上移動(dòng)端做的比較好的榜單樣式不是很多，作為一個(gè)從游戲界面設(shè)計(jì)師轉(zhuǎn)移動(dòng)端界面設(shè)計(jì)師的人來(lái)說(shuō)還是有較大感受的。

因?yàn)樵谟螒驁?chǎng)景里，榜單是做為僅次于主界面的頁(yè)面，重要程度可想而知，無(wú)論大家去看哪個(gè)多人對(duì)戰(zhàn)或者能看到好友也在玩的手游都可以看到榜單做的很重。沒(méi)錯(cuò)，榜單對(duì)激勵(lì)用戶確實(shí)很重要，然而在移動(dòng)端App里榜單的一些設(shè)計(jì)細(xì)節(jié)往往被設(shè)計(jì)者忽視了。

那么我們來(lái)了解下關(guān)于榜單的概念、榜單的類別和入口形式，以及我們?cè)谠O(shè)計(jì)的時(shí)候是有哪些元素是可以從游戲榜單中借鑒的呢？

一、榜單的概念

榜單是指相同層級(jí)信息內(nèi)容的數(shù)量、大小、熱度、流量等發(fā)生緯度由高到低的排序。

運(yùn)用場(chǎng)景：軟件應(yīng)用市場(chǎng)、娛樂(lè)（電影、游戲、音樂(lè)）、文學(xué)、內(nèi)容社區(qū)、體育競(jìng)技、教學(xué)、金融、購(gòu)物等。

二、榜單的類別

根據(jù)上述基本運(yùn)用場(chǎng)景我們可以將榜單大致分為：引導(dǎo)類榜單和榮譽(yù)類榜單。

• 引導(dǎo)類榜單：主要是針對(duì)目的性不強(qiáng)的用戶進(jìn)行內(nèi)容引導(dǎo)的選擇，比如：用戶在選擇不同投資項(xiàng)目、挑選合適的書目、聽歌曲等等的時(shí)候，榜單的設(shè)計(jì)會(huì)較為輕量。排行層級(jí)的區(qū)分通常不會(huì)等級(jí)太明顯。
• 榮譽(yù)類榜單：主要是針對(duì)目的性較強(qiáng)，用戶參與度較高，需要一些榮譽(yù)獎(jiǎng)勵(lì)的激勵(lì)措施來(lái)刺激用戶或信息提供者發(fā)生一系列行為的榜單類型。從而刺激目標(biāo)用戶產(chǎn)生更深的參與感。

三、入口形式

榜單的入口一般分一般分為一級(jí)入口和二級(jí)入口，有的榜單需要點(diǎn)一下即可進(jìn)入，有的則需要點(diǎn)2下，所有這里我們將一級(jí)和二級(jí)入口分開進(jìn)行講解。

3.1 一級(jí)入口

一級(jí)入口的形式主要分為為圖標(biāo)類入口、Banner類入口、列表類入口、這3種展示形式。

（1）圖標(biāo)類入口

大icon圖標(biāo)類展示：

一般存在于一級(jí)頁(yè)面的大圖標(biāo)icon內(nèi)進(jìn)行展示，例如簡(jiǎn)書的發(fā)現(xiàn)-推薦頁(yè)的滑動(dòng)類圖標(biāo)，蝦米音樂(lè)的宮格圖標(biāo)入口以及QQ音樂(lè)的卡片式圖標(biāo)入口。

例如嗶哩嗶哩的綜合列表標(biāo)題上方右側(cè)展示的排行榜入口，這種當(dāng)榜單處于較為次要的層級(jí)會(huì)采用此種類型進(jìn)行展示。

（2）Banner類入口

Banner輪播類入口：

荔枝的榜單專輯主要以Banner滑動(dòng)類入口，展示在首頁(yè)的圖標(biāo)入口與大banner入口之間，采用自動(dòng)輪播的形式展示，并且手指可以滑動(dòng)進(jìn)行查看。

Banner側(cè)滑類入口：

Banner側(cè)滑類入口主要以專輯分類的形式進(jìn)行展示，通常每個(gè)小的專輯單元會(huì)包含此專輯內(nèi)的榜單名次，一般只展示第一名的居多，例如愛(ài)奇藝泡泡的泡泡UP榜、騰訊視頻的doki星耀榜。

當(dāng)然也有展示多個(gè)名次，例如阿里星球的排行榜設(shè)計(jì)一個(gè)card展示了3個(gè)，這種情況較為少見(jiàn)。

（3）列表類入口

列表展示入口主要分為：縮略列表模塊展示入口和瀑布流列表模塊展示入口。

縮略列表模塊展示入口：

縮略列表模塊展示入口主要以列表的形式進(jìn)行展示，通常會(huì)展示榜單的前幾名，例如：最為常見(jiàn)的App Store。

瀑布流列表模塊展示入口：

通常當(dāng)榜單處于較為重要的層級(jí)的時(shí)候進(jìn)行全屏展示，但當(dāng)前頁(yè)面嗨需要放置部分其他重要入口，所以會(huì)采用瀑布流列表模塊展示入口。例如：全民K歌位的猜你喜歡模塊，展示里一系列的不同類別的榜單，當(dāng)頁(yè)面向上滑動(dòng)的時(shí)候，榜單篩選導(dǎo)航會(huì)置頂于頁(yè)面頂部，此時(shí)榜單會(huì)以瀑布流的形式，展示加載出所有排名名次。

3.2 二級(jí)入口

二級(jí)入口通常為榜單類別分類，以專輯的形式進(jìn)行展示。

我們可以看下蝦米的全球榜以宮格列表的形式進(jìn)行展示，而蝦米榜以卡片式專輯疊加的形式進(jìn)行展示。同層級(jí)的切換緯度，采用了不同的布局形式豐富了頁(yè)面展示的多樣式，傳達(dá)出更強(qiáng)的品牌設(shè)計(jì)感。我們?cè)賮?lái)看下最為常見(jiàn)的列表式展示形式，例如：QQ音樂(lè)就是以專輯列表的縱向形式進(jìn)行展示的。

關(guān)于榜單多單層級(jí)和多層級(jí)：

當(dāng)然具體排行榜要采用一層級(jí)進(jìn)入還是二個(gè)層級(jí)進(jìn)入這取決于，榜單的類型是否多樣，或者榜單所選取的切換緯度是怎樣的。這里并沒(méi)有哪個(gè)好，或者哪個(gè)不好，還是要根據(jù)產(chǎn)品的具體結(jié)構(gòu)布局和當(dāng)下的需求來(lái)進(jìn)行靈活使用。

四、類別樣式

4.1 引導(dǎo)類榜單樣式

弱層級(jí)樣式：

弱層級(jí)樣式信息層級(jí)非常弱，不需要突顯層次排名。比如QQ音樂(lè)的專輯類榜單排名，前三名與后面的名次是沒(méi)有什么差別，唯獨(dú)用了數(shù)字序號(hào)來(lái)做區(qū)分。說(shuō)明此類只是起到了推薦引導(dǎo)的作用，因?yàn)楹芏鄷r(shí)候用戶不曉得要聽什么樣的歌，目的性較弱。

我們?cè)賮?lái)看下簡(jiǎn)書的榜單設(shè)計(jì)甚至連序號(hào)都沒(méi)有，只是單純的圖文列表展示。此類App更加注重于沉浸式的閱讀體驗(yàn)，榜單也僅僅是用戶引導(dǎo)的一個(gè)手段，所以不需要做任何區(qū)分。

關(guān)于度小滿理財(cái)?shù)幕鹋判幸餐瑯記](méi)有任何樣式上的區(qū)分，基本是靠年化利率進(jìn)行前后排名的。這類因?yàn)橛辛嗣鞔_的數(shù)值參數(shù)，所以不需要做等級(jí)排名。

強(qiáng)層級(jí)樣式：

強(qiáng)層級(jí)樣式的排名信息區(qū)分較為明顯，通常集中在前3名。主要表現(xiàn)形式是通過(guò)徽章、數(shù)字、數(shù)據(jù)信息等。

例如：荔枝FM的小時(shí)榜采用了徽章、序號(hào)、荔枝打賞數(shù)據(jù)來(lái)進(jìn)行區(qū)分。荔枝之前的產(chǎn)品定位從小眾電臺(tái)博客轉(zhuǎn)變?yōu)檎Z(yǔ)音直播，娛樂(lè)化的互動(dòng)交友等。由于音頻資源的用戶基礎(chǔ)較強(qiáng)，從小眾音頻博主到大眾化直播交友平臺(tái)，參與感有了質(zhì)的飛躍。

所以榜單在一定程度上對(duì)于提高用戶的互動(dòng)參與感起到了至關(guān)重要的作用，所以在設(shè)計(jì)上需要較強(qiáng)的層級(jí)區(qū)分，才能夠更吸引用戶參與。

全民K歌也同樣是用戶參與度非常高的App，所以此類App也同樣添加了徽章以及序號(hào)進(jìn)行等級(jí)區(qū)分，另外還添加了參與K歌的人數(shù)數(shù)據(jù)展示。這樣能夠讓剛進(jìn)來(lái)的用戶快速找到目前最熱門的歌曲，刺激用戶一同參與。

4.2 榮譽(yù)類榜單

榮譽(yù)類榜單通常分為運(yùn)營(yíng)類榜單和游戲類榜單，此類榜單相較于引導(dǎo)類榜單具有更強(qiáng)的層級(jí)區(qū)分，且層級(jí)區(qū)分越強(qiáng)越好。例如我們生活中看到的頒獎(jiǎng)臺(tái)，獲獎(jiǎng)?wù)咴酵怀鰳s譽(yù)感則越強(qiáng)。

運(yùn)營(yíng)類榜單：

我們先來(lái)說(shuō)說(shuō)運(yùn)營(yíng)類榜單，這類榜單的重點(diǎn)也就是榜單的前3名。通常是套用了領(lǐng)獎(jiǎng)臺(tái)的形式進(jìn)行展示，以達(dá)到激勵(lì)用戶的目的。比如：上圖左一，頭像采用了階梯式大小變化處理，且頭像頂部放置了領(lǐng)獎(jiǎng)臺(tái)，獎(jiǎng)臺(tái)上面放置了對(duì)應(yīng)的獎(jiǎng)勵(lì)物品。這樣使得獎(jiǎng)勵(lì)機(jī)制更直觀，用戶參與度也更高。

上圖右側(cè)同樣采用了領(lǐng)獎(jiǎng)臺(tái)的設(shè)計(jì)，只不過(guò)這里的1、2、3等獎(jiǎng)放置在了階梯上面，頭像大小根據(jù)等級(jí)的不同有所變化。此外頭像下方還放置了等級(jí)編號(hào)，1等獎(jiǎng)采用了皇冠與其它等級(jí)進(jìn)行區(qū)分，很好的拉開了差異性。

我們?cè)賮?lái)看下蝦米的榜單設(shè)計(jì)，一改普通音樂(lè)App的弱化處理方式。不僅將整個(gè)頁(yè)面的顏色改成了蝦米主色，且將榜單的前10名用數(shù)字大小進(jìn)行了差異化區(qū)分。也就是前10名的數(shù)字大小是一致的，靠后的名字?jǐn)?shù)字大小一致且小很多。

此外前3名在頁(yè)面上基本處于第一屏的位置，用戶想要查看后面的名次勢(shì)必需要進(jìn)行頁(yè)面下滑。這里蝦米的榜單設(shè)計(jì)其實(shí)同樣采用的是強(qiáng)運(yùn)營(yíng)的形式，QQ音樂(lè)和網(wǎng)易音樂(lè)一頁(yè)都可展示6到7首音樂(lè)，而蝦米強(qiáng)化了榜單設(shè)計(jì)，且與其它頁(yè)面風(fēng)格產(chǎn)生了鮮明的差異性。

那么可能有些同學(xué)會(huì)產(chǎn)生這樣的疑問(wèn)，同樣是音樂(lè)類App，什么時(shí)候用引導(dǎo)類榜單的弱化處理形式，什么時(shí)候用榮譽(yù)類榜單的強(qiáng)運(yùn)營(yíng)處理形式呢？

這里就需要根據(jù)產(chǎn)品的風(fēng)格定位來(lái)進(jìn)行選擇，比如：從產(chǎn)品的娛樂(lè)性風(fēng)格來(lái)看的話，我們能很明顯的感受到：蝦米 > QQ 音樂(lè) > 網(wǎng)易云音樂(lè)。

自此我們可以總結(jié)為產(chǎn)品定位的娛樂(lè)性越弱越適合采用引導(dǎo)類榜單的弱化處理形式，娛樂(lè)性越強(qiáng)越適合采用譽(yù)類榜單的強(qiáng)運(yùn)營(yíng)處理形式。當(dāng)然娛樂(lè)性弱的產(chǎn)品一般采用強(qiáng)運(yùn)營(yíng)的處理形式是以專題類形式進(jìn)行展示的，比如運(yùn)營(yíng)類榜單的第一個(gè)案例。

游戲類榜單：

說(shuō)到娛樂(lè)性強(qiáng)，我們不得不說(shuō)一下游戲類榜單設(shè)計(jì)，我們先來(lái)觀察下游戲類榜單設(shè)計(jì)都有哪些特點(diǎn)。

上圖是一直都比較火的王者榮耀手游，我們來(lái)看下其榜單設(shè)計(jì)特點(diǎn)：

1. 數(shù)字序列區(qū)分；
2. 數(shù)字大小區(qū)分；
3. 數(shù)字字體區(qū)分；
4. 徽章設(shè)計(jì)；
5. 卡片式設(shè)計(jì)；
6. card顏色或質(zhì)感區(qū)分；
7. 等級(jí)名稱區(qū)分；
8. 等級(jí)即Lv參數(shù)區(qū)分；
9. 數(shù)據(jù)區(qū)分（星標(biāo)）。

我們?cè)賮?lái)看下開心消消樂(lè)的設(shè)計(jì)特點(diǎn)與王者榮耀的共同點(diǎn)分別有1、4、5、6、7、8，基本上通過(guò)上述區(qū)分游戲類榜單能夠很好的起到激勵(lì)用戶的作用。

榮譽(yù)類榜單容易存在的設(shè)計(jì)問(wèn)題：

了解了榮譽(yù)類游戲榜單的特點(diǎn)，我們來(lái)看下App榜單設(shè)計(jì)在借鑒游戲類榜單中容易存在的設(shè)計(jì)問(wèn)題：

我們可以看到上圖是想要借鑒游戲類榜單的卡片式設(shè)計(jì)及card顏色區(qū)分，但效果確很不理想。首先卡片的運(yùn)用方式在整個(gè)頁(yè)面上看起來(lái)很牽強(qiáng)，結(jié)合的并不好。其次卡片的顏色運(yùn)用的又非常突兀，跟整個(gè)頁(yè)面都很不協(xié)調(diào)。

我們?cè)倏匆粋€(gè)結(jié)合的較好的正面案例，如下圖：

這個(gè)是我之前做的一個(gè)安卓應(yīng)用市場(chǎng)的游戲類App榜單頁(yè)面的設(shè)計(jì)練習(xí)，其中卡片的運(yùn)用就相對(duì)比較和諧，且card的顏色及質(zhì)感區(qū)分處理的也并不突兀。所以色彩風(fēng)格的統(tǒng)一及細(xì)節(jié)的處理是我們?cè)谠O(shè)計(jì)移動(dòng)端App榜單時(shí)，能夠從游戲類App中學(xué)習(xí)和提煉的地方。

五、總結(jié)

這里主要帶大家了解了榜單的概念及榜單的類別，并深入講解了榜單的入口的不同形式及類別的不同樣式及設(shè)計(jì)細(xì)節(jié)。

希望對(duì)大家在設(shè)計(jì)榜單的時(shí)候有所幫助，謝謝！

作者：角馬X，口袋理財(cái)U(kuò)ED設(shè)計(jì)經(jīng)理，公眾號(hào)：海鹽社

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

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