2024-9-20 資深UI設(shè)計(jì)者
在互聯(lián)網(wǎng)中，許多產(chǎn)品都有排行榜，但是排行榜應(yīng)該怎么設(shè)計(jì)，如何根據(jù)具體產(chǎn)品思考交互框架、信息？這篇文章會(huì)告訴你。
上次，同事在我旁邊點(diǎn)奶茶，我推薦了一家感覺還不錯(cuò)的奶茶，但他很嫌棄地和我說這家排名不高。我轉(zhuǎn)念一想，好像沒什么不對(duì)，因?yàn)?ldquo;排行榜”在我們生活無處不在。
小時(shí)候讀書，每次出成績，老師都喜歡給我們的成績排名次，第一名就是別人家的孩子。
每次看新聞，要看看什么新聞熱度最高。
每次買東西，要看看什么商品排名最高。
每次吃東西，要看看什么商家評(píng)分最高。
每次看電影，要看看什么電影點(diǎn)評(píng)最高。
當(dāng)你對(duì)某種事物沒有主見，開始詢問別人的意見時(shí)，你就已經(jīng)遵循了別人的看法，而那個(gè)人會(huì)在心里將這種事物排個(gè)序，這是看不見的排行榜。
于是我開始思考，大家為什么相信排行榜？
我們無法想象，做什么東西都需要親自去仔細(xì)對(duì)比會(huì)浪費(fèi)多少時(shí)間和精力。不用動(dòng)腦，直接看別人幫你篩選好的不香嗎？人們往往都很懶，用戶不可能憑個(gè)人精力去比較之后再找到適合自己的，所以最高效的方式就是看排行榜。
我們認(rèn)同的排行榜，基礎(chǔ)的屬性就是“權(quán)威性”，排行榜往往會(huì)基于對(duì)應(yīng)的客觀數(shù)據(jù)，是群體、權(quán)威都認(rèn)同的產(chǎn)物，相對(duì)而言真實(shí)、公正，所以權(quán)威性來源于真實(shí)可信。雖然現(xiàn)在的許多排行榜都是摻雜著商業(yè)利益，但是本質(zhì)上不影響我們對(duì)排行榜的認(rèn)同。當(dāng)然，假如某個(gè)排行榜很離譜，大家也都不會(huì)信。
絕大多數(shù)人都有從眾心理，當(dāng)人們對(duì)某種事物缺乏足夠的認(rèn)知，從眾心理就會(huì)特別明顯。假如你要去旅游，要做攻略，一般都會(huì)看看別人都推薦什么，這就是從眾心理。但是從眾心理并非不好，它可以在人們?cè)谔幚硇畔⒉粚?duì)稱的情況下，做出一種理性的選擇。隨大流，但比較穩(wěn)！采取某種行為的人越多，我們就會(huì)認(rèn)為這種行為越正確，羊群效應(yīng)已經(jīng)向我們?cè)忈屵^這種心理。
上面的效率、權(quán)威、從眾（一般具有準(zhǔn)確性）主要是對(duì)于用戶側(cè)的。此外，排行榜對(duì)“平臺(tái)”、“上榜主體”也有很強(qiáng)的作用。
a.熱度：如果排行榜讓用戶都接受和信服，反過來會(huì)推動(dòng)“上榜主體”和粉絲參與（比如音樂平臺(tái)的打榜），進(jìn)而提升平臺(tái)熱度。
b.決策：排行某種程度上是群體意見的結(jié)果，其他用戶較容易接受，然后快速?zèng)Q策，避免浪費(fèi)太多時(shí)間篩選和糾結(jié)而造成用戶流失。選擇越多，用戶越難選擇，所以給到用戶明確的推薦排行，可以讓不了解的用戶更快決策。
c.權(quán)威：結(jié)果可靠，內(nèi)容真實(shí)的排行榜，對(duì)于提升平臺(tái)權(quán)威性方面的作用是毋庸置疑的。
上榜主體可能是人（如：歌手）或物（如：音樂、電影）
a.流量：用戶看排行榜，大部分情況下想看到的就是排名靠前的內(nèi)容，所以在排行榜前列的主體更容易受到關(guān)注以及流量。
b.榮譽(yù)：想想福布斯富豪榜之類的，榮譽(yù)感很好理解。
c.獲益：獲益主要指商業(yè)或經(jīng)濟(jì)利益，主要基于流量。
常見的排行榜信息主要由以下幾方面構(gòu)成：
榜單名稱應(yīng)該足夠精煉且清晰，要讓用戶一眼知道這是什么榜。切忌使用假大空而用戶看不懂的榜單，因?yàn)檫@毫無信服力。
包含多種信息：主體信息、排序、推薦理由、排名變化、熱度信息。
這些信息并非所有都是必需的，但主體信息和排序是構(gòu)成上榜主體的基本單位。推薦理由、排名變化、熱度信息等都是根據(jù)不同產(chǎn)品類型以及產(chǎn)品策略決定是否展示。
a.主體信息：上榜主體必須有清晰的基本信息，一般是圖片、標(biāo)題、描述以及產(chǎn)品特有信息構(gòu)成。
b.排序：通用的展示方式都是按照數(shù)字，排序最根本目的就是告訴別人，上榜的人/物很強(qiáng)，所以需要十分清晰。
c.推薦理由：推薦理由是針對(duì)上榜的每個(gè)主體的，側(cè)重于簡(jiǎn)練介紹上榜理由。
d.排名變化：排名變化一般包含上升、下降、維持，常常是為了制造榜單的活躍感，讓用戶知道是時(shí)刻變動(dòng)的。另外，也是為了刺激上榜主體通過競(jìng)爭(zhēng)提升或維持排名。對(duì)于有打榜屬性的排行榜，還具有反映實(shí)時(shí)變化的緊張感。
e.熱度信息：通常是榜單平臺(tái)通過活躍等各種指標(biāo)計(jì)算的信息，反映上榜主體的關(guān)注程度。由于熱度本身信息規(guī)則不透明，所以平臺(tái)控制的自主性較強(qiáng)。
榜單規(guī)則是對(duì)某排行榜的排行規(guī)則的描述。根據(jù)情況，可以分成一句話描述和長段描述，依據(jù)榜單性質(zhì)而定。這是權(quán)威性的一部分體現(xiàn)，便于用戶理解榜單的排序方式。大部分榜單列表都會(huì)有榜單描述或規(guī)則說明。
更新信息反映排行榜更新及維護(hù)的頻率，一般常見的有每日/每周更新，表現(xiàn)榜單是活躍且變動(dòng)的。
一般來說，排行榜最重要的就是權(quán)威性（除了娛樂的排行榜等）。權(quán)威性一般有兩個(gè)層面構(gòu)成，分別是外在的呈現(xiàn)方式，內(nèi)在的真實(shí)性。這二者缺一不可，并且某種程度上也是相互融合的！
真實(shí)性除了來自平臺(tái)的客觀數(shù)據(jù)（如熱搜榜的真實(shí)數(shù)據(jù)就是大量用戶搜索），也來自于用戶評(píng)價(jià)（如好評(píng)榜，來自于用戶的好評(píng)），當(dāng)這些權(quán)衡因素保持相對(duì)穩(wěn)定且可信的時(shí)候，榜單就有了真實(shí)性。
那么問題來了，假如榜單是真實(shí)的，那用戶怎么知道呢？表現(xiàn)榜單的真實(shí)性，可以通過規(guī)則介紹、上榜理由、實(shí)際評(píng)價(jià)信息的展示等方式體現(xiàn)。
呈現(xiàn)方式會(huì)很考驗(yàn)視覺的表現(xiàn)能力，榜單設(shè)計(jì)的色彩、排榜方式，甚至標(biāo)簽（如熱度標(biāo)簽、皇冠標(biāo)簽）的設(shè)計(jì)，都會(huì)影響呈現(xiàn)方式的權(quán)威性。人都是視覺動(dòng)物，榜單的設(shè)計(jì)表現(xiàn)對(duì)于權(quán)威性是很大的影響因素。
一個(gè)平臺(tái)的榜單，往往不會(huì)只有一個(gè)，一般都至少有3個(gè)榜單。像音樂、閱讀類的應(yīng)用，榜單更是數(shù)不勝數(shù)。
這時(shí)候，就涉及榜單列表的結(jié)構(gòu)設(shè)計(jì)問題。一般可以根據(jù)榜單類型數(shù)量的多少、呈現(xiàn)榜單類型與榜單詳情二者哪個(gè)優(yōu)先級(jí)更高來判斷。
當(dāng)榜單類型較多，一般排行榜結(jié)構(gòu)會(huì)分成榜單列表（主要展示不同榜單類型）和榜單詳情（主要展示單個(gè)榜單的詳細(xì)內(nèi)容）。
當(dāng)榜單類型較少，榜單類型一般只占據(jù)頂部的位置，作為功能性入口，點(diǎn)擊進(jìn)入某個(gè)榜單詳情。甚至，榜單類型和榜單詳情可以融合成一個(gè)頁面。
假如有多個(gè)榜單詳情頁，榜單詳情的排列盡量保持相同結(jié)構(gòu)，結(jié)構(gòu)清晰，不讓用戶產(chǎn)生疑慮。因?yàn)榘駟闻帕蟹绞經(jīng)Q定著排名在用戶心目中的位置關(guān)系。
用戶瀏覽榜單的場(chǎng)景，往往是沒有明確的需求，易于接受推薦。對(duì)于許多產(chǎn)品而言，榜單對(duì)于商業(yè)化有著不小的商業(yè)價(jià)值。榜單本身具有客觀屬性，如果加入太多商業(yè)化干預(yù)，容易引起內(nèi)容的不客觀性，此時(shí)需要仔細(xì)權(quán)衡。
設(shè)計(jì)榜單時(shí)，需要注意這個(gè)榜單能否滿足用戶需求，相對(duì)明確的榜單而不是只有寬泛的榜單對(duì)用戶有更大的價(jià)值。比如你要聽歌，你的口味一定不是什么歌都聽，所以你不只是聽整個(gè)平臺(tái)最火的那些歌。你可能還喜歡動(dòng)漫歌曲，所以動(dòng)漫歌曲的排行對(duì)你也有很大價(jià)值。
榜單的交互框架上有多種結(jié)構(gòu)，信息呈現(xiàn)上也各有不同。需要根據(jù)自身產(chǎn)品采用適合的設(shè)計(jì)方式，結(jié)構(gòu)上避免散亂、信息上避免過多的信息干擾。
作者：熱風(fēng)_
鏈接：https://www.zcool.com.cn/article/ZMTIxOTQ3Mg==.html
來源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
藍(lán)藍(lán)設(shè)計(jì)(www.cqzjtgb.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。
關(guān)鍵詞：UI咨詢、UI設(shè)計(jì)服務(wù)公司、軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、用戶體驗(yàn)公司、高端網(wǎng)站設(shè)計(jì)公司
銀行金融軟件UI界面設(shè)計(jì)、能源及監(jiān)控軟件UI界面設(shè)計(jì)、氣象行業(yè)UI界面設(shè)計(jì)、軌道交通界面設(shè)計(jì)、地理信息系統(tǒng)GIS UI界面設(shè)計(jì)、航天軍工軟件UI界面設(shè)計(jì)、醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)、教育行業(yè)軟件UI界面設(shè)計(jì)、企業(yè)信息化UI界面設(shè)計(jì)、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.cqzjtgb.com