header_v1.7.40

数据可视化大屏设计-金螳螂项目管理指挥中心-大数据项目

23天前发布

原创文章 / UI / 观点
nikilulu 原创,如需商业用途或转载请与nikilulu联系,谢谢配合。

本次项目的难点在于除了把繁杂的数据图形化出来,还要结合场景,通过各台终端控制和指挥整个界面的交互呈现以及页面切换方式。

本次项目的分享,在于整理自己做可视化项目的思路以及在项目中遇到一些实际情况的处理应对措施,不足之处,欢迎大家一起交流。


《量化信息的视觉表现》中概述了数据可视化最基本的设计原则:

图表要简洁,数据要简洁。最好的大屏可视化不是数据的平铺,不是设计的天马行空,而是针对客户场景,理解数据复杂性的基础上,通过可视化的手段,形成一个高度提炼的故事。

我们在项目调研、设计阶段都要以简洁、场景化为出发点,在理解客户复杂的场景、复杂的数据的基础上,将故事简化,为客户真正解决问题。


大屏建设目标

为企业提供业务的更多可能性,通过展示让客户放心把项目交给我们。


大屏使用环境分析

◍ 场景照片:


◍ 使用场景:项目管理指挥中心展厅

◍ 场景光线:整体偏暗,顶棚横排平行于屏幕双排射灯,测光深蓝

◍ 屏幕情况:非高清屏,拼接屏,中间对折

◍ 方法与结论:根据场景的整体情况,灯光对屏幕的影响比较大,关系到最终呈现的效果,中和射灯的反光、蓝色的环境背景色,来决定设计的色调、纯度和亮度。


目标用户分析:

◍ 视觉感受需求:

数据可视化在目标用户眼里大致归为:蓝色变动的点线数及地图,并且一再强调要动,页面数字动、饼状图动、折线图动、柱状图动…总之在他们眼里,数据就应该是动的,一定要动的,所有的东西必须动起来,像美剧里那样,动 动 动...



设计目标:

1、以谷歌地图为场景布局,更快、更直观、更高效,展示项目宏观位置信息等内容。

2、采用真实的实时数据动态呈现,使异常项目处理更精准和及时,引起观看人员的体验共鸣。

3、数据归类处理,减少信息干扰。


◍ 设计元素提取:

◍ 颜色·字体:


◍ 整体色调色系的定义:


整体色调选择的是冷色系偏灰,预警项目颜色分别为饱和度较高的颜色,有助于异常报警项目、数据更加明显易读,不至于整个屏幕没有视觉中心,突出主要数据的阅读性。

定义全局色系时有几方面的考虑:

1、根据用户的使用场景(室内偏暗光线),整体颜色与整个室内环境有一定反差,把视觉关注点引入大屏区域内。

2、考虑到大屏面对的用户年龄段跨度大,不同年龄段对颜色的接受程度不同,所以我们选择了蓝色,蓝色也是适应人群比较广的色。

3、环境内顶棚的射灯会对屏幕造成一定的反射光线影响,因此在整体颜色选择上不能选用太灰的色调,否则会被射灯折射掉。

4、采用日常认知颜色(红、橙、绿),通过不同的颜色与现实项目中传达的信息概念吻合,降低用户学习成本。

5、全局暗色调省电。



◍ 页面布局



效果图展示

◍ 地图设计

地图采用谷歌地图为背景,实时动态数据、项目位置信息直观展示:


◍ 部分效果图展示



Ps:效果图内数据及信息为非真实,如有商业为用,追究其法律责任。

5
    没有新消息

    提示文案

    提示文案

    提示失败
    提示成功