当前位置:首页 > 资源 > 教程

可视化大屏如何排版布局?

主讲:东软平台云

高清大屏由于面积大、展示信息多、便于共享讨论及决策,是数据可视化的常用载体,可视化大屏在观感上往往给人留下极其震撼的印象,便于营造氛围、打造仪式感,目前常用的场景有:数据展示、监控预警、数据分析等。本教程主要介绍如何在大屏上进行排版布局,如何做到主次分明、条理清晰。

关于可视化大屏尺寸与分辨率

大屏的尺寸与分辨率是影响可视化布局的关键因素,我们需要先了解一下大屏分辨率的基本知识。通俗讲,分辨率也可以理解为大屏的长宽比,比如1920px * 1080px,大屏有四种分辨率:大屏逻辑分辨率,也就是设计稿分辨率、信号源输出分辨率、DVI矩阵切换器分辨率”、大屏实际物理分辨率,如图所示。

一般情况下设计稿分辨率就是被投大屏的信号源即电脑显卡的分辨率,设计稿的分辨率多为1920px*1080px。有多个信号源时,就需要多个设计稿,每个设计稿的尺寸即对应信号源电脑显卡的分辨率。

GIS地图,数据可视化,数据可视化

当信号源电脑显卡分辨率长宽比与大屏物理长宽比不一致时,信号源电脑显卡分辨率会做自定义调整与大屏保持一致,这种情况设计稿分辨率也会发生变化。所以开始设计前有必要了解物理大屏的长宽比。
最佳展示效果:
设计稿长宽比 = 大屏实际物理长宽比
设计稿长宽比 = 显卡输出长宽比
信号源输出分辨率 = DVI矩阵切换器分辨率 = 大屏实际物理分辨率

大屏排版布局的基本知识
所谓排版布局,就是按照大屏的尺寸,把屏幕划分成若干区域,每个区域放置一个业务指标。指标是跟据数据可视化的目的抽取出来的,分为主要指标、次要指标、辅助指标三类。主要业务指标通常安排在中间位置、占较大面积,其余指标在主要指标周围展开,有关联的指标尽量靠近,相近图表类型的指标尽量放在一起。

GIS地图,数据可视化,数据可视化

大屏的排版布局应遵循主次分明、条理清晰、注意留白的原则,指标按照重要程度和优先级进行布局:

  • 主要指标:主要指标多位于屏幕正中央,可适当添加动效增强视觉效果;
  • 次要指标:次要指标多位于屏幕的两侧,一般是各种类型的数据或图表;
  • 辅助指标:辅助指标多为主要指标的补充信息,常伴随交互效果或动效呈现,可排布也可不排布。

指标在大屏上排版布局,需要遵循对比、重复、对齐、亲密性等原则。

  • 对比:完全不同的数据类型,选择截然不同信息图示。
  • 重复:相同类型或相似数据,选用尽可能相同的展示。
  • 对齐:利用对齐方式保证信息图示之间的视觉联系。
  • 亲密性:相关的数据项组织在一起,视觉上呈现出一体化。

 

常用的大屏排版布局参考模板

一、均衡布局

这是一种比较均衡的布局,辅助信息比较零碎,不需要占用很大高度空间,可呈现于主要指标的底部。

GIS地图,数据可视化,数据可视化

二、左右对称布局

这是一种左右对称的布局结构,可适用于很多场景。如果辅助信息过多,可以将一些辅助信息放置到次要信息中以节省空间,同理也可以多个指标信息进行轮播或用tab切换来处理。

GIS地图,数据可视化,数据可视化

三、非对称布局。

把复杂的具有较多图标的次要信息放置在一侧,而把数据信息比较简单的次要信息与辅助信息放在另一侧。非对称布局在设计中需注意保持视觉上的平衡。

GIS地图,数据可视化,数据可视化

四、窄屏布局

如果屏幕宽度较窄,可以把主要信息放置在一侧(左侧右侧均可),能给出更整合的空间,不至于两侧都过于零碎,既便于布局也方便浏览。

GIS地图,数据可视化,数据可视化

大屏排版布局的注意事项

在进行排版布局时,要特别注意提前了解拼接屏的规格,合理利用大屏上各个小显示单元,尽量避免关键数据或图表被拼缝分割。

GIS地图,数据可视化,数据可视化

大屏排版布局通常不是一次就能完成的,需要反复调试,反复在物理大屏上看效果,反复征求意见,反复修改设计稿,最后才能达到预期效果,切不可操之过急。