用途:Dashboard Layout 是一种 UX 布局模式,用于把多个高价值摘要组合成单一总览,让用户在深入细节前先掌握整体状态,最适用于高管总览类需求。
适用场景:高管总览、运营监控、个人工作区摘要。应避免的场景:用户只需一两个数值时用更简单的视图;任务偏向创建或编辑而非解读时;移动端若其他表现形式更清晰,不要强行套用同一视图。
实施流程:先确认模式与问题和约束匹配,再复制示例;从 references/pattern.md 的解剖与示例入手,选择最小可行变体;在叠加视觉打磨前先落实无障碍、性能与交互护栏;按测试指引验证键盘、屏幕阅读器、响应式和失败场景下的行为。
无障碍护栏:键盘方面,确认整个布局可仅用键盘完成,焦点顺序在打开、更新或展开额外 UI 时保持合理,焦点状态可见且在高倍缩放时仍可读。屏幕阅读器方面,优先使用语义元素,仅在语义不足处添加 ARIA;在合适位置以合适礼貌度播报错误、加载、完成等状态变化;用 aria-describedby 或结构化标题关联标签、提示与状态文本。视觉方面,不要仅靠颜色传达严重程度、完成或选中状态。
性能护栏:在添加嵌套操作、图表、内联筛选等更丰富装饰前,先测量默认视图渲染成本;若布局一次渲染过多条目,使用分页、窗口化或渐进披露;稳定高度与占位几何,避免加载和刷新状态造成大幅布局偏移。
常见错误:先选布局后定任务,应改为从用户任务出发,把布局映射到比较、时序、层级或总览需求;忽略非理想状态,应预先设计数据生命周期,包括空、部分、过期和失败结果;只按桌面密度模型发布,应预先定义移动策略,如堆叠卡片、渐进披露或替代摘要。
相关模式与完整实现细节见 references/pattern.md。