排行榜设计：为什么总是不看都会，一做就废？

排行榜想必大家都不陌生，说到它的设计大家可能会想问，这有什么好值得研究的？的确说到排行榜的设计大家脑子里可能浮现的都是按照数字排好或者设计一个类似阶梯式领奖台而已。

但是我最近在找界面的时候发现，很多排行榜都在变得简洁，同时表现形式也各有不同，比如都有哪些形式？需要放图片吗？放左还是放右？图片放多大？前三名怎么展现？不同的产品使用可以用一样的表现形式吗？我们今天就来好好研究一下这些我们设计的时候经常会遇到的问题。

 排行榜的存在就是在用户面对海量信息时，让他们能够选取最容易获取且有公信力的信息，减少思考的成本。

首先我们先来看看排行榜的入口，它的表现形式有很多，我们归类为以下三个方面：

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的图片比例依然是主流，而前三的数字也放在了图片上，为了烘托领奖台的氛围，因此部分前三就是通过奖牌来设计的，但是视觉上偏弱，否则会与图片起冲突。

海盐社Q3招新，回复数字【2】查看