看着容易一做就废「我为什么这么没用,什么都做不好」

今天给大家普及一下看着容易一做就废「我为什么这么没用,什么都做不好」相关知识，最近很多在问看着容易一做就废「我为什么这么没用,什么都做不好」，希望能帮助到您。

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

一、排行榜存在的意义

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

二、排行榜入口的表现形式

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

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

四、划重点

榜单的设计就是为了能够减少用户选择的时间，但是不同的产品选择的入口和表现形式都是不同的，我们需要的就是针对不同的产品来选择合适设计，同时合理的选择图片比例，让我们的设计更加有理有据。

这里我相信有很多想要学习UI设计的朋友，我是一名从事了五年UI设计私人定制课程，今年年初我花了一个月整理了一份最适合2019年学习的学习干货及教程，从最基础到，各种框架都有整理，送给每一位UI设计取的可以关注我并在后台私信我：学习，即可免费获取