轮播用于展示一组项目，这些项目可以通过滚动进入或离开屏幕。

一、概览

1. 设计原则

• 包含图像或视频等视觉项目，并可选配标签文本。
• 四种布局：多浏览（Multi-browse）、无容器（uncontained）、主视觉（hero）和全屏（full-screen）。
• 布局可以起始对齐或居中对齐。
• 项目视觉在滚动时具有视差效果。
• 项目在轮播中移动时会改变尺寸。

轮播可以展示不同尺寸的项目

2. 更新

2025 年 11 月

• 新的轮播布局：无容器多宽高比（Uncontained multi-aspect ratio）

2023 年

新增的布局与配置：

• 无容器（Uncontained）
• 全屏（Full-screen）
• 居中轮播（Centered carousels）
• 主视觉轮播布局（Hero carousel layout）
• 多浏览布局（Multi-browse layout）

两种新的轮播类型：

① 无容器（Uncontained）

② 全屏（Full-screen）

3. 与 M2 的差异

该组件是 Material 3 中新增的。

形状：动态轮播项目在滚动时会改变形状

动效：轮播项目的移动速度与其内容不同，从而产生视差效果

交互：滚动时，轮播项目会吸附到位，以保持相同的布局。

• 主视觉轮播（Hero carousels）每次滑动切换一个项目。
• 多浏览轮播（Multi-browse carousels）一次滚动可浏览多个项目。

主视觉轮播（Hero carousels）一次滚动只浏览一个大尺寸项目

4. 研究

Material 研究团队与 200 多名参与者进行了两项研究（定量与定性），以了解他们对五种不同轮播设计的看法。

研究衡量了他们对每种轮播的交互方式的理解、对每种设计中项目数量的预期，以及他们对轮播使用方式的预期。

研究结论摘要：

• 参与者认为，轮播是探索多种不同类型内容的一种好方式。
• 出现预览中的项目或被挤压的项目，强烈暗示还有更多内容可以继续滑动查看。
• 对于一次滚动可浏览多个项目的轮播，参与者预期其中大约有 10 个项目。
• 尽管某些场景被认为更适合某些轮播设计，但所有设计都被认为在可用性上大致相当。

二、规格

① 容器

② 大号轮播项目

③ 中号轮播项目

④ 小号轮播项目

1. 颜色

颜色值通过设计令牌（design tokens）来实现。对于设计而言，这意味着使用与令牌对应的颜色值来工作。对于实现而言，一个颜色值将是一个引用某个值的令牌。

用于浅色与深色配色方案的轮播颜色角色：

① 容器

② 表面（Surface）

2. 状态

状态（States）是用于传达组件或可交互元素状态的视觉表现。

① 启用

② 悬停

③ 聚焦

④ 按下

⑤ 禁用

3. 轮播项目动态宽度

所有类型的轮播项目都会动态适配容器的宽度。

大号项目具有可自定义的最大宽度，用于将轮播项目尽可能优化地适配到可用空间中。

小号轮播项目的最小宽度为 40dp，最大宽度为 56dp。

项目在轮播布局中移动时会改变尺寸。

小号轮播项目有最小宽度和最大宽度

4. 多浏览

多浏览布局（Multi-browse layout）至少会显示一个大号、中号和小号轮播项目。

① 容器

② 大号轮播项目

③ 中号轮播项目

④ 小号轮播项目

4.1 尺寸（Measurements）

多浏览轮播（Multi-browse carousels）在容器两侧都有内边距

5. 无容器

无容器布局（Uncontained layout）会显示滚动到容器边缘的项目。

① 容器

② 大号轮播项目

5.1 尺寸（Measurements）

无容器轮播项目在滚动时会溢出到两侧的内边距区域

6. 无容器多宽高比

无容器多宽高比布局（Uncontained multi-aspect ratio layout）会显示不同宽度的轮播项目。

① 容器

② 轮播项目（16:9）

③ 轮播项目（9:16）

④ 轮播项目（1:1）

⑤ 轮播项目（3:4）

6.1 尺寸（Measurements）

无容器多宽高比轮播（Uncontained multi-aspect ratio carousels）只有起始内边距，项目之间有 8dp 的间距。

7. 主视觉

主视觉布局（Hero layout）至少会显示一个大号项目和一个小号项目。

① 容器

② 大号轮播项目

③ 小号轮播项目

7.1 尺寸

主视觉轮播（Hero carousels）在容器两侧都有内边距

8. 居中对齐主视觉

居中对齐主视觉布局（Center-aligned hero layout）至少会显示一个大号项目和两个小号项目。

① 容器

② 大号轮播项目

③ 小号轮播项目

8.1 尺寸

居中对齐主视觉轮播（Center-aligned hero carousels）在容器两侧都有内边距

9. 全屏

① 容器

② 大号轮播项目

9.1 尺寸

全屏轮播（Full-screen carousels）会从窗口边缘到边缘铺满

三、指南

轮播项目会根据窗口尺寸动态适配

1. 用法

轮播会展示一个可滚动的项目列表。

轮播项目强调视觉内容，但也可以包含简短文本，并且该文本会适配项目尺寸。

轮播有四种布局：

• 多浏览（Multi-browse）
• 无容器（Uncontained）
• 主视觉（Hero）
• 全屏（Full-screen）

这些布局都可以居中，不过居中对齐主视觉（Center-aligned hero）是最常见的居中轮播。

轮播有两种滚动方式：

• 默认：标准滚动。推荐用于无容器（Uncontained）布局。
• 吸附滚动（Snap-scrolling）：滚动后的项目会吸附到轮播布局上。推荐用于多浏览（Multi-browse）、主视觉（Hero）和全屏（Full-screen）布局。

轮播可以包含不同尺寸的项目

为你的产品选择最合适的轮播布局。有些布局更偏重视觉呈现，而另一些布局更可自定义。

轮播项目必须在屏幕上完全可见（无容器布局（Uncontained layout）除外）。滚动时，项目会自动改变尺寸并吸附到位，以保持相同的布局。

1.1  滚动页面上的无障碍要求

在纵向滚动的页面上，轮播需要提供一种无障碍方式，让用户无需横向滚动也能查看所有项目。（这一要求不适用于全屏轮播（Full-screen carousels）。）

Material 建议在轮播下方添加一个“查看全部”（Show all）按钮，用于打开一个专门的纵向滚动页面，展示所有轮播项目。

如果轮播有标题栏（header），也可以改用箭头图标按钮。

更多细节与替代方案，请查看无障碍（Accessibility）选项卡。

确保用户可以通过纵向滚动浏览所有轮播项目

1.2 多浏览（Multi-browse）

多浏览布局最适合一次浏览多个项目，例如照片或活动信息流。

推荐使用吸附滚动（Snap-scrolling），以确保项目易于识别且尺寸一致。

在更大的屏幕上，该布局会显示更多的大号和中号项目。

如果轮播项目需要大量文本或图像很复杂，应避免使用该布局。

多浏览布局（Multi-browse layout）在轮播中包含不同尺寸的项目

在紧凑窗口中，如果轮播项目包含文本，最多只显示三个轮播项目。如果需要显示超过三个项目，请确保图像和内容易于理解和识别。

⚠️警告--在紧凑窗口中，只有当项目易于理解和识别时，才显示超过三个项目

1.3 无容器（Uncontained）

无容器布局最接近传统轮播：项目为单一尺寸，并会流过屏幕边缘。

默认滚动与吸附滚动（Snap-scrolling）都很适用于该布局。

由于项目不会改变尺寸，该布局可以自定义在每个项目的上方或下方展示更多文本或其他 UI，而不会导致文本被遮挡或裁切。

在无容器布局（Uncontained layout）中，轮播项目都是相同尺寸

1.4 无容器多宽高比（Uncontained multi-aspect ratio）

无容器多宽高比轮播与无容器轮播的布局相同，但包含不同尺寸的项目。

项目宽度可以在最小宽度的 9:16 到最大宽度的 16:9 之间变化。

只有当项目具有不同宽度时，才使用这种轮播变体。

在无容器多宽高比布局（Uncontained multi-aspect ratio layout）中，轮播项目具有不同尺寸

1.5 主视觉（Hero）

主视觉布局最适合突出展示需要更多关注的内容，例如电影、剧集或其他媒体缩略图。它会突出显示一张大图作为焦点，同时提供对下一个内容的预览。

在更大的屏幕上，会显示更多的大号项目。

使用吸附滚动（Snap-scrolling），让用户可以轻松一次切换一个项目。

在紧凑窗口中，主视觉轮播（Hero carousel）应显示一个大号项目和一个小号项目

1.6 居中对齐主视觉（Center-aligned hero）

当主视觉布局居中对齐时，会在起始边缘增加一个额外的预览项目，从而使大号轮播项目居中。

居中的主视觉轮播（Centered hero carousel）有两个小号轮播项目，并且一个大号项目居中

1.7 全屏（Full-screen）

全屏布局最适合用于沉浸式体验，例如视频文章、精选标题，或视觉内容很丰富的项目。它可以在图片之上包含文本和其他 UI 元素。

该布局最适合用于高大于宽的内容，并进行纵向滚动。它只在紧凑窗口和中等窗口的竖屏方向下生效。不要在横屏方向下使用该布局。

全屏布局应使用吸附滚动（Snap-scrolling）。不要使用默认滚动。

全屏轮播（Full-screen carousels）会填满屏幕的整个内容区域

2. 结构

多浏览轮播（Multi-browse carousel，左）与主视觉轮播（Hero carousel，右）：

① 容器

② 大号轮播项目

③ 中号轮播项目

④ 小号轮播项目

2.1 容器

轮播容器承载所有轮播项目。容器中可见的轮播项目数量会根据轮播布局和窗口尺寸等级而变化。

轮播容器是一个矩形。它可以以多种方式使用，并可拉伸到任意尺寸。

2.2 轮播项目

轮播项目承载内容。轮播项目没有固定宽度；它会根据窗口尺寸或其在轮播布局中的位置而改变宽度。项目的动态宽度有三种：大号、中号和小号。

① 大号轮播项目

② 中号轮播项目

③ 小号轮播项目

大号项目具有可调整的最大宽度。这会改变其他所有大号、中号和小号轮播项目在屏幕上的适配方式。

大号项目必须保持足够大，以便易于理解和识别。

中号项目会根据轮播尺寸和可用空间动态调整宽度。

小号项目的宽度范围为 40–56dp。

① 大号项目

② 小号项目

当大号项目的最大宽度足够窄时，屏幕上可以一次显示更多项目。在紧凑窗口中，这仅推荐用于图像较为简单的轮播。

① 大号项目

② 中号项目

③ 小号项目

2.3 项目文本（可选）

轮播项目以视觉内容为主。项目文本是可选的，并且应当简短。

如果你的轮播项目需要大量文本，考虑使用无容器布局（Uncontained layout），它可以展示更多信息；或者改用一组卡片（cards）。

⚠️警告 -- 在紧凑窗口中，避免让轮播项目的文本超过两行，除非背景很简单，例如纯色背景。

轮播项目内的内容可以根据容器和窗口尺寸动态适配。

文本在每种尺寸下都应始终易于理解。考虑在较小的轮播项目上，将文本适配为简短标签。

① 大号轮播项目，显示完整标题和标签文本

② 中号轮播项目，隐藏标题文本

③ 小号轮播项目，缩写标签文本

3. 响应式布局

随着轮播容器尺寸增大，同时可见的轮播项目数量也会增加。

在紧凑窗口尺寸下，轮播可以较为舒适地一次显示最多三个轮播项目。

随着窗口尺寸增大，会加入更多轮播项目，并按比例调整尺寸。

全屏轮播（Full-screen carousels）始终一次只显示一个项目。

在更大的屏幕上，轮播可以一次显示更多项目

4. 行为

4.1 滚动

轮播项目在滚动时具有视差效果。

默认滚动行为不会将项目吸附到布局网格上。它们可以停在容器内的任意位置。只在无容器布局（Uncontained layout）中使用这种方式。

吸附滚动（Snap-scrolling）会在滚动后将轮播项目对齐到布局网格。

项目在松手时会吸附到网格上。将其用于多浏览（Multi-browse）、主视觉（Hero）和全屏（Full-screen）布局。

使用吸附滚动（Snap-scrolling）的轮播项目在松手时会保持相同的布局

在全屏布局（Full-screen layouts）中，确保轮播项目会吸附到轮播容器的边缘。避免让它们自由滚动或停在中间位置。

全屏布局必须使用吸附滚动（Snap-scrolling）。

❌错误示例--避免在全屏轮播（Full-screen carousels）中自由滚动

四、无障碍

1. 使用场景

用户应能够使用辅助技术完成以下操作：

• 导航到轮播容器
• 在不同轮播项目之间导航
• 激活一个轮播项目
• 跳过轮播项目

2. 滚动页面上的要求

在纵向滚动的页面上，轮播需要提供一种无障碍方式，让用户无需横向滚动也能查看所有项目。（这一要求不适用于全屏轮播（Full-screen carousels）。）

Material 建议在轮播下方添加一个“查看全部”（Show all）按钮，用于打开一个专门的纵向滚动页面，展示所有轮播项目。

没有标题栏（header）的轮播应使用“查看全部”（Show all）按钮来查看所有轮播项目

“查看全部”（Show all）按钮应有 4dp 的内边距

如果轮播有标题栏（header），也可以改用箭头图标按钮。将箭头图标直接放在标题栏旁边，或放在同一行中。

确保在“全部轮播项目”页面中也显示该标题栏（header）。

有标题栏（header）的轮播应使用箭头来查看所有轮播项目

标题（Headers）应与起始边缘对齐，箭头图标的尺寸应为 48dp。

在可能的情况下，避免自定义无障碍解决方案。不过，如果你的产品需要替代方案，可以考虑在附近的导航中添加“查看全部”（Show all）按钮，或在轮播附近添加替代控制按钮。

避免在轮播内部或旁边添加 UI 元素，例如箭头或其他图标。

3. 交互与样式

3.1 触摸（Touch）

点按轮播项目会让其形状略微变化，并产生触摸涟漪（touch ripple）作为交互反馈。

触摸：点按（Tap）

3.2 光标（Cursor）

悬停状态（hover state）会提供一个视觉线索，表明轮播项目是可交互的。当轮播项目被点击时（无论处于激活或未激活状态），都会出现涟漪（ripple）作为交互反馈。

光标：悬停（Hover）、点击（click）

3.3 初始焦点（Initial focus）

使用辅助技术导航到轮播时，使用 Tab 将初始焦点放在第一个轮播项目上。然后，使用 Tab 或方向键在轮播项目之间导航。

使用上/下方向键离开轮播，并将焦点移动到页面上的下一个元素，例如“查看全部”（Show all）按钮。

✅正确示例 -- 将初始焦点设置在第一个轮播项目上，并使用方向键在项目之间导航

❌错误示例 -- 避免将焦点落在轮播容器上

4. 键盘导航

5. 元素标注

轮播容器具有容器（container）角色。

轮播容器应被恰当地标注，并且具有容器（container）角色。

每个轮播的项目数量可能不同，因此标签会读出项目总数以及当前聚焦的项目。

轮播项目的标签会指出当前聚焦的项目以及项目总数。

6. 减少动效

当开启减少动效（Reduced motion）设置时，应移除视差效果（parallax effect），轮播项目在进入视野时也不应再扩展。所有项目都是相同尺寸。

确保启用减少动效（Reduced motion）的轮播能延伸到窗口边缘，以避免视觉内容被裁切。

① 用于多项滚动（multi-scroll）的默认轮播

② 开启减少动效（Reduced motion）设置的轮播

在启用减少动效（Reduced motion）的主视觉轮播（Hero carousels）中，小号轮播项目只会在屏幕上部分显示。

① 用于单项滚动（single-scroll）的默认轮播

② 开启减少动效（Reduced motion）设置的轮播