仪表盘 | 数据概览与分析

仪表盘 | 数据概览与分析

仪表盘较为集中地展示关键数据信息并定期更新，且多采用图形、图表的形式。

设计目标

让用户快速、清晰地理解数据的意义，从而引发分析、决策等动作。

设计原则

• 逻辑先行，页面布局体现数据的分析思路
• 重点突出，最关键的视图和指标位于页面顶部或左上方
• 信息准确，保证所展现数据的准确、清晰、完整

  典型模板

  按照查看目的，仪表盘大致可分为两种类型：概览与分析。概览类型的仪表盘以浏览为主，较少筛选的操作；分析类型的仪表盘则会加入较多的筛选功能。
  三者的典型布局如下图：（监控视图、指标看板、多维分析）
  

下面分别介绍三种模板的典型样例和设计建议；注重视觉表现力的“监控大屏”类型尚未开始建设，敬请期待。

概览：监控视图

通常面向决策层用户，用以监控全局数据。内容围绕一个共同的主题，以多种维度来监控该主题，帮助用户快速捕获异常情况。

设计建议：

• 突出最关键的信息，包括分配更大的区域、使用更显眼的颜色等
• 避免遍地开花的异常告警

常见模块：

• 核心数据
• 指标卡片
• 可视化图表

概览：指标看板

通常面向决策层用户，用以监控全局数据。内容之间是并列关系，重要程度接近，每个指标卡片的面积相近。

设计建议：

• 由于模块的重要程度相近，建议允许用户自行配置（例如选择显示的模块、调整模块的顺序）
• 配色不宜过于鲜亮

常见模块：

• 核心数据
• 指标卡片
• 筛选器

• 可视化图表

  分析：多维分析

  通常面向执行层用户，用以探索某主题下的多维数据。数据的展现形式多样，且通常提供筛选功能。
  
  设计建议：

• 页面整体采用总分结构，先总览再细节

• 允许交互查看下钻的详情

常见模块：

• 核心数据
• 指标卡片
• 筛选器
• 可视化图表

设计建议

串联数据分析思路

• 根据角色、目的选择页面类型。针对决策者，可提供描述型的指标结果页面；针对执行者，可提供包含更多分析功能的分析、详情页面。
• 使用良好的视觉层次结构来安排仪表盘中的信息。
  • 确定核心指标的重要程度和相互之间的关系，从而合理布局，把结论和最重要的指标放在最醒目的位置
  • 尽量把主要信息放在一屏内，少滚动或不滚动
  • 将相互关联的信息放在同一个含标题的分组内
  • 只有当确信用户不需要并排查看选项卡的内容时，才使用选项卡（Tab）
• 可以通过串联多个页面讲述数据故事，无需在仪表盘展示所有信息
  • 善于使用筛选、过滤功能，可以让用户在观察全局的同时，还可以查看数据细节，用户在有疑问时能够快速得到方向。

有效组织数据卡片

• 将同一主题的内容放在同一张卡片内
• 将相关性高的数据放在同一张卡片内，使用通栏分割线区隔
• 卡片中，同时展示图表和数值，比单纯的图表更直观

选择合适的可视化组件

当设计者对页面的结构有初步的思路之后，可根据信息粒度的大小来选择不同的可视化组件。信息粒度从大到小对应：指标卡和排行榜、图表、文本明细。

选择合适的色板

可配置的仪表盘

提供定制功能往往能更好地满足用户的需要。
通常允许重新排列模块，或是选择显示哪些模块、采用什么形式。

关联模块或组件

工作台
监控大屏
图表示例

扩展阅读

Designing Interfaces. 仪表盘 Dashboard https://www.yuque.com/arvinxx-uxd/patterns/dashboard
CODING帮助文档 仪表盘 https://help.coding.net/docs/pro/dashboard.html