Sistema de color Sistema de diseño

Utilice colores que tengan una función clara y mantengan el significado en cada interfaz.

8 comprobaciones · 2 grupos de contenido

Contenido de la lista

Progreso de la revisión

Estructura y significado

Comparar información y presentación en contexto de uso.

Determinar la paleta de colores de la base.Establezca niveles de color compartidos con nombres y valores administrados.Los componentes deben utilizar colores según su función en lugar de elegir directamente un tono.Ejemplo La variable "texto de error" se utiliza para errores de formulario y advertencias de envío fallido.Asociar color con rolSepare el color de fondo, el texto, el borde, la acción y la respuesta.Los nombres de colores por función ayudan a cambiar la interfaz en un solo lugar; No dejes que cada elemento elija su propio tono base.Hay suficientes colores para el estado.Verifique el valor predeterminado, coloque el cursor, haga clic, enfoque, seleccionado y deshabilitado.Unificar color de respuestaMantenga el mismo significado para los éxitos, advertencias, errores e información en todo el producto.Pruebe la misma condición en todos los fondos utilizados tanto en luz como en oscuridad; Es posible que los colores de error que son fáciles de leer en un fondo no se puedan utilizar en otro fondo.

Interacción y usabilidad

Pruebe la operación, cambie el estado y continúe trabajando.

Mida los pares de colores utilizados.Contraste el texto, los íconos y los controles con el fondo real, no solo con la paleta de colores.Registre los pares de texto y fondo permitidos para que los desarrolladores no tengan que adivinar qué colores van juntos.Pruebas de luz y oscuridad de forma independiente.Defina valores individuales para cada interfaz y verifique todos los estados.Pruebe cada par de colores después de cambiar de máscara en lugar de simplemente cambiar de claro a oscuro; Los aspectos más destacados y los límites necesitan sus propios roles.Mantiene la identificación intacta y legible.Utilice colores de marca en lugares apropiados; Ajuste el tono cuando el contraste sea insuficiente.Si el color de identificación es difícil de leer, manténgalo decorativo y use un color lo suficientemente claro para texto u operaciones significativas.No dejes que el color lleve solo su significadoIncorpora etiquetas, formas o símbolos cuando necesites diferenciar datos y estados.

El progreso se guarda automáticamente en este navegador.

GUÍA

Cómo revisar

Determinar la paleta de colores de la base.

Los componentes deben utilizar colores según su función en lugar de elegir directamente un tono.

EJEMPLOS

Ejemplos de uso

Determinar la paleta de colores de la base.

La variable "texto de error" se utiliza para errores de formulario y advertencias de envío fallido.

Sistema de color Sistema de diseño

Estructura y significado

Interacción y usabilidad

Cómo revisar

Determinar la paleta de colores de la base.

Ejemplos de uso

Determinar la paleta de colores de la base.

Buscar una lista

No se encontraron listas