卡片是通往详细信息的入口。
卡片可以包含单一主题的照片、文字和链接。它们可以显示由不同尺寸元素组成的内容,例如带有可变长度说明文字的照片。
卡片集是多个卡片在同一平面上的布局。

卡片可以包含单一主题的照片、文字和链接。它们可以显示由不同尺寸元素组成的内容,例如带有可变长度说明文字的照片。
卡片集是多个卡片在同一平面上的布局。

卡片是显示由不同元素组成的内容的便捷方式。它们也适合展示尺寸或支持的操作各不相同的元素,例如带有可变长度标题的照片。

卡片示例
卡片集是同一平面上卡片的布局。

卡片集示例

卡片集示例
何时使用
显示以下内容时可以使用卡片布局:

推荐做法
1. 卡片具有圆角。
2. 卡片可以具有多个操作。
3. 卡片可以关闭和重新排列。

不推荐做法
这是网格列表的项,不是卡片。
1. 网格列表的项具有直角。
2. 网格列表的项的操作不超过两项。

推荐做法
对于操作不多且内容同质的项目,使用可快速浏览的列表比使用卡片更合适。

不推荐做法
此处使用卡片会分散用户的注意力,影响快速浏览。这些列表项也无法关闭,因此将它们放在不同的卡片上会令人困惑。

推荐做法
网格列表是展示图片相册的简洁轻量方式。

不推荐做法
在图片相册(同质内容)中不需要使用卡片。
卡片提供上下文及通往更详细信息和视图的入口,其内容和数量可以有很大差异。卡片集中的每个卡片都可以包含独特的数据集,例如带有操作的待办列表、带有操作的笔记、带有图片的笔记。
不要用无关信息或操作使卡片过载。
利用卡片内的层次结构将用户的注意力引导至最重要的信息。例如,将主要内容放在卡片顶部,或使用排版来强调主要内容。
图像可以增强卡片中的其他内容。但是,它们在卡片中的尺寸和位置取决于图像是主要内容还是仅用于补充卡片中的其他内容。
背景图像
当文本放置在纯色背景上且与文本有足够对比度时,可读性最佳。放置在图像背景上的文本应保持可读性。

此卡片集包含具有不同布局的卡片。

此卡片集包含具有不同类型和布局的卡片。

排版可以强调主要内容。

此卡片集包含具有不同布局和内容层次结构的卡片。
卡片具有固定的宽度和可变的高度。最大高度限于平台可用空间的高度,但可以临时展开(例如,显示评论字段)。
卡片不会翻转以显示背面的信息。
卡片手势应在卡片集中保持一致。
支持的手势包括:
卡片集可以按日期、文件大小、字母顺序或其他参数以编程方式排序或过滤。

卡片从左到右、从上到下排序。
卡片集只能垂直滚动。
超过卡片最大高度的卡片内容会被截断且不会滚动,但卡片可以展开。展开后,卡片可能会超出视图的最大高度。在这种情况下,卡片将与卡片集一起滚动。

超过卡片最大高度的卡片内容会被截断且不会滚动。

推荐做法
卡片可以展开以显示更多内容,而无需使用滚动。

不推荐做法
在移动设备上,避免在卡片内放置可滚动空间,因为如果已存在滚动条,可能会导致同时显示两组滚动条。

在桌面端,卡片内容可以在内部展开和滚动。
在卡片上的焦点之间遍历时,应在移动到下一张卡片之前访问所有可聚焦元素。
对于依赖焦点遍历进行导航的界面(D-pad 和键盘),卡片应具有主操作,或打开包含主操作和补充操作的新视图。

焦点遍历期间选中的操作

展开的副文本变得可见,焦点随后落在补充操作上
卡片中的主要操作通常是卡片本身。
卡片集中卡片之间的补充操作可能因内容类型和预期结果而异;例如,播放电影与打开书籍的操作不同。在卡片集中的卡片内,操作位置应保持一致。
卡片内的补充操作通常使用图标、文本和 UI 控件明确标出,通常放置在卡片底部。
除溢出菜单外,补充操作限制为两项。

包含操作区域、富媒体和副文本的卡片

包含操作区域 1 和 2、可选头部、富媒体、副文本和补充操作的卡片

包含操作区域 1、2、3 和 4、可选头部、富媒体和补充操作的卡片

包含操作区域 1 和 2、可选头部、副文本和补充操作的卡片
与主要内容内联放置的 UI 控件(例如滑块)可以修改主要内容的视图。例如,用于选择日期的滑块、用于为内容评分的星星,或用于选择日期范围的分段按钮。

此卡片在操作区域块中包含 UI 控件。

此卡片在操作区域块中包含分段按钮。

此卡片在操作区域块中包含滑块控件。

此卡片在操作区域块中包含选项卡。
溢出菜单通常放置在卡片的右上角,但如果能改善内容布局和可读性,也可以放在右下角。
注意不要在溢出菜单中塞入过多操作。

此卡片在右上角包含一个溢出菜单。
强烈不建议在文本内容中使用行内链接。
尽管卡片可以支持多个操作、UI 控件和溢出菜单,但需保持克制,并记住卡片是通往更复杂和详细信息的入口。

推荐做法
使用卡片作为通往更详细信息的入口。

不推荐做法
卡片提供上下文及通往更丰富信息和视图的入口。不要让卡片承载无关的信息或操作。强烈不建议在文本内容中使用行内链接。
卡片可以使用以下内容块构建:
可以组织这些块以突出不同类型的内容。例如,可以通过增加排版比例来强调数字。
在平板/桌面端,卡片应遵循 24dp 关键线。有关详细信息,请参见度量标准与关键线。

主标题顶部内边距:24dp
主标题底部内边距:16dp
操作按钮行内边距:8dp
副文本顶部内边距:16dp
副文本底部内边距:24dp
富媒体
推荐宽高比为 16:9 或 1:1
操作
内边距:8dp
主标题/文本
标题:24sp 或 14sp
副标题:14sp
左右内边距:在移动端为 16dp
在平板/桌面端,卡片应遵循 24dp 关键线。有关详细信息,请参见度量标准与关键线。
顶部内边距:16dp 或 24dp(当存在大的主标题时)
底部内边距:16dp(如果还有其他操作或副文本)或 24dp(没有操作或副文本)
副文本
副文本:14sp
左右内边距:在移动端为 16dp
在平板/桌面端,卡片应遵循 24dp 关键线。有关详细信息,请参见度量标准与关键线。
顶部内边距:16dp
底部内边距:24dp(如果下面还有其他操作或文本,则为 16dp)
项目符号点(不包括其文本)、图像和按钮可以扩展到 16dp 内边距之外。

移动设备上的卡片内边距与间距
从屏幕边缘到卡片的内边距:8dp
卡片之间的间距:8dp
响应式 UI
在较大的屏幕尺寸上,卡片的槽宽和外边距可能会变化,只要它们遵循 Material Design 的 8dp 网格即可。卡片外边距和槽宽可以是 8、16、24 或 40dp 宽。
外边距和槽宽不需要相等。例如,可以在同一布局中使用 40dp 外边距和 24dp 槽宽。
此动画展示了以下外边距和槽宽变化的交互:
海拔高度
卡片静止状态海拔高度:2dp
卡片抬起状态海拔高度:8dp
卡片的默认海拔高度为 2dp。
在桌面端,卡片的静止海拔高度可以是 0dp,悬停时获得 8dp 的海拔高度。

卡片静止状态海拔高度为 2dp,抬起状态海拔高度为 8dp

在桌面端,卡片的静止海拔高度为 0dp(左),悬停时为 8dp(右)
(仅限桌面端)
以下示例说明了一些可能的内容块组合。
媒体区域
副文本

头像、标题、副标题区域
媒体区域
副文本
操作

头像、标题、副标题区域
媒体区域
操作

媒体区域
主文本
副文本
操作

媒体区域
主文本
副文本
操作
展开的副文本

主文本
副文本
副文本
副文本
操作

媒体区域
操作

媒体区域
主文本
副文本
操作

媒体区域
主文本
操作

媒体区域
主文本
副文本
操作

媒体区域
主文本
副文本
操作

媒体区域
主文本
副文本
操作

媒体区域
操作

分隔线可用于分隔卡片中需要明显视觉区分的内容区域。分隔线还可以指示材质可能展开的位置的接缝。
可以展开的内容区域应使用全宽分隔线。分隔线可以指示材质在内容展开时会展开的接缝位置。

此示例使用通栏分隔线。类似于列表的展开,此卡片使用全宽分隔线来表示展开。
需要更明显视觉区分的内容区域应使用分隔线。

此示例使用通栏分隔线来在视觉上将滑块内容和列表与下方的操作分开。
使用内嵌分隔线来分隔相关内容。

此示例使用内嵌分隔线将餐厅信息与预订部分分开。