一種功能模塊設(shè)計(jì)方法——榜單頁面

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

　　概念描述

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

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

　　入口

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

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

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

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

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

　　(泡泡;doki;阿里星球)

　　榜單類型

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

　　音樂榜單

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

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

　　明星榜單

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

　　(泡泡;doki;阿里星球)

　　游戲/粉絲榜單

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

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

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

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

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

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

　　頁面布局

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

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

　　維度切換

　　榜單本身就是帶有強(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)題欄可折疊展開，支持切換不同維度下的榜單內(nèi)容;位置較為顯著，但是操作流程較多;

　　(2)標(biāo)簽

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

　　(3)頁面中入口

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

　　(維度切換入口)

　　互動(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)，提升頁面內(nèi)的用戶互動(dòng)量與頁面留存。

　　(泡泡;doki;阿里星球)

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

　　需要注意的邏輯問題

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

　　(1)簡單路徑

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

　　(2)復(fù)雜路徑

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

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

　　那么問題來了：

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

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

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

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

　　結(jié)語

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