设计感满满！能直接套用的可视化布局思路，看了就会，拿来就能用

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

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

1、驾驶舱布局

1、推荐的布局分布图

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

2、合理的信息密度筛选

新手经常会有一个误区，认为可视化就是把所有的内容全部都展现给用户看。

但是一个好的可视化应当要砍掉大部分内容，只保留最需要的，这样才有利于向用户清晰地叙述可视化故事。

信息筛选前后对比效果如下图所示：

2、多级分析页面布局

经典驾驶舱布局

将数据分析类型页面拆解为多个部分，通常为“总 – 分 -分”的结构，多维度地展示数据的全貌，帮助阅读者发现当前问题。

第一层：数据概览

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

呈现方式：指标卡搭配图表／表格

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

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

第二层：详细分析

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

第三层：数据详情

数据明细用来展示单个指标总览和明细。常用于数据 表细节信息的展示，根据业务诉求可配置文本、列表、可视化图表等，这里以明细表举例，如下图所示：

3、BI分析 告布局

1、布局原则

2、示例

4、移动端布局

1、背景

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

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

2、解决方案

借助 FineReport 软件，运用 App 的设计思路，布局设计思路如下：

篇幅较长，具体布局设计可参考：移动端布局（文末回复”布局“获取详情）

5、其他注意事项

1、间距相等

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

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

2、合理留白

在版式设计中空白运用的好坏，直接影响其版面的视觉传达效果。留白的运用是增强视觉传达效果，提高作品的诉求力，赋予作品版面审美价值的一种重要构成技术。

应用在 表中主要体现在模块不要顶边，模块与模块间要有合理间距，在模块中图表的边线不要顶边。

惊喜大放送：

现在回复”大屏“即可免费体验企业级 表

回复”布局“即可获取移动端布局设计详情