开发者社区> ibelieve001> 正文

怎样制作爽心的 dashboard

简介: 大屏可视化,dashboard
+关注继续查看

在目前的大数据趋势中,数据的大屏可视化成为大家所推崇的一种互动展示模式。如果我们能够早一些了解和掌握这方面的技术,相信对我们的未来将会非常有帮助!
我们知道,通过报表工具实现大屏展示可以通过单张报表、多张报表 Dashboard 布局或者多张报表页面布局等方式实现,那么,如何能设计出优秀的 dashboard 呢?
下面是国外的著名的可视化专家 Stephen Few 在 2012 年举办的 Dashboard 图表设计竞赛中列出的关于优秀的 dashboard 应该具有的特征:
1

小编对这些特征进行了翻译以供参考,如有不准确的请指正。
2

根据上面的评分标准,你所做的大屏数据可视化图表及格了吗?
对于 dashboard 来说,如果需要完美的展现效果,是需要技术人员,UI 设计人员,以及业务人员协调工作完成的。而作为程序开发人员,如何在没有美工的情况下,做出能上得了台面的 dashboard 效果呢?
上面的标准说得比较概括,下面介绍一下我使用报表工具实际做 dashboard 时所考虑的具体因素:

  1. 确定使用人群
    了解使用人群,有助于把握好要显示的 kpi 以及数据的逻辑分解
  2. 布局
    人的阅读习惯是从做到用从上到下的,而中间位置又是最能吸引关注的,所以重要内容应该放在最上面或者中间。如下图,我们可以在这个页面顶端直接展现重要的指标信息,这种布局是目前众多以运营人员为对象的报表系统最喜欢使用的结构,整体数字指标一目了然,可以让阅读者在几秒内把握全局数据,是一种阅读报表时间投入产出比很高的方式。

3

  1. 背景
    在不同场景下,背景色为深色(蓝,蓝绿,黑)时投放到大屏的展现效果较好。同时,为了显示的内容更加清晰,字的颜色应该反差较大,因此文字多为浅色。

4

另外,除了使用背景颜色外,还可以使用背景图片,加上这样的深色调图片,不止酷炫,而且科技感十足。
5
6

  1. 配色
    下面是从网上搜罗到的比较常用的配色方式:

7

具体的 RGB 值可以通过取色软件获取,网上这样的资源有很多, QQ 软件在截屏的时候也会显示 RGB 的值,哈哈,这样 QQ 软件也能为我们取色所用了。
8

  1. 图形化
    通过使用 Echarts.js, G3,hicharts 这样的图形化技术,可以让原来静态的柱图,线图等图表,更加生动地将数据显示在用户面前。
  2. 动态效果
    完美的 Dashboard 具有的特性是用户交互性,用户交互性一般又体现在哪些效果上呢?

滚屏
9

联动
10

定时刷新显示的时间
11

钻取
12

  1. 细节美化
    (1) 适当使用图标

在标题、明细列表、图表中加上图标,不仅能形象直观地体现某一区块的主题,还有很好的装饰作用。
下面是一个可供参考的图标资源网站:
http://iconfont.cn/repositories/10
(2)边框线
使区块明显分隔,数据显示更清晰。
(3) 标题
标题可以使主题显得清晰,一个页面中即使区块分隔清晰、动态图表再多,但如果没有一个标题的话,那也不会是一个成功的 dbd,因为标题的缺失会降低可读性。下面就是一个没有标题的效果图。
13

试想一下,如果各个区块都加上标题,我们在看到这个页面时,就不会茫然的寻找是否有应该关注的数据了。
希望以上的总结,可以在布局、配色、交互等方面帮助到你,相对高效地做出能让领导满意的高大上的 dashboard,为你的职场加分,加薪!除了上面列举的方式,还可以在网上多看些大屏的图片,从模仿开始。我觉得设计这种东西,多看多积累,慢慢就会沉淀下属于自己的方式方法了。

作者:shiguang
链接:http://c.raqsoft.com.cn/article/1535420833071?r=IBelieve
来源:乾学院
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
一篇文章搞懂数据仓库:三范式与反范式
一篇文章搞懂数据仓库:三范式与反范式
6 0
第6期 MongoDB GUI可视化管理工具
MongoDB GUI可视化管理工具
13 0
SourceTree使用教程图文详解
Git分布式版本控制系统是我们日常开发中不可或缺的一部分,能够大大提高我们协同工作的效率。前面的一篇文章如何玩转Git介绍过Git的相关知识。在工作中往往我们需要使用Git的可视化管理工具进行版本控制。目前市面上比较流行的Git可视化管理工具有SourceTree、Github Desktop、TortoiseGit等等,我们公司主要使用的是SourceTree。该篇文章主要结合日常开发工作的对于sourctree的一些常用操作进行讲解和总结,帮助没有使用过的同学进行快速入门,希望能对大家有所帮助!
15 0
R可视乎|克利夫兰点图系列
在可靠性实验中,不同产品的测试失效时间可以通过克利夫兰点图进行可视化,今天就对该系列的图进行系统的介绍。主要参考张杰博士的《R语言数据可视化之美》[1],并结合我实际使用经验进行修改。
4 0
R分享|空气质量数据分析相关书籍
最近在学习过程中,发现了一本与空气质量数据分析有关的书,书名叫做《The openair book——Tools for air quality data analysis》,作者是:David C. Carslaw。值得一提的是,这本书是开源的,通过bookdown构建的,网址链接为:https://bookdown.org/david_carslaw/openair/。
6 0
reticulate包|数据科学者的福音
如果你还在纠结:学数据科学到底用 python 还是 R 好?现在我的回答是:大可不必。现在两者的变量可以相互调用了。你可以用 R 做数据处理(tidyverse),可视化(ggplot2),用 python 做开发。具体可参考该文章:R Vs Python: What’s the Difference?[1]
5 0
科研分享|一个论文关系网络可视化网站
四月开始啦!每个月开头都会逛一逛“统计之都[1]“,因为每月的统计月读[2]更新啦!三月的统计月读有一个内容真的让人心动,而且非常实用!推荐人是:孔令仁,网址链接为:https://www.connectedpapers.com/ 在此,小编尝试使用了这个网站,并且做了简单的教程分享给大家。
8 0
在家实践-ECS
阿里云是一个非常便捷的服务器
7 0
Linux安装maven
linux,maven
5 0
【贪心思想】兄弟总爱贪小便宜,原来是把贪心算法掌握得如此熟练【经典例题讲解】
贪心是不是最难的算法呀?答案确实是肯定的,那有的兄弟们就觉得那我是不是要把其他的算法都学熟练以后再来学习贪心呢?这个答案却是否定的。贪心确实是没有套路可言,与其说它是算法,更不如说贪心更像是一种思想。正所谓人不为己天诛地灭,人有贪嗔痴三念,贪心这件事上每个人都是有天赋的,所以我们从开始学习算法就要训练一种贪心的思想。给个小剧场让大家代入一下
6 0
+关注
83
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
OceanBase 入门到实战教程
立即下载
阿里云图数据库GDB,加速开启“图智”未来.ppt
立即下载
实时数仓Hologres技术实战一本通2.0版(下)
立即下载