卡片展示
它把围绕同一个主题的信息和操作放进一个边界清楚的内容块里。
- 一块框起来的信息
- 一张张排着的内容块
- 把图片标题按钮装在一起的小块
- 内容卡片
- 信息卡片
- 卡片容器
示例
尚无经验证的示例
这条词条暂时只提供平台定义和出处，不用临时动画冒充正式内容。
Web / iOS / Android 对照
Web需自己实现
桌面与移动端现代浏览器
Card
网页没有原生卡片元素，卡片通常由文章、区块和链接等语义元素按内容自行组合。
通常怎么做：根据内容选用 article、section 或普通容器，不要为了外观牺牲正确语义。
iOS需自己实现
iOS / iPadOS
Card
苹果平台没有通用 Card 组件，卡片只是由容器、背景和内容组合出的视觉模式。
通常怎么做：用 SwiftUI 容器和平台表面样式组合，并确保整卡可点时只有一个明确目标。
Android原生支持
Android 手机 / 平板
Card
Compose Material 3: Card
使用规范
什么时候用
- 一组内容围绕同一个对象，并需要与相邻内容形成清楚边界
什么时候别用
- 页面上每一段内容都套卡片，导致层级和阅读顺序变得杂乱
容易混淆
给 AI 的提示词
这条词条还没有经过验证的实现提示词。