起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識被忽略的榜單設計
本文我們來了解下關于榜單的概念、榜單的類別和入口形式，以及我們在設計的時候是有哪些元素是可以從游戲榜單中借鑒的呢？
之前曾有朋友跟我說她最近在做榜單，建議我碼一篇榜單的相關文章。說實話我一直覺得市面上移動端做的比較好的榜單樣式不是很多，作為一個從游戲界面設計師轉移動端界面設計師的人來說還是有較大感受的。
因為在游戲場景里，榜單是做為僅次于主界面的頁面，重要程度可想而知，無論大家去看哪個多人對戰或者能看到好友也在玩的手游都可以看到榜單做的很重。沒錯，榜單對激勵用戶確實很重要，然而在移動端App里榜單的一些設計細節往往被設計者忽視了。
那么我們來了解下關于榜單的概念、榜單的類別和入口形式，以及我們在設計的時候是有哪些元素是可以從游戲榜單中借鑒的呢？
一、榜單的概念
榜單是指相同層級信息內容的數量、大小、熱度、流量等發生緯度由高到低的排序。
運用場景：軟件應用市場、娛樂（電影、游戲、音樂）、文學、內容社區、體育競技、教學、金融、購物等。
二、榜單的類別
根據上述基本運用場景我們可以將榜單大致分為：引導類榜單和榮譽類榜單。
- 引導類榜單：主要是針對目的性不強的用戶進行內容引導的選擇，比如：用戶在選擇不同投資項目、挑選合適的書目、聽歌曲等等的時候，榜單的設計會較為輕量。排行層級的區分通常不會等級太明顯。
- 榮譽類榜單：主要是針對目的性較強，用戶參與度較高，需要一些榮譽獎勵的激勵措施來刺激用戶或信息提供者發生一系列行為的榜單類型。從而刺激目標用戶產生更深的參與感。
三、入口形式
榜單的入口一般分一般分為一級入口和二級入口，有的榜單需要點一下即可進入，有的則需要點2下，所有這里我們將一級和二級入口分開進行講解。
3.1 一級入口
一級入口的形式主要分為為圖標類入口、Banner類入口、列表類入口、這3種展示形式。
（1）圖標類入口
大icon圖標類展示：
一般存在于一級頁面的大圖標icon內進行展示，例如簡書的發現-推薦頁的滑動類圖標，蝦米音樂的宮格圖標入口以及QQ音樂的卡片式圖標入口。
例如嗶哩嗶哩的綜合列表標題上方右側展示的排行榜入口，這種當榜單處于較為次要的層級會采用此種類型進行展示。
（2）Banner類入口
Banner輪播類入口：
荔枝的榜單專輯主要以Banner滑動類入口，展示在首頁的圖標入口與大banner入口之間，采用自動輪播的形式展示，并且手指可以滑動進行查看。
Banner側滑類入口：
Banner側滑類入口主要以專輯分類的形式進行展示，通常每個小的專輯單元會包含此專輯內的榜單名次，一般只展示第一名的居多，例如愛奇藝泡泡的泡泡UP榜、騰訊視頻的doki星耀榜。
當然也有展示多個名次，例如阿里星球的排行榜設計一個card展示了3個，這種情況較為少見。
（3）列表類入口
列表展示入口主要分為：縮略列表模塊展示入口和瀑布流列表模塊展示入口。
縮略列表模塊展示入口：
縮略列表模塊展示入口主要以列表的形式進行展示，通常會展示榜單的前幾名，例如：最為常見的App Store。
瀑布流列表模塊展示入口：
通常當榜單處于較為重要的層級的時候進行全屏展示，但當前頁面嗨需要放置部分其他重要入口，所以會采用瀑布流列表模塊展示入口。例如：全民K歌位的猜你喜歡模塊，展示里一系列的不同類別的榜單，當頁面向上滑動的時候，榜單篩選導航會置頂于頁面頂部，此時榜單會以瀑布流的形式，展示加載出所有排名名次。
3.2 二級入口
二級入口通常為榜單類別分類，以專輯的形式進行展示。
我們可以看下蝦米的全球榜以宮格列表的形式進行展示，而蝦米榜以卡片式專輯疊加的形式進行展示。同層級的切換緯度，采用了不同的布局形式豐富了頁面展示的多樣式，傳達出更強的品牌設計感。我們再來看下最為常見的列表式展示形式，例如：QQ音樂就是以專輯列表的縱向形式進行展示的。
關于榜單多單層級和多層級：
當然具體排行榜要采用一層級進入還是二個層級進入這取決于，榜單的類型是否多樣，或者榜單所選取的切換緯度是怎樣的。這里并沒有哪個好，或者哪個不好，還是要根據產品的具體結構布局和當下的需求來進行靈活使用。
四、類別樣式
4.1 引導類榜單樣式
弱層級樣式：
弱層級樣式信息層級非常弱，不需要突顯層次排名。比如QQ音樂的專輯類榜單排名，前三名與后面的名次是沒有什么差別，唯獨用了數字序號來做區分。說明此類只是起到了推薦引導的作用，因為很多時候用戶不曉得要聽什么樣的歌，目的性較弱。
我們再來看下簡書的榜單設計甚至連序號都沒有，只是單純的圖文列表展示。此類App更加注重于沉浸式的閱讀體驗，榜單也僅僅是用戶引導的一個手段，所以不需要做任何區分。
關于度小滿理財的基金排行也同樣沒有任何樣式上的區分，基本是靠年化利率進行前后排名的。這類因為有了明確的數值參數，所以不需要做等級排名。
強層級樣式：
強層級樣式的排名信息區分較為明顯，通常集中在前3名。主要表現形式是通過徽章、數字、數據信息等。
例如：荔枝FM的小時榜采用了徽章、序號、荔枝打賞數據來進行區分。荔枝之前的產品定位從小眾電臺博客轉變為語音直播，娛樂化的互動交友等。由于音頻資源的用戶基礎較強，從小眾音頻博主到大眾化直播交友平臺，參與感有了質的飛躍。
所以榜單在一定程度上對于提高用戶的互動參與感起到了至關重要的作用，所以在設計上需要較強的層級區分，才能夠更吸引用戶參與。
全民K歌也同樣是用戶參與度非常高的App，所以此類App也同樣添加了徽章以及序號進行等級區分，另外還添加了參與K歌的人數數據展示。這樣能夠讓剛進來的用戶快速找到目前最熱門的歌曲，刺激用戶一同參與。
4.2 榮譽類榜單
榮譽類榜單通常分為運營類榜單和游戲類榜單，此類榜單相較于引導類榜單具有更強的層級區分，且層級區分越強越好。例如我們生活中看到的頒獎臺，獲獎者越突出榮譽感則越強。
運營類榜單：
我們先來說說運營類榜單，這類榜單的重點也就是榜單的前3名。通常是套用了領獎臺的形式進行展示，以達到激勵用戶的目的。比如：上圖左一，頭像采用了階梯式大小變化處理，且頭像頂部放置了領獎臺，獎臺上面放置了對應的獎勵物品。這樣使得獎勵機制更直觀，用戶參與度也更高。
上圖右側同樣采用了領獎臺的設計，只不過這里的1、2、3等獎放置在了階梯上面，頭像大小根據等級的不同有所變化。此外頭像下方還放置了等級編號，1等獎采用了皇冠與其它等級進行區分，很好的拉開了差異性。
我們再來看下蝦米的榜單設計，一改普通音樂App的弱化處理方式。不僅將整個頁面的顏色改成了蝦米主色，且將榜單的前10名用數字大小進行了差異化區分。也就是前10名的數字大小是一致的，靠后的名字數字大小一致且小很多。
此外前3名在頁面上基本處于第一屏的位置，用戶想要查看后面的名次勢必需要進行頁面下滑。這里蝦米的榜單設計其實同樣采用的是強運營的形式，QQ音樂和網易音樂一頁都可展示6到7首音樂，而蝦米強化了榜單設計，且與其它頁面風格產生了鮮明的差異性。
那么可能有些同學會產生這樣的疑問，同樣是音樂類App，什么時候用引導類榜單的弱化處理形式，什么時候用榮譽類榜單的強運營處理形式呢？
這里就需要根據產品的風格定位來進行選擇，比如：從產品的娛樂性風格來看的話，我們能很明顯的感受到：蝦米 > QQ 音樂 > 網易云音樂。
自此我們可以總結為產品定位的娛樂性越弱越適合采用引導類榜單的弱化處理形式，娛樂性越強越適合采用譽類榜單的強運營處理形式。當然娛樂性弱的產品一般采用強運營的處理形式是以專題類形式進行展示的，比如運營類榜單的第一個案例。
游戲類榜單：
說到娛樂性強，我們不得不說一下游戲類榜單設計，我們先來觀察下游戲類榜單設計都有哪些特點。
上圖是一直都比較火的王者榮耀手游，我們來看下其榜單設計特點：
- 數字序列區分；
- 數字大小區分；
- 數字字體區分；
- 徽章設計；
- 卡片式設計；
- card顏色或質感區分；
- 等級名稱區分；
- 等級即Lv參數區分；
- 數據區分（星標）。
我們再來看下開心消消樂的設計特點與王者榮耀的共同點分別有1、4、5、6、7、8，基本上通過上述區分游戲類榜單能夠很好的起到激勵用戶的作用。
榮譽類榜單容易存在的設計問題：
了解了榮譽類游戲榜單的特點，我們來看下App榜單設計在借鑒游戲類榜單中容易存在的設計問題：
我們可以看到上圖是想要借鑒游戲類榜單的卡片式設計及card顏色區分，但效果確很不理想。首先卡片的運用方式在整個頁面上看起來很牽強，結合的并不好。其次卡片的顏色運用的又非常突兀，跟整個頁面都很不協調。
我們再看一個結合的較好的正面案例，如下圖：
這個是我之前做的一個安卓應用市場的游戲類App榜單頁面的設計練習，其中卡片的運用就相對比較和諧，且card的顏色及質感區分處理的也并不突兀。所以色彩風格的統一及細節的處理是我們在設計移動端App榜單時，能夠從游戲類App中學習和提煉的地方。
五、總結
這里主要帶大家了解了榜單的概念及榜單的類別，并深入講解了榜單的入口的不同形式及類別的不同樣式及設計細節。
希望對大家在設計榜單的時候有所幫助，謝謝！
作者：角馬X，口袋理財UED設計經理，公眾號：海鹽社
本文由 @角馬X 原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基于CC0協議
學習了
文章總體很棒，贊一個
但文中有個地方說到全民K歌的猜你喜歡模塊，使用的瀑布流形式錯了哦，并不是瀑布流