移動端排行榜設計該怎么做?

  • A+
所屬分類:經驗思維

本文來源: 潘團子(公眾號:海鹽社), 共 2725 字

排行榜想必大家都不陌生,說到它的設計大家可能會想問,這有什么好值得研究的?的確說到排行榜的設計大家腦子里可能浮現的都是按照數字排好或者設計一個類似階梯式領獎臺而已。

但是我最近在找界面的時候發現,很多排行榜都在變得簡潔,同時表現形式也各有不同,比如都有哪些形式?需要放圖片嗎?放左還是放右?圖片放多大?前三名怎么展現?不同的產品使用可以用一樣的表現形式嗎?我們今天就來好好研究一下這些我們設計的時候經常會遇到的問題。

排行榜存在的意義

排行榜的存在就是在用戶面對海量信息時,讓他們能夠選取最容易獲取且有公信力的信息,減少思考的成本。

排行榜入口的表現形式

首先我們先來看看排行榜的入口,它的表現形式有很多,我們歸類為以下三個方面:

1、搜索頁下方

2、頁面tab

3、列表入口

4、金剛區圖標

1、搜索頁下方

其表現是為在點擊搜索框之后,底部出現榜單,幫助用戶在沒有明確搜索目的下,找到自己想搜索的內容,如下圖所示:

移動端排行榜設計該怎么做?

使用場景:一般使用在電商類以及內容類產品的搜索頁中,適用于主題或集合的榜單,不指向某一個很明確的單品排行。

以天貓和淘寶為例,直接在搜索頁出榜單詳細信息,而抖音則是多種不同類型的榜單布局在頁面,這種榜單的優先級比較高,因為在這兩種類型的產品中,搜索使用的頻次是比較高的,在搜索頁中展示,能夠幫助用戶快速找到感興趣的內容。

還有一種情況是位于搜索器的下方,比如說微博:

移動端排行榜設計該怎么做?

微博熱搜大家應該都不陌生,但是他的表現形式其實是比較特別的,在搜索器的下方出現的首頁其實是沒有排名的,點擊更多熱搜才會出現。

2、頁面tab

榜單在首頁的底部以頂部tab欄的形式出現,如下圖所示:

移動端排行榜設計該怎么做?

使用場景:適合使用在以UGC或者文字信息為核心的產品中,以具體的內容信息為主。

以知乎和36氪為主,兩者都是以信息為主的產品,熱榜位于首頁頂部tab中,知乎的熱搜下還會存在信息的分類,排在關注和推薦的后面,整體的優先級別比較低。

3、列表入口

這里分為兩種列表,先說第一種的縮略圖列表的形式展示入口,能夠橫向左右切換,占地面積比較小,往往會以模塊的形式插入頁面中,如下圖所示:

移動端排行榜設計該怎么做?

使用場景:通常是展示榜單的前幾名,并且以不同的分類或者具體的產品排名為主,適合產品類別比較多的產品。

上圖中的三個產品的榜單都是以具體的產品排名為主,并且有不同的分類,這種榜單會比較明確一點,在橫向的切換能夠在最大程度的擴大屏幕空間的利用率。

除了上面說的這種列表表現形式,還有另外一種,如下圖所示:

移動端排行榜設計該怎么做?

上圖中雖然顯示也是榜單的前六名,但是不同于上面的縮略圖,這里的布局整個是由圖片撐起來的,在視覺上能夠比縮略圖的吸引用戶。

4、金剛區圖標

將排行榜放在首頁金剛區中,說明這個功能在產品中的占比還是比較重要的,如下圖所示:

移動端排行榜設計該怎么做?

使用場景:適用于音樂類和內容推薦類的產品中,雖然只是個圖標,但是優先層級最高。

蝦米音樂、音遇和豆瓣都將排行榜放在首頁的金剛區中,原因也是因為這兩種類型的產品比較依賴于榜單,能夠快速幫助用戶選擇,減少用戶選擇的成本。

排行榜的內部展現形式

上面介紹完了排行榜的入口,我們接下來繼續看看二級頁面的表現形式吧!

1、純文字展示為主

這種類型的排行榜表現形式最為簡單,文字搭配排名,如下圖所示:

移動端排行榜設計該怎么做?

上圖中的三個產品的榜單設計就是選擇純文字的設計,文字后面加上數字更具有直觀性,當然其中最出彩的為微博的榜單,在列表添加了“熱”、“新”和“沸”等字樣,能夠更好的引導用戶點擊查看榜單的信息。

圖中的三個例子包括電商和社交產品,小紅書和微博榜單的選擇都是文字,主要也是因為內容就是產品的核心,但是天貓是純文字是什么原因我還沒有想到,主要淘寶的排行榜就是圖文結合,有知道的小伙伴可以評論區留言一起討論噢!

2、左文字右圖

在圖文結合的榜單中,圖片與內容信息應該有一定的對比。盡管榜單一定是以文字為主,但圖片的加入能夠更好的輔助用戶閱讀,具體如何搭配使用呢?首先我們先說的是第一種左文字右圖片的搭配,如下圖所示:

移動端排行榜設計該怎么做?

這幾個產品的榜單都是使用的左文字右圖的形式,根據用戶的閱讀習慣來說,這樣設計是因為榜單內容的重點大于圖片,而且從產品設計上來看,圖片比例也是不同的,如下圖所示:

移動端排行榜設計該怎么做?

36氪和大眾點評使用的是1:1的圖片比例,而知乎則是使用的3:2的比例,從界面上看,3:2的比例能夠承載更多的信息,但是1:1的信息則是讓界面更加簡潔,因為文字的信息是根據圖片的高度來進行設計的。

左文字右圖的榜單設計大多出現在信息類的產品中,因為整體的榜單設計視覺上并不突出,圖片的比例可選擇3:2和1:1,根據產品本身榜單的外露信息來決定選擇哪種比例。同時前三的設計也很簡單,用數字搭配不同的顏色,也是因為信息類的榜單并不需要用戶投入過多的精力及時間,僅作為信息熱點的排名。

3、左圖右文字

我們接著來看看左圖右文字是怎么來設計的,如下圖所示:

移動端排行榜設計該怎么做?

相對于上面的那種屬于文字信息比較重要的產品,這種就屬于圖片的吸引比文字要大,因此對文案的要求沒有那么高,但對圖片的信息要求就比較高,因為在用戶對于作品不熟悉的情況下就是根據封面來進行選擇的,那么圖片的尺寸要怎么來定呢?如下圖所示:

移動端排行榜設計該怎么做?

三者的圖片比例都是4:3,個人認為是因為這個尺寸更適合于閱讀,因為大多數的書籍尺寸更接近于4:3,因此在圖片偏重比較高的界面中,將圖片的尺寸設計成最適合的閱讀大小,能夠更快速的幫助用戶查看界面。

因此在以圖片為主的界面中,圖片的比例大小為4:3最為合適,而且這種界面前三的視覺設計也會比較重,也是因為在圖片占比比較重的情況下用設計感強的名次,能夠達到視覺平衡的作用。

4、領獎臺

領獎臺顧名思義就是將排行榜排名前三的信息,按照奧運會的領獎臺來設計,如下圖所示:

移動端排行榜設計該怎么做?

在上面的圖中,音遇的視覺沖擊力最強,除了由于音遇本身的風格以外,也是由于音遇將領獎臺做了突出的設計來達到較強的視覺沖擊力,而相對的,優酷和波洞的設計就是來自領獎臺的變形,但是視覺上會平一些,主要也是符合自身的產品調性的。

一般來說我們在做視覺稿的時候,選擇音遇這樣排行榜的表現形式是比較出彩的,因為很容易出效果,但是我們在做項目的時候,就需要根據產品的調性來修改,就可以參考上圖中的后兩者。

移動端排行榜設計該怎么做?

而優酷的圖片尺寸為3:2,波洞和愛奇藝的圖片尺寸為4:3,因此同樣的在以領獎臺的榜單設計中,4:3的圖片比例依然是主流,而前三的數字也放在了圖片上,為了烘托領獎臺的氛圍,因此部分前三就是通過獎牌來設計的,但是視覺上偏弱,否則會與圖片起沖突。

劃重點

榜單的設計就是為了能夠減少用戶選擇的時間,但是不同的產品選擇的入口和表現形式都是不同的,我們需要的就是針對不同的產品來選擇合適設計,同時合理的選擇圖片比例,讓我們的設計更加有理有據。

希望對大家在設計排行榜的時候有所幫助,謝謝!

?

發表評論

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: