用途:Card Grid 模式用于以响应式卡片布局展示内容,帮助团队在可视化、可浏览的网格中呈现大量条目,同时保留快速评估所需的元数据。最适用于内容库与资源、目录浏览、仪表盘模块或看板。
主要能力:提供可复用的卡片网格结构,强调在不隐藏状态、规则或恢复路径的前提下减少使用摩擦。实现前需先确认模式与问题、约束匹配,再从 references/pattern.md 的解剖与示例中选择最小可行变体,最后叠加视觉打磨。
使用方式:先确认用户任务是比较、探索还是扫描,再映射布局;从参考文件起步,选择最小变体;应用无障碍、性能与交互护栏;用测试指南验证键盘、屏幕阅读器、响应式与失败场景。
无障碍与性能:确保可仅用键盘完成操作,焦点顺序合理且焦点状态可见;优先使用语义元素,必要时才加 ARIA,并在正确位置播报状态变化;不要仅靠颜色传达状态。渲染默认视图前先测量成本,条目过多时使用分页、窗口化或渐进披露,并稳定高度与占位几何以减少布局偏移。
适用场景:内容库、资源列表、目录浏览、仪表盘模块或看板。
限制:当用户只需一两个值而非完整布局时应使用更简单视图;任务为创建或编辑而非解读时应避免;移动端若其他表示更清晰则不要强行套用同一视图。常见错误包括先选布局后定任务、忽略加载/空/错误等非理想状态、只做桌面密度模型。完整实现细节、示例与测试说明见 references/pattern.md。