Modelo de grade

As grades apresentam itens em um layout de grade.

Esse modelo é útil quando os usuários contam principalmente com imagens para fazer as seleções.

Esse modelo pode ser incorporado ao modelo de guia para oferecer navegação por guias.

Esse modelo pode ser incluído no modelo Mapa + conteúdo para fornecer uma grade em um mapa.

Inclui:

  • Cabeçalho opcional (o cabeçalho é substituído por guias quando esse modelo é incorporado ao modelo de guia)
  • Itens em grade (consulte a observação abaixo), cada um contendo um ícone ou uma imagem grande
  • Texto principal para cada item da grade (opcional)
  • Texto secundário para cada item da grade (opcional)
  • Botão de ação flutuante opcional
Wireframes do modelo de grade

Exemplos de modelo de grade

Os exemplos do Android Auto e do Android Automotive OS (AAOS) abaixo foram criados usando o modelo Grid.

Exemplo mostrando uma grade de ações possíveis em um mapa
Grade de ações incorporadas a um modelo Mapa + Conteúdo
Exemplo mostrando as configurações
Grade com itens ativados e um item desativado

Requisitos de UX do modelo de grade

Desenvolvedores de apps:

DEVE Limite o comprimento das strings de texto primária e secundária para evitar truncamentos.
DEVE Têm uma ação associada a cada item da grade (itens apenas informativos não são recomendados).
DEVE Indique claramente o estado do item (para itens de grade que têm vários estados, como selecionado e não selecionado) por variações de imagem, ícone ou texto.
DEVE Inclua um cabeçalho com um título opcional e ações principais e secundárias.
NÃO DEVE Inclua uma faixa de ações e um botão de ação flutuante ao mesmo tempo.
MAIO Mostra um ícone de carregamento em vez do ícone ou da imagem de um item da grade quando uma ação associada ao item está em andamento.