Color
Organízate con las colecciones
Guarda y clasifica el contenido según tus preferencias.
La estrategia de color del sistema operativo Android Automotive se basa en la idea de "construir desde el negro". Basar los colores de la interfaz en el negro proporciona una experiencia de usuario más consistente, sin cambios drásticos entre los temas diurnos y nocturnos.
Construir en negro también garantiza una mejor alineación con el hardware, ya que a menudo se utilizan materiales oscuros en los interiores y tableros de los automóviles.
Orientación de un vistazo (TL;DR)
Construya sus opciones de color desde el negro para soportar la conducción tanto de día como de noche.
Mantenga una relación de contraste de al menos 4,5:1 entre el fondo y los íconos o el texto
Utilice el color mínimamente y con un propósito
Mostrar elevación mediante escala de grises
Utilice la transparencia y la opacidad para guiar el enfoque visual
Paletas y degradados
El tema oscuro de la interfaz del sistema operativo Android Automotive se basa en una paleta de escala de grises. Idealmente, cualquier color adicional debería ser de intensidad reducida, como en las variantes oscuras de los colores de las paletas de Material Design.
Esta sección incluye información de paleta y opacidad, junto con gráficos que proporcionan valores en escala de grises para los niveles de elevación asociados con cada componente.
Diseño de materiales
Usos y paletas de colores
Paleta de escala de grises del sistema operativo Android Automotive
La paleta de escala de grises del sistema operativo Android Automotive se utiliza para elementos como texto e íconos, y está diseñada para adaptarse a los requisitos únicos del entorno de conducción.
Esta paleta debe ser lo suficientemente diversa para:
Cubre todos los diferentes casos de uso de la interfaz de usuario del tema oscuro.
Proporcionar suficiente rango para definir la jerarquía a través de diferencias tonales
Esta paleta de escala de grises es la paleta de colores principal del sistema operativo Android Automotive y respalda el tema oscuro de la interfaz.
Las diferencias tonales crean la ilusión de profundidad incluso en fondos completamente negros, donde las sombras son imperceptibles. Para proporcionar suficientes diferencias tonales, la paleta de escala de grises del sistema operativo Android Automotive incluye grises medios. Los grises de Material Design, a partir del Gris 900, se acercan demasiado rápido a los colores más brillantes; un color dos pasos más claro sería el Gris 700, demasiado brillante para el contexto automotriz.
Este gráfico muestra los niveles de elevación en los que se encuentran los distintos componentes. Cada nivel de elevación tiene un valor de gris asociado. Este gráfico muestra los valores de gris asociados con varios niveles de elevación en modo diurno y nocturno.
Color de acento
Además de la paleta de escala de grises que es el núcleo de la interfaz del sistema operativo Android Automotive, se pueden usar otros colores con moderación para fines tales como enfocar el dibujo.
Actualmente, el sistema operativo Android Automotive cuenta con un color de acento oficial, un tono de azul denominado "acento de coche" en la biblioteca de soporte. Para aumentar la saturación y la intensidad, este azul se ha modificado ligeramente respecto al azul estándar de Google. Este cambio permite que los colores se integren mejor en superficies oscuras.
El color azul del “acento del automóvil” en el sistema operativo Android Automotive es más saturado que el azul estándar de Google, diseñado para funcionar bien en la interfaz de temática oscura durante la conducción tanto de día como de 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 eficazmente, elija valores de opacidad oscuros o blancos según su caso de uso.
Valores de opacidad oscuros
El caso de uso más común para valores de opacidad oscuros es crear superposiciones.
Valores de opacidad del blanco
Estos valores se usan principalmente en texto. Son especialmente efectivos cuando el fondo es de color. Usar gris sólido sobre un fondo oscuro y de color da un aspecto demasiado borroso.
Para obtener ejemplos de cómo usar la opacidad en tramas y jerarquías de texto, consulte Orientación y ejemplos .
Contraste
Para cumplir con las normas básicas de seguridad del sistema operativo Android Automotive, la relación de contraste entre el fondo y los iconos o el texto debe ser de al menos 4,5:1. Para obtener más información sobre cómo se aplican las relaciones de contraste a elementos específicos de la interfaz de usuario automotriz, consulte Facilitar la lectura del contenido .
Hacer
Asegúrese de que el contraste cumpla con una relación mínima de 4,5:1 para todo el contenido legible y procesable.
No
No permita que el contraste caiga por debajo de 4,5:1, lo que reduce la seguridad del conductor
Orientación y ejemplos
La interfaz oscura del sistema operativo Android Automotive es limpia y sencilla, con un uso mínimo del color. Además de usar los colores, tonos y valores de opacidad adecuados para los elementos de la interfaz (consulta Paletas y degradados ), es importante asegurarse de que cada uso del color y los degradados tenga un propósito.
Esta sección proporciona orientación y ejemplos para aplicar transparencia, opacidad y color con el fin de lograr diversos objetivos. Estos objetivos incluyen:
Fondos oscurecidos
Mantener la consistencia
Establecer una jerarquía visual que atraiga la atención del usuario hacia las acciones principales.
Distinguir entidades en una lista
Oscurecer fondos con gasas
Las superposiciones de pantalla completa se utilizan para ocultar el fondo tras elementos disruptivos, como diálogos que requieren una acción del usuario. Las superposiciones parciales se utilizan para destacar la transición de elementos como las notificaciones.
Pantalla completa (detrás de la tarjeta de diálogo) en modo diurno Pantalla completa (detrás de la tarjeta de diálogo) en modo nocturno
Pantalla parcial (detrás de la notificación) en modo diurno Pantalla parcial (detrás de la notificación) en modo nocturno
Mantener la consistencia con el color
El color es una poderosa señal para reforzar la memoria y el reconocimiento. Úsalo para crear una experiencia coherente entre pantallas.
Hacer
Mantenga la continuidad visual utilizando el mismo color para un elemento en varias vistas, como el color verde utilizado para las vistas de navegación paso a paso aquí.
Hacer
Utilice el color para conectar visualmente elementos y funciones relacionadas, como los CTA colgantes rojos que se muestran aquí.
Hacer
Usa el color dominante de la carátula del álbum o el color asignado a una app en elementos relacionados como un elemento visual persistente. Aquí, el círculo alrededor del botón de pausa está resaltado con el verde de Spotify.
No
No uses colores diferentes para diferenciar arbitrariamente componentes repetidos en una misma pantalla. Ten cuidado al usar colores que no aporten valor, como es el caso de estos contornos de color alrededor de las tarjetas de resumen, que duplican el color del icono de la aplicación.
Establecer una jerarquía visual
Utilice los valores de opacidad del blanco para crear una jerarquía visual consistente y sólida. Los valores de opacidad 88, 72 y 56 ofrecen el contraste justo para cumplir con los requisitos de accesibilidad y, al mismo tiempo, crear un entorno de lectura cómodo sobre un fondo oscuro. Utilice el 96 % de opacidad en todos los blancos para el modo nocturno.
Hacer
Utilice diferentes valores de opacidad y contraste para mantener una jerarquía visual.
No
No abuse de los valores de opacidad o contraste aplicándolos a demasiados elementos. Es necesario un contraste en los valores de opacidad para diferenciar la información primaria de la secundaria.
[[["Es fácil de entender","easyToUnderstand","thumb-up"],["Me ofreció una solución al problema","solvedMyProblem","thumb-up"],["Otro","otherUp","thumb-up"]],[["Me falta la información que necesito","missingTheInformationINeed","thumb-down"],["Es demasiado complicado o hay demasiados pasos","tooComplicatedTooManySteps","thumb-down"],["Está obsoleto","outOfDate","thumb-down"],["Problema de traducción","translationIssue","thumb-down"],["Problema de muestras o código","samplesCodeIssue","thumb-down"],["Otro","otherDown","thumb-down"]],["Última actualización: 2026-02-25 (UTC)."],[],[]]
