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

　　概念描述

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

　　榜單實(shí)際上是游戲化設(shè)計(jì)方式的一種，與構(gòu)建用戶的榮譽(yù)感緊密相關(guān)，無(wú)論這種榮譽(yù)感是否真正來(lái)自用戶本身，榜單排名總是會(huì)刺激目標(biāo)用戶更深的參與感。

　　入口

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

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

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

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

　　當(dāng)榜單入口出現(xiàn)在次級(jí)頁(yè)面上時(shí)，榜單入口的權(quán)重會(huì)相應(yīng)增強(qiáng)，入口的顯著性也會(huì)隨之提升，在card的占比高度、色彩上會(huì)更加突出。

　　(泡泡;doki;阿里星球)

　　榜單類型

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

　　音樂(lè)榜單

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

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

　　明星榜單

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

　　(泡泡;doki;阿里星球)

　　游戲/粉絲榜單

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

　　(絕地求生-刺激戰(zhàn)場(chǎng);終結(jié)者)

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

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

　　設(shè)計(jì)樣式

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

　　頁(yè)面布局

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

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

　　維度切換

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

　　(1)標(biāo)題欄

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

　　(2)標(biāo)簽

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

　　(3)頁(yè)面中入口

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

　　(維度切換入口)

　　互動(dòng)行為

　　強(qiáng)化露出功能入口，增加評(píng)論、霸屏功能，這些在明星榜單的設(shè)計(jì)中尤為重要，因?yàn)榘駟沃械拿織l內(nèi)容不僅需要用戶點(diǎn)擊查看，更多的目的是為了引導(dǎo)用戶參與互動(dòng)、應(yīng)援、瀏覽，并且與后續(xù)業(yè)務(wù)線對(duì)接，從而形成完整的邏輯閉環(huán)，提升頁(yè)面內(nèi)的用戶互動(dòng)量與頁(yè)面留存。

　　(泡泡;doki;阿里星球)

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

　　需要注意的邏輯問(wèn)題

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

　　(1)簡(jiǎn)單路徑

　　互動(dòng)操作可在當(dāng)前頁(yè)面直接完成，無(wú)需跳轉(zhuǎn)到完整的落地頁(yè)，此時(shí)通過(guò)蒙層或者彈窗形式就可以滿足用戶的互動(dòng)操作。這種處理方式的邏輯較為簡(jiǎn)單清晰，不跳出當(dāng)前的榜單場(chǎng)景，不影響整體邏輯跳轉(zhuǎn);

　　(2)復(fù)雜路徑

　　互動(dòng)操作流程較多或者需要有更多結(jié)果呈現(xiàn)時(shí)，需要引導(dǎo)到對(duì)應(yīng)的落地頁(yè)進(jìn)行互動(dòng)操作，這就實(shí)現(xiàn)了“榜單-互動(dòng)頁(yè)面”的跳轉(zhuǎn)邏輯。

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

　　那么問(wèn)題來(lái)了：

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

　　(榜單與主頁(yè)功能頁(yè)面的邏輯關(guān)系)

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

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

　　結(jié)語(yǔ)

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