2020-12-16 ui设计分享达人
排名榜单数据在我们日常生活中经常会遇到：
比如微博、抖、快的热搜榜单、各省份之前的GDP对比、双11的现场的榜单数据等等
都会涉及到，可以说排名数据已经涉及到了我们生活中的方方面面。
那我们应该如何做好榜单排名数据可视化呢？
我们常遇到的榜单排名数据主要分为两种：
↑ 榜单排名数据分类
一种是无数据的排名，也就是只有排名和名称；
另外一种就是有数据的排名，也就是包含了具体的数值；
那么，本篇文章我将按无数据的排名和有数据的排名，给大家带来，当我们遇到榜单排名数据时，应该如何将图做的更好看！
总共涉及到大于15种可视化表现形式，希望能够对你有所帮助！
最简单的方法，我们可以从排名的数字本身去做优化，比如将排名数字1、2、3....去做内容的填充丰富，改为TOP1、TOP2、TOP3...或者NO.1、NO.2、NO.3...
还可以基于数字本身所处的环境去做优化，比如在其底部加入填充形状垫底，让数字排名更突显出来（如正方形、矩形等等）。
通过这两种形式，可以让单调的排名数字有了更多的细节，内容更丰富，展示更好看。
↑ 基于数字本身去做优化的案例
在数字本身变化的基础上我们还可以加入对文字的变化，比如在文字的底部垫上形状（如圆圈、条形图等等）。这样通过对数字和文字本身的设计强调，就从整体上得到了优化。
↑在文字底部垫上圆圈，在整体上突出设计感
虽然排名没有具体的数值，无法生成条形图，但是依旧可以通过等比缩放的矩形来强调文字，比如倒立金字塔和横向柱状图。
↑通过矩形形成倒立金字塔和条形图，在整体来突出设计感
如果排名数据内容所传达的主题是品类、物品、或者城市，那么就可以借助icon来丰富可视化。
排名的数据如果涉及的是品类中的细分物品，比如生活中常见到的吃的、穿的，用的，那么就可以使用定制插画来丰富排名可视化。
当我们的排名数据中涉及到了人物、品牌、产品之间的排名时，我们可以通过与之对应的头像、品牌LOGO、产品实景图来丰富排名的可视化表现。
如果排名数据讲的是省份之间的排名对比，那么我们就可以借助地图元素来丰富排名的展示。但是如果要用到中国地图，一定要注意使用中国标准的地图，当然基于设计的风格，你也可以使用简约风格，去掉地图元素，只保留可视化的部分。
排名数据也可以借助视觉背景模板来做变化，比如在涉及某个主题排名榜单时（如淘榜单、星数榜单等）就可以通过背景视觉元素来突出排名。
其实这种背景视觉模板，对可视化的要求并不高，你只需将排名通过单一表格的形式展示出来，但需要一个很强的视觉背景版来做衬托，这样，做好一个模板，其余的榜单都可以进行复制使用了。
如果数值单一，那么可以通过常规的可视化表现形式进行展示（如基础柱状图、饼图、圆圈大小、直角三角形柱状图、180°变形柱状图等等）。
结合第一节讲到的基础排名样式再加上横向柱状图来进行展示。这样的排名展示形式简单、直观，特别适合单一排名数据之间的对比展示。
如果排名数据中数值所传达的是占比，那么便可使用饼图或圆圈大小的形式对排名数据进行展示。
通常我们会使用常规的竖向柱状图来表现数值的大小，但其实还可以对其进行一点点变形，比如将柱子的右侧直角边去掉，那么就变身成为了直角三角形柱状图。
这时如果排名的文字比较多，我们还可以将排名和文字置于柱子的上方进行展示，一方面节省了空间，另一方面在视觉上也起到了美观度。
柱状图的变种，在《如何做出比别人好看的柱状图？》系列文章中有讲到，大家对如何实现这种形式感兴趣的可以看下之前的文章，同样的排名数据也可以基于180°的变种柱状图来进行展示。
除了基础的可视化展示和排名数据结合外，如果排名数据所涉及的是一些主题元素（如生活中吃的、穿的、用的等等）。那么就可以将基础的可视化和icon、头像、产品实景图、插画等等去做结合来丰富可视化。
当排名的数据中，还多了一列数据涉及到分类， 那么就可以使用桑基图来进行可视化的展示（如国家属于什么地区、公司属于什么行业、城市属于什么省份等等）。对如何实现桑基图感兴趣的可以看看之前发的桑基图教程。
4 排名连线图展示
如果我们的排名数据中，还涉及到了年份的排名变化，比如省份之前的年度排名，那么就可以使用排名连线图，通过线段的上下连线走向来看省份之间排名的上升或下降，同时这种数据还非常的适合做成动态柱状、折线图（在后面会讲到）。
如果我们的排名数据中，还涉及到了年份的排名变化，比如省份之前的年度排名，那么就可以使用排名连线图，通过线段的上下连线走向来看省份之间排名的上升或下降，同时这种数据还非常的适合做成动态柱状、折线图（在后面会讲到）。
和第一节讲到的地图一样，如果排名数据中涉及到了地理位置数据，那么可以结合地图进行排名数据的展示。通常情况下，完成地图可视化后，可将具体的排名信息以表格的形式罗列在地图的空白区域内，这样结合地图和具体的详细排名数据，就会更加的直观和丰富。
如果我们的排名数据维度非常的丰富，数据所包含的信息点在3个以上，那么就可以通过将多种可视化的表现来进行结合，通过组合式的可视化来进行展示。
排名数据也可以通过简单的动态柱状图来进行展示。如果只是单一的排名没有涉及年份的变化，那么可以通过柱子从上到下一个一个地出现来进行展示（如下图左),如果涉及到年份的变化， 那么就可以通过柱子随着年份的上升或下降来进行动态的展示（如下图右）。
动态柱状图的实现方法也很多，我在想做出漂亮的图表，这12个网站不能错过！中有讲过，可以通过flourish网站（https://flourish.studio/）来快速的实现。同时如果想自己DIV得到更定制化版本的动态柱状图，也可以使用B站UP主见齐的开源可视化项目（http://r6d.cn/JdYy）进行实现。
同样的我们还可以通过动态折线图的形式进行展示，这种表现形式主要看的是排名的趋势变化，同样的，借助flourish网站（https://flourish.studio/）就可以实现这种动态折线图的展示效果。
当然，我们的排名数据也可以使用现在市面上很火的3D可视化的表现形式来进行展示，比如随着摄像机移动的3D柱状图、还有基于主题而自定义化的3D场景排名展示等等。
将基础的柱状图，通过3D立体柱状图的形式进行展示，排名的结果并不是啪的一下直接公布，而是随着镜头慢慢地公开，对观众来说随着镜头的视角观看有一种慢慢揭秘的感觉！
如果我们的数据，所要传达的信息非常富有主题场景感，那么就可以通过3D场景渲染的形式进行展示，比如下图GIF中，在表现《哪个国家上班族工作时间最长》就可以将各个国家的学生，置于一个教室中，再通过镜头的移动位移来进行展示。
这种展示形式，实际投入成本还是很大的，从建模到渲染至少也需要2-3天的时间。所以最好基于一个好的选题再选择这种形式，要不然就会出现”虽然视频本身展示酷炫，但是由于选题不好，最终播放量不高“的尴尬情况。
比如说，当我们在时间非常紧急的时候，排名数据如果是和地理数据相关的，那么我们会尽量避免使用地图元素来丰富可视化，因为这会增加我们审核检查地图正确性的时间成本。我们可采取常规的可视化表现形式进行展示，虽然会丢失掉一些美观度，但是正确性会有更高的保障。
基于文章内容，需要在图中重点强调某些数据时，可通过填充颜色、框选、重点信息丰富(比如展示TOP3)的形式来对排名进行强调.
排名数据看似简单，但其实所包含的展示形式和细节还是非常多的。希望当你在遇到排名数据时，这篇文章能够对你有所帮助！
文章来源：站酷 作者：邹磊ZouL
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务