回顧了一下以前的文章，發現很多都是在討論某個功能模塊的設計方法，包括搜索、passport、應援等，目前按照后續的安排，還會繼續輸出一些具體功能模塊的設計方法，力求更加接地氣，更加有實用性。那么今天就來聊一聊下一種功能模塊設計方法——榜單頁面。

　　概念描述

　　榜單模塊，第一直覺上就是對一類具有相同維度或者屬性的內容進行排序并呈現的模塊;大家的聯想思維大部分會落在明星、電影、游戲大神排名等領域，或者App Store、豆瓣上的排名，可見榜單其實應用的范圍很廣，沒有絕對的使用限制，在內容類、游戲的APP中更加常見。

　　榜單實際上是游戲化設計方式的一種，與構建用戶的榮譽感緊密相關，無論這種榮譽感是否真正來自用戶本身，榜單排名總是會刺激目標用戶更深的參與感。

　　入口

　　無獨有偶，榜單頁面是相似內容的聚合，因此在正常邏輯下不會成為產品主頁，一般是一個二級頁或者展開頁面，因此也就必然存在對應進入的入口;

　　榜單入口根據所處頁面層級的不同，在設計上有顯著化與普通處理兩種方式。

　　當榜單入口出現在主頁上時，由于還有更多其他高權重信息或者功能需要露出，因此榜單入口一般會設計成并列的標簽樣式(icon或者文字入口)，或者與其他內容通過同質化的樣式顯示;

　　(網易音樂;QQ音樂;幻音音樂)

　　當榜單入口出現在次級頁面上時，榜單入口的權重會相應增強，入口的顯著性也會隨之提升，在card的占比高度、色彩上會更加突出。

　　(泡泡;doki;阿里星球)

　　榜單類型

　　依據不同的內容內容類型，榜單設計樣式也有著迥異的風格，主要來看一下音樂、明星、游戲/粉絲榜單的設計樣式。

　　音樂榜單

　　由于音樂需要消費時間去欣賞，用戶無法在頁面中根據meta信息更加直觀的感受到榜單中音樂的內容，因此榜單的排行規則就顯得尤為重要，或者說是榜單的標題。音樂榜單頁面的頭部會突出顯示榜單標題和類型，便于用戶快速識別;榜單列表中會設置對應的播放、選擇、緩存、分享等功能操作。

　　(網易音樂;QQ音樂;幻音音樂)

　　明星榜單

　　明星榜單主要是呈現明星的影響力排行，排名依據主要是粉絲用戶在平臺上的相關互動行為，包括打榜、應援、互動等，對于用戶而言，明星個人形象在榜單中是最重要的，尤其所處前3名位置。明星榜單的設計主要會優先突出當前首位明星，作為頁面頭圖展示，這與當前的用戶流量息息相關;其次是錢3面用戶信息突強化顯示，無論是在頭像的尺寸、裝飾設計、色彩以及meta信息數量上都會更加突出。

　　(泡泡;doki;阿里星球)

　　游戲/粉絲榜單

　　游戲化的榜單設計在游戲排名的設計中反而比較中規中矩，因為游戲榜單中的排名內容不是音樂、明星等這類用戶可以直接用來消費的內容，主要是呈現游戲用戶排名，所以游戲榜單設計更加傾向于展示更多排名信息，，突出上榜前3名，突出展示用戶自己當前的排名位置，但是由于游戲橫屏頁面的特殊性，列表樣式在縱向排列的高度上受限，所以在設計樣式上有一定的限制。

　　(絕地求生-刺激戰場;終結者)

　　粉絲榜單與游戲排名榜單類似，但是鑒于豎屏的樣式，頁面布局上會有更多特異化的設計樣式，前三名的信息同樣可以顯著顯示。

　　(愛豆;OWHAT;泡泡;阿里星球)

　　設計樣式

　　從上述的分類案例就可以看出來，盡管榜單呈現的信息內容不同，但是整體上都是使用了列表的樣式，同時為了增加游戲化效果，會突出顯示前3名或者第一名，用以刺激用戶的榮譽感，而這幾種方式也就直接鏈接到了下一部分要講的內容——互動。

　　頁面布局

　　言歸正傳，榜單的相對完整的通用設計樣式主要是：特異化呈現的頭部+特異化的前三名+列表;如果當前榜單與用戶行為有直接關聯，一般會根據需求放上“我的排名”相關信息突出顯示，刺激用戶參與。

　　(榜單頁面通用布局樣式)

　　維度切換

　　榜單本身就是帶有強烈的時間屬性，因此在榜單呈現維度上，除了分類條件以外，時間也是一個重要的篩選標準。根據兩種維度對于產品策略的重要性的不同，可以在三個位置上進行設計：

　　(1)標題欄

　　標題欄可折疊展開，支持切換不同維度下的榜單內容;位置較為顯著，但是操作流程較多;

　　(2)標簽

　　頁面頂部標簽是常用的切換方式，在榜單中同樣適用;橫向滑動或者點擊切換標簽時，需要的交互成本較高，因此標簽數量設置不宜過多;另一方面，鑒于榜單內容的特殊性，時間維度的跨度較大，日榜、周榜、月榜、年榜都有可能出現，所以標簽樣式不適合時間維度切換，更多使用與切換分類維度;

　　(3)頁面中入口

　　維度切換入口存在于頁面或者列表中，在設計樣式上可以突出，用戶需要點擊展開選擇器來選擇頁面內容;由于所處位置原因，切換該維度時，用戶更加直覺理解是對榜單局部內容進行切換，榜單的主題屬性不變，因此頁面中的切換入口，亦是時間維度切換更加常見。

　　(維度切換入口)

　　互動行為

　　強化露出功能入口，增加評論、霸屏功能，這些在明星榜單的設計中尤為重要，因為榜單中的每條內容不僅需要用戶點擊查看，更多的目的是為了引導用戶參與互動、應援、瀏覽，并且與后續業務線對接，從而形成完整的邏輯閉環，提升頁面內的用戶互動量與頁面留存。

　　(泡泡;doki;阿里星球)

　　但是，需要注意的是，增加互動入口是需要注意一個邏輯循環問題。

　　需要注意的邏輯問題

　　在榜單中出現互動入口后，存在兩種處理方式：

　　(1)簡單路徑

　　互動操作可在當前頁面直接完成，無需跳轉到完整的落地頁，此時通過蒙層或者彈窗形式就可以滿足用戶的互動操作。這種處理方式的邏輯較為簡單清晰，不跳出當前的榜單場景，不影響整體邏輯跳轉;

　　(2)復雜路徑

　　互動操作流程較多或者需要有更多結果呈現時，需要引導到對應的落地頁進行互動操作，這就實現了“榜單-互動頁面”的跳轉邏輯。

　　但是，這里先插一個邏輯，就是這個主頁功能頁面。主頁功能頁面主要承載可供用戶消費的核心信息和互動區域。以供用戶消費的核心信息的存在很容易理解，沒有對應的內容可消費，用戶何來互動意愿?互動區域中需要刺激用戶的互動欲望，因此從完整性和一致性上考慮，產品必然會將對應的單一榜單信息和全部榜單入口置入，從而構建該頁面內容的完整生態，可進行互動操作，同時點擊榜單入口可跳轉至全部榜單頁面。

　　那么問題來了：

　　榜單頁面存在互動入口，主頁功能頁面的互動區配置榜單入口，二者沒有明確的包含關系，也就不存在邏輯上的包容性，所以就會形成如下圖一樣的循環路徑。用戶可以無限循環操作下去，點擊返回時候也會不斷在功能主頁和榜單頁面之間切換，對體驗造成一定的損害。

　　(榜單與主頁功能頁面的邏輯關系)

　　因此，在設計榜單頁面時，不僅需要考慮頁面本身的內容布局、交互方式，同樣需要延伸思維領域，考慮與其他相關頁面之間的邏輯跳轉。

　　不過，這種邏輯的循環并不是bug引起的，而是正常的進程，所以對于一般的產品而言，往往不會對當前邏輯進行獨立的處理，畢竟這會大幅增加前端的邏輯處理負擔;此類進程只要返回邏輯清晰，流程順暢，一般也不會出現問題;不過，若果面對的產品是一個細節控的話，那就需要對此類的邏輯進行一個新的處理，例如，默認進入到主頁功能后，可以殺死之前的進程，這樣再次返回時就不會再走榜單頁面的流程，進而簡單粗暴地打破循環邏輯，不過這種處理也較為突兀，需要謹慎使用。

　　結語

　　榜單頁面設計中更多涉及到的是對信息架構的處理，如何排布同類信息，同時做到突出重點內容，增加互動入口，將維度切換進行合理化配置;同時，更高階的處理是把握榜單頁面和其他頁面之間的邏輯關系，理清頁面間的跳轉流程，采用合理的方式處理循環問題。