El sistema de colores expresivos de Wear Material 3 emplea tres capas de elementos destacados (primario, secundario y terciario) para los componentes clave y dos capas de superficie neutras. Cada rol ofrece un rango de valores con un contraste coherente, lo que permite combinaciones de colores expresivas y accesibles para una experiencia unificada en cualquier tema.
¿Qué son los roles de color?
Los roles de color son como los "números" en un lienzo de pintura por números. Son el tejido conectivo entre los elementos de la IU y qué color va a dónde.
- Los roles de color se asignan a componentes de Material: Usarás estos roles de color, ya sea que uses el esquema de referencia estático o el color dinámico. Si tu producto contiene componentes personalizados, deberán asignarse correctamente a este conjunto de roles de color.
- Los roles de color admiten la accesibilidad: El sistema de colores se basa en combinaciones de colores más accesibles. Estos pares de colores proporcionan un contraste de color mínimo de 3:1.
- Los roles de color están tokenizados: Los roles se implementan en el diseño y el código a través de tokens. Un token de diseño representa una decisión de diseño pequeña y reutilizable que forma parte del estilo visual de un sistema de diseño.
Términos esenciales
Estos son los términos clave que verás en los nombres de los roles de color:
- Superficie: Es un rol que se usa para fondos y áreas grandes de la pantalla con poco énfasis.
- Primary, Secondary, Tertiary: Son roles de color de los elementos destacados que se usan para enfatizar o desemfatizar los elementos en primer plano.
- Contenedor: Roles que se usan como color de relleno para elementos en primer plano, como botones. No deben usarse para texto ni íconos.
- Activado: Los roles que comienzan con este término indican un color para el texto o los íconos sobre su color superior vinculado. Por ejemplo, On Primary se usa para el texto y los íconos sobre el color de relleno primario.
- Variante: Los roles que terminan con este término ofrecen una alternativa de menor énfasis que su par no variante. Por ejemplo, la variante de contorno es una versión menos enfatizada del color del contorno.
Roles principales
Los roles principales se usan para los componentes clave de la IU, como los botones que se ajustan a los bordes, los botones destacados, los estados activos y los íconos en los estilos de botones tonales.
Principal
- Principal
- En la cuenta principal
Usa el rol Primary para las acciones más importantes de la IU, como los botones o los llamados a la acción principales. Este color debe destacarse y ser reconocible de inmediato para guiar al usuario hacia interacciones clave.
Primary-Dim
- Primary-Dim
- En la cuenta principal
Por lo general, los roles atenuados se usan para elementos que deben diferenciarse visualmente de la acción principal, pero que no requieren la atención o interacción inmediata del usuario.
Primary-Container
- Primary-Container
- On-Primary-Container
Aplica el contenedor principal para elementos en segundo plano, como tarjetas o ventanas modales, para destacar secciones o estados seleccionados. Ayuda a atraer la atención hacia el contenido importante o las actividades en curso dentro de la IU.
Roles secundarios
Los roles secundarios se usan para los componentes clave de la IU, que no son tan importantes como el rol principal, pero aún deben destacarse. Los elementos primarios y secundarios se pueden usar juntos en los diseños para crear diferenciación y enfoque.
Secundario
- Secundario
- En el secundario
Usa el rol secundario para admitir acciones en áreas con una IU densa, como botones secundarios o acciones complementarias. Mantiene la visibilidad sin eclipsar los elementos principales en diseños complejos.
Secondary-Dim
- Secondary-Dim
- Secundario
El rol Secondary-Dim ofrece un contraste atenuado para los elementos pasivos en áreas densas. Complementa el color secundario y, al mismo tiempo, agrega profundidad sutil, lo que mantiene la IU ordenada y ayuda a los usuarios a navegar.
Secondary-Container
- Secondary-Container
- On-Secondary-Container
Aplica Secondary-Container para organizar elementos secundarios en diseños densos. Crea estructura y separación, lo que garantiza que el contenido secundario sea distinguible, pero no dominante.
Roles terciarios
Los roles terciarios se usan para contrastar los acentos y equilibrar los colores primarios y secundarios, o dirigir la atención hacia un elemento, como un campo de entrada. Los roles terciarios también pueden ayudar a indicar cuándo cambia el contenido o cuándo debe destacarse, por ejemplo, cuando se alcanza un objetivo.
Tercer nivel
- Tertiary
- En el nivel terciario
El rol terciario se usa para llamar la atención a los elementos clave. Los roles terciarios son particularmente eficaces para los componentes que deben destacarse, como insignias, calcomanías o elementos de acción especiales.
Tertiary-Dim
- Tertiary-Dim
- Tertiary
Usa el rol de atenuación terciaria para los botones o las acciones que se relacionan con acciones terciarias, pero que no requieren enfoque inmediato.
Tertiary-Container
- Tertiary-Container
- On-Tertiary-Container
Aplica Tertiary-Container para los fondos que agrupan contenido relacionado con este nivel, como colecciones de insignias o calcomanías. Enfatiza los elementos terciarios y, al mismo tiempo, mantiene el equilibrio y la estructura en la IU.
Roles semánticos
Error-Red se usa para indicar problemas graves, como errores, eliminaciones y cualquier cosa relacionada con emergencias. Está diseñado para llamar la atención de inmediato sobre problemas o advertencias, lo que garantiza que los usuarios puedan identificar rápidamente las áreas que necesitan medidas correctivas. El tono de Error-Red debe mantener un contraste suficiente con los fondos para cumplir con los estándares de accesibilidad, lo que garantiza que sea claramente visible y se pueda distinguir de otros colores de estado, como las advertencias o los mensajes de éxito.
Error
- Error
- On-Error
Es un rojo semántico, pero con un ligero tono temático, que indica acciones de quitar, borrar, cerrar o descartar, como Deslizar para mostrar. Se agregó como una alternativa de contenedor que es un poco menos alarmante y urgente que el color atenuado de error.
Error-Dim
- Error-Dim
- On-Error
Es un rojo semántico, pero con un ligero tono temático, que indica errores de prioridad alta o acciones de emergencia, como alertas de seguridad, superposiciones de diálogo fallidas o botones de detención.
Error-Container
- Error-Container
- On-Error-Container
Color de contenedor menos destacado para los componentes que usan el estado de error. También puede indicar un estado de error activo que se siente menos interactivo que un estado completo, como un botón o una tarjeta de uso compartido de emergencia activos, o en un diálogo de superposición con errores.
Contenedores de superficie y elevación
Los contenedores de superficie son clave para definir la profundidad y la elevación dentro de la IU, ya que proporcionan estructura y jerarquía a través del color, lo que ayuda a diferenciar los componentes según su importancia y su interacción.
Surface-Container-Low
- Surface-Container-Low
- En la superficie
- On-Surface-Variant
Es ideal para un contenedor expandido que debe ubicarse debajo de Surface-Container, como una tarjeta expandida en la notificación. También se puede usar para tarjetas no interactivas, en las que el contenido aún se beneficia de la contención.
Surface-Container
- Surface-Container
- En la superficie
- On-Surface-Variant
Es el color predeterminado del contenedor para la mayoría de los elementos. Proporciona una elevación moderada y neutral, lo que lo hace adecuado para componentes generales de la IU.
Surface-Container-High
- Surface-Container-High
- En la superficie
- On-Surface-Variant
Ideal para componentes de alto énfasis que deben ubicarse encima de Surface-Container o en combinación con él. Este color ayuda a enfocar y jerarquizar las áreas críticas de la IU.