ux-dashboard

仪表板技能

此技能的工作方式（请先阅读）

这是一项生成式技能，而仪表板有一个典型的过度设计陷阱：把所有可用指标都塞进一个屏幕。正如经验所言——“当一切都很重要时，就等于什么都不重要。” 默认的直觉是展示所有数据；好的仪表板只展示能回答用户问题的少数几项内容。因此，此技能分为以下步骤：

1. 明确查看者是谁，以及他们要做出什么决策——这决定了屏幕上应该展示什么。
2. 应用始终适用的核心原则——适用于任何仪表板的组织、层级和图表适配原则。
3. 审慎决定信息密度、细节和图表类型——呈现依具体情境而定的选择，而不是默认“全部展示”。

然后交由审查环节处理——尤其是 aesthetics（杂乱程度和层级是成败关键）。

---

步骤 0 — 设计前明确情境

• 受众及其要做出的决策——他们何时、为何查看仪表板，以及数据应促使他们采取什么行动。（真正的答案来自用户调研；若不清楚，请先询问。）这是判断内容是否应该展示的筛选标准。
• 仪表板类型：
  • 运营型——实时监控，需要立即响应（患者生命体征、航班交通）。一眼即可全面了解，且频繁更新。
  • 分析型——用于调查和审慎决策（例如销售仪表板）；不受时间紧迫性影响，支持深入查看。
• 角色——面向单一受众还是多个受众？若涉及多个角色，个性化配置就很重要。
• 平台——屏幕尺寸决定可容纳的组件数量和响应式布局。

若未获得答案但仍继续设计，请说明所采用的假设。

---

始终适用的核心原则（适用于任何仪表板）

• 从用户的问题出发，而不是从现有数据出发。 对每个组件都问：“它能支持什么决策？”如果没有，就删掉它。根据目标、用户需求和数据特性选择组件。
• 避免信息过载。 相关的少数内容胜过面面俱到的繁多内容。缺乏层级的信息密度只会造成混乱。
• 优先考虑便于扫读。 人们会扫读，而不是逐字阅读。将最重要的指标放在视线最先落到的位置，并按重要性排列。
• 将相关内容分组。 使用容器、分隔线和留白，让相关指标作为一个整体呈现（共同区域原则）；分区的标签／标题是视觉锚点，应让它们足够醒目。
• 用留白划分区块并突出重点——这能提升数据密集屏幕的可读性，也能让关键数字更醒目。
• 保持结构一致——不同容器采用统一的对齐方式、标题字号和边距；这也有助于响应式布局扩展。
• 将需要比较的数据放在一起。 不要把用户需要对比的内容藏在标签页或弹出窗口后面；始终需要查看的信息绝不要隐藏。仅当内容无需并排比较时才使用标签页。
• 让图表类型与数据相匹配（请参阅下方参考）——这是影响正确性最大的一项决策。

---

依赖上下文的决策（呈现出来，不要自动应用）

决策	适用情形	避免／调整情形	默认建议
运营型还是分析型定位	实时监控需要一目了然且全面的布局	分析用途需要深入查看，时间压力较小	根据第 0 步确定的类型匹配布局／刷新频率
显示哪些指标／组件	指标有助于做出实际决策	“因为我们有这些数据”／虚荣指标	严格删减，只保留能回答用户问题的内容
详细程度／深入查看	分析型仪表盘适合从概览逐步深入到细节	运营型仪表盘需要一次性显示所有内容	先展示概览，再逐步深入；不要用标签页隐藏对比内容
各指标的图表类型	根据数据意图选择（趋势／比较／整体中的部分／相关性）	装饰性图表选择；类别过多时使用饼图	根据数据选择（参见下文）
按角色自定义	多角色系统（销售经理与分析师）	受众单一且明确（会增加不必要的复杂性）	仅在角色确实存在差异时提供
实时更新	运营监控	分析审查（持续刷新会造成干扰）	根据决策速度匹配刷新频率

---

图表选择与准确呈现（快速参考）

根据数据意图选择图表：

• 条形图 — 比较离散类别。折线图 — 展示随时间变化的趋势。面积图 — 展示随时间变化的趋势和数量。饼图／圆环图 — 展示整体中的各部分（仅适用于少量扇区）。散点图 — 展示两个变量之间的相关性。气泡图 — 展示三个维度。雷达图 — 比较多个变量（数量较少）。K 线图 — 展示金融价格区间。

图表的准确性与清晰度（必须遵守——否则会误导或排斥用户）：

• 坐标轴从零开始。 截断基线会夸大差异，造成误导。（故意误导的可视化 → 在暗黑模式审查中标记。）
• 不要使用 3D 图表样式 — 这会扭曲对数值的感知。
• 不要只用颜色来表达含义 — 应配合图标／标签／形状（→ 无障碍性）。
• 标签保持水平，注释清晰易读，颜色／标记保持一致，间隔设置适当（不要把一年的数据挤进每日刻度），使用标准的直角条形图，并为多折线图设置聚焦／非聚焦状态。

---

验证结果（编排）

交接时需使用各审查视角对应的可安装技能 name。仅当该技能已安装时才调用；如果未安装，本技能本身已包含这些规则——直接继续，不要因此受阻。

生成或修订后，应将结果交由审查视角审核，而不是直接宣布完成。这些是候选视角——具体做法由 docs/orchestration-policy.md 决定，也可以将整个内容交由 ux-design-review 审查。在此处，heuristics、dark-patterns 和 microcopy 属于 Tier A（自动运行）；accessibility 和 aesthetics 属于 Tier B（可选）——在现有设计系统下，aesthetics 不启用，而 accessibility 的审查范围会收窄为使用方式。如果用户调用此技能是为了处理某个特定事项，请遵循该范围。

• ux-aesthetics-audit (Tier B — 可选；设计系统下不启用) — 决定仪表盘成败的关键：杂乱程度、视觉层级、留白、容器分组、“是否有一项内容明显最重要？”
• ux-heuristics-audit (Tier A) — 可识别性、状态可见性（尤其是运营场景）、用户控制（自定义）、保持对比内容可见。
• ux-accessibility-audit (Tier B — 可选；设计系统下收窄范围) — 图表不能只靠颜色编码、对比度、带标签的分区、通过键盘访问交互式组件。
• ux-dark-patterns-audit (Tier A) — 误导性可视化：截断坐标轴、3D 造成的扭曲、挑选特定间隔。
• ux-microcopy-audit (Tier A) — 分区标题、标签和注释清晰且一致。

如果 aesthetics 指出内容过载，请回到筛选环节：删减组件，只保留能回答用户问题的内容。

---

常见的正确与错误做法

❌ 不要	✅ 应该
展示所有可用指标	只展示有助于决策的少数指标
所有内容的视觉权重都相同	排定优先级；最重要的内容应位于视线首先落到的地方
松散的组件漂浮在同一平面上	使用容器、分隔线、留白和带标签的区块进行分组
将对比数据藏在标签页后面	将需要对比的数据并排展示
为了装饰而选择图表／使用含 12 个扇区的饼图	根据数据表达意图选择图表
截断 Y 轴／使用 3D 柱状图	使用从零开始的基线和平面图表，避免误导
图例仅依靠颜色区分数据系列	结合颜色与图标／标签／形状
使用垂直／斜置的坐标轴标签	使用水平且易读的标签
未经检查就交付	交由审美、启发式原则和无障碍方面进行检查

---

来源经验（Uxcel）

• 如何设计仪表板以提升分析效果
• 图表类型及其适用场景
• 图表设计最佳实践