As grades apresentam itens em um layout de grade.
Esse modelo é útil quando os usuários dependem principalmente de imagens para fazer as seleções.
Esse modelo pode ser incorporado ao modelo de guia para oferecer navegação com guias.
Inclui:
- Cabeçalho com uma faixa de ações opcional (a faixa de ações é substituída por guias quando este modelo é incorporado ao modelo de guia)
- itens de grade (consulte a observação abaixo), cada um contendo um ícone ou uma imagem grande
- Texto principal para cada item da grade (obrigatório)
- Texto secundário para cada item da grade (opcional)
- Botão de ação flutuante opcional
Exemplos de modelo de grade
Os exemplos do Android Auto e do Android Automotive OS (AAOS) abaixo foram criados usando o modelo Grade.
Grade em que alguns itens têm texto secundário (exemplo do Android Auto)
Grade com o ícone de um item temporariamente substituído por um ícone de carregamento e o texto principal de outro item é truncado porque o tamanho dele excede o espaço disponível (exemplo do AAPTOS)
Requisitos de UX do modelo de grade
Desenvolvedores de apps:
| DEVE | Limite o tamanho das strings de texto primária e secundária para evitar truncamento. |
| DEVE | Ter uma ação associada a cada item da grade (itens somente informações 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. |
| 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 de grade quando uma ação associada ao item está em andamento. |