数据可视化设计基础

博客分类: 设计 阅读次数:

数据可视化设计基础

2019有半年多的时间里我是负责了一款数据可视化大屏工具的设计,加上实习期间对BI产品的初步了解,目前对数据可视化这个领域也能够有一些东西可以输出了。话说在前头,数据可视化对于设计师来说真是个很有魅力的领域。

这个世界每天都在产生各种各样的数据,数据量越来越大,数据越来越复杂,而数据可视化是在前端层面通过合适的图表对数据进行可视化展示,图表让数据看起来更加直观和清晰,信息传达更加高效和准确。这篇文章主要是想说一下一个图表是怎么把数据栩栩如生地展示出来的。

常见的数据可视化应用场景

  1. BI报表类,用于展示、分析、汇报等场景。
  2. 监控分析类,基于某些业务指标进行监控分析,数据自动刷新,或可配置报警辅助监控。
  3. 大屏展示类,如双十一实时数据大屏,大屏展示一般能给人带来清晰直观的数据感受和震撼的视觉体验。

两个基础概念—维度和指标

维度和指标是数据分析的两个基础概念

维度和指标结合就能从多角度展示和衡量数据了,如访问量按城市拆分排行,就能看出产品用户的城市属性。

图表的构成

图表一般由图形区、数值区、维度区和图例四大块构成。

图形区用来展示通过数据绘制而成的图形,是图表最主要传达的内容,如对比、趋势、变化等信息;

维度区和数值区则展示了具体的数据项信息,如2018年1月(维度)A部门(系列)的销售额为180w(数值);

图例则是对应了图形的多个系列项,方便区分,如A、B、C三个部门在2018年各月份的销售额则为三条曲线,为三个数据系列。

除了直观的这四大块,图表常常还会有数据提示,当鼠标悬停在图表数据列上某处的时候,出现并且提示该点数据,数据提示框一般是用作提示额外的补充性的信息。

show

show

图表如何运用

目前国内最受欢迎的两个开源图表库应该是百度的 Echats 和阿里的 antV了, ECharts是一款基于Javascript的数据可视化图表库,提供一系列免费、直观可定制化的可视化图表。antV则是阿里的可视化团队推出的一套开源的图表库。

show

数据可视化设计要点

一个数据可视化作品(指仪表盘、大屏、报表等)的诞生,一般会经过 明确主题—>确定指标和对应的图表—>可视化布局与设计—>数据/数据接口准备—>可视化开发/配置 几个常规过程。在设计与开发过程中,尤其需要注意以下几点:

  1. 使用合适的图表,这是可视化设计最重要的一点,正确的图表才能让数据获得最佳的展示效果。一些常识性的,如曲线图用来表趋势,柱形图用来比较,饼图用来表示占比等等,echarts也推出了一套可视化设计规范,包括了图表的用法、配色等相关的内容,本文后面也会附常用图表类型。
  2. 突出重点指标,由于受众的注意力有限,可视化作品中需要突出重点指标,让用户在短时间内获取重要信息。
  3. 正确使用颜色,在图表展示中,颜色除了用来区分类别(如饼图、柱形图等),还有的会用来区分数量/程度(如热力图)、突出数据甚至颜色表示含义等(安全与警告)。

附:常见图表类别