Esta página foi traduzida pela API Cloud Translation.

Grades

A visualização em grade exibe duas ou mais colunas de imagens representando itens de conteúdo, com um breve texto abaixo de cada imagem. Essa visualização é ideal quando os usuários se baseiam principalmente em imagens para fazer suas seleções.

As grades podem ser roladas verticalmente e variam em tamanho, espaçamento e número de colunas. O conteúdo da grade também pode ser agrupado em categorias.

Componente de itens da lista

As listas oferecem uma forma alternativa de exibir conteúdo que requer um texto mais explicativo.

Anatomia

As grades contêm texto e controles de interface do usuário. Como os usuários precisam interagir com elas, nunca devem ser obscurecidas, seja por outros elementos ou pela borda da tela.

Especificações

Componente de itens da lista

Especificações, diretrizes de estilo e muito mais.

Grade de conteúdo (3 ou 4 colunas)

Grade de aplicativos (4 colunas)

Grade de aplicativos com os itens mais usados ​​na linha superior.

Posicionamento do ícone indicador em um layout de grade

Dimensionamento de layouts

Esses layouts de referência mostram como adaptar grades para acomodar telas de diversas larguras e alturas. Observe que todos os valores de pixel estão em pixels renderizados, antes de qualquer redução ou aumento de resolução.

Telas de largura padrão

Telas amplas

Telas extralargas e superlargas

Espaçamento vertical das grades de aplicativos em telas de diferentes alturas.

Estilos

Tipografia

Cor

Tamanhos

Elevação

Exemplos