Layout

Esta seção fornece diretrizes de design para layouts de tela que podem ser dimensionados em vários tamanhos de tela.

Os valores de padding e de linha-chave definidos aqui são usados em Componentes, Especificações de mídia, Especificações da Central de notificações e Especificações do discador.

Orientações resumidas (TL:DR):

  • Basear os layouts em categorias de tamanho de tela adequadas
  • Usar uma grade de 8 dp para alinhamento
  • Definir as larguras das margens como 12% do espaço de trabalho do app
  • Colocar barras de rolagem e auxílios de navegação nas margens
  • Usar padding para espaçamento fixo entre elementos

Principais conceitos de layout

  • Espaço de trabalho do app:a área da tela disponível para um app após considerar o espaço na tela ocupado pelo fabricante do carro e os recursos da interface do sistema.
  • Categorias de tamanho de tela:um conjunto de quatro faixas de largura de tela (padrão, ampla, extra larga e superlar) e três faixas de altura da tela (curta, padrão e alta), em que "tela" se refere ao espaço de trabalho do app em vez do espaço completo de borda a borda.
  • Padding:um conjunto de valores de espaçamento que especificam espaçamento vertical e horizontal fixo entre elementos e componentes em um layout.
  • Linhas-chave:um conjunto de valores de espaçamento de largura variável (determinados por categorias de largura) que indicam o espaço horizontal entre a margem ou a borda de um componente e um elemento de um layout.
  • Área flexível:uma parte de um componente, às vezes com um valor mínimo ou máximo, que pode ser dimensionada para caber no tamanho da tela

Espaço de trabalho do app

O espaço de trabalho de um app é a área disponível na tela restante após considerar o espaço ocupado na tela do fabricante do carro e dos recursos da interface do sistema. O espaço de trabalho do app precisa ter as margens esquerda e direita e a tela do app, que é a área de conteúdo principal.

Cada margem precisa ser igual a 12% da largura do espaço de trabalho do app. As margens normalmente contêm barras de rolagem e affordances de navegação do app.

Exemplos de espaço de trabalho do app
Exemplos de vários espaços de trabalho de apps

Tamanhos de tela

Os layouts de especificação de referência são associados a um conjunto de categorias de tamanho de tela com base na largura e na altura do espaço de trabalho do app.

Nas especificações destas diretrizes, essas categorias são chamadas pelo nome. Por exemplo, “Grande” refere-se a todas as larguras de tela no intervalo de 930 dp a 1279 dp.

As categorias de tamanho de tela afetam as recomendações para:

  • Espaçamento entre linhas-chave em componentes e elementos
  • Escalonamento de áreas flexíveis do componente
  • Quando ocultar ou exibir elementos opcionais, como a capa do álbum na barra de controle minimizada

Categorias de largura

Ilustração dos pontos de interrupção da largura
Padrão Ampla Extralarga Super ampla
Intervalo de largura da tela 690 – 929dp 930 – 1279dp 1.280 – 1.919 dp ≥ 1920dp

Categorias de altura

Ilustração do ponto de interrupção de altura
Short Padrão Pessoas altas
Faixa de altura da tela 0 a 609 dp 610 a 1199 dp ≥ 1.200 dp

Espaçamento

Os layouts de especificação de referência são estruturados em uma grade de 8 dp. Na prática, isso significa que os componentes da IU e os elementos das especificações são espaçados por múltiplos de 8 dp.

Há dois tipos de espaçamento:

  • Padding, para espaçamento com largura e altura fixas

  • Linhas-chave, para espaçamento com largura variável


Padding

O padding estabelece o espaçamento de largura e altura fixa entre os componentes em um layout de especificação de referência. Ele também pode determinar o espaçamento fixo entre elementos dentro de um componente, como o espaço entre destinos de números adjacentes no componente de teclado. Normalmente, quanto mais próxima for a relação entre dois elementos, mais restrito será o padding entre eles.

Há 9 valores de padding, designados como P0 – P8.

Aqui estão os valores de padding e seus tamanhos correspondentes:

Especificação de referência de valores de padding
P0 P1 P2 P3 P4 P5 P6 P7 P8
4 dp 8 dp 12dp 16dp 24dp 32dp 48dp 64dp 96dp

Ao contrário das keylines, que mudam os valores de espaçamento com base nas categorias de largura da tela, os valores de padding permanecem constantes. Por exemplo, P1 é sempre 8 dp. No entanto, em alguns casos, a distância entre um conjunto específico de componentes ou elementos pode ter valores de padding diferentes nos layouts de especificações de referência para diferentes tamanhos de tela. Por exemplo, o espaçamento vertical recomendado entre itens de grade é P4 para telas curtas e P5 para telas padrão e altas.


Linhas-chave

Em vez de indicar o preenchimento entre elementos em uma especificação de referência, as linhas-chave especificam a distância entre um elemento e a margem ou borda mais próxima de um componente. O valor das linhas-chave muda com base na largura da tela. Eles oferecem uma maneira conveniente de dimensionar um layout para diferentes tamanhos de tela, mantendo o espaçamento horizontal e proporcional dos elementos.

Há cinco linhas-chave, designadas como KL0 a KL4.

Estes são os valores das linhas-chave para cada largura de tela:

Especificação de referência de valores de linha-chave
Largura da tela Padrão Ampla Extralarga Super ampla
KL0 16dp 24dp 24dp 32dp
KL1 24dp 32dp 32dp 48dp
KL2 96dp 112dp 112dp 112dp
KL3 112dp 128dp 128dp 152dp
KL4 148dp 168dp 168dp 168dp

Estratégias de escalonamento

Os layouts de especificações de referência fornecem diretrizes para dimensionar apps para diferentes tamanhos de tela. Para ajudar no escalonamento suave, as especificações normalmente incluem:

  • Uma área flexível, que faz parte de um componente que fabricantes de automóveis precisam expandir ou contrair para se ajustar ao tamanho específico da tela.
  • Larguras mínimas e máximas recomendadas opcionais para a área flexível, destinadas a evitar o dimensionamento de componentes para tamanhos indesejados
  • Linhas-chave usadas para manter espaçamento proporcional e horizontal dos elementos, que são dimensionadas de forma diferente com base na categoria de largura da tela
  • Padding, para especificar o espaçamento fixo entre componentes e elementos

Opcionalmente, algumas especificações especificam se determinados elementos precisam ser ocultados ou exibidos com base na largura da tela.

Exemplo 1: barra de controle minimizada

A barra de controle minimizada é um exemplo de componente para o qual o layout de especificação de referência recomenda flexionar a largura do componente e ocultar um elemento não essencial em tamanhos de tela menores.

Especificação da barra de controle minimizada
Especificação da barra de controle minimizada

As especificações de uma barra de controle minimizada incluem duas diretrizes de dimensionamento:

  1. O elemento quadrado à esquerda (normalmente usado para a arte do álbum) deve aparecer somente quando a largura da tela for de 930 dp ou mais.
  2. A seção de largura flexível no meio nunca pode ser menor que 440 dp e pode ser dimensionada para telas mais largas, desde que a largura inteira do componente não exceda 1.028 dp.
A animação abaixo mostra como a barra de controle minimizada pode ser dimensionada para telas mais largas e mais estreitas seguindo as recomendações nos layouts de referência.

Animação minimizada da barra de controle
Animação minimizada da barra de controle

Exemplo 2: grades

As grades são um exemplo de componentes que podem ser colocados e dimensionados em colunas e linhas em um layout.

Especificações adaptáveis de grade
Especificações adaptáveis da grade

O número recomendado de colunas (três em telas mais estreitas e quatro em telas mais largas) depende do tamanho da tela. A largura da coluna e a altura da linha podem ser ajustadas em uma categoria de tela, desde que as grades nunca sejam menores que as larguras mínimas recomendadas. A animação abaixo mostra como as grades podem ser dimensionadas para telas mais largas e estreitas seguindo as recomendações nos layouts de referência.

Animação adaptável em grade
Animação adaptável em grade