人的注意力是稀缺资源，让信息去匹配读者的注意力，显然优于让人的注意力去适应信息。根据 NNGroup、UXPin 等设计团体的研究，人眼最常用的两种扫描模式是「F 型」和「Z 型」：
- 「F 型」应用最为广泛，尤其是对于内容丰富的网站
- 「Z 型」用于那些文字信息少，最后需要强调用户点击类的网站
人眼扫描模式帮我们确定了我们布局设计的原则。但落实到驾驶舱、多级分析页面、BI分析报告、移动端这些常用的报表上，有没有详细的布局参考呢？请接着往下看：
一、驾驶舱布局1、推荐的布局分布图
- 主：核心业务指标安排在中间位置、占较大面积，多为动态效果丰富的地图
- 次：次要指标位于屏幕两侧，多为各类图表
- 辅：辅助分析的内容，可以通过钻取联动、轮播显示
一般把有关联的指标让其相邻或靠近，把图表类型相近的指标放一起，这样能减少观者认知上的负担并提高信息传递的效率。
结构 | 示例 |
2、合理的信息密度筛选
新手经常会有一个误区，认为可视化就是把所有的内容全部都展现给用户看。
但是一个好的可视化应当要砍掉大部分内容，只保留最需要的，这样才有利于向用户清晰地叙述可视化故事。
信息筛选前后对比效果如下图所示：
二、多级分析页面布局经典驾驶舱布局
将数据分析类型页面拆解为多个部分，通常为“总 - 分 -分”的结构，多维度地展示数据的全貌，帮助阅读者发现当前问题。
第一层：数据概览
内容：整体指标状况和变化趋势。
呈现方式：指标卡搭配图表／表格
在报表首页顶端直接展现最重要的指标信息的布局，是目前众多以运营人员为对象的报表系统最喜欢使用的结构，整体数字指标一目了然，近期的数据用图表／表格在下方体现，如下图所示：
优点：这种报表可以让阅读者在几秒内把握全局数据，是一种在阅读报表方面时间投入产出比很高的方式。在每个指标上还可以进行钻取，对于感兴趣的数据指标主题，阅读者可以通过钻取来了解其详细内容。这种方式不仅能降低切换成本，而且不会给阅读者的思维造成“颠簸感”。
第二层：详细分析
当阅读者想进一步了解「存货」相关的情况，可以点击第一层指标卡，钻取到详细的存货金额分析，如下图所示：
第三层：数据详情
数据明细用来展示单个指标总览和明细。常用于数据报表细节信息的展示，根据业务诉求可配置文本、列表、可视化图表等，这里以明细表举例，如下图所示：
三、BI分析报告布局1、布局原则
- 描述清楚模型的作用
- 关键指标计算公式
- 根据图表得出结论和建议
2、示例
四、移动端布局1、背景
移动端报表有着随时随地、迅速获取的特性，然而大部分报表工程师之前还只接触过PC端报表的制作，对移动端报表该怎么设计却无从下手。
对于用户来说，移动端屏幕小，可承载的内容少，所以布局设计上要能快速传达关键信息，要醒目、显眼。
2、解决方案
借助 FineReport 软件，运用 App 的设计思路，布局设计思路如下：
篇幅较长，具体布局设计可参考：移动端布局
五、其他注意事项1、间距相等
涉及到各模块标题与模块边界的间距、模块与模块之间的间距模块与整个大页面额间距，这几个重要地方要做到统一一致，确保布局的规整性。
一些细节之处也需要做到统一，例如图表坐标轴与模块边界的间距，各个分类之间的间距等需要细化。
2、合理留白
在版式设计中空白运用的好坏，直接影响其版面的视觉传达效果。留白的运用是增强视觉传达效果，提高作品的诉求力，赋予作品版面审美价值的一种重要构成技术。
应用在报表中主要体现在模块不要顶边，模块与模块间要有合理间距，在模块中图表的边线不要顶边。
私信回复“报表”，可免费体验企业级报表工具——FineReport
最新评论