指标与统计系统 是做什么的？
目的
指标与统计系统提供了一种可视化量化数据的方法论，使其立即可理解且具有上下文相关性。它不仅仅停留在“显示一个数字”，而是通过建立数值层级、趋势可视化和语义着色的规则，确保用户无需深入分析就能把握数值的意义（例如，“42%”是好是坏？）。
使用场景
- SaaS 仪表盘： 展示关键性能指标（KPI），如 MRR、流失率或活跃用户数。
- 营销社会证明： 展示“数据一览”部分（例如，“10k+ 客户”、“99.9% 正常运行时间”）。
- 健康与监控： 可视化系统性能、错误率或资源使用情况。
- 个人分析： 在健身、财务或生产力应用中显示目标的进度。
- 电子商务： 显示评论数量、库存水平或“过去 24 小时内的售出件数”。
何时不应使用
- 原始数据集： 如果用户需要对 10 行以上的多属性数据进行排序、筛选或比较，请使用
data-table-ui-system。 - 复杂关系： 如果主要目标是展示变量随时间的关系，请使用完整的图表/图形库（本原子系统不涵盖）。
- 叙事性内容： 嵌入在句子中的数字应遵循标准排版；本系统适用于“展示型”指标。
- 低价值元数据： 小计数（如通知提示）应使用
badge-and-tag-system。
输入
- 数值： 要显示的主要数字或百分比。
- 标签： 对数值含义的清晰、简洁描述。
- 背景/趋势： 比较数据（例如，与上个月相比、与目标相比）。
- 单位/格式： 货币符号、百分比或单位（例如，“毫秒”、“GB”）。
- 层级优先级： 这是“主要 KPI”还是“辅助统计”？
输出
- 统计卡规范： 容器内数值、标签和趋势的空间排列。
- 排版比例： 为“显示型”数字和标签定义的大小。
- 趋势逻辑： 上升、下降和中立状态的视觉规则（颜色 + 图标）。
- 响应式策略： 指标网格在移动设备上如何折叠或缩放。
工作流
1. 分类指标类型
确定所需的视觉“重点”：
- 级别 1：英雄指标。 大号、居中，通常无边框。用于着陆页的顶级社会证明。
- 级别 2：KPI 卡片。 包含在卡片内，通常以网格排列。用于仪表盘摘要。
- 级别 3：内联统计。 小型、高密度的显示。用于页眉或侧边栏。
2. 建立数值层级
应用“显示排版”规则：
- 数值： 必须是最大的元素（通常为正文字号的 200–400%）。
- 标签： 放置在数值的正上方或正下方。使用柔和的颜色或较小的字重，以确保不与数值竞争。
- 单位： 符号（%、$）应略小于数字，以防止它们“打破”眼睛对数值的聚焦。
3. 提供趋势和比较背景
没有背景的数字往往毫无意义。添加一个“比较层”：
- 趋势指示符： 使用箭头（↑/↓）搭配百分比或数值变化。
- 时间段标签： 始终指定比较周期（例如，“与过去 30 天相比”）。
- 语义着色： 对趋势应用颜色，而不一定是对数值。
- 积极趋势： 绿色（通常）。
- 消极趋势： 红色（通常）。
- 中立： 灰色。
4. 应用空间节奏（网格）
指标很少孤立显示。使用 responsive-grid-system 对其进行分组：
- 网格布局： 桌面端 3 或 4 列；移动端 1 或 2 列。
- 内边距： 确保在数值周围留有充足的空白（
--space-l或--space-xl）以使其“突出”。
5. 设计加载和空状态
- 骨架屏： 在数据获取时使用
skeleton-state-system显示数值和趋势。 - 零值状态： 如果指标为 0，需决定是显示为“0”还是破折号（—）。
决策规则
- “好/坏”规则： 如果指标本身不是积极/消极的（例如，“温度”不应该仅仅因为升高就变绿），则绝不要对趋势使用绿色/红色。对于无价值变化的指标，使用中立色（灰色/蓝色）。
- 舍入逻辑： 对于营销统计，舍入到最近的“K”或“M”，以便快速扫描（例如，“12.4K” vs “12,432”）。对于仪表盘，使用任务所需的精度。
- 图标使用： 只有当图标有助于区分不同类别的指标时（例如，“用户”图标 vs “收入”图标），才使用图标。不要为了装饰而使用图标。
- 标签位置： 顶部对齐的标签更适合扫描一组相似的指标；底部对齐的标签更适合“英雄”统计，其中数字是主要吸引点。
约束
- 无障碍性： 使用
aria-label提供完整上下文（例如，“收入：12,000 美元，较上月增长 5%”）。确保趋势指示符的颜色对比度符合 WCAG AA（4.5:1）。 - 响应式： 指标值绝不能溢出其容器。对非常大的数字使用流体排版（CSS
clamp()）或“收缩适应”逻辑。 - 一致性： 同一组中的所有指标必须使用相同的舍入、对齐和趋势样式。
常见失败模式
- “裸数字”： 显示数值时没有标签或背景，让用户猜测其含义。
- 过度依赖颜色： 仅使用红/绿来指示趋势，而不使用图标（↑/↓），使色盲用户无法访问。
- 层级倒置： 使标签比数值更大或更粗，减慢了“扫描并理解”的过程。
- 指标拥挤： 在单行中放置过多指标，导致数字相互重叠。
- 精度超载： 在营销着陆页上显示 4 位小数，造成不必要的认知负担。
验证标准
- 每个指标都有清晰可见的标签。
- 数值使用独特的“显示”排版大小（大于正文文本）。
- 趋势（上升/下降）同时通过颜色和图标/符号指示。
- 比较背景（例如，时间段）被明确说明。
- 语义颜色（绿色/红色）仅用于有价值变化的指标。
- 网格布局在移动设备上保持可读性（无溢出）。
- 无障碍性：通过 ARIA 为屏幕阅读器提供完整上下文。