Carrosséis em destaque
Mantenha tudo organizado com as coleções
Salve e categorize o conteúdo com base nas suas preferências.
Os carrosséis em destaque exibem uma seleção de conteúdo relevante para o usuário.
Recursos
Destaques
- Use carrosséis em destaque para destacar conteúdo específico.
- Os carrosséis em destaque podem incluir elementos da IU como imagens, títulos,
detalhes do conteúdo, vídeos, ações e controles de paginação.
- Os carrosséis geralmente estão localizados na página inicial ou na página de destino do app, o que
os torna facilmente acessíveis.
- Os carrosséis em destaque são visualmente atraentes para ajudar a envolver o usuário e
criar uma experiência imersiva.
- O conteúdo mostrado pode ser personalizado com base no histórico de
visualização, nas preferências ou nas tendências atuais do usuário.
Variantes
Há duas maneiras diferentes de integrar os carrosséis em destaque:
- Imersivo
- Cartas
Bloco de conteúdo
Anatomia
- Texto sobreposto
- Título
- Descrição
- Botão
Especificações
Anatomia
- Contexto
- Elemento ativo
- Elementos inativos
- Total de elementos
Especificações
Imersivo
Anatomia
- Imagem de plano de fundo
- Efeito cinematográfico
- Cartaz
- Cor do segundo plano
- Bloco de conteúdo
- Paginação
- Grade de conteúdo
Especificações
Cartas
Anatomia
- Imagem de plano de fundo
- Efeito cinematográfico
- Cartaz
- Plano de fundo do card
- Bloco de conteúdo
- Paginação
- Grade de conteúdo
Especificações
Uso
Use carrosséis em destaque para mostrar e promover uma seleção
de conteúdo em um formato envolvente, visualmente atraente e simples de navegar.
Imagens em segundo plano
As imagens em segundo plano desempenham um papel crucial para melhorar o engajamento do usuário
em um carrossel em destaque de app de streaming.
Imagens de alta qualidade
Use imagens de alta resolução visualmente atraentes e relevantes
para o conteúdo do card focado.
check_circle
O que fazer
Mantenha as imagens limpas, visualmente atraentes e relevantes para o bloco de conteúdo.
cancel
O que não fazer
Evite usar imagens com texto em segundo plano.
Hierarquia visual óbvia
Use um scrim sobre a imagem para que o plano de fundo não desvie a atenção do conteúdo do card
em foco. Isso ajuda o usuário a manter
o foco no título, na descrição e no botão de call-to-action do card.
check_circle
O que fazer
Use um scrim para melhorar a legibilidade e a digestão do conteúdo.
cancel
O que não fazer
Confira se o plano de fundo não afeta a legibilidade e a visibilidade
do restante do conteúdo na tela.
O conteúdo e os exemplos de código nesta página estão sujeitos às licenças descritas na Licença de conteúdo. Java e OpenJDK são marcas registradas da Oracle e/ou suas afiliadas.
Última atualização 2025-07-27 UTC.
[null,null,["Última atualização 2025-07-27 UTC."],[],[],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."]]
