卡片Card
你可能会说
每个商品做成一张小卡片：图在上面，名字价格在下，整张都能点。
卡片是把同一对象的标题、摘要、图片和操作组织在一起的内容容器项目、商品或文章的浏览页可一张卡片对应一个对象。整张卡是否能点击必须清楚；局部操作则让链接和按钮分别承担。
什么时候用
- 内容推荐流：文章卡、视频卡、商品卡
- 仪表盘上每个指标一块卡，方便扫读销售额¥ 86.4w订单数12,846
- 把长页面切成几个内容分组，比如设置页通知设置邮件通知短信通知
- 图片占比大的内容，封面放卡片顶部
什么时候不用
- 纯文字长文：使用 排版 Typography 组织排版年度总结报告长文已经自成内容区，额外卡片边界会干扰阅读
- 卡片内再嵌套卡片，双层边框会让容器边界相互竞争外层卡片内层卡片
- 每条只有一行文字：使用 列表 List 更紧凑账号与安全›消息通知›隐私设置›
- 整页只有一块独立内容，通常不需要再套卡片边界整页唯一的内容也要套个框
组成结构 · Anatomy
AI 图鉴入门
每个组件一张卡片，3 分钟看懂一个。
内容容器，一块 = 一个整体
可选，图片放顶部最抓眼
卡片里最重的一行字
摘要、说明等补充信息
可选，放和这张卡相关的按钮
常见变体 · Variants
基础卡片Basic
团队知识库
收录 47 篇文档，每周更新。
一组文字信息需要作为完整对象浏览时
带封面With Cover
AI 图鉴入门
图片是主要识别信息时，将封面置于卡片顶部
简洁无边框Flat
快捷入口
弱化边框，融进背景。
页面背景已清楚划分内容区域时，可弱化卡片边框
带操作With Actions
官网改版 v2
用户要在卡片上直接预览或编辑
典型使用场景
内容推荐流
AI 图鉴入门
每个组件一张卡片，3 分钟看懂。
我的桌面布置
整理常用设备与收纳方式。
夏日城市漫游
周末两小时的拍照路线。
仪表盘指标卡
本月销售额
¥ 86.4w
↑ 12.5%
订单数
12,846
↑ 8.3%
退款率
2.1%
↓ 0.4%
设置页分组
通知设置
邮件通知
短信通知
隐私设置
公开我的主页
商品展示
无线耳机 Pro
¥ 299限时 8 折
猫爪机械键盘
¥ 199新品
延伸阅读 · 权威出处