Cartões

Cards são os elementos básicos do seu app de TV.

Imagem de capa dos cards

Recursos

Tipo Vincular Status
design Fonte de design (Figma) Disponível
Implementação Jetpack Compose Disponível

Destaques

  • Use um card para mostrar conteúdo sobre um único tema.
  • Um card pode conter qualquer coisa, desde imagens até títulos, com suporte a texto, botões, listas e outros elementos da interface.
  • Um cartão não pode ser mesclado com outro ou dividido em vários cartões.
  • Há seis variações de cartões: padrão, clássico, compacto, com encarte, padrão amplo e clássico amplo.

Variantes

Há cinco tipos de cards, cada um com um caso de uso diferente:

  1. Padrão
  2. Clássica
  3. Compacta
  4. Padrão amplo
  5. Clássico amplo
Cartão padrão Carta clássica Cartão compacto
Cartão Wide Standard Cartão clássico largo

Blocos de conteúdo

O conteúdo de um card é organizado em blocos distintos. O design visual do cartão, com ênfase, indica hierarquia. O layout dos cards acomoda os tipos de conteúdo que eles têm.

Anatomia

Conteúdo
  1. Título
  2. Subtítulo
  3. Descrição
  4. Texto extra

Especificações

Especificações de blocos de conteúdo

Cartão padrão

Anatomia

Especificação do cartão padrão

  1. Imagem
  2. Bloco de conteúdo

Estados

Estados padrão do cartão

Especificações

Especificações do cartão padrão

Cartão clássico

Anatomia

Especificações do cartão clássico

  1. Imagem
  2. Bloco de conteúdo

Estados

Estados de cartas clássicos

Especificações

Especificações de cartão clássico

Cartão compacto

Anatomia

Especificações do cartão compacto

  1. Imagem
  2. Bloco de conteúdo

Estados

Estados compactos do card

Especificações

Especificações do cartão compacto

Cartão grande padrão

Anatomia

Especificação de cartão padrão amplo

  1. Imagem
  2. Bloco de conteúdo

Estados

Estados amplos padrão do cartão

Especificações

Especificações de cartão padrão amplo

Cartão clássico largo

Anatomia

Especificações de cartão clássico amplo

  1. Imagem
  2. Bloco de conteúdo

Estados

Estados amplos de cards clássicos

Especificações

Especificações de cartão clássico amplo

Uso

Os cards são elementos de design versáteis que podem ser usados para mostrar uma variedade de conteúdo de maneira visualmente atraente e fácil de usar. As seções abaixo abordam considerações de design para cards.

Proporção

Existem três proporções comuns de cards: 16:9, 1:1 e 2:3. Cada proporção tem seus pontos fortes, então a melhor escolha para você depende das suas necessidades específicas.

  • A proporção mais comum para cards é 16:9. É uma proporção ampla, adequada para exibir imagens e vídeos.
  • 1:1 é uma proporção quadrada. É uma boa opção para cartões que precisam ser equilibrados visualmente, como elenco e equipe, logotipos de canais ou de equipes.
  • 2:3 é uma proporção mais alta. É uma boa escolha se você quiser dividir a grade e dar mais ênfase.

Em última análise, a melhor maneira de escolher uma proporção para seus cards é testar diferentes opções e ver o que fica melhor.

Proporções

Confira alguns exemplos de usos de proporções

1:1

Equipe de filmagem e atores

Proporção 1:1, elenco e equipe

Logotipos de times esportivos

Proporção 1:1, logotipos de esportes

2:3

Livros em destaque

Proporção 2:3, livros em alta

16:9

Cards de filmes

Proporção 16:9, cartões moive

Layout e espaçamento

Larguras variadas dos cards com base no número de cards visíveis na tela podem ser feitas implementando um pico adequado com um espaçamento de 20 dp.

Layout de um card

Largura do card: 844 dp

1 layout de card

Layout de dois cards

Largura do card: 412 dp

Layout de dois cards

Layout de três cards

Largura do card: 268 dp

Layout de três cards

Layout de quatro cards

Largura do card: 196 dp

Layout de quatro cards

Layout de cinco cards

Largura do card: 124 dp

Layout de cinco cards

Bloco de conteúdo

A largura do bloco de conteúdo em um card precisa ser a mesma da miniatura da imagem. Se você precisar exibir mais texto no bloco de conteúdo, use uma ampla variação de cards.

Use cards largos para mostrar descrições curtas, mas somente se for absolutamente necessário. A descrição precisa ter apenas algumas palavras.
Evite descrições longas em cards empilhados verticalmente.

Cartão compacto

Os cards compactos devem ser concisos e fáceis de ler. O conteúdo que precede a imagem de plano de fundo precisa ser breve e direto ao ponto. Evite títulos, subtítulos ou descrições longos. Isso torna seus cards mais visualmente atraentes e fáceis de digitalizar.

Para tornar o texto mais legível em uma imagem, adicione uma sobreposição de gradiente preto semitransparente. Isso escurece o plano de fundo sem ocultar muito a imagem, tornando o texto mais fácil de ver.

Card compacto usando scrim sobre o plano de fundo da imagem.
Não use cards compactos sem scrim sobre a imagem de plano de fundo.