A lista imersiva é uma combinação de uma linha de conteúdo e visualização do item selecionado. Ela mostra o conteúdo em uma janela de visualização maior.
Recursos
| Tipo | Vincular | Status |
|---|---|---|
| design | Fonte de design (Figma) | Disponível |
| Implementação | Jetpack Compose | Disponível |
Destaques
- Visualização de conteúdo dinâmico. Quando um usuário navega pela linha de conteúdo, a área de visualização é atualizada automaticamente para mostrar o item em foco no momento.
- O componente de lista imersiva apresenta uma janela de visualização maior para mostrar conteúdo, facilitando a visualização e a apreciação dos detalhes visuais do item em foco.
- As listas imersivas fornecem informações relevantes e contextuais sobre o item em foco, ajudando os usuários a tomar decisões informadas sem sair da experiência de navegação.
- O componente de lista imersiva usa a divulgação progressiva para revelar mais detalhes sobre o conteúdo à medida que os usuários navegam, reduzindo a carga cognitiva e mantendo o engajamento.
- O componente de lista imersiva garante interações consistentes em todo o app, proporcionando aos usuários uma experiência familiar e previsível.
Anatomia
- Plano de fundo da imagem
- Bloco de conteúdo
- Cartão em foco
- Grade de conteúdo
- Efeito cinematográfico
- Cartaz
- Cor do segundo plano
Especificações
Comportamento
Ao navegar entre cards na lista imersiva, os detalhes do card selecionado são revelados progressivamente em segundo plano.
Quando a lista imersiva está em foco, a altura aumenta para revelar outras informações, como o título e a descrição do plano de fundo, conforme mostrado no vídeo abaixo.
Uso
Use carrosséis imersivos quando quiser chamar a atenção para o conteúdo em destaque ou promovido, como lançamentos, programas famosos ou títulos exclusivos. A janela de visualização maior e a visualização dinâmica oferecem uma maneira atraente de mostrar esses itens de alta prioridade.
Exibição da imagem
- Foco do card: à medida que o usuário navega pelo carrossel, o cartão em foco é destacado visualmente, dimensionando o card em 1, 1, usando uma borda e outras indicações visuais como elevação para indicar a seleção. Verifique se os títulos do conteúdo dentro da miniatura do card em foco estão claramente visíveis e fáceis de ler.
- Imagem de plano de fundo: quando um card está em foco, uma imagem de plano de fundo correspondente é exibida na janela de visualização maior. Recomendamos que essa imagem de plano de fundo seja de alta qualidade e visualmente atraente, porque fornece um pano de fundo imersivo e envolvente para o conteúdo.
Composição
O que fazer
O que não fazer
Para garantir que as imagens usadas como planos de fundo no componente da lista imersiva tenham uma boa aparência, dimensione-as adequadamente para que não fiquem desfocadas ou distorcidas.
Proporção
Use uma proporção de 16:9 para imagens de plano de fundo sempre que possível, para garantir um layout visualmente atraente e consistente.
