运营仪表盘设计

运营仪表盘设计 是做什么的？

构建一个数据优先的仪表盘，遵循 概览 → 关注 → 详情 → 行动 的流程。保持主视图不含解释性句子，同时不隐藏用于解读数据或操作控件所需的信息。

何时使用

• 设计或审查一个运营仪表盘、KPI视图或紧凑的分析图形。
• 帮助用户识别异常，并从受影响的数据中采取定义好的行动。
• 将一个杂乱的仪表盘重构为一致、可扫描的视觉系统。

不要将此作为叙事报告、教育图形、引导界面或需要明确指令的界面的通用规则。静态图形不能依赖工具提示或假装提供交互操作。

输入与前提条件

获取数据或精确模式、目标受众、运营决策、交付格式（原型、图片、HTML或可工作的仪表盘）以及目标设备。识别度量单位、时间窗口、基线、阈值、期望方向和允许的操作。

无需特定的库、服务或Agent客户端。使用可用工具检查数据、构建请求的工件并进行测试。仅询问确实缺少的决策关键信息；标记临时假设。切勿发明测量值、阈值、操作或成功的QA结果。

流程

1. 建立数据契约

• 核对总和、聚合、分母、单位、时间窗口以及与实际计算结果的基线可比性。
• 区分零值、缺失值、过时值、不可用值和不适用值；切勿将缺失数据静默转换为零。
• 为每个指标定义更高值或更低值是否为问题。对于中性指标（如支出），使用批准的预算或范围；若没有，则使用中性样式且不暗示问题。
• 在统计不确定性和数据新鲜度影响决策时，保持其可见性。

完成条件： 每个显示的指标都有明确的解读和已知的数据限制。

2. 定义层级与行动

• 从整体状态开始，然后在数据上直接标记异常，最后提供详情。
• 根据严重性和决策相关性设置关注优先级，而非任意的视觉装饰。
• 将行动放置在受影响的数据点上或旁边：例如，一个可操作的色块单元格应打开其相关的详情或工作流。
• 使用有意义的无障碍名称、可见焦点和清晰的交互提示。切勿发明补救行动或在设计视图时执行它。

完成条件： 每个标记都有明确的定义原因和真实的行动，或明确为非交互的详情目标。

3. 选择视觉编码

优先使用公共尺度上的位置，然后是长度，再是角度/面积，最后是颜色（当它们适合任务时）。这是一个设计启发式方法，并不保证一种编码适用于所有数据集。

默认视觉词汇表：

• 分类色块图： 离散的、带标签的阈值，用于异常扫描。
• 子弹图： 显示值、可比较的目标和有意义的范围，而非仪表盘。当需要比较时对齐尺度。
• 分段共享条： 显示定义整体的一部分，而非饼图，包括两个类别的份额。显示分母，不要为重叠类别暗示整体。
• 迷你图： 紧凑的时序上下文，包含足够的端点、比例或范围信息，以避免误导性比较。
• 一致的详情面板： 工具提示配备等效的焦点/可触摸弹出框或详情面板。

如果该词汇表无法如实地表达请求的任务，请解释不匹配之处并提出合适的替代方案，而不是强行将数据放入其中。

完成条件： 每个组件都支持比较或决策，且其尺度是可解读的。

4. 应用精简语言与无障碍显著性

• 在主数据视图上使用简洁的指标名称、数值、单位、周期标签、基线标签和必要的控制/状态标签；无叙述性洞察或解释性段落。
• 紧凑的比较，如 ▼ 15% vs Sep，必须明确被比较的对象以及变化是否有利。箭头本身不得编码严重性。
• 将支持性解释放在详情中，但切勿将必要含义仅放在悬停中。提供键盘和触摸访问、无障碍名称，以及适当情况下的等效文本/数据表示。
• 对有序量级使用顺序尺度，在有意义的中位数周围使用发散尺度，对定义阈值使用分类尺度。
• 在已确认的问题处增加视觉强度。若低值是不好的，则反转严重性映射；若两个极端都不好，则使用双侧阈值。
• 将颜色与非颜色提示配对，如形状、图标、图案、边框或显式的短状态标签。
• 对普通文本目标至少达到 4.5:1 的对比度，对大文本和有意义的图形/控制边界达到 3:1。测试实际前景/背景组合和交互状态；避免在未经验证的色调上使用强调文本。
• 移除装饰、冗余网格线和不必要的背景。在需要解读数据时保留图例、标签和引导。

完成条件： 视图在不依赖颜色、悬停或主数据表面上的解释性句子的情况下仍可理解。

5. 构建并验证请求的工件

交付请求的格式，而不仅仅是设计描述。对于可工作的仪表盘，执行其交互和数据状态；对于图片或原型，明确标识非功能性控件。

执行以下验证清单。修复已确认的缺陷，并将未执行的检查标记为 未验证。不要将规格说明称为已实现的仪表盘，或将结构审查称为可用性测试。

完成条件： 工件以有证据支持的QA和明确的局限性交付。

验证

• 数据： 计算的总和与份额是否一致；单位、时间窗口、分母和基线是否匹配；已测试缺失/陈旧/中性状态。
• 显著性： 检查渲染后的视图，确认预期的异常是否突出。区分视觉审查与测得的用户注意力测试。
• 颜色： 在工具允许时，检查真实的色觉模拟；独立确认非颜色提示传达了严重性。模拟本身不能建立可访问性。
• 对比度： 测量渲染的颜色对及相关状态；报告方法和失败，而不仅仅从调色板名称断言合规性。
• 语言： 检查主表面是否有解释性句子，保留必要的控制、状态和安全措辞。
• 交互： 执行键盘导航、可见焦点、焦点/触摸详情、关闭以及预期行动路径，而不执行未经批准的外部操作。
• 布局： 检查目标视口、裁剪、溢出、长标签以及典型的空/单/多项状态。
• 完整性： 图例和尺度是否足够，布局规则是否冲突，输出是否编造数据或暗示不支持的操作。

输出合同

返回：

1. 请求的工件或其验证位置。
2. 主要决策和行动路径的简要描述。
3. 一份紧凑的QA报告，区分通过、失败和未验证的检查项，附上方法或证据。
4. 剩余的假设或障碍，以及如果未完成，提供一个具体的下一步行动。

无叙述规则适用于仪表盘的主要数据表面，而不适用于此交付报告、可访问性文本或必要的错误/安全消息。

陷阱

• 去除必要上下文的最小化是模棱两可，而非高效。
• 红色值不一定表示问题；严重性需要特定于指标的规则。
• 工具提示不是必要可见或可通过焦点访问的信息的可访问替代品。
• 稀疏图形仍可能因不兼容的尺度、截断的范围或缺失的分母而误导。
• 不要仅凭对比度检查就声称符合 WCAG 标准。
• 不要声称进行了眼动追踪、色觉模拟或测试过的交互，除非实际执行了这些操作。