仪表板设计

Dashboard 设计概念

Olga Scrivner, PhD

President, Scrivner Solutions Inc

为何设计重要？

 

• 公司：NASDAQ
• 需求：向普通投资者传达每日市场信息
• 方案：时代广场的实时单值显示

 

为何趋势线不是最佳方案？

 

¹ Brath, Richard & Michael Peters. (2004). Dashboard design: why design is important.

为何设计重要？

 

• 公司：NASDAQ
• 需求：向普通投资者传达每日市场信息
• 方案：时代广场的实时单值显示

 

为何趋势线不是最佳方案？

 

 

历史洞见 vs 实时指标

¹ Brath, Richard & Michael Peters. (2004). Dashboard design: why design is important.

设计要素

                受众

• 谁会使用该仪表板？
• 他们的需求是什么？
• 哪种格式适合该受众？
• 访问频率如何？

 

                        组件

• 目的：探索型 vs 说明型
• 格式：水平 vs 垂直
• 布局：网格 vs 弹性
• 可视：数值、维度、形状

 

仪表板目的

              探索型仪表板

探索型仪表板让用户自行探索数据。

                    说明型仪表板

说明型仪表板提供预设洞见。

探索型仪表板

 

 

 

• 筛选器用于自定义数据分段

¹ Baucke, Spencer. (2022). Dashboard design essentials.

探索型仪表板

 

 

 

• 筛选器用于自定义数据分段
• 可自定义导航面板

¹ Baucke, Spencer. (2022). Dashboard design essentials.

探索型仪表板

 

 

 

• 筛选器用于自定义数据分段
• 可自定义导航面板
• 下钻查看更细粒度

¹ Baucke, Spencer. (2022). Dashboard design essentials.

探索型仪表板

 

 

 

• 筛选器用于自定义数据分段
• 可自定义导航面板
• 下钻查看更细粒度
• 交互式可视化（悬停、工具提示）

¹ Baucke, Spencer. (2022). Dashboard design essentials.

说明型仪表板

 

 

 

• 数据通常已预先筛选
• 预设叙事主线
• 面向管理层展示
• 明确行动号召

¹ Baucke, Spencer. (2022). Dashboard design essentials.

仪表板尺寸

                      物理空间

• 显示器尺寸——屏幕对角线长度

      桌面、笔记本、平板、手机等

仪表板尺寸

                      物理空间

• 显示器尺寸——屏幕对角线长度
• 屏幕分辨率——像素数量与密度（宽 x 高）

                          格式

• 标准格式——矩形仪表板

  • 比例——16:9 比例
  • 所有组件在同一屏幕可见
  • 无需滚动

• 长格式——水平或垂直

      桌面、笔记本、平板、手机等

                水平（时间线样式）

仪表板尺寸

                      物理空间

• 显示器尺寸——屏幕对角线长度
• 屏幕分辨率——像素数量与密度（宽 x 高）

                          格式

• 标准格式——矩形仪表板

  • 比例——16:9 比例
  • 所有组件在同一屏幕可见
  • 无需滚动

• 长格式——水平或垂直

      桌面、笔记本、平板、手机等

                垂直（报刊分栏样式）

仪表板布局

                  网格系统

• 二维矩阵
• 平衡对称
• 简单导航
• 大型汇总数（BAN）— 顶部一行

                                焦点

¹ Baucke, Spencer. (2022). Dashboard design essentials.

Vamos praticar!

Dashboard 设计概念