驾驶舱、移动端、分析报告……这几个可视化布局思路,拿来就能用!

文 | 商业智能BI相关文章 阅读次数:1,283 次浏览
2023-03-08 11:38:37

人的注意力是稀缺资源,让信息去匹配读者注意力,显然优于让人的注意力去适应信息。根据 NNGroup、UXPin 等设计团体的研究,人眼最常用的两种扫描模式是「F 型」和「Z 型」:

  • 「F 型」应用最为广泛,尤其是对于内容丰富的网站

可视化布局思路,移动端报表该怎么设计,阅读报表

  • 「Z 型」用于那些文字信息少,最后需要强调用户点击类的网站

可视化布局思路,移动端报表该怎么设计,阅读报表

人眼扫描模式帮我们确定了我们可视化布局设计的原则。但落实到驾驶舱、多级分析页面、BI分析报告、移动端这些常用的报表上,有没有详细的可视化布局思路参考呢?请接着往下看:

驾驶舱布局

1、推荐的布局分布图

  • 主:核心业务指标安排在中间位置、占较大面积,多为动态效果丰富的地图
  • 次:次要指标位于屏幕两侧,多为各类图表
  • 辅:辅助分析的内容,可以通过钻取联动、轮播显示

一般把有关联的指标让其相邻或靠近,把图表类型相近的指标放一起,这样能减少观者认知上的负担并提高信息传递的效率。

             结构                       示例
可视化布局思路,移动端报表该怎么设计,阅读报表
可视化布局思路,移动端报表该怎么设计,阅读报表 可视化布局思路,移动端报表该怎么设计,阅读报表
可视化布局思路,移动端报表该怎么设计,阅读报表 可视化布局思路,移动端报表该怎么设计,阅读报表
可视化布局思路,移动端报表该怎么设计,阅读报表 可视化布局思路,移动端报表该怎么设计,阅读报表
可视化布局思路,移动端报表该怎么设计,阅读报表

2、合理的信息密度筛选

新手经常会有一个误区,认为可视化就是把所有的内容全部都展现给用户看。
但是一个好的可视化应当要砍掉大部分内容,只保留最需要的,这样才有利于向用户清晰地叙述可视化故事。
信息筛选前后对比效果如下图所示:

可视化布局思路,移动端报表该怎么设计,阅读报表

多级分析页面布局

经典驾驶舱布局

将数据分析类型页面拆解为多个部分,通常为“总 – 分 -分”的结构,多维度地展示数据的全貌,帮助阅读者阅读报表发现当前问题。
可视化布局思路,移动端报表该怎么设计,阅读报表

第一层:数据概览

内容:整体指标状况和变化趋势。

呈现方式:指标卡搭配图表/表格

在报表首页顶端直接展现最重要的指标信息的布局,是目前众多以运营人员为对象的报表系统最喜欢使用的结构,整体数字指标一目了然,近期的数据用图表/表格在下方体现,如下图所示:

可视化布局思路,移动端报表该怎么设计,阅读报表

优点:这种报表可以让阅读者在阅读报表几秒内把握全局数据,是一种在阅读报表方面时间投入产出比很高的方式。在每个指标上还可以进行钻取,对于感兴趣的数据指标主题,阅读者可以通过钻取来了解其详细内容。这种方式不仅能降低切换成本,而且不会给阅读者的思维造成“颠簸感”。

第二层:详细分析

当阅读者想进一步了解「存货」相关的情况,可以点击第一层指标卡,钻取到详细的存货金额分析,如下图所示:

可视化布局思路,移动端报表该怎么设计,阅读报表

第三层:数据详情

数据明细用来展示单个指标总览和明细。常用于数据报表细节信息的展示,根据业务诉求可配置文本、列表、可视化图表等,这里以明细表举例,如下图所示:
可视化布局思路,移动端报表该怎么设计,阅读报表

BI分析报告布局

1、布局原则

描述清楚模型的作用

关键指标计算公式

根据图表得出结论和建议

可视化布局思路,移动端报表该怎么设计,阅读报表

2、示例

可视化布局思路,移动端报表该怎么设计,阅读报表

移动端布局

1、背景

移动端报表该怎么设计,移动端报表有着随时随地、迅速获取的特性,然而大部分报表工程师之前还只接触过PC端报表的制作,对移动端报表该怎么设计却无从下手。

对于用户来说,移动端屏幕小,可承载的内容少,所以对移动端报表该怎么设计上要能快速传达关键信息,要醒目、显眼。

2、解决方案

借助 FineReport 软件,运用 App 的设计思路,可视化布局思路如下:
可视化布局思路,移动端报表该怎么设计,阅读报表

其他注意事项

1、间距相等

涉及到各模块标题与模块边界的间距、模块与模块之间的间距模块与整个大页面额间距,这几个重要地方要做到统一一致,确保布局的规整性。

可视化布局思路,移动端报表该怎么设计,阅读报表

一些细节之处也需要做到统一,例如图表坐标轴与模块边界的间距,各个分类之间的间距等需要细化。

2、合理留白

在版式设计中空白运用的好坏,直接影响其版面的视觉传达效果。留白的运用是增强视觉传达效果,提高作品的诉求力,赋予作品版面审美价值的一种重要构成技术。
应用在报表中主要体现在模块不要顶边,模块与模块间要有合理间距,在模块中图表的边线不要顶边。

比如,目前主流的软件——finereport,它小到填报、查询、部署、集成,大到可视化大屏、dashboard驾驶舱,应有尽有,功能很强大。最重要的是,因为这个工具,整个公司的数据架构都可以变得规范,下一步就是构建企业的大数据平台了。而且它是java编写的,支持二次开发,类Excel的设计器,无论是IT还是业务,上手都很简单:编辑sql优化、数据集复用简直都是小case,大大降低了报表开发的门槛。在企业中被关注最多的数据安全方面,FineReport支持多人同时开发同一套报表,并通过模板加锁功能防止编辑冲突;通过数据分析权限控制,保障数据安全。

可视化布局思路,移动端报表该怎么设计,阅读报表

报表产品更多介绍: www.finereport.com

相关内容

立即体验 立即体验

返回顶部