El color tiene en cuenta la pantalla, el entorno y la cognición. El color en los lentes usa una paleta muy refinada para admitir el comportamiento de las pantallas aditivas y optimizar la comodidad visual. El uso del color en los lentes debe ser prudente para armonizar con el mundo real, indicar acciones importantes, mostrar imágenes o proporcionar significado semántico.
El negro es transparente en la pantalla óptica transparente. Ten esto en cuenta al diseñar, ya que los colores más oscuros se verán opacos o transparentes, pero también se pueden usar para crear profundidad.
Esquema de colores
El esquema de color de los lentes (colección de roles o tokens de color para definir el tema del color de tu app) consta de 3 roles de color de acento, 4 roles de color de superficie (o neutros) y sus contrapartes de color. Los roles de color son similares a los roles de esquema para dispositivos móviles y se deben usar de la misma manera.
Los colores de énfasis se pueden usar para el color de la variante On como un énfasis limitado.
Qué debes hacer
Qué no debes hacer
Personaliza el color
Cuando personalizas los colores de los lentes, es fundamental garantizar una obstrucción visual mínima y la armonización con el mundo real, y priorizar la legibilidad en diferentes condiciones de iluminación. Esto implica calibrar cuidadosamente los colores para equilibrar el brillo y la saturación, lo que garantiza la prominencia para una legibilidad clara y, al mismo tiempo, conserva la saturación suficiente para que se puedan distinguir al instante. El color principal se puede personalizar para usar el color de tu marca o el color de interacción principal. Ten en cuenta el contraste, la saturación y el uso de energía del color elegido.
Colores semánticos y de la marca optimizados
Los colores que representan la marca, las acciones o las alertas del sistema deben cumplir con los siguientes requisitos:
- Brillo suficiente para que sea legible
- Suficientemente saturado como para distinguirse como un color
Uso de energía
Algunos colores usan más energía y generan más calor que otros. El verde es el que menos energía consume y el azul es el que más, cuando se comparan colores de igual tono, como se ve a la derecha. Minimiza la cantidad de píxeles que iluminas. Cuanto más brillante sea la pantalla, más se calentará. No llenes la pantalla con todo blanco, ya que esto puede causar mitigación térmica.
Qué debes hacer
Qué no debes hacer
Qué debes hacer
Qué no debes hacer
Evita las plataformas personalizadas.
Colores oscuros del contenedor
Por lo general, los contenedores deben enfocarse en mostrar el contenido que se encuentra dentro de ellos, sin distraer al usuario:
- Las superficies deben ser negras para obtener el mayor contraste.
- Los contornos deben ser visibles, pero sutiles
Qué debes hacer
Qué no debes hacer
Es posible personalizar el contorno para agregar la marca o una IU expresiva.
Qué debes hacer
Qué no debes hacer
Advertencia
Personalización del enfoque del contorno con azul: El resaltado del estado de enfoque se compone de 2 contornos. El color se aplica a la capa 2 para teñir el estado de enfoque.