精选轮播界面
使用集合让一切井井有条
根据您的偏好保存内容并对其进行分类。
精选轮播界面会展示与用户相关的内容。

资源
亮点
- 使用精选轮播界面突出显示特定内容。
- 精选轮播界面可以包含界面元素,例如图片、标题、内容详情、视频、操作和分页控件。
- 轮播界面通常位于应用的首页或着陆页上,以便用户轻松访问。
- 精选轮播界面具有视觉吸引力,有助于吸引用户并打造沉浸式体验。
- 显示的内容可以根据用户的观看记录、偏好或当前趋势进行个性化设置。
变体
您可以通过以下两种方式集成精选轮播界面:
- 沉浸式
- 卡片


内容块
解剖学

- 为文字添加边框
- 标题
- 说明
- 按钮
规格

解剖学

- 背景
- 有效元素
- 无效元素
- 元素总数
规格

沉浸式
解剖学


- 图片背景
- 电影纱罩
- 海报
- 背景颜色
- 内容块
- 分页
- 内容网格
规格

卡片
解剖学


- 图片背景
- 电影纱罩
- 海报
- 卡片背景
- 内容块
- 分页
- 内容网格
规格

用法
使用精选轮播界面,以引人入胜、具有视觉吸引力且易于浏览的格式展示和宣传精选内容。
背景中的图片
在提高在线影音应用的精选轮播界面中的用户互动度方面,背景中的图片起着至关重要的作用。
高画质图像
使用视觉上具有吸引力且与聚焦卡片的内容相关的高分辨率图片。
check_circle
正确做法
确保图片简洁明了、具有视觉吸引力,并且与内容区块相关。
有明显的视觉层次结构
通过在图片上使用纱罩,确保背景不会从聚焦的卡片内容中分散注意力;这有助于用户将焦点放在卡片的标题、说明和号召性用语按钮上。
check_circle
正确做法
使用纱罩可以提高可读性和内容消化效果。
cancel
错误做法
确保背景不会影响屏幕上其余内容的可读性和可见性。
本页面上的内容和代码示例受内容许可部分所述许可的限制。Java 和 OpenJDK 是 Oracle 和/或其关联公司的注册商标。
最后更新时间 (UTC):2025-07-27。
[null,null,["最后更新时间 (UTC):2025-07-27。"],[],[],null,["# Featured carousels showcase a selection of content relevant to the user.\n\nResources\n---------\n\n| Type | Link | Status |\n|----------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------|\n| Design | [Design source (Figma)](https://goo.gle/tv-desing-kit) | Available |\n| Implementation | [Jetpack Compose](/reference/kotlin/androidx/tv/material3/package-summary#Carousel(kotlin.Int,androidx.compose.ui.Modifier,androidx.tv.material3.CarouselState,kotlin.Long,androidx.compose.animation.ContentTransform,androidx.compose.animation.ContentTransform,kotlin.Function1,kotlin.Function2)) | Available |\n\nHighlights\n----------\n\n- Use featured carousels to highlight specific content.\n- Featured carousels can include UI elements such as images, headlines, content details, videos, actions, and pagination controls.\n- Carousels are usually located on the app's homepage or landing page, which makes them readily accessible.\n- Featured carousels are visually appealing to help engage the user, and create an immersive experience.\n- The content displayed can be personalized based on the user's viewing history, preferences, or current trends.\n\nVariants\n--------\n\nThere are two different ways of integrating featured carousels:\n\n1. Immersive\n2. Card\n\nContent block\n-------------\n\n### Anatomy\n\n1. Overline text\n2. Title\n3. Description\n4. Button\n\n### Specs\n\nPagination\n----------\n\n### Anatomy\n\n1. Background\n2. Active element\n3. Inactive elements\n4. Total elements\n\n### Specs\n\nImmersive\n---------\n\n### Anatomy\n\n1. Image background\n 1. Cinematic scrim\n 2. Poster\n 3. Background color\n2. Content block\n3. Pagination\n4. Content grid\n\n### Specs\n\nCard\n----\n\n### Anatomy\n\n1. Image background\n 1. Cinematic scrim\n 2. Poster\n 3. Card background\n2. Content block\n3. Pagination\n4. Content grid\n\n### Specs\n\nUsage\n-----\n\nUse featured carousels to showcase and promote a curated selection\nof content in an engaging, visually appealing, and simple to navigate format.\n\n### Images in backgrounds\n\nImages in backgrounds play a crucial role in enhancing user engagement\nin a streaming app featured carousel.\n\n### High quality imagery\n\nUse high-resolution images that are visually appealing and relevant\nto the content of the focused card. \ncheck_circle\n\n### Do\n\nKeep images clean, visually appealing, and relevant to the content block. \ncancel\n\n### Don't\n\nAvoid using images with text in the background.\n\n### Obvious visual hierarchy\n\nEnsure that the background does not distract from the focused card's\ncontent by using a scrim over the image; this helps the user maintain\nfocus on the card's title, description, and call-to-action button. \ncheck_circle\n\n### Do\n\nUse a scrim to improve readability and content digestion. \ncancel\n\n### Don't\n\nMake sure the background doesn't affect readability and visibility of the rest of the content on the screen."]]