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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
干货!如何做数据可视化设计?
0.0°
2019-07-30 原创文章 经验/观点 举报 3820 38 18 5

前言:

2018年初,公司想做一个关于数据可视化设计的项目,这也是我第一次接触数据可视化设计。项目完成后,一直很想写一篇关于数据可视化的经验分享。没有想到提笔竟是一年后了,希望能对看到这篇文章的你,有一个初步的设计思路~


什么是数据可视化?


数据可视化技术的基本思想,是将数据库中每一个数据项作为单个图元元素表示,大量的数据集构成数据图像,同时将数据的各个属性值以多维数据的形式表示,可以从不同的维度观察数据,从而对数据进行更深入的观察和分析。

简单理解就是,数据可视化主要是借助图形化手段,清晰有效地传达与沟通信息。



如何展开数据可视化设计?


1、明确需呈现的业务指标


当我们拿到需求后,首先就是要确认需求,梳理有疑问的地方,及时与产品经理沟通。在沟通这一步中,重点介绍一下3个名词:主要指标、次要指标、辅助指标。

主要指标反映核心业务,位于屏幕中央;次要指标用于进一步阐述分析,位于屏幕两侧;辅助指标是主要指标的补充信息,可不显示或显示在屏幕两侧或鼠标经过时显示。

这3个指标将会关系到我们选择什么样的图表类型,以及页面的布局如何呈现。



2、为指标选择合适的图表


在这里,我只介绍常用的几种图表类型,如果想看更丰富的图表类型,可以参考echarts: http://echarts.baidu.com


(1)柱状图

柱状图常用于类别之间的比较,反映数据之间的差异。由于肉眼对高度差异很敏感,所以柱状图的表现形式会很直观。

柱状图有单指标柱图、多指标柱图以及堆叠柱图类型。

Image title

(2)折线图

折线图常用于反映数据随着时间变化而变化的趋势。

折线图有单指标趋势图和多指标趋势图。

Image title

(3)饼图

饼图常用于表示比例关系,可以展示每一部分占总体的百分比是多少。

在这里分享4个关于饼图设计的经验。


1.由于人的视线习惯于顺时针方向观察,因此饼图中的数据占比尽量考虑从大到小顺时针排列


2.肉眼对于饼图只能感受到具有明显面积差异的数据,当面积差异很小时,我们就无法分辨数据的占比大小。因此,设计饼图时,最好能显示数据占比的具体百分比


3.当饼图中数据类型过多时,可以考虑将饼图换成柱状图,便于阅读;或考虑将饼图换成复合饼图,把占比较小的数据放到第二个饼图中,虽然还是采用的饼图形式,但是阅读起来会层次分明。


4.当数据中有0的数值时,就不要使用饼图了,因为饼图无法体现0值的数据。可以考虑柱状图或条形图。


饼图有标准饼图,中空饼图和环形饼图。

Image title

(4)条形图

条形图又称横向柱状图,在echarts中,直接将条形图归到了柱状图的类别中。

其实条形图和柱状图的使用场景很相似,都是用于分类之间的比较。但两者有一个最重要的区别就是,当数据分类多且数据名称字段较长时,应选择条形图,因为条形图能够横向布局,方便展示较长纬度的字段名称。

实际应用中,条形图常用于表示数据之间的顺序排列。例如Top3或Top5数据。

Image title

(5)雷达图

雷达图可以用来表现一个周期数值的变化,也可以用来表现特定对象主要参数的相对关系。它常用于财务分析数据中,用来分析企业的负债能力、运营能力、盈利和发展能力等指标。

在这里分享2个关于雷达图的设计经验。


1、使用雷达图时,应注意其数据类别最多6个。


2、因为用户一般不熟悉雷达图,所以在使用雷达图时,要加上文字说明,减轻阅读负担。例如王者荣耀的对战雷达图中,每个数据点代表什么都用文字说明了。

Image title

(6)地图

地图适用于有空间位置的数据集。

地图类型有区域地图、散点地图、热力地图。


区域地图:

按照国家、省市行政区划分,用来展现地理信息,以及与地理位置有关的信息,指标的多少可以用颜色深浅区分。

Image title

散点地图:

基于高德地图实现,通过定位经纬度,用散点来表示所在位置的信息指标。

Image title

热力地图:

以特殊高亮的形式显示访客热衷的页面区域和访客所在的地理区域的图示。不同颜色反映不同区域密度的分布。

Image title


3、排版设计,突出关键信息


(1)页面布局

布局主要根据我们之前定好的业务指标进行划分。主要指标位于中间位置,次要指标按优先级依次在主要指标周围展开,位于屏幕两侧。一般把有关联的指标让其相邻或靠近,把图表类型相近的指标放一起,这样布局的好处是能减少认知负担并提高信息传递的效率。

总结:页面布局需注意重点信息突出,做到主次分明、条理清晰,还需注意页面留白,有呼吸感。

Image title

(2)配色

相信大家在看很多数据可视化的设计案例时,都会发现常用深色作为背景色。主要是因为以下3点原因:


1.数据可视化的设计常用于大屏展示,由于背景面积过大,使用深色背景能够减少屏幕色差对整体表现的影响,也避免了观众在视觉上觉得刺眼。


2.深色背景更能聚焦视觉,利用色调与明度的变化,能够保证可视化图表的清晰辨识度,便于突出内容。


3.方便做出一些流光、粒子等酷炫的效果。


整体背景深色系,虽然选择搭配很多,不过百搭的色系还是推荐深蓝色系。

在这里,分享一些常用的色彩搭配(*^__^*) ~

Image title


总结:

在实际的设计过程中,还会遇到其他的问题,比如字体的选择,动效的设计。

关于动效的设计会发现我们有时候难以在设计稿中表现的动效,开发能利用代码轻易实现;同理,有些效果我们能用设计工具轻易实现,但开发却很难实现,或耗费时间较长。

因此在设计的过程中,一定要注意与开发沟通,哪些地方我们可以尽情发挥,哪些地方需要遵守规则。






更新:2019-07-30

收藏

38人已收藏

青柠夏至

合作交流+v: lemon_sumer06

  • 46

    作品

  • 89

    粉丝

  • 14

    关注

  • OA 移动办公 APP 2.0 UI设计
  • 浅色系数据可视化
  • 邮箱官网改版
  • 跨境电商可视化大屏

    猜你喜欢

      2019-07-30 原创文章 经验/观点 举报 3820 38 18 5

      干货!如何做数据可视化设计?

      0.0°

      你确定要举报干货!如何做数据可视化设计?

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2019年07月29日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      18
      38
      5

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

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

      登录

      手机号

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

      登录
      第三方账号登录