Esta página foi traduzida pela API Cloud Translation.

Cor

A estratégia de cores do Android Automotive OS baseia-se na ideia de "construir a partir do preto". Utilizar o preto como base para as cores da interface proporciona uma experiência de usuário mais consistente, sem mudanças drásticas entre os temas diurno e noturno.

Construir a partir do preto também garante um melhor alinhamento com o hardware, já que materiais escuros são frequentemente usados ​​em interiores e painéis de carros.

Guia resumido (TL;DR)

• Escolha a cor que melhor se adapta à sua preferência, começando pelo preto, para dirigir tanto de dia quanto de noite.
• Mantenha uma relação de contraste de pelo menos 4,5:1 entre o fundo e os ícones ou texto.

• Use a cor de forma minimalista e com propósito.
• Exibir a elevação em tons de cinza.
• Use transparência e opacidade para direcionar o foco visual.

---

Paletas e gradientes

O tema escuro da interface do Android Automotive OS é baseado em uma paleta de tons de cinza. Idealmente, quaisquer cores adicionais devem ter intensidade reduzida, como nas variantes escuras das cores nas paletas do Material Design.

Esta seção inclui informações sobre paleta de cores e opacidade, juntamente com tabelas que fornecem valores de escala de cinza para os níveis de elevação associados a cada componente.

Design de materiais

Uso e paletas de cores

Paleta de tons de cinza do Android Automotive OS

A paleta de cores em tons de cinza do Android Automotive OS é usada para elementos como texto e ícones, e foi projetada para atender aos requisitos específicos do ambiente de direção.

Essa paleta precisa ser suficientemente diversificada para:

• Aborde todos os diferentes casos de uso da interface de usuário com tema escuro.
• Forneça amplitude suficiente para definir a hierarquia por meio de diferenças tonais.

As diferenças tonais criam a ilusão de profundidade mesmo em fundos totalmente pretos, onde as sombras são imperceptíveis. Para fornecer diferenças tonais suficientes, a paleta de tons de cinza do Android Automotive OS inclui cinzas médios. Os tons de cinza do Material Design, a partir do Cinza 900, aproximam-se muito rapidamente de cores mais claras; uma cor dois tons mais clara seria o Cinza 700, que é muito brilhante para o contexto automotivo.

Cor de destaque

Além da paleta de tons de cinza que é o núcleo da interface do sistema operacional Android Automotive, outras cores podem ser usadas com moderação para fins como direcionar o foco.

Atualmente, o Android Automotive OS possui uma cor de destaque oficial, um tom de azul referido na biblioteca de suporte como "cor de destaque do carro". Para aumentar a saturação e a vivacidade, esse azul é ligeiramente diferente do azul padrão do Google. Essa mudança ajuda as cores a se integrarem melhor em superfícies escuras.

Gráficos de valor de opacidade

A transparência transmite uma sensação de profundidade e reforça o modelo espacial do Material Design. Para usar a transparência de forma eficaz, escolha valores de opacidade escuros ou brancos, de acordo com o seu caso de uso.

Valores de opacidade escura

O uso mais comum de valores de opacidade escuros é na criação de scrims (sobreposições).

Valores de opacidade branca

Esses valores são usados ​​principalmente em textos. Eles são especialmente eficazes quando o fundo é colorido. Usar cinza sólido em um fundo escuro e colorido resulta em uma aparência muito opaca.

Para exemplos de como usar opacidade em scrims e hierarquias de texto, consulte Orientações e exemplos .

Contraste

Para atender às diretrizes básicas de segurança do Android Automotive OS, a taxa de contraste entre o plano de fundo e os ícones ou texto deve ser de pelo menos 4,5:1. Para obter detalhes sobre como as taxas de contraste se aplicam a elementos específicos da interface do usuário automotiva, consulte Tornar o conteúdo fácil de ler .

Fazer

Não

Orientações e exemplos

A interface escura do Android Automotive OS é limpa e simples, com uso mínimo de cores. Além de usar as cores, tons e valores de opacidade apropriados para os elementos da interface (consulte Paletas e gradientes ), é importante garantir que cada uso de cor e gradiente de cores tenha um propósito.

Esta seção fornece orientações e exemplos de como aplicar transparência, opacidade e cor para atingir diversos objetivos. Esses objetivos incluem:

• Ocultar fundos
• Manter a consistência
• Estabelecer uma hierarquia visual que direcione o foco do usuário para as ações principais.
• Identificar entidades distintas em uma lista

Ocultar fundos com telas de camuflagem

Sobreposições (ou scrims) em tela cheia são usadas para cobrir o fundo de elementos que interferem na visualização, como diálogos que exigem uma ação do usuário. Sobreposições parciais são usadas para destacar a transição entre elementos, como notificações.

Manter a consistência da cor

A cor é um recurso poderoso para reforçar a memória e o reconhecimento. Use-a para criar uma experiência coerente em todas as telas.

Fazer

Fazer

Fazer

Não

Estabelecer uma hierarquia visual

Use os valores de opacidade do branco para criar uma hierarquia visual consistente e forte. Os valores de opacidade de 88, 72 e 56 contêm contraste suficiente para atender aos requisitos de acessibilidade, criando um ambiente de leitura confortável em um fundo escuro. Use 96% de opacidade em todos os brancos para o modo noturno.

Fazer

Não