SuperAPI AI 工具集

dashboard

前端与建站

查看项目

更新于 10-16 08:09

技能介绍

用途:Dashboard Layout 是一种数据展示类 UX 模式,用于将多个高价值摘要组合成统一总览,让用户先掌握整体状态,再逐层下钻。适合高管总览、运营监控、个人工作区摘要等场景。

主要能力:提供该模式的解剖结构、示例、无障碍与性能护栏以及测试指引,帮助团队在复制示例前先确认模式是否匹配问题与约束,并选择最小可行变体。

使用方式:先确认模式与问题、约束相符;从 references/pattern.md 的解剖与示例入手;在叠加视觉打磨前先应用无障碍、性能和交互护栏;再按测试指引验证键盘、屏幕阅读器、响应式与失败场景。

无障碍要点:确保仅用键盘即可完成操作,焦点顺序合理,焦点状态可见且在高倍缩放下可读;优先使用语义元素,必要时才加 ARIA;在正确位置以恰当礼貌级别播报错误、加载、完成等状态变化;不要仅靠颜色传达严重程度、完成或选中状态。

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

限制与避免:用户只需一两个数值时用更简单视图;任务为创建或编辑而非解读时避免此模式;移动端若其他呈现更清晰,不要强行套用同一视图。常见错误包括先选布局后定任务、忽略空/加载/错误等非理想状态、只做桌面密度模型。相关模式见 chart、filter-panel、statistics。完整实现细节、示例与测试说明见 references/pattern.md,模式页为 https://uxpatterns.dev/patterns/data-display/dashboard。