组件 卡片

卡片

卡片是通往详细信息的入口。

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

卡片集是多个卡片在同一平面上的布局。

用法

卡片显示由不同元素组成的内容,其大小和支持的操作各不相同。

支持的手势

滑动
拾起并移动

相关组件

网格列表

给开发人员

Android 卡片
Polymer 卡片

Material Design 中用于详细信息入口的卡片

用法 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

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

Material Design 中的卡片示例

卡片示例

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

Material Design 中的卡片集示例

卡片集示例

Material Design 中的卡片集示例

卡片集示例

何时使用

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

  • 由不同数据类型组成的集合(例如图像、视频、文本)
  • 不需要直接比较(用户不会直接比较图像或文本)
  • 支持长度变化很大的内容(例如评论)
  • 包含交互式内容(例如 +1 按钮或评论)
  • 原本会放在网格列表中,但需要显示更多内容来补充图像
Material Design 中的卡片样式

推荐做法

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

Material Design 中的错误卡片样式示例

不推荐做法

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

Material Design:使用列表展示简单、操作少的内容

推荐做法

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

Material Design 中的卡片妨碍快速浏览且无法关闭

不推荐做法

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

Material Design 中的网格列表用于简洁的图片相册

推荐做法

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

Material Design:图片相册中不需要卡片

不推荐做法

在图片相册(同质内容)中不需要使用卡片。

内容 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

卡片提供上下文及通往更详细信息和视图的入口,其内容和数量可以有很大差异。卡片集中的每个卡片都可以包含独特的数据集,例如带有操作的待办列表、带有操作的笔记、带有图片的笔记。

不要用无关信息或操作使卡片过载。

内容层次结构

利用卡片内的层次结构将用户的注意力引导至最重要的信息。例如,将主要内容放在卡片顶部,或使用排版来强调主要内容。

图像可以增强卡片中的其他内容。但是,它们在卡片中的尺寸和位置取决于图像是主要内容还是仅用于补充卡片中的其他内容。

背景图像

当文本放置在纯色背景上且与文本有足够对比度时,可读性最佳。放置在图像背景上的文本应保持可读性。

Material Design 中具有不同布局的卡片集

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

Material Design 中具有不同布局的卡片集

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

Material Design 中利用排版强调主要内容

排版可以强调主要内容。

Material Design 中具有不同布局的卡片集

此卡片集包含具有不同布局和内容层次结构的卡片。

行为 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

卡片具有固定的宽度和可变的高度。最大高度限于平台可用空间的高度,但可以临时展开(例如,显示评论字段)。

卡片不会翻转以显示背面的信息。

支持的手势

卡片手势应在卡片集中保持一致。

支持的手势包括:

  • 滑动手势可以用于每张卡片。应限制视图内的滑动手势,以免它们相互重叠。例如,可滑动的卡片不应包含可滑动的图像轮播,以确保滑动卡片时只触发单个操作。
  • 拾起并移动手势可用于让用户对卡片集中的卡片进行排序。但也应考虑过滤或排序是否能更好地组织内容。

卡片集的过滤和排序

卡片集可以按日期、文件大小、字母顺序或其他参数以编程方式排序或过滤。

  • 集合中的第一项位于左上角
  • 顺序从左到右、从上到下进行
Material Design 布局中的卡片排序

卡片从左到右、从上到下排序。

滚动

卡片集只能垂直滚动。

超过卡片最大高度的卡片内容会被截断且不会滚动,但卡片可以展开。展开后,卡片可能会超出视图的最大高度。在这种情况下,卡片将与卡片集一起滚动。

Material Design 中卡片内容超高被截断,不可滚动

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

Material Design 中的卡片可展开以显示更多内容

推荐做法

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

Material Design:避免在移动设备的卡片内使用可滚动空间

不推荐做法

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

Material Design 中的卡片内容可展开和滚动

在桌面端,卡片内容可以在内部展开和滚动。

卡片焦点

在卡片上的焦点之间遍历时,应在移动到下一张卡片之前访问所有可聚焦元素。

对于依赖焦点遍历进行导航的界面(D-pad 和键盘),卡片应具有主操作,或打开包含主操作和补充操作的新视图。

Material Design:焦点遍历期间的操作

焦点遍历期间选中的操作

Material Design:展开的文本带有补充操作

展开的副文本变得可见,焦点随后落在补充操作上

操作 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

卡片中的主要操作通常是卡片本身。

卡片集中卡片之间的补充操作可能因内容类型和预期结果而异;例如,播放电影与打开书籍的操作不同。在卡片集中的卡片内,操作位置应保持一致。

补充操作

卡片内的补充操作通常使用图标、文本和 UI 控件明确标出,通常放置在卡片底部。

除溢出菜单外,补充操作限制为两项。

Material Design 中带有操作区域和媒体的卡片

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

Material Design 中带有操作、媒体和文本的卡片

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

Material Design 中带有操作和富媒体选项的卡片

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

Material Design 中带有操作区域和可选头部的卡片

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

UI 控件

与主要内容内联放置的 UI 控件(例如滑块)可以修改主要内容的视图。例如,用于选择日期的滑块、用于为内容评分的星星,或用于选择日期范围的分段按钮。

Material Design 中操作区域带有 UI 控件的卡片

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

Material Design 中操作区域带有分段按钮的卡片

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

Material Design 中带有滑块控件的卡片

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

Material Design 中操作区域带有选项卡的卡片

此卡片在操作区域块中包含选项卡。

溢出菜单(可选)

溢出菜单通常放置在卡片的右上角,但如果能改善内容布局和可读性,也可以放在右下角。

注意不要在溢出菜单中塞入过多操作。

Material Design 中右上角带有溢出菜单的卡片

此卡片在右上角包含一个溢出菜单。

其他操作

强烈不建议在文本内容中使用行内链接。

尽管卡片可以支持多个操作、UI 控件和溢出菜单,但需保持克制,并记住卡片是通往更复杂和详细信息的入口。

Material Design 中用于访问详细信息的卡片

推荐做法

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

Material Design 中的卡片提供上下文,避免过载

不推荐做法

卡片提供上下文及通往更丰富信息和视图的入口。不要让卡片承载无关的信息或操作。强烈不建议在文本内容中使用行内链接。

内容块 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

卡片可以使用以下内容块构建:

  • 可选头部
  • 主标题
  • 富媒体
  • 副文本
  • 操作

可以组织这些块以突出不同类型的内容。例如,可以通过增加排版比例来强调数字。

在平板/桌面端,卡片应遵循 24dp 关键线。有关详细信息,请参见度量标准与关键线

Material Design 中用于组织卡片的内容块

主标题顶部内边距: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 内边距之外。

Material Design 中富媒体内容块的规范

卡片集

移动设备上的卡片内边距与间距

从屏幕边缘到卡片的内边距:8dp
卡片之间的间距:8dp

响应式 UI

在较大的屏幕尺寸上,卡片的槽宽和外边距可能会变化,只要它们遵循 Material Design 的 8dp 网格即可。卡片外边距和槽宽可以是 8、16、24 或 40dp 宽。

外边距和槽宽不需要相等。例如,可以在同一布局中使用 40dp 外边距和 24dp 槽宽。

此动画展示了以下外边距和槽宽变化的交互:

  • 8dp 外边距和槽宽
  • 16dp 外边距和槽宽
  • 24dp 外边距和槽宽
  • 40dp 外边距和槽宽
  • 40dp 外边距和 24dp 槽宽

海拔高度

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

卡片的默认海拔高度为 2dp。

在桌面端,卡片的静止海拔高度可以是 0dp,悬停时获得 8dp 的海拔高度。

Material Design:卡片具有 2dp 和 8dp 海拔高度

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

Material Design:卡片具有 0dp 和 8dp 海拔高度

在桌面端,卡片的静止海拔高度为 0dp(左),悬停时为 8dp(右)

(仅限桌面端)

内容块组合

以下示例说明了一些可能的内容块组合。

媒体区域

  • 16:9 比率

副文本

  • 文本:14sp
  • 左右内边距:16dp
  • 顶部内边距:16dp 或 24dp(存在主标题时)
  • 底部内边距:16dp(如果还有其他操作或副文本)或 24dp(如果没有操作或副文本)
Material Design 示例中的内容块组合

头像、标题、副标题区域

  • 高度:72dp
  • 左右内边距:16dp
  • 上下内边距:16dp

媒体区域

  • 16:9 比率

副文本

  • 文本:14sp
  • 左右内边距:16dp
  • 上下内边距:16dp

操作

  • 内边距:8dp
Material Design 示例中的内容块组合

头像、标题、副标题区域

  • 高度:72dp
  • 左右内边距:16dp
  • 上下内边距:16dp

媒体区域

  • 16:9 比率

操作

  • 内边距:8dp
  • 操作之间的内边距:4dp
Material Design 示例中的内容块组合

媒体区域

  • 16:9 比率

主文本

  • 文本:24sp
  • 顶部内边距:24dp
  • 底部内边距:16dp
  • 左右内边距:16dp

副文本

  • 文本:14sp
  • 底部内边距:16dp
  • 左右内边距:16dp

操作

  • 内边距:8dp
Material Design 示例中的内容块组合

媒体区域

  • 16:9 比率

主文本

  • 文本:24sp
  • 顶部内边距:24dp
  • 底部内边距:16dp
  • 左右内边距:16dp

副文本

  • 文本:14sp
  • 底部内边距:16dp
  • 左右内边距:16dp

操作

  • 内边距:8dp

展开的副文本

  • 文本:14sp
  • 顶部内边距:16dp
  • 底部内边距:24dp
  • 左右内边距:16dp
Material Design 示例中的内容块组合

主文本

  • 文本:24sp
  • 顶部内边距:24dp
  • 底部内边距:16dp
  • 左右内边距:16dp

副文本

  • 顶部内边距:12dp
  • 左右内边距:16dp


副文本

  • 文本:14sp
  • 底部内边距:16dp
  • 左右内边距:16dp

副文本

  • 文本:14sp
  • 顶部内边距:16dp
  • 底部内边距:16dp
  • 左右内边距:16dp

操作

  • 内边距:8dp
Material Design 示例中的内容块组合

媒体区域

  • 16:9 比率

操作

  • 内边距:8dp
Material Design 示例中的内容块组合

媒体区域

  • 1:1 比率

主文本

  • 文本:24sp
  • 顶部内边距:24dp
  • 左右内边距:16dp


副文本

  • 文本:14sp
  • 底部内边距:16dp
  • 左右内边距:16dp

操作

  • 内边距:8dp
Material Design 示例中的内容块组合

媒体区域

  • 1:1 比率

主文本

  • 文本:24sp

操作

  • 内边距:8dp
Material Design 示例中的内容块组合

媒体区域

  • 80dp
  • 1x
  • 顶部内边距:16dp

主文本

  • 文本:24sp
  • 顶部内边距:24dp
  • 左右内边距:16dp

副文本

  • 文本:14sp
  • 左右内边距:16dp

操作

  • 内边距:8dp
Material Design 示例中的内容块组合

媒体区域

  • 1.5x(基于 80dp 媒体区域递增)
  • 顶部内边距:16dp

主文本

  • 文本:24sp
  • 顶部内边距:24dp
  • 左右内边距:16dp

副文本

  • 文本:14sp
  • 左右内边距:16dp

操作

  • 内边距:8dp
Material Design 示例中的内容块组合

媒体区域

  • 2x(基于 80dp 媒体区域递增)
  • 顶部内边距:16dp

主文本

  • 文本:24sp
  • 顶部内边距:24dp
  • 左右内边距:16dp

副文本

  • 文本:14sp
  • 左右内边距:16dp

操作

  • 内边距:8dp
Material Design 示例中的内容块组合

媒体区域

  • 3x(基于 80dp 媒体区域递增)
  • 内边距:16dp

操作

  • 四周内边距:8dp + 16dp
Material Design 示例中的内容块组合

卡片中的分隔线

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

可以展开的内容区域应使用全宽分隔线。分隔线可以指示材质在内容展开时会展开的接缝位置。

Material Design 中用于展开的全宽分隔线

此示例使用通栏分隔线。类似于列表的展开,此卡片使用全宽分隔线来表示展开。

需要更明显视觉区分的内容区域应使用分隔线。

Material Design 中用于内容分隔的通栏分隔线

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

使用内嵌分隔线来分隔相关内容。

Material Design 中用于分隔餐厅信息和预订部分的内嵌分隔线

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