Atención al detalle y cómo aplicar ilusiones ópticas a las interfaces de diseño de UI.

La ilusión Ponzo es una ilusión óptica sobre la longitud. Esta ilusión óptica se conoce como ilusión de Ponzo desde que el psicólogo italiano Mario Ponzo (1882 ~ 1960) publicó un artículo sobre ella, pero se conocía desde mucho antes.

Dos líneas horizontales yuxtapuestas una encima de la otra, la superior parece más larga que la inferior. Una idea es que esto se debe a que las líneas diagonales fuera de la línea horizontal hacen que el cerebro se sienta más profundo, pensando que las líneas de arriba están más lejos. Los segmentos de línea de la misma longitud deben ser más largos a distancia, por lo que la línea horizontal de arriba parecerá más corta que la de abajo.

Al utilizar este tipo de ilusión óptica en la UI, lo primero que me viene a la mente es la línea divisoria entre entradas, celdas o párrafos. La duración de cada aplicación es diferente. La mayoría de las aplicaciones siguen las pautas de iOS o Android y dejan una distancia de P alrededor de cada control. También hay algunas aplicaciones que se salen de lo común.

△ 1. Aplicación para compartir fotos: sistema iOS; 2. Ir a casa a cenar: sistema iOS 3. Software de contabilidad: sistema Android

△ 1. Software de registro: sistema Android; 2, 3. Sistema Uber iOS

La Figura 1 intercepta algunas aplicaciones en sistemas iOS y Android. El diseñador utilizó líneas de distancia P no convencionales. La Figura 2 captura las filas izquierda y derecha de aplicaciones en cada plataforma sin agregar espacios. Como se puede ver en estas dos imágenes, hay todo tipo de líneas largas y cortas y no existe un estándar unificado. Lo más importante es ¿qué quieres decir? La ilusión Ponzo está aquí para ayudarte con tu expresión de UI.

Los bordes de la pantalla de un teléfono móvil son como las diagonales de la ilusión de Ponzo. La distancia entre la línea divisoria y el borde puede hacer que la gente sienta que la información izquierda y derecha en el intervalo es más larga o más corta, y la legibilidad también se ha convertido en una consideración. En el diseño de una aplicación, es importante considerar especificaciones globales. No basta con satisfacer las necesidades visuales de una sola página. El temor del desarrollo front-end es que las reglas de la lógica sean indistinguibles. Siempre que se definan las especificaciones funcionales, no supone un gran problema utilizar diferentes longitudes de cable para diferentes interfaces.

En resumen, al definir la longitud de una línea, puedes pensar más en por qué necesitas dejar un margen, cuánto es apropiado, por qué necesitas determinar tal longitud, si hay lógica para hacerlo. A continuación, si ha considerado la situación general y si es coherente con la marca, si puede transmitir una historia visual, etc.

2. Ebbinghaus Illusion - Espacio

Herman Ebbinghaus es un famoso psicólogo que estudia la memoria humana. Nació en Alemania y trabajó como profesor en la Universidad de Breslau. Estudia principalmente cómo los humanos desarrollan la memoria duradera (digresión: la curva de la memoria de Ebbinghaus es muy famosa). La imagen de arriba es una ilusión óptica que descubrió. Los dos círculos naranjas del medio son del mismo tamaño, pero parece que el de la derecha es significativamente más grande. El círculo naranja de la derecha está rodeado por círculos más pequeños, por lo que parece más grande de lo que es, mientras que el círculo naranja de la izquierda está rodeado por círculos más grandes, por lo que parece un poco más pequeño de lo que realmente es.

△ (A) Ilusión de contraste de tamaño de Ebbinghaus-Titchener y (B) Ilusión de Delpov.

La ilusión de Ebbinghaus se utiliza mucho en aplicaciones prácticas. El descubrimiento de las ilusiones ópticas se puede confirmar mediante la disposición y combinación de los objetos circundantes. La ilusión de Ebbinghaus y la ilusión de Josef Delboeuf, así como las investigaciones del Dr. Brian Wansink y el Dr. Kurt van Itersum, confirman que la ingesta de alimentos de una persona se ve afectada por el tamaño y el color del plato, así como por afectados por estas ilusiones ópticas, afectando nuestro comportamiento real.

△En el estudio de Piglas-Fiszmann, los postres se sirven en platos de diferentes colores en el centro de investigación del Instituto Paul Bocuse

△En Piglas-Fitzman En el estudio de Zeman, mousse con sabor a fresa se servía en platos cuadrados, redondos y triangulares

△ Disposiciones de platos equilibrados y desequilibrados utilizados por Zellner et al 64. En la pantalla a color, las líneas del tahini son verdes y los puntos son rojos.

En la relación entre comida y vajilla, ¿se pueden utilizar los resultados probados en nuestra interfaz de usuario?

La imagen de arriba muestra dos conjuntos de colores basados ​​en la herramienta de color de Google. El patrón espacial en las imágenes de la izquierda y la derecha es exactamente el mismo, excepto por los diferentes tonos. Los tonos darán a las personas la sensación de que el espacio de la izquierda es más estrecho y el espacio de la derecha es más amplio.

De hecho, el tamaño del origen en las imágenes de la izquierda y de la derecha es exactamente el mismo, pero la imagen de la izquierda se siente más pequeña y la imagen de la derecha es más grande. La ilusión de Ebbinghaus y la ilusión de DeBoeuf pueden desempeñar un papel obvio en el espacio de la interfaz. Podemos seguir esta herramienta teórica para servir a nuestro diseño, expresar mejor las prioridades funcionales y reflejar las relaciones estructurales en el espacio.

Tres. Triángulo de Kanizsa - Iconología y textura

gaitano Kanizsa (1913 ~ 1993) fue un psicólogo italiano. Estableció el Instituto de Psicología en Trieste, Italia e hizo grandes contribuciones al estudio de la psicología italiana.

Entre las ilusiones ópticas descubiertas por Kanisha, la más famosa es el conocido triángulo de Kanisha, publicado en 1955. Esta ilusión óptica sugiere que nuestro cerebro dibuja el contorno de un triángulo que en realidad no existe. Llamamos curvas de nivel que no existen en absoluto "contornos subjetivos".

Como puedes ver en la imagen de arriba, hay un triángulo blanco en el centro de la figura que en realidad no existe.

Esto se debe a que el cerebro conecta espontáneamente segmentos de línea para formar una figura completa al observar, y esta ilusión óptica es cierta en varias figuras similares.

Kanisha no sólo logró un gran éxito como psicóloga sino que también fue una pintora activa. También hay muchas obras creadas a partir de errores visuales en sus pinturas.

△Gaetano Canisa, [Ominon] 1977-Olio Sutera. cm50x70

△Gaetano Canisa, [Uovo] 1975-Olio Sutera. cm50x70

La ilusión Kanisha en realidad se puede utilizar en gráficos de interfaz de usuario. Por supuesto, cada diseñador deberá evaluar si la herramienta armoniza con la marca y el lenguaje visual de la empresa.

No hemos visto ningún icono en el mercado que utilice completamente la ilusión de Kanisha, pero a menudo vemos diseños de iconos que no están completamente conectados, pero estos iconos no están completamente conectados. Creamos dificultades cognitivas porque nuestro cerebro nos ayuda. hazlo automáticamente.

Hablando de materiales, debemos mencionar que después de que Google lanzó Material Design (en lo sucesivo, MD), MD utiliza partículas para expresar materiales en la unión de gráficos claros y oscuros. Esta es una continuación de MD. expresión de papel.

En términos de gráficos y texto, poco a poco todos comenzaron a utilizar materiales MD para expresarse. En una actualización anterior de la aplicación de una determinada fábrica, los materiales gráficos también se expresaron con materiales de pantalla completa de grano más grande.

No hay nada de malo en los gráficos, colores y materiales en sí, y se ven hermosos en los teléfonos móviles, pero ¿qué tiene que ver este material granular con el sistema visual global? Después de observar detenidamente el juego visual en sus conceptos/pensamientos de diseño, no pude encontrar la respuesta. Como colega, no he visto pistas sobre la uniformidad de los materiales en el producto. Ahora sólo veo los materiales como materiales por el hecho de ser materiales, y no hay conexión entre los materiales en general.

Sugiero que la ilusión de Kanissa se pueda utilizar en íconos o diseño gráfico, para que puedas ampliar tu pensamiento y probar más. Las imágenes pequeñas también tienen grandes mundos.

Cuatro. Efecto Von Berthold - Color

Entre las ondas de luz iluminadas por el sol, la luz visible es muy estrecha y solo podemos ver longitudes de onda en el rango de 400-700 nm.

Necesitamos saber qué es el color para poder entender la ilusión óptica del color. Cuando estaba aprendiendo qué era el color, hubo una teoría que realmente me sorprendió: el color es lo que siente el cerebro. ¿Sentir? ¡Qué! ¿El mundo que veo está lleno de emociones?

Entonces, déjame decirte por qué los colores son sensaciones en el cerebro. La luz brilla sobre una manzana, pero la superficie de la manzana solo refleja luz de una longitud de onda específica. La luz roja reflejada de una longitud de onda específica será absorbida por los humanos, por lo que se siente roja.

La ciencia moderna muestra que los humanos podemos experimentar varios colores debido a las diferentes longitudes de onda de la luz reflejada por diferentes objetos. Y las células de la retina en la parte norte del ojo convierten las señales en señales que se transmiten al cerebro a través de los nervios, y la persona se siente "roja" por primera vez. Pero a veces la luz de la misma longitud de onda tendrá diferentes percepciones de color, lo cual es una ilusión óptica.

En otras palabras, en la vida diaria, el color que se ve en la ropa no es el color en sí, sino el color reflejado tras absorber la longitud de onda. El color del tinte en sí puede no ser el color que finalmente vemos, al igual que la reacción óptica de la manzana de arriba.

La imagen de arriba es 1. Hay líneas brillantes verticales obvias, y 2. Hay líneas oscuras verticales obvias. Pero las líneas contrastantes y otras partes son más claras o más oscuras. Desde 1. Respeto 2. Poco a poco se va oscureciendo. Esta ilusión óptica se llama banda de Mach y es creada por el cerebro para aclarar la línea divisoria entre la luz y la oscuridad.

Después de entender cómo nuestro cerebro percibe el color, veamos qué es la asimilación del color.

En la imagen de arriba, los colores de los lados izquierdo y derecho son exactamente iguales, pero el color del medio se ve afectado por los colores circundantes.

Cuando un color está rodeado por otro color, o utiliza otro color como fondo, el color se verá muy parecido al color circundante o al color de fondo. A este fenómeno lo llamamos asimilación del color. Se trata de una ilusión óptica de color también conocida como efecto Wilhelm von Bezold (meteorólogo alemán, 1837-1907).

Por lo general, definimos varios tipos de tonalidades de color comunes en las aplicaciones: sin color, con un solo color primario y combinaciones de colores primarios y secundarios. La combinación de colores de la ilusión óptica cromática me recuerda las líneas guía de color de MD. En entornos de diferentes colores, sin importar el tipo, puedes afectar el color principal a través de los colores circundantes y dejar que los colores circundantes te ayuden a expresar la sensación de la aplicación.