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

　　概念描述

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

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

　　入口

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

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

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

　　(網(wǎng)易音樂;QQ音樂;幻音音樂)

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

　　(泡泡;doki;阿里星球)

　　榜單類型

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

　　音樂榜單

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

　　(網(wǎng)易音樂;QQ音樂;幻音音樂)

　　明星榜單

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

　　(泡泡;doki;阿里星球)

　　游戲/粉絲榜單

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

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

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

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

　　設計樣式

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

　　頁面布局

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

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

　　維度切換

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

　　(1)標題欄

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

　　(2)標簽

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

　　(3)頁面中入口

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

　　(維度切換入口)

　　互動行為

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

　　(泡泡;doki;阿里星球)

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

　　需要注意的邏輯問題

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

　　(1)簡單路徑

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

　　(2)復雜路徑

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

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

　　那么問題來了：

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

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

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

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

　　結語

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