Color

La base de la estrategia de color del SO Android Automotive es la idea de "compilar desde el negro". Basar los colores de la interfaz en negro brinda una experiencia del usuario más coherente, sin cambios drásticos entre los temas diurno y nocturno.

La construcción a partir de negro también garantiza una mejor alineación con el hardware, ya que los materiales oscuros suelen usarse en interiores y paneles de vehículos.

Resumen de la orientación (resumen)

  • Elige entre el negro para conducir de día y de noche
  • Mantener una relación de contraste de al menos 4.5:1 entre el fondo y los íconos o el texto
  • Usa el color mínimamente y con un propósito
  • Mostrar elevación mediante escala de grises
  • Cómo usar la transparencia y opacidad para guiar el enfoque visual

Paletas y gradientes

El tema oscuro de la interfaz del SO Android Automotive se basa en una paleta de escala de grises. Idealmente, los colores adicionales deben ser de intensidad reducida, como en las variantes oscuras de los colores de las paletas de Material Design.

En esta sección se incluye información sobre la paleta y la opacidad, además de gráficos que proporcionan valores en escala de grises para los niveles de elevación asociados con cada componente.

Paleta de escala de grises del SO Android Automotive

La paleta de escala de grises del SO Android Automotive se usa para elementos como el texto y los íconos, y está diseñada para adaptarse a los requisitos únicos del entorno de conducción.

Esta paleta debe ser lo suficientemente diversa para lo siguiente:

  • Abarcar todos los diferentes casos de uso de la IU del tema oscuro
  • Proporciona suficiente rango para definir jerarquías mediante diferencias tonales
paleta de colores grises
Esta paleta de grises es la principal del SO Android Automotive y admite el tema oscuro de la interfaz.

Las diferencias tonales crean la ilusión de profundidad incluso en fondos negros verdaderos donde las sombras son imperceptibles. Para proporcionar suficientes diferencias tonales, la paleta de escala de grises del SO Android Automotive incluye grises medios. Los grises de Material Design a partir de Gris 900 se acercan a los colores más brillantes demasiado rápido; un color de dos pasos más claro sería el Gris 700, que es demasiado brillante para el contexto automático.

Gráfico de elevación de componentes
En este gráfico, se muestran los niveles de elevación en los que se encuentran varios componentes. Cada nivel de elevación tiene asociado un valor de color gris.
Niveles de elevación del modo diurno y nocturno en escala de grises
En este gráfico, se muestran los valores de color gris asociados con distintos niveles de elevación en los modos diurno y nocturno

Accent color

Además de la paleta de escala de grises en el núcleo de la interfaz del SO Android Automotive, se pueden usar otros colores con moderación para fines como el foco de dibujo.

Actualmente, el SO Android Automotive tiene un color oficial de elementos destacados, un tono de azul al que se hace referencia en la biblioteca de compatibilidad como "acento para automóviles". Para aumentar la saturación y la intensidad, este azul cambia ligeramente del azul estándar de Google. Este cambio ayuda a que los colores se sientan más cómodos en una superficie oscura.

Ejemplo de color de los elementos destacados de un automóvil azul
El color azul de "acento para vehículos" del SO Android Automotive es más saturado que el azul estándar de Google, diseñado para funcionar bien en la interfaz con tema oscuro durante el día y la noche.

Gráficos de valores de opacidad

La transparencia transmite una sensación de profundidad y refuerza el modelo espacial de Material Design. Para usar la transparencia de manera eficaz, elige los valores de opacidad oscuro o blanco según tu caso de uso.

Valores de opacidad oscura

El caso de uso más común para los valores de opacidad oscura es crear vetas (superposiciones).

Valores de opacidad del negro para las superposiciones

Valores de opacidad del blanco

Estos valores se usan principalmente en el texto. Son especialmente eficaces cuando el fondo es de color. El uso de gris sólido sobre un fondo oscuro y de color parece demasiado lodo.

Valores de opacidad del blanco para el texto

Para ver ejemplos de cómo usar la opacidad en láminas y jerarquías de texto, consulta la Guía y ejemplos.


Contraste

Para cumplir con los lineamientos de seguridad básicos del SO Android Automotive, la relación de contraste entre el fondo y los íconos o el texto debe ser de 4.5:1 como mínimo. Para obtener detalles sobre cómo se aplican las relaciones de contraste a elementos específicos de la IU de la industria automotriz, consulta Cómo hacer que el contenido sea fácil de leer.

Contraste, haz

Qué debes hacer

Asegúrate de que el contraste cumpla con una proporción mínima de 4.5:1 para todo el contenido legible y procesable
El contraste no

Qué evitar

No permitas que el contraste sea inferior a 4.5:1, lo que reduce la seguridad del conductor.

Orientación y ejemplos

La IU oscura del SO Android Automotive es limpia, simple y con un uso mínimo de color. Además de usar los colores, tonos y valores de opacidad adecuados para los elementos de la IU (consulta Paletas y gradientes), es importante asegurarse de que cada uso de color y gradientes de color tenga un propósito.

En esta sección, se proporcionan orientación y ejemplos para aplicar transparencia, opacidad y color a fin de lograr una variedad de objetivos, entre los que se incluyen los siguientes:

  • Oscure los fondos
  • Mantén la coherencia
  • Establecer una jerarquía visual que dirija el enfoque del usuario a las acciones principales.
  • Distinguir entidades en una lista

Oscurecer los fondos con láminas

Las láminas de pantalla completa (superposiciones) se usan para cubrir fondos detrás de elementos molestos, como diálogos que requieren que los usuarios realicen una acción. Se usan láminas parciales para llamar la atención sobre la transición de elementos, como las notificaciones.

Lámina completa en el modo diurno
Lámina completa (detrás de la tarjeta de diálogo) en modo diurno
Lámina completa en modo nocturno
Lámina completa (detrás de la tarjeta de diálogo) en modo nocturno
Lámina parcial en el modo diurno
Lámina parcial (detrás de la notificación) en el modo diurno
Lámina parcial en modo nocturno
Lámina parcial (detrás de la notificación) en modo nocturno

Mantener la coherencia con el color

El color es una señal poderosa para reforzar la memoria y el reconocimiento. Úsalo para crear una experiencia coherente de pantalla en pantalla.

Reconocimiento visual de colores

Qué debes hacer

Mantén la continuidad visual usando el mismo color para un elemento en varias vistas, como el color verde que se usa en las vistas de navegación paso a paso aquí
Continuidad de colores visuales

Qué debes hacer

Usa colores para conectar visualmente elementos y funciones relacionados, como los CTA rojos que aparecen aquí.
Color de los elementos destacados de la app persistente

Qué debes hacer

Usa el color dominante de la portada del álbum o el color asignado de una app en elementos relacionados como opción visual persistente. Aquí, el círculo alrededor del botón de pausa tiene Spotify en color verde.
Restricción de uso de colores

Qué evitar

No uses colores diferentes para diferenciar de forma arbitraria componentes repetidos en una sola pantalla. Ten cuidado cuando uses colores cuando no agreguen valor, como es el caso de estos contornos de colores alrededor de las tarjetas de resumen, que duplican el color del ícono de la app.

Establecer una jerarquía visual

Usa los valores de opacidad blanca para crear una jerarquía visual coherente y sólida. Los valores de opacidad de 88, 72 y 56 contienen el contraste suficiente para cumplir con los requisitos de accesibilidad y, al mismo tiempo, crean un entorno de lectura cómodo sobre un fondo oscuro. Usa el 96% de opacidad en todos los blancos para el modo nocturno.

Ejemplo de opacidad y contraste para mantener la jerarquía visual

Qué debes hacer

Usa diferentes valores de opacidad y contraste para mantener una jerarquía visual.
Restricción de opacidad y contraste

Qué evitar

No uses en exceso los valores de opacidad o contraste total aplicándolos a demasiados elementos. Se necesita un contraste en los valores de opacidad para diferenciar la información primaria y secundaria.