大屏数据可视化解决方案

拥有完全自主知识产权的大屏数据可视化工具(BDVP),为大屏而生,助力您运营数据。数据可视化并不是简单的把数据变成视觉设计图,而是以数据为视角来看待世界。通俗的说,数据可视化就是“让数据会说话”,用信息图来讲述数据的故事。可视化是一种数据的表达方式,是现实世界的抽象表达。

它既可以是艺术的,同时又是真实的。找到数据和他所代表事物之间的关系,按照“数字化叙事”去做设计,是全面分析数据的关键,同样也是深层次理解数据的关键。

什么是大屏数据可视化

什么是大屏?顾名思义,就是指通过整个超大尺寸的无缝大屏幕来展示关键数据内容。随着许多企业的数据积累和数据可视化的普及,大屏数据可视化需求正在逐步扩大,例如一些监控中心、指挥调度中心这样需要依据实时数据快速做出决策的场所,以及如企业展厅、展览中心之类以数据展示为主的展示场所,还有如电商平台在大促活动时对外公布实时销售数据来作为广告公关手段等等,而具体的展示形式又可能分为带触摸等交互式操作或只是作单向的信息展示等等。

应用场景



现状问题

现在市面上的数据大屏,大多停留在数据统计图表达层面,缺乏信息可视化设计,满足不了可视化的最根本目的。

我们的设计思路



大屏数据可视化系统如何来设计?

可视化数据的最主要目三个特征:新颖而有趣、充实而高效、美感且悦。以大屏作为可视化数据的主要载体,其原因在于面积大、可展示信息多、便于关键信息的共享讨论及决策,在观感上给人留下震撼印象,便于营造氛围、打造仪式感等。



一、 如何选择信息图示的分类?

数据可视化处理流程是:【数据采集】- 【数据清理】- 【数据分析】- 【可视化数据】。

1. 数据采集需要基于业务展示需求,即“你想要展示什么?”如:实时数据指标、对比类型数据指标、统计类型数据指标等从相关的业务层面提取重要的数据,用于大屏数据的展示。

2. 数据清理则要对数据进行归类处理,明确数据之间的关系,存在“比较型”、“构成型”、“联系型”、“分布型”。

3. 数据分析根据归类处理后的数据,并结合从维度的划分:“一维数据”、“二维数据”、“三维数据”、“多维数据”、“时态数据”、“层次数据”等,将强关联性的数据进行组合重构,得到全新的数据信息关系;

4. 可视化数据,根据重构后的数据信息关系,选择对应的可适用数表信息图,如:条形图、柱状图、雷达图、折线图、正态分布图、散点图、实时3d渲染地图等;可参考下图选择对应的数表信息。



二、 屏幕分辨率有哪些注意事项?

为了最优化展示效果,首先需要了解物理大屏长宽比,确定设计稿的尺寸;其次我们需要清楚大屏系统的内在原理:【信号源】--->【大屏拼接器】--->【播放控制设备】,一般情况下设计稿的分辨率多为1920px*1080px(即电脑的分辨率)。同时,我们还需要理解以下四个概念:“大屏逻辑分辨率(设计稿尺寸)”、“显卡输出分辨率”、“视频矩阵切换器( DVI )支持分辨率”、“大屏实际物理分辨率”。

最佳展示效果(我们称为点对点显示):

大屏逻辑分辨率(设计稿尺寸)长宽比 = 大屏实际物理分辨率长宽比

大屏逻辑分辨率(设计稿尺寸)长宽比 = 显卡输出分辨率长宽比

显卡输出分辨率 = 视频矩阵切换器( DVI )支持分辨率 = 大屏实际物理分辨率

目前作为监控大屏,由于监控数量的庞大,常常被划分为总屏和分屏。总屏多用于展示事件状态趋势、风险预警、风险处理进展;分屏则多用于展示详细的数据分析和风险事件的处理。如何排布数据都需要紧密结合业务需求和用户体验。

三、 数据的排版布局有哪些规律?

在确定了设计稿的尺寸后,需要对页面布局和划分,对于数据的排布划分我们的重要原则:主次分明、条理清晰、注意留白。根据业务需求抽取关键性的指标,按照重要程度可分为【主】、【次】、【辅】。

1. 主:主要指标多位于屏幕正中央,可添加适当的动效增强视觉效果;

2. 次:次要指标多位于屏幕的两次,较多表现为各类图表;

3. 辅:辅助信息多为主要指标的补充信息,常伴随交互效果或动效下呈现,可展现亦可不展现;

在大屏的排版布局上,需要遵循四大原则(CRAP):

1. 对比(Contrast):完全不同的数据类型,选择截然不同信息图示。

2. 重复(Repetition):相同类型或相似数据,选用尽可能相同的展示。

3. 对齐(Alignment):利用对齐方式保证信息图示之间的视觉联系。

4. 亲密性(Proximity):相关的数据项组织在一起,视觉上呈现出一体化。

四、 如何选择配色方案?

可视化大屏的配色是视觉呈现的重要组成要素,配色常常与行业类型、业务形态、应用场景、设计理念、营造氛围等紧密相关。配色方案的选择有以下几点建议:

1. 色彩明度与饱和度差异显著、对比鲜明, 尽量避免使用邻近色配色;

2. 仿造自然的配色;

3. 使用深色暗色作为背景可减少拼缝带来的不适感。由于背景面积大,使用暗色背景还能够减少屏幕色差对整体表现的影响;同时暗色背景更能聚焦视觉,也方便突出内容;

4. 适当使用渐变色,由于大屏普遍存在色域偏差,更建议多使用纯色;

五、 可视化数据的字体有哪些考虑?

可视化大屏的设计过程中,优先使用系统默认字体,如有特殊需要嵌入字体时,需考虑字体的可识别性、设计风格融合度、是否可免费商用。 一般来讲一套字体文件包含了阿拉伯文、符号、拉丁文、日文、西里尔文、希腊文、拼音、注音符号等多种字符,对于大屏这个明确的场景,我们可以删掉其它使用不到的字符,仅保留中文、拼音和数字。减小字体包的大小,可以优化页面加载体验,避免在替换默认字体的过程中出现页面文字跳动等现象。 推荐字体包括:AVENIR NEXT、HELVETICA NEUE、SEGOE UI、ACENS、DIN、DIGITAL-7等。



六、 动效添加的作用?

由于可视化数据允许用户与数据可视化进行交互,在数据展示过程中,可以适当添加动效、插入视频,提升整体的视觉效果。由于大屏展示的许多数据都是实时变化的,为了减少数据变化刷新时的突然性,动效设计必不可少。在整个动效设计的过程中,除过场动画、数据的变化外,动效还肩负起增添空间感、平衡画面和整合信息的作用。

但是在增加动效的同时,需考虑服务器的承载量。避免在增加动效后喧宾夺主,因此对动效要做适当的取舍。

七、 如何保证展示的品质?

可视化数据的视觉设计是一个不断迭代的过程,同时大屏的设计与常规的设计有较大的区别。与大屏【沟通】是比较重要也是个特殊的环节。大屏有它自己独特的分辨率、屏幕组成、色彩显示以及运行、展示环境,很多问题只有设计稿投到大屏上才能够被发现,因此在样图沟通确认、开发出 demo,都需要反复测试多次,不断的迭代与精进。

在完成视觉稿的设计之后,【如何提升整体视觉的还原度】成为我们设计与前端沟通的重要内容。大屏的本质实际是一个web页面,切图与标注,成为还原度的重要组成因素。



案例分享

1、环保大数据可视化大屏项目







2、警务大数据可视化大屏项目





3、监狱大屏数据可视化项目