卡片用于展示与某个主题相关的内容和操作。

一、概览（Overview）

1. 要点

1. 使用卡片来承载和组织彼此相关的内容元素。

2.卡片共有三种类型：有阴影卡片（Elevated）、填充卡片（Filled）、描边卡片（Outlined）

3. 卡片内部可以包含多种内容：从图片、标题、辅助文本，到按钮、列表等组件都可以放入其中。

4. 卡片还可以嵌套其他组件。

5. 卡片的布局与尺寸会根据内部内容灵活变化。

卡片的三种类型：① Elevated card（有阴影卡片）② Filled card（填充卡片）③ Outlined card（描边卡片）

2. 与M2的区别

1. 颜色：采用了新的色彩映射方式，并支持动态配色。

2. 层级高度（Elevation）：默认提升高度变低，且默认无阴影。

3. 类型：M3 正式定义了三种卡片类型——有阴影、填充、描边。

卡片在 颜色、层级高度（Elevation）以及类型 上都进行了更新。

二、规格（Specs）

1. 卡片区域

① 容器（Container）

1.1  浮置卡片颜色（Elevated card color）

颜色数值是通过设计令牌来实现的。对设计而言，这意味着你使用与设计令牌一一对应的颜色值进行设计。
对开发实现而言，一个颜色值会以设计令牌的形式引用具体数值。

浮置卡片在亮色与暗色主题中使用的颜色角色如图 ① 低层级表面容器（Surface container low）

1.2 浮置卡片状态（Elevated card states）

状态是用来表达组件或可交互元素当前状态的视觉表现形式。

浮置卡片的状态包括：（Elevated card states:）① 悬停（Hovered）② 聚焦（Focused）③ 按下（Pressed）④ 拖拽（Dragged）⑤ 禁用（Disabled）

2. 填充卡片

① 容器（Container）

2.1 填充卡片颜色（Filled card color）

颜色数值是通过设计令牌来实现的。对设计而言，这意味着你使用与设计令牌一一对应的颜色值进行设计。
对开发实现而言，一个颜色值会以设计令牌的形式引用具体数值。了解更多关于设计令牌的信息

填充卡片在亮色与暗色主题中使用的颜色角色如图：最高层级表面容器（Surface container highest）

2.2 填充卡片状态（Filled card states）

状态是用来表达组件或可交互元素当前状态的视觉表现形式。了解更多关于交互状态

填充卡片状态（Filled card states）① 悬停（Hovered）② 聚焦（Focused）③ 按下（Pressed）④ 拖拽（Dragged）⑤ 禁用（Disabled）

3. 描边卡片

① 容器（Container）② 描边（Outline）

3.1 描边卡片颜色（Outlined card color）

颜色数值是通过设计令牌来实现的。对设计而言，这意味着你使用与设计令牌一一对应的颜色值进行设计。
对开发实现而言，一个颜色值会以设计令牌的形式引用具体数值。了解更多关于设计令牌的信息

描边卡片在亮色与暗色主题中使用的颜色角色如下：① 表面（Surface）② 描边变体（Outline variant）

3.2 描边卡片状态（Outlined card states）

状态是用来表达组件或可交互元素当前状态的视觉表现形式，了解更多关于交互状态

描边卡片状态（Outlined card states）① 悬停（Hovered）② 聚焦（Focused）③ 按下（Pressed）④ 拖拽（Dragged）⑤ 禁用（Disabled）

4. 度量

卡片内边距和尺寸度量

三、设计指南（Guidelines）

1. 使用方式

1. 使用卡片来展示单一主题的内容与操作。
2. 卡片的内容结构应便于快速扫读，以突出关键信息与可操作内容。
3. 卡片中的文本与图像应按层级清晰排布。

卡片可以展示单一主题的内容与操作

卡片可以作为深层内容的入口，如音乐专辑、旅游计划详情等。

卡片共有三种类型：（There are three types of cards:）

• 凸起卡片（Elevated）
• 填充卡片（Filled）
• 描边卡片（Outlined）

三种卡片在可读性和功能性上完全相同，因此选择哪种取决于视觉风格。

① 凸起卡片（Elevated）② 填充卡片（Filled）③ 描边卡片（Outlined）

2. 结构

卡片容器是唯一必需元素，其他元素可根据内容需要自由组合。

① Container（容器）② Headline（主标题）③ Subhead（副标题）④ Supporting text（辅助文本）⑤ Image（图片）⑥ Button（按钮）

2.1 容器（Container）

卡片容器承载所有元素，其尺寸由内部内容决定。容器表达卡片的“海拔高度”（Elevation）。卡片中唯一必须存在的元素是容器，其他都是可选项。

卡片的尺寸由其内部元素所决定

2.2 内容分区（Content blocks）

卡片内容会按区块分组，不同内容区块根据重要性呈现不同视觉强调，卡片布局可根据类型自由变化。

卡片可包含主标题、副标题、辅助文本、媒体、操作等

2.3 分割线（Dividers）

用于区隔卡片区域或表示可展开区域。

2.4 媒体（Media）

• 缩略图（Thumbnail）：可用于头像或 Logo。
• 图片（Image）：可放置照片、插画、天气图标等。
• 视频（Video）：卡片可包含视频。

卡片可包含缩略图（Thumbnail）、图片（Image）和视频（Video）

2.5 文本（Text）

• 主标题（Headline）：表达卡片主体内容。
• 副标题（Subhead）：通常为次级信息，如署名、地点等。
• 辅助文本（Supporting text）：正文内容，如摘要或说明。

卡片中的主标题、副标题与辅助说明文本

2.6 文本、图标与图片叠加

不建议将文本或图标直接放置在图像上，如果必须这么做，请确保背景图像能提供足够的对比度，让文本满足无障碍可读性标准。

在文本或图标下方加入一层半透明遮罩（translucent scrim）或包裹形状（bounding shape），可帮助提升对比度并确保可读性。

2.7 操作区域（Actions）

主要操作区域：卡片可以作为一个大的可点击区域，用于触发进入详情页或展开更深层信息。

卡片可以包含一个“主操作区域”，用户点击后会进入全屏的详情视图。

• 按钮：卡片可以包含按钮，例如 “了解更多（Learn more）” 或 “加入购物车（Add to cart）”。
• 图标按钮（Icon buttons）：卡片可以加入图标按钮，用于执行诸如 “收藏（Save）”、“点赞（Heart）” 或 “给 4 星评价（Leave a 4-star review）” 等操作
• 选择控件（Selection controls）：卡片也可以包含选择类控件，例如 筛选筹片（chips）、滑杆（sliders）、复选框（checkboxes） 等。
• 链接文本（Linked text）：卡片的辅助文本中也可以包含一个可点击链接。

卡片可以包含多个操作区域，放置按钮、链接或其他交互控件

溢出菜单（Overflow menu）：溢出菜单包含与卡片相关的更多操作，通常位于卡片的右上角或右下角。

溢出菜单一般位于卡片右上角或右下角位置

3. 卡片集合

卡片可以成组展示，多张卡片可以一起组成一个“卡片集合”，并以 网格、列表或轮播 的方式展示

默认情况下，集合中的所有卡片都位于同一视觉平面 上，它们共享相同的 静止投影高度（resting elevation），除非被“提起”或“拖动”

多张卡片组成的集合会共享相同的 静止投影高度

3.1 筛选与排序

卡片集合可以通过多种方式进行筛选，例如按 日期 或 字母顺序。如果集合支持筛选，则筛选条件必须作用于集合中的 每一张卡片。筛选或排序控件应该放置在 卡片集合外部。

卡片集合可以通过多种方式进行筛选，包括按日期筛选：“按日期排序”选项应放置在卡片集合之外

组织卡片集合时应确保易于使用，因为 布局会影响用户对内容层级的感知

将卡片以 直接、易操作 的方式排列在集合中

3.2 网格布局

卡片可以以 网格布局 的方式展示

卡片以网格形式展示

默认网格布局可以在代码中定制，例如变成 瀑布流网格（staggered grid） 或 马赛克网格（mosaic grid）。

3.3 垂直列表

卡片可以以 垂直列表 的方式展示。如下展示

3.4 轮播 / 横向滑动

卡片可以放在 横向排列 或 轮播（carousel） 组件中展示。

注：轮播（Carousel）用于展示一组内容，这些内容可以在屏幕内外水平滚动切换。

4. 自适应设计

卡片在适配不同窗口尺寸类别时，其位置与对齐方式也会随之变化。随着布局扩展，卡片及其内部元素可以左对齐、右对齐或居中对齐。

屏幕尺寸变化时，卡片的位置与对齐方式也随之调整

4.1 人体工学

调整体卡片布局，以满足大屏设备的人体工学使用需求。例如，紧凑窗口中的横向卡片，在扩展窗口尺寸时可能会变为更大的纵向卡片，使图像与文本拥有更多展示空间。

通过调整卡片布局，使内容在大屏设备上依然保持视觉焦点

4.2 视觉呈现

在调整以内容为主的组件呈现方式时，应首先从“间距”开始优化。让列表、卡片、图像等组件根据设备断点，灵活优化占用空间，在合理填充屏幕区域的同时保持良好的人体工学体验。

卡片、列表、图片等组件会通过调整间距实现适配

同一张卡片在不同方向布局中的元素位置示例

4.3 基于列的布局

在移动端布局中，列表或卡片等组件通常会拉伸至屏幕宽度，以确保视觉质量与使用体验。在为大屏设备设计时，可采用多列布局来展示内容。尽量避免让 UI 元素在大屏上无节制地铺满整个屏幕。在大屏设备上，可将相关卡片重新组织为横向行或轮播，以获得更清晰的内容结构。

大屏设计中建议使用多列布局呈现内容

4.4 小尺寸屏幕

在小尺寸屏幕（紧凑窗口）中，可考虑将卡片替换为列表，因为列表能以更紧凑的方式呈现图文内容。确保控件、操作按钮等组件特有元素仍然得到保留与呈现。

特定设备或使用场景可能需要替换组件，以符合平台的行为预期

5. 行为

5.1 展开

卡片可以使用「容器变换（container transform）」过渡模式来展示更多内容。此模式适用于具有“主视觉级别表达”的关键场景，不宜大量使用。

卡片会通过“父子级过渡”动画展开至全屏显示

建议（Do）：通过展开卡片来展示更多信息

避免（Don’t）：不要让用户通过“在卡片内部滚动”来获取更多内容

5.2 导航

卡片可以采用“前进 / 后退（forward/backward）”的过渡模式，在相邻层级的页面之间进行导航。这种动效比容器变换更简洁轻量，适用于日常的层级导航场景。

卡片可使用前进/后退过渡来实现层级间导航

5.3 手势操作

滑动（Swipe）

用户可以在卡片上的任意区域，对单张卡片进行滑动手势。滑动可用于：

• 关闭 / 移除卡片
• 更改卡片状态，例如标记、归档

建议（Do）：每张卡片只应绑定一个滑动动作

避免（Don’t）：卡片内部不应再包含可滑动内容（如图片轮播、分页器），同时，滑动手势不应让卡片的一部分“脱离”原结构。

拾起并移动（Pick up & move）

“拾起并移动”手势允许用户在卡片集合中拖动并重新排序卡片。

建议（Do）：在用户拖动卡片时，应提高其视觉层级（提升阴影），与其他内容区分开

避免（Don’t）：不要让拖动的卡片“推开”页面中的其他元素，当卡片被“拾起”时，它应出现在所有元素之上（导航栏和 App Bar 除外）。

滚动（Scrolling）

当卡片内容超过“卡片最大高度”时，内容会被截断而非在卡片内部滚动。若需展示完整内容，应通过“展开卡片”来实现。

卡片展开后可以超过屏幕高度，此时可在屏幕内滚动整个卡片。

建议（Do）：在移动端，卡片应通过“整体展开+在屏幕内滚动”展示更多内容，而非卡片内部滚动。

避免（Don’t）：移动端卡片不应内部滚动，否则会出现“双滚动条”体验问题

桌面端滚动（Scrolling on desktop）

在桌面端，卡片内容可以在卡片内部滚动（因为桌面屏幕足够大，且不会造成滚动冲突）。

桌面端允许卡片内内容滚动

四、无障碍（Accessibility）

1. 使用场景

借助辅助技术（Assistive Technology），用户应当能够完成以下操作：

• 导航到卡片本身，以及卡片内部的各个元素
• 根据“交互与风格（Interaction & style）”中所规定的输入方式，获得相应的反馈

2. 交互与风格

卡片可以是“不可点击的容器”，内部包含按钮或链接；也可以是“本体可点击的卡片”，不包含任何按钮或链接。这样做是为了避免交互元素的“叠加点击区”问题——可点击区域上不应再放置另一层可点击内容。

① 不可点击的卡片 + 内部按钮，② 可直接点击的卡片（无内部按钮）

2.1 Touch（触控）

当用户点击“可直接点击的卡片”时，卡片会出现触控水波纹（ripple）反馈。不可点击的卡片不会出现水波纹反馈。

触控：点击

2.2 拖动与移除（Dragging and dismissing）

为了符合 Material 的无障碍标准，所有涉及“拖动 / 滑动”的交互都必须提供“单指替代方案”，例如通过菜单执行同样的操作。例如：点击卡片或长按卡片，应打开一个菜单，用于调整卡片排序，或执行删除等操作。

使用 Bottom Sheet 或菜单来承载这些“单指替代操作”

不建议在正在拖动的卡片上叠加菜单。如果确实有必要，必须确保交互依然可完成。

注意（Caution）：确保菜单不会遮挡卡片内容

2.3 鼠标光标（Cursor）

当鼠标悬停在可直接点击的卡片上时，卡片会进入“悬停态（hover）”，提示其可交互，不可点击的卡片不会出现悬停态。点击可直接点击的卡片时，会出现 ripple 动效作为反馈。

光标：悬停 / 点击

2.4 键盘操作（Keyboard）

在使用 Tab 键导航时，可交互元素周围会出现“焦点高亮框”，这为用户提供明确提示：当前焦点已定位到某可交互元素上，可以执行操作。

用户可以通过 Tab 在卡片内的可交互元素之间移动，若卡片不可点击，Tab 会直接跳到卡片内部的按钮或链接。

当焦点位于可交互卡片或元素上时，按 Space 或 Enter 会执行操作，或打开二级操作（如菜单），在菜单中，用户可以使用方向键选择条目，用 Space 或 Enter 确认，用 Tab 退出菜单。

键盘操作：Tab、方向键

3.焦点行为

卡片中的所有可交互元素都必须具备 Tab 停靠点（tab stop），以便获得键盘焦点，可直接点击的卡片本身就是一个 Tab 停靠点。

对于不可点击的卡片，本体不是 Tab 停靠点，但卡片内部的所有可交互元素（如按钮、链接）都是独立的 Tab 停靠点，焦点会依次访问它们，然后才跳到下一张卡片。

使用 Tab 键逐一访问卡片中所有可点击的按钮

卡片布局会根据不同设备自动变化

4. 键盘导航

5.元素标注

当用户使用屏幕阅读器导航卡片时，卡片中的信息性内容会被朗读出来。如果卡片中的图片仅用于装饰，应对屏幕阅读器隐藏（标记为装饰性）。所有可交互元素必须同时支持屏幕阅读器朗读和键盘焦点。
可直接点击的卡片可被赋予按钮（button）或链接（link）的语义角色，依据其实际用途决定。不可点击的卡片仅作为容器使用，因此无需分配交互语义角色。

不可点击卡片中的可交互元素会按顺序被访问、获得焦点，并被朗读。在此示例中，朗读顺序为：① Heading（标题）② Image（图片）③ Body text（正文文本）④ Primary button（主要按钮）⑤ Secondary button（次要按钮）