SuperAPI AI 工具集

statistics

设计与创作

查看项目

更新于 10-16 09:54

技能介绍

用途:Statistics Display 模式用于可靠地呈现一小组关键指标,并提供足够上下文,让用户快速判断指标的方向、幅度和紧迫性。最适用于需要头部 KPI 条的场景。

适用场景:头部 KPI 条、仪表盘中的状态卡片、落地页上的摘要指标。

不适用:当用户只需要一两个数值、不需要完整布局时,应使用更简单的视图;当任务本身是创建或编辑而非解读数据时,避免使用该模式;如果其他呈现方式在移动端更清晰,不要强行套用同一视图。

实现流程:先确认模式与问题和约束匹配,再复制示例;从 references/pattern.md 中的结构与示例入手,选择最小可行变体;先应用无障碍、性能和交互防护措施,再叠加视觉打磨;使用测试指南在键盘、屏幕阅读器、响应式和失败场景下验证行为。

无障碍要求:键盘方面,确保仅用键盘即可完成统计展示操作,打开、更新或展开额外 UI 时保持焦点顺序合理,并保留在高倍缩放下仍可读的可见焦点状态;屏幕阅读器方面,优先使用语义元素,仅在语义不足时补充 ARIA,在正确位置以合适礼貌程度播报错误、加载、完成等状态变化,必要时用 aria-describedby 或结构化标题关联标签、提示与状态文本;视觉方面,不要仅靠颜色传达严重程度、完成或选中状态。

性能要求:在添加嵌套操作、图表、内联筛选等装饰前,先测量默认视图渲染成本;布局可能一次渲染过多条目时,使用分页、窗口化或渐进披露;稳定高度和占位几何,避免加载与刷新导致大幅布局偏移。

常见错误:先选布局后定任务,应先从用户任务出发,再映射到比较、时序、层级或概览需求;忽略非理想状态,应提前设计数据生命周期,包括空、部分、过期和失败结果;只做桌面密度模型,应在实现前定义移动策略,如堆叠卡片、渐进披露或替代摘要。

相关资料提供以下关联模式:https://uxpatterns.dev/patterns/data-display/chart、https://uxpatterns.dev/patterns/data-display/comparison-table、https://uxpatterns.dev/patterns/data-display/dashboard。完整实现细节、示例和测试说明见 references/pattern.md。模式页面:https://uxpatterns.dev/patterns/data-display/statistics。安装命令、收费与价格信息暂未提供。