榜单排名数据，如何做好看？

邹磊ZouL

上海/设计爱好者/5年前/8874浏览

版权

榜单排名数据，如何做好看？

邹磊ZouL

排名数据在日常生活中经常会用到，本篇文章将工作中经常用的排名表现类型做了总结和汇总，希望能够帮助到大家！

排名榜单数据在我们日常生活中经常会遇到：

比如微博、抖、快的热搜榜单、各省份之前的GDP对比、双11的现场的榜单数据等等

都会涉及到，可以说排名数据已经涉及到了我们生活中的方方面面。

那我们应该如何做好榜单排名数据可视化呢？

我们常遇到的榜单排名数据主要分为两种：

↑ 榜单排名数据分类

一种是无数据的排名，也就是只有排名和名称；
另外一种就是有数据的排名，也就是包含了具体的数值；

那么，本篇文章我将按无数据的排名和有数据的排名，给大家带来，当我们遇到榜单排名数据时，应该如何将图做的更好看！

总共涉及到大于15种可视化表现形式，希望能够对你有所帮助！

一没有数值的排名数据，如何做得好看？

1 基于数字本身去做变化

最简单的方法，我们可以从排名的数字本身去做优化，比如将排名数字1、2、3....去做内容的填充丰富，改为TOP1、TOP2、TOP3...或者NO.1、NO.2、NO.3...

还可以基于数字本身所处的环境去做优化，比如在其底部加入填充形状垫底，让数字排名更突显出来（如正方形、矩形等等）。

通过这两种形式，可以让单调的排名数字有了更多的细节，内容更丰富，展示更好看。

↑ 基于数字本身去做优化的案例

2 基于整体，通过形状元素去做变化

在数字本身变化的基础上我们还可以加入对文字的变化，比如在文字的底部垫上形状（如圆圈、条形图等等）。这样通过对数字和文字本身的设计强调，就从整体上得到了优化。

↑在文字底部垫上圆圈，在整体上突出设计感

虽然排名没有具体的数值，无法生成条形图，但是依旧可以通过等比缩放的矩形来强调文字，比如倒立金字塔和横向柱状图。

↑通过矩形形成倒立金字塔和条形图，在整体来突出设计感

3 基于内容主题传达，来做变化

3.1借助icon元素，来做变化

如果排名数据内容所传达的主题是品类、物品、或者城市，那么就可以借助icon来丰富可视化。

3.2 借助定制插画，来做变化

排名的数据如果涉及的是品类中的细分物品，比如生活中常见到的吃的、穿的，用的，那么就可以使用定制插画来丰富排名可视化。

3.3 借助头像、品牌LOGO、产品实景图，来做变化

当我们的排名数据中涉及到了人物、品牌、产品之间的排名时，我们可以通过与之对应的头像、品牌LOGO、产品实景图来丰富排名的可视化表现。

3.4借助地图，来做变化

如果排名数据讲的是省份之间的排名对比，那么我们就可以借助地图元素来丰富排名的展示。但是如果要用到中国地图，一定要注意使用中国标准的地图，当然基于设计的风格，你也可以使用简约风格，去掉地图元素，只保留可视化的部分。

4 借助背景设计元素，去做变化

排名数据也可以借助视觉背景模板来做变化，比如在涉及某个主题排名榜单时（如淘榜单、星数榜单等）就可以通过背景视觉元素来突出排名。

其实这种背景视觉模板，对可视化的要求并不高，你只需将排名通过单一表格的形式展示出来，但需要一个很强的视觉背景版来做衬托，这样，做好一个模板，其余的榜单都可以进行复制使用了。

二如果排名数据包含数值，如何做得好看？

1 基础可视化排名数据图

如果数值单一，那么可以通过常规的可视化表现形式进行展示（如基础柱状图、饼图、圆圈大小、直角三角形柱状图、180°变形柱状图等等）。

1.1 横向柱状图展示

结合第一节讲到的基础排名样式再加上横向柱状图来进行展示。这样的排名展示形式简单、直观，特别适合单一排名数据之间的对比展示。

1.2 饼图、圆圈大小占比展示

如果排名数据中数值所传达的是占比，那么便可使用饼图或圆圈大小的形式对排名数据进行展示。

1.3 直角三角形柱状图（柱状图变种）展示

通常我们会使用常规的竖向柱状图来表现数值的大小，但其实还可以对其进行一点点变形，比如将柱子的右侧直角边去掉，那么就变身成为了直角三角形柱状图。

这时如果排名的文字比较多，我们还可以将排名和文字置于柱子的上方进行展示，一方面节省了空间，另一方面在视觉上也起到了美观度。

1.4 180°变种柱状图展示

柱状图的变种，在《如何做出比别人好看的柱状图？》系列文章中有讲到，大家对如何实现这种形式感兴趣的可以看下之前的文章，同样的排名数据也可以基于180°的变种柱状图来进行展示。

2 将主题元素和基础可视化排名图进行结合

除了基础的可视化展示和排名数据结合外，如果排名数据所涉及的是一些主题元素（如生活中吃的、穿的、用的等等）。那么就可以将基础的可视化和icon、头像、产品实景图、插画等等去做结合来丰富可视化。

3 使用桑基图来体现排名

当排名的数据中，还多了一列数据涉及到分类，那么就可以使用桑基图来进行可视化的展示（如国家属于什么地区、公司属于什么行业、城市属于什么省份等等）。对如何实现桑基图感兴趣的可以看看之前发的桑基图教程。

4 排名连线图展示

如果我们的排名数据中，还涉及到了年份的排名变化，比如省份之前的年度排名，那么就可以使用排名连线图，通过线段的上下连线走向来看省份之间排名的上升或下降，同时这种数据还非常的适合做成动态柱状、折线图（在后面会讲到）。

4 排名连线图展示

5 地图展示

和第一节讲到的地图一样，如果排名数据中涉及到了地理位置数据，那么可以结合地图进行排名数据的展示。通常情况下，完成地图可视化后，可将具体的排名信息以表格的形式罗列在地图的空白区域内，这样结合地图和具体的详细排名数据，就会更加的直观和丰富。

6 组合图展示

如果我们的排名数据维度非常的丰富，数据所包含的信息点在3个以上，那么就可以通过将多种可视化的表现来进行结合，通过组合式的可视化来进行展示。

7 动态柱状图、动态折线图展示排名

7.1 动态柱状图

排名数据也可以通过简单的动态柱状图来进行展示。如果只是单一的排名没有涉及年份的变化，那么可以通过柱子从上到下一个一个地出现来进行展示（如下图左),如果涉及到年份的变化，那么就可以通过柱子随着年份的上升或下降来进行动态的展示（如下图右）。

动态柱状图的实现方法也很多，我在想做出漂亮的图表，这12个网站不能错过！中有讲过，可以通过flourish网站（https://flourish.studio/）来快速的实现。同时如果想自己DIV得到更定制化版本的动态柱状图，也可以使用B站UP主见齐的开源可视化项目（http://r6d.cn/JdYy）进行实现。