A visualização em grade exibe duas ou mais colunas de imagens que representam itens de conteúdo, com um texto curto abaixo de cada imagem. Essa visualização é melhor quando os usuários dependem principalmente de imagens para fazer as seleções.
As grades têm rolagem vertical e podem variar em tamanho, espaçamento e número de colunas. O conteúdo da grade também pode ser agrupado em categorias.
Anatomia
As grades contêm texto e controles de interface. Como os usuários precisam responder a eles, eles nunca devem ser obscurecidos, seja por outros elementos ou pela borda da tela.
![](https://developers.google.cn/cars/design/automotive-os/components/images/grid-anatomy-1.png?authuser=7&hl=pt)
- Item da grade
- Texto principal e secundário
- Plano de fundo da grade
Especificações
Grade de conteúdo (3 ou 4 colunas)
![](https://developers.google.cn/cars/design/automotive-os/components/images/grid-spec-1.png?authuser=7&hl=pt)
Grade de apps (4 colunas)
![](https://developers.google.cn/cars/design/automotive-os/components/images/grid-spec-2.png?authuser=7&hl=pt)
Grade de apps com itens usados com frequência na linha superior
![](https://developers.google.cn/cars/design/automotive-os/components/images/grid-spec-3.png?authuser=7&hl=pt)
Posicionamento do ícone indicador no layout de grade
![](https://developers.google.cn/cars/design/automotive-os/components/images/grid-spec-4.png?authuser=7&hl=pt)
Dimensionamento de layouts
Esses layouts de referência mostram como adaptar grades para acomodar telas de várias larguras e alturas. As categorias de largura e altura são definidas na seção Layout. Todos os valores de pixel estão em pixels renderizados, antes de qualquer diminuição ou aumento de amostragem.
Telas de largura padrão
![](https://developers.google.cn/cars/design/automotive-os/components/images/grid-ar-1.png?authuser=7&hl=pt)
Telas amplas
![](https://developers.google.cn/cars/design/automotive-os/components/images/grid-ar-2.png?authuser=7&hl=pt)
Telas muito largas e superlargas
![](https://developers.google.cn/cars/design/automotive-os/components/images/grid-ar-3.png?authuser=7&hl=pt)
Espaçamento vertical das grades de apps em telas de várias alturas
![](https://developers.google.cn/cars/design/automotive-os/components/images/grid-ar-4.png?authuser=7&hl=pt)
Estilos
Tipografia
Estilo de fonte | Fonte | Peso | Tamanho (dp) |
---|---|---|---|
Texto 1 | Roboto | Normal | 32 |
Texto 2 | Roboto | Normal | 28 |
Texto 3 | Roboto | Normal | 24 |
Cor
Elemento | Cor(modo diurno) | Cor (modo noturno) |
---|---|---|
Tipo principal / ícones | Branco | Branco @ 88% |
Tipo secundário / ícones | Branco @ 72% | Branco a 60% |
Linha divisória | Branco @ 22% | Branco @ 12% |
Plano de fundo da grade | Preto | Preto |
Conteúdo scrim | N/A | Preto @ 22% |
Gradiente truncado | Preto entre 0 e 100% em 10% do espaço de texto | Preto entre 0 e 100% em 10% do espaço de texto |
Tamanho
Elemento | Tamanho (dp) |
---|---|
Ícone do app | 76 |
Célula mínima do app | 135 |
Célula de conteúdo mínima | 158 |
Elevation
Elemento | Cor | Eixo Y | Desfocar |
---|---|---|---|
Bloco da grade | Preto @ 22% | 2 | 2 |
Exemplos
![](https://developers.google.cn/cars/design/automotive-os/components/images/grid-mock-2.png?authuser=7&hl=pt)
![](https://developers.google.cn/cars/design/automotive-os/components/images/grid-mock-1.png?authuser=7&hl=pt)
![](https://developers.google.cn/cars/design/automotive-os/components/images/grid-mock-3.png?authuser=7&hl=pt)
![](https://developers.google.cn/cars/design/automotive-os/components/images/grid-mock-4.png?authuser=7&hl=pt)
![](https://developers.google.cn/cars/design/automotive-os/components/images/grids-animation.gif?authuser=7&hl=pt)