开发者社区> 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
来源:乾学院
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

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

相关文章
如何设置阿里云服务器安全组?阿里云安全组规则详细解说
阿里云安全组设置详细图文教程(收藏起来) 阿里云服务器安全组设置规则分享,阿里云服务器安全组如何放行端口设置教程。阿里云会要求客户设置安全组,如果不设置,阿里云会指定默认的安全组。那么,这个安全组是什么呢?顾名思义,就是为了服务器安全设置的。安全组其实就是一个虚拟的防火墙,可以让用户从端口、IP的维度来筛选对应服务器的访问者,从而形成一个云上的安全域。
19079 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
28300 0
阿里云服务器安全组设置内网互通的方法
虽然0.0.0.0/0使用非常方便,但是发现很多同学使用它来做内网互通,这是有安全风险的,实例有可能会在经典网络被内网IP访问到。下面介绍一下四种安全的内网互联设置方法。 购买前请先:领取阿里云幸运券,有很多优惠,可到下文中领取。
22183 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
20277 0
阿里云服务器ECS登录用户名是什么?系统不同默认账号也不同
阿里云服务器Windows系统默认用户名administrator,Linux镜像服务器用户名root
15764 0
腾讯云服务器 设置ngxin + fastdfs +tomcat 开机自启动
在tomcat中新建一个可以启动的 .sh 脚本文件 /usr/local/tomcat7/bin/ export JAVA_HOME=/usr/local/java/jdk7 export PATH=$JAVA_HOME/bin/:$PATH export CLASSPATH=.
14878 0
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
23541 0
+关注
83
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载