Cor

O Android Auto coloca todo o conteúdo em um fundo preto para criar uma experiência do usuário mais consistente, com cores semelhantes nos temas diurno e noturno.

Um fundo preto normalmente funciona melhor dentro de carros, já que os fabricantes geralmente usam materiais e cores escuros para o interior, painéis e IUs dos carros.

Resumo

  • Use um plano de fundo preto para ajudar na direção diurna e noturna
  • Mantenha uma taxa de contraste de pelo menos 4.5:1 entre o plano de fundo e os ícones ou o texto
  • Usar cores de forma mínima e intencional
  • Mostrar elevação usando diferentes tons de cinza
  • Usar transparência e opacidade para orientar o foco visual

Paletas e gradientes

O tema escuro do Android Auto usa uma paleta de cores em escala de cinza. Todas as cores adicionais adicionadas à interface precisam ser silenciadas em intensidade, de forma semelhante às variantes mais escuras das paletas de cores do Material Design (link em inglês).

Paleta da escala de cinza do Android Auto

Com a paleta de cores da escala de cinza do Android Auto, é possível aplicar cores a todos os elementos, incluindo texto e ícones.

Essa paleta foi projetada para:

  • Refletir o nível de hierarquia de cada elemento da interface com o intervalo de tonalidades fornecido
  • Resolver todos os casos de uso da interface com tema escuro
paleta de cores cinza
Essa paleta em escala de cinza é a paleta de cores padrão do Android Auto e oferece suporte ao tema escuro da interface.

No Android Auto, uma sensação de profundidade é expressa usando diferentes tons de cinza. Cada tonalidade representa um nível diferente de elevação. Os componentes com tons mais escuros (como o componente de lista) têm menos elevação do que os componentes com tons mais claros (como botões de ação flutuantes).

Todos os componentes são exibidos em um plano de fundo preto verdadeiro, em que as sombras não são visíveis. Para oferecer contraste suficiente entre esses componentes, a paleta de escala de cinza do Android Auto contém uma ampla variedade de cinzas. É uma progressão mais gradual de cinzas do que a paleta de cores básica do Material Design, já que os tons abaixo de Gray 900 são muito claros para o contexto automático.

Gráfico de elevação do componente
Cada nível de elevação em repouso de diversos componentes é associado a um valor cinza exclusivo.
Níveis de elevação em escala de cinza nos modos diurno e noturno
Este gráfico mostra os valores em cinza associados a vários níveis de elevação para o modo diurno e noturno.

Cor de destaque

Além da paleta de escala de cinza do Android Auto, uma cor de destaque pode ser usada com moderação para fins como desenhar o foco do usuário.

Atualmente, o Android Auto tem uma cor de destaque oficial, um tom de azul conhecido na Biblioteca de Suporte como "sotaque do carro". Esse azul aumentou a saturação e a vitalidade em relação ao azul padrão do Google para melhorar a visibilidade na superfície escura da interface.

Exemplo de cor de destaque de carro azul
A cor azul de “sotaque do carro” no Android Auto é mais saturada do que o azul padrão do Google, projetada para funcionar bem na interface com tema escuro durante o dia e a noite.

Gráficos de opacidade

O modelo espacial do Material Design depende de vários graus de opacidade para transmitir uma sensação de profundidade em uma interface. Para usar o recurso de forma eficaz, escolha um nível de opacidade com base no seu caso de uso.

Valores de opacidade escura

O caso de uso mais comum para superfícies escuras semitransparentes é um scrim (também conhecido como uma "sobreposição").

Valores de opacidade em preto para sobreposições

Valores de opacidade branca

Os valores de branco semitransparente são usados principalmente para textos, especialmente quando o plano de fundo é colorido, em vez de usar cinza sólido.

Valores de opacidade em branco para o texto

Para ver exemplos de como usar a opacidade em esquemas e hierarquias de texto, consulte Orientação e exemplos.


Contraste

O contraste de cores adequado ajuda os motoristas a interpretar informações e tomar decisões rapidamente.

É necessário um contraste visual mínimo entre o primeiro (texto ou ícones) e o plano de fundo (cores, arte do álbum etc.) para legibilidade ao dirigir. As cores do app precisam atender aos requisitos de contraste de texto normal de nível AA das WCAG 2.0, que especificam uma taxa de contraste de 4.5:1. Use um verificador de contraste, como o WebAIM Color Contrast Checker, para garantir que suas telas atendam aos requisitos de contraste.

Para mais detalhes sobre como as proporções de contraste se aplicam a elementos específicos da interface, consulte as diretrizes de design para direção.

Contraste fazem

O que fazer

Esses ícones seguem as recomendações de taxa de contraste de cores e são mais legíveis em relação ao plano de fundo
O contraste não

O que não fazer

Esses ícones não seguem as recomendações de taxa de contraste de cores e são difíceis de distinguir em relação aos planos de fundo.

Orientações e exemplos

A interface escura do Android Auto é limpa e simples, com uso mínimo de cores. Além de usar os valores apropriados de cores, tons e opacidade para os elementos da interface (consulte Paletas e gradientes), cada uso de cor e opacidade variada precisa ter uma finalidade.

Esta seção fornece orientações e exemplos para aplicar variações de opacidade e cor para atingir uma variedade de objetivos, incluindo:

  • Planos de fundo desfocados
  • Como manter a consistência
  • Estabelecer uma hierarquia visual que atraia o foco do usuário para as ações principais.
  • Como distinguir itens em uma lista

Planos de fundo desfocados com assinaturas

Os ícones de tela cheia (sobreposições) são usados para cobrir o plano de fundo quando conteúdo de alta prioridade aparece em primeiro plano, como uma caixa de diálogo que exige uma ação do usuário. Scrims parciais são usados para chamar a atenção para a transição de elementos, como a entrada de notificações.

Scrim completo no modo diurno
scrim completo (por trás do card de caixa de diálogo) no modo diurno
scrim completo no modo noturno
scrim completo (atrás do card de caixa de diálogo) no modo noturno
scrim parcial no modo diurno
scrim parcial (por trás da notificação) no modo diurno
Scrim parcial no modo noturno
scrim parcial (por trás da notificação) no modo noturno

Como manter a consistência com a cor

A cor é uma dica poderosa para reforçar a conexão entre os principais elementos nos fluxos de usuários, como a cor verde de todos os elementos relacionados à navegação. Essa continuidade de cores ajuda na memória e no reconhecimento sobre quais elementos da interface estão conectados e como eles se relacionam entre si. Você pode usá-lo para criar uma experiência coerente entre telas.

Reconhecimento visual de cores

O que fazer

Mantenha a continuidade visual usando a mesma cor para um item em várias visualizações, como a cor verde usada para essas visualizações de navegação guiada.
Continuidade visual das cores

O que fazer

Use a cor para conectar visualmente elementos e funções relacionados, como essas CTAs de desligamento vermelhas.
Cor de destaque do app persistente

O que fazer

Usar a cor dominante da arte do álbum ou a cor atribuída a um app em elementos relacionados como uma affordance visual persistente. O círculo ao redor do botão de pausa é destacado em verde Spotify.
Restrição de uso de cores

O que não fazer

Não use cores diferentes para diferenciar arbitrariamente componentes repetidos em uma única tela. Tenha cuidado ao usar cores quando elas não agregam valor, como é o caso com os contornos coloridos ao redor dos cards de resumo, que duplicam a cor do ícone do app.

Estabelecer uma hierarquia visual

Uma hierarquia visual consistente e forte pode ser criada colorindo o texto usando um intervalo de opacidades brancas. Os valores de opacidade de 88%, 72% e 56% para texto em branco contêm contraste suficiente para atender aos requisitos de acessibilidade e criar um ambiente de leitura confortável em um fundo escuro. Use uma opacidade de 96% em todo o texto em branco para o modo noturno.

Exemplo de opacidade e contraste para manter a hierarquia visual

O que fazer

Use diferentes valores de opacidade e contraste para manter uma hierarquia visual.
Restrição de opacidade e contraste

O que não fazer

Não use valores de opacidade ou contraste em excesso aplicando a muitos elementos. Um contraste nos valores de opacidade é necessário para diferenciar as informações primárias e secundárias.