展现形式 · 概念
Cards：独立摘要与入口的卡片模式
Cards 卡片模式何时适合组织可独立理解的摘要、媒体和行动，如何避免整卡点击造成嵌套交互、重复信息，以及把普通有框容器当作 Card。
Card 把一个可独立理解的主题摘要、可选媒体和相关行动组织成单元，通常作为详情页或下一任务的入口。边框、圆角和阴影只是视觉样式；没有独立主题与行动的有框容器不因此成为 Card。
适合与不适合
适合文章、商品、案例、人员或分类等同类对象的摘要集合。连续叙事、单独行动、表格数据或必须按顺序读完的内容不适合卡片化；一段文字外面加边框也不应为了“组件统一”变成 Card。
优点与缺点
| 优点 | 缺点 |
|---|---|
| 每项自包含，易于浏览和重排 | 容器过多会削弱真正重要的信息 |
| 能组合标题、摘要、媒体和状态 | 等高要求可能造成空白或截断 |
| 适合响应式 Grid 或 List | 整卡点击容易产生嵌套交互和重复链接 |
| 便于建立通往详情的清晰入口 | 重复图片和标签会降低区分度 |
内容要求
每张 Card 应只有一个明确主题，并提供足以判断是否进入详情的区分信息。标题不能只有“了解更多”；图片、标签和摘要不应在整组中机械重复。若存在多个操作，需要区分主要入口与次要动作，不能让整卡链接包住按钮或表单控件。
响应式与无障碍
卡片组宜保留列表语义，每张卡片的标题等级服从页面结构。DOM 中的标题、媒体、正文和行动保持合理顺序，不为左右布局倒置阅读顺序。图片根据用途提供文本替代；焦点样式要覆盖真实可操作元素，而不是只依赖悬停抬升效果。
状态与退化
没有媒体时卡片应自然收拢；摘要缺失时不能留下空白占位。一张卡片可以退化为普通入口，多张卡片可根据空间使用 Grid 或 List。样式失效时仍应形成标题清楚的链接列表。
发布前检查
- 每张卡片能否脱离相邻卡片独立理解？
- 卡片是否真的通向更多信息或行动？
- 是否存在嵌套链接、重复焦点或含糊的“了解更多”？
- 最长标题、无图和多状态组合是否测试过？
- 去掉边框和阴影后，内容结构是否仍成立？