UI Card
可以先理解为:用容器聚合一组相关内容
UI Card 像一张资料卡。它把一个对象的标题、摘要、状态、图片和行动放在一起,让用户不用到处找信息。但卡片不是装饰盒,它必须代表一个清楚对象。
关键结构图
一张卡片被标注为标题、摘要、状态标签、媒体区域和行动按钮五个区域。
What
UI Card 是把一组相关内容和行动装进同一个可扫读容器的界面组件。
UI Card 是界面中用于承载一个主题、对象或入口的容器组件。它通常包含标题、说明、媒体、元信息和行动入口。它的边界是聚合一个相关对象的信息;如果卡片里塞进太多不相关内容,它就失去可扫读性。
StructureUI Card = 单一对象 + 稳定字段 + 清楚行动 + 可比较边界
When
当用户需要扫读多个对象,或某个对象需要把标题、状态、说明和行动绑定在一起时,可以使用 UI Card。
How
先确定卡片代表什么对象,再定义稳定字段和主行动。卡片内部层级要清楚,卡片之间字段要一致,避免每张卡看起来像不同物种。
Examples
模板库里每张卡代表一个模板,包含名称、用途、标签和预览。用户能快速比较并打开目标模板。
仪表盘里每张卡代表一个指标。如果卡里同时塞进新闻、按钮、表格和广告,用户就会失去判断线索。
来源
类型:设计系统实践 / 组件设计
事实线:Material Design 将 cards 定义为承载单一主题内容和行动的容器;很多设计系统也用 card 组织可比较入口。
依据:Material Design cards、Carbon tile/card patterns、常见产品列表和仪表盘组件实践。
边界:适合展示同类对象、入口或摘要;不适合把整页内容都套进层层卡片。
常见误读:不要把 card 当成页面的默认装饰。卡片应该服务信息组织。