恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
浅析数据可视化图表类型
0.0°
2021-05-17 原创文章 规范/资料 举报 4867 103 42 2

本文共3000字左右,阅读约15分


在回答这个问题之前。首先看一个问题数据可视化有哪些应用场景?也可以说你在哪些场合看到了数据可视化?


数据可视化有哪些应用场景

数据可视化大屏幕,以及PC后台数据概览(不局限于CRM、教育业务、金融业务,基本后台业务需要数据概览,都可以搭建)。

甚至C端的游戏UI也包括(中间的六边形叫做雷达图),豆瓣评分的条形图

还有哪些记账 金融。理财,直播数据,疫情地图,以及工具类的。

数据可视化:将不可兼得数据转化为可兼得图形符号,从中发现规律和特征,以获取更多的信息和价值。



数据可视化有哪些优点?

1.简介直观:一张图可能对标一个复杂庞大的数据表格

2.容易理解和记忆:人类右脑记忆图像的速度比左脑记忆抽象的文字快100万倍

3.传递信息更丰富:让数据“说话”传递比较、构成、分布、规律等有价值的信息。

确定业务目标,一般是PM给到的,之后确立指标分析维度,然后选定可视化图表类型,后面就是视觉效果的内容。本文主要聚焦“确定指标分析维度”以及“选定可视化图表类型”

可视化图表维度:横看成岭侧成峰。同一个指标数据,偏比较维度的,偏构成维度的 从不同维度分析就有不同结果。


下文的所有的图表均通过案例,抛开纯理论性内容,基于实际业务情况出发做分析什么情况下运用什么图表

柱状图:用于描述分类数据之间的对比,十分通用

使用情景:相比较2019年广东、浙江、江苏、湖南、福建五个省份的营业额差距,用柱状图

使用说明:

1.分类不局限于地区、品类,可以是一个时间周期

2.数量应控制在5-12条最佳,如果超出12条,易读性、简洁直观性就不那么强了


可不可以用饼图呢?

是不可以,因为饼图更容易读取部分占总和的比例,柱状图,更容易读取数值之间的大小。


条形图:柱状图跟条形图的本质是一样的都是比较数字大小,只是交换了XY轴的位置

使用场景:相比较福建省top15的门店营业额多少,产品提出平时在手机端查看数据较多

使用说明:

1.当条目较多大于12条,以及屏幕更多是竖长的时候,例如手机端,或者大屏的一侧的时候,柱状图会显得拥挤不堪 ,更适合条形图。

2.多用于top排行或分类名称较长的情况。

3.数量一般不超过30条,否则容易带来视觉和记忆负担。

柱形图与条形图使用注意事项

1.柱状图和条形图使用过程中要尽量避免圆角,因为可视化很重要的使命是准确,大圆角

2.Y轴要从零开始,为什么要从零开始以下图为例

假如你做了这份报表给领导,领导会误认为左边涨势喜人,可真的从零开始,实际上涨势偏于平缓。从零开始,能暴露数据的真实问题

3.名称较长的时候,优先用条形图


折线图:横轴为连续类别(如时间)且注重变化趋势时候,适用折线图

使用场景:想查看今年5月份单日营业额情况,并且对走势做分析

使用说明:

1.横轴如果不是表示连续数值,折线图的意义不大

2.数量一般 不少于3天,否则用柱状图更合适

面积图:折线表示走势,面积表示营业额

使用场景:想查看今年3月份和去年3月每日营业额走势,同时对整月营业额做个对比

使用说明:

1.随时间的变化趋势和累积的值,适用面积图

2.面积图如果要有意义,横轴同样需要表示连续数值

折线图与面积图使用注意事项

1、要保证横轴一定要连续的,才有意义

2.1月份的仓库货量,五个月的仓库货量都加起来数据并没有意义。假如把仓库货量改成仓库净货量,面积图数据就存在意义了。第两个图正确的原因是在做视觉设计的时候,希望数据展现的不那么单薄,常常会加个渐变,看起来更有体积感,但是别做成面积图。


分组条形图:也可以叫分组柱状图,可以从多个维度去对比

使用说明:相比较当月广州4个门店,服装、鞋子带来的营业额有多少


使用场景:相比较当月福建省5个门店,收入支出情况分别是多少?

使用说明:

1.适用于两组以上分类数据的比较。负值概念表现的更强一些。

2.不要忘记图例,可以用颜色或者填充的不同

3.组内的二级分类不要超过3个


玫瑰图:与柱状图很像,把柱状图的横坐标变成极坐标围起来也就是玫瑰图。玫瑰图的每个角度都是等分的。玫瑰图映射到数据上,比较的是扇形的半径。

使用场景:想回报福建8个门店的营业额,回报过程中,想再视觉效果上夸大一下门店之间的差距。

使用说明:

1.玫瑰图是有几个数据就把圆几等份,对应数据大小绘制不同长度的半径。

2.一种圆形的直方图,使用半径长短表示数值大小。

3.由于面积等于半径的平方,玫瑰图会将数值之间的差异放大

4.玫瑰图不能用于表示占比构成

5.一般不超过30条,否则容易带来视觉记忆负担。


雷达图:常用于多维的性能数据,如综合评分

使用场景:想要根据商场的综合评分,看下这款连衣裙的顾客反馈

使用说明:

1.指标得分接近圆心,说明处于较差状态,应分析改进。指标得分接近外边线,说明处于理想状态。

2.数量控制在5-8个最佳


子弹图:对比分类数据的数值大小以及是否达标

使用场景:广州市5个门店都制定了相应的营业额目标,广州区经历想要查看目前的进度情况

实用说明:

1.可以通过标记刻度区间,来进行更好的评估

2.数量控制在10个以内


漏斗图:适用于业务流程比较规范、周期长、环节多的单流程单向分享】

使用场景:想要了解网上商城,顾客从浏览商城到交易成功的一个层层转化情况

使用说明:绘制时候必须是直线,不可能为曲线。直线的倾斜程度表示转化率

不适合表达无逻辑顺序的分类对比

使用注意事项

要保证路径唯一 单流程,右图办理会员人数大于到店客户是不合理的,可能会有线上用户办理会员,导致办理会员人数多于到店人数。这个时候线上、线下区分两个图表达。


阶段小结

比较类图标,用的最作的就是柱状图,分组比较多的用条形图,表示性能的用雷达图。想凸显差距用玫瑰图。基于时间X轴连续的变化趋势类的用折线图,基于业务流程的用漏斗图,基于目标用子弹图



饼图:表示不同分类的占比情况,整个圆饼代表数据的综合

使用场景:想看2019年广东营业额构成情况

使用说明:通过角度或弧长大小来对比各种分类,分类数量不超过9个


环图:本质是饼图中间区域挖空,但是环图的降噪感会比饼图好的多

使用场景:与饼图一样

使用说明:

1.饼图的整体性太强, 我们会将注意力更多集中在扇形面积上,环图则可以很好的避免这个问题。

2.建议分类数量不超过9个


图表使用对比

top5只是数据的一部分,并不是总和。如果在环图加一项「其他」也是可以的



旭日图:适合展示多层级数据的占比关系

使用场景:想查看广东省营业额构成,同时关注深圳市几个门店的营业额构成

使用说明:

1.旭日图是多张饼图的集合

2.离圆心越近,代表层级越高

3.下一层级的综合构成上一层级


堆叠面积图:除了表达趋势外,也表达了营业额的总和

使用场景:查看5年来深圳时营业额总体趋势和4个门店的构成情况

使用说明:分类指标的纵轴起点,并不是从0开始,而是在上一个分类基础上叠加


堆叠柱状图:表达一级分类的比较,以及二级分类的占比构成

使用场景:比较5年来深圳时营业额总体趋势和4个门店的构成情况

使用说明:二级分类并不是按照同一基准线对其的


瀑布图:用于表达两个数值之间的变化过程

使用场景:想查看2019年深圳时经营收支情况

使用说明:过程值为正的时候向上加;过程值为负的时候向下减;


阶段小结

如果想表达的数据只有一级分类,就选择饼图以及环图。优先选择环图,适用范围更广,视觉的降噪感会更强。涉及到多级分类,用旭日图。旭日图是可以结合业务需求无限往下细分的。如果X轴是连续的,且为了看数据构成同时看变化趋势,选择堆叠面积图。如果X轴不连续,多个维度的构成且看趋势选择。



热力图:用颜色深浅表示数字区间。由于颜色有规律的心智模型是不可以调换位置。也可以用色相的冷暖来做区分。

使用场景:查看全国各地的门店数量

使用说明:地图可以结合多种不同的可视化方式;位置坐标更精确。


散点图:表达树枝在两个标量之间的分布情况

使用场景:想查看今年的单品成本和收入分布情况

使用说明:可以结合颜色来标记不同的类别;每一个圆点代表一个单品

在散点图基础之上,气泡图圆形表示的销量,面积表示销量大小。




使用目标:让用户用最短的时间,了解到数据带来的信息

每种图标都有他的优先和局限性,选择最合适的图标,必要时可以组合使用

从需求和目标出发,不要盲目的增加删减元素,实用性大于美观。


Powered by Froala Editor

更新:2021-05-17

收藏

103人已收藏

DesignLink

wx:18201243218

  • 22

    作品

  • 525

    粉丝

  • 0

    关注

  • AI 构建古诗词场景|春江花月夜
  • 万字长文|用户体验设计研究方法论
  • B端产品如何做体验设计走查与度量
  • 如何设计单手使用的移动应用程序

    猜你喜欢

      2021-05-17 原创文章 规范/资料 举报 4867 103 42 2

      浅析数据可视化图表类型

      0.0°

      你确定要举报浅析数据可视化图表类型

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2021年05月17日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      42
      103
      2

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录