半环仪表: 单指标对目标
适用前提: 单一 KPI 对明确目标或阈值的度量, 处于仪表盘摘要位。刻度 0 至 120, 目标线落在 100, 阈值区段以红黄绿三段弧区分并配文字图例, 读数与目标文本直标在弧旁。
- 实测值
- 23.4% 绿电占比
- 目标值
- 30.0% (年度目标)
- 达成率
- 78.0% / 未达标
- 差距
- 距目标 6.6 个百分点, 距达标线(90) 12.0 个百分点
官方配色指引: 状态用红黄绿并给出目标标记线, 但红黄绿不能单独承担含义, 因此每个区段都带文字名称与数值范围, 刻度与读数直接印在图上。
子弹图网格: 多 KPI 并列的正解
官方数据量阈值: 单仪表只承载一个指标, 3 个及以上 KPI 并列时改用子弹图网格。每个横向子弹条在一行内同时给出灰阶区间带 / 实测值彩条 / 目标线, 四个指标的信息密度约等于一个仪表的占位。
变体对照 / 同一指标降级为子弹条
主图鉴的绿电替代达成率并非必须占据 C 位: 不需要氛围渲染时, 一行子弹条即可承载全部信息。半环负责摘要氛围, 子弹负责信息密度, 两者共享同一套阈值区段与目标线。
实现参考(官方库推荐): D3.js / ApexCharts / 手写 SVG, 本页图形全部手写。交互级别为悬停, 键盘聚焦须回传与悬停一致的细节。
克制原则: 一个页面最多一个仪表
仪表滥用是仪表盘设计里最常见的问题: 半环用大面积只表达一个数字。官方明确给出不适用条件与数据量阈值, 以下是落地清单。
警惕仪表的驾驶舱陷阱
仪表天然吸引视线, 但它把一整块版面换成一条弧加一个读数。把多个仪表并排成"驾驶舱"是最高频的滥用: 信息密度骤降, 还会诱导用户在互相独立的仪表之间做比较。
官方数据量阈值: 单仪表只承载一个指标; 需要并列 3 个及以上 KPI 时, 改用上一节的子弹图网格。
官方不适用条件: 不存在目标或基准时不要用仪表, 半环失去参照后只剩装饰; 多 KPI 同时对比时也不要用, 子弹图才是为此而生。
要
- 有明确目标或阈值的单 KPI 摘要场景
- 数值与目标文本直标在仪表旁, 不让读者量弧
- 阈值区段配文字标签, 刻度文字完整可读
- 页面只保留一个仪表, 其余指标交给子弹图
- 键盘聚焦展示与悬停完全相同的细节
不要
- 没有目标值也画半环, 只为填充版面
- 一屏并排多个仪表组成驾驶舱
- 只靠红黄绿颜色传达状态
- 用仪表去对比多个指标的高低
- 省略刻度与数值, 让弧线自说自话
表格兜底与状态摘要
屏幕阅读器 / 打印 / 低带宽环境下的后备视图: 表格与状态摘要承载与图形完全一致的信息, 这是官方无障碍兜底方案, 也是图鉴页自身的无障碍后备。
| 指标 | 实测 | 目标 | 达成率 | 所处区间 | 状态 |
|---|---|---|---|---|---|
| 绿电替代率能耗 / 门店月度 | 23.4% | 30.0% | 78.0 | 预警 70-90 | 预警 |
| 月度销售额全渠道含税 / 万元 | 416.0 | 368.0 | 113.0 | 达标 90-120 | 达标 |
| 会员复购率90 日二次下单 | 15.7% | 18.0% | 87.2 | 预警 70-90 | 预警 |
| 坪效每平米月销售 / 万元 | 1.92 | 2.00 | 96.0 | 达标 90-120 | 达标 |
| 线上订单履约当日达 / 单 | 3,840 | 6,000 | 64.0 | 未达标 0-70 | 未达标 |
状态摘要: 五项指标中 2 项达标 / 2 项预警 / 1 项未达标, 达成率中位数 87.2。主图鉴指标绿电替代率 78.0, 处于预警区间, 未达标, 距目标差 6.6 个百分点。
数据为演示样本; 实现库参考: D3.js / ApexCharts / 手写 SVG, 本页图形全部为手写 SVG 与 CSS。