中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

概念描述

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

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

入口

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

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

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

（網(wǎng)易音樂；QQ音樂；幻音音樂）

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

（泡泡；doki；阿里星球）

榜單類型

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

音樂榜單

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

（網(wǎng)易音樂；QQ音樂；幻音音樂）

明星榜單

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

?

?（泡泡；doki；阿里星球）

游戲/粉絲榜單

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

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

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

（愛豆；OWHAT；泡泡；阿里星球）

設(shè)計樣式

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

頁面布局

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

（榜單頁面通用布局樣式）

維度切換

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

（1）標(biāo)題欄

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

（2）標(biāo)簽

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

（3）頁面中入口

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

（維度切換入口）

互動行為

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

???????????????????????? （泡泡；doki；阿里星球）

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

需要注意的邏輯問題

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

（1）簡單路徑

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

（2）復(fù)雜路徑

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

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

那么問題來了：

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

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

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

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

結(jié)語

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

#專欄作家#

蝦米&胖喵，微信公眾號：pangmiaodesign，人人都是產(chǎn)品經(jīng)理專欄作家。高級交互設(shè)計師（百度/愛奇藝），夫妻搭檔，貓奴。曾做過公益產(chǎn)品、影音媒體產(chǎn)品，目前專注于企業(yè)級產(chǎn)品、娛樂社區(qū)產(chǎn)品體驗設(shè)計。“有貓，就有一萬種美好！”

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Unsplash，基于 CC0 協(xié)議