¿Cómo hacer que el ícono rojo sobre un fondo gris sea menos discordante?

Mi aplicación tiene un botón para grabar o reproducir videos. Cuando hay problemas con esta función, notificamos al usuario superponiendo un signo de exclamación. Este "rojo!" La interfaz de usuario funciona bien en otras partes de la aplicación, pero en este botón los colores se ven realmente extraños y chocantes.

ingrese la descripción de la imagen aquí

¿Alguna sugerencia para un tratamiento visual que pueda aplicar al botón y/o ícono (cada uno dividido a continuación) para hacer que el resultado sea menos contrastante y chocante?

ingrese la descripción de la imagen aquí ingrese la descripción de la imagen aquí

Respuestas (3)

Cuando los colores (matiz) son diferentes, pero su claridad/oscuridad (valor) es la misma, obtienes esta 'disonancia visual' que ves en tu ejemplo. Ahora mismo el rojo es un valor ligeramente más oscuro que el gris. Debe aumentar la diferencia de valor entre los dos tonos.

Tú podrías:

  • aclarar el gris
  • oscurecer el rojo
  • Haz ambos

O, probablemente más práctico, cree alguna forma de 'rellenar' la transición. Sugeriría darle al signo de exclamación un brillo claro o una sombra oscura, o tal vez un contorno blanco.

O quizás lo más fácil, simplemente elimine el color. El signo de exclamación blanco sobre ese gris oscuro se destacaría muy bien.

Excelentes sugerencias, y me gusta la explicación técnica de la disonancia visual. Recuerdo vagamente que de mi (limitada) formación en diseño en la escuela de Arquitectura hace mucho tiempo... ¡supongo que debería haber prestado más atención! ;-)

Miraría diferentes tratamientos con un triángulo. El triángulo/exclamación es un ícono común de "ALERTA" y permite que el usuario lo reconozca más fácilmente. No reinventes la rueda... solo haz que la rueda se vea bien :)

alerta 1

alerta 2

alerta 3

El problema es que estos todavía tienen el mismo problema de diferentes tonos pero valores similares uno encima del otro. Pero la idea si es válida. Creo que si el triángulo fuera mucho más claro (o blanco) funcionaría bastante bien.
Acordado. Por eso empecé a jugar con los valores en la tercera imagen.

El problema es el contraste de valor de su rojo y gris: están demasiado cerca a pesar de que el tono es diferente. Mire el valor "B" en los controles deslizantes HSB.

Si cambia el gris más claro o más oscuro, ayudará. Si haces que el ícono de la cámara sea un contorno, problema resuelto. El rojo también podría ser un poco más claro o más oscuro (lo opuesto al gris) para aumentar el contraste.

¿Cómo hacer que el ícono rojo sobre un fondo gris sea menos discordante?
RespuestasAquíPolítica de privacidad1y, 0v