Globedia.com

×
×

Error de autenticación

Ha habido un problema a la hora de conectarse a la red social. Por favor intentalo de nuevo

Si el problema persiste, nos lo puedes decir AQUÍ

×
cross

Suscribete para recibir las noticias más relevantes

×
Recibir alertas

¿Quieres recibir una notificación por email cada vez que Forex007 escriba una noticia?

Interfaz gráfica de usuario en base a sombras y elevación

21/04/2017 10:40 0 Comentarios Lectura: ( palabras)

En este artículo te mostraré cómo los elementos visuales, como las sombras, transportan información procesada por el usuario de la interfaz

El diseño de la interfaz de usuario se está moviendo hacia la eliminación de elementos innecesarios para centrarse mucho más en la funcionalidad. Pero si bien el aspecto funcional de un diseño es clave para el éxito del producto, los detalles visuales son igualmente importantes, particularmente cómo pueden mejorar esos elementos funcionales.

Las pantallas de los usuarios son planas, pero los diseñadores y desarrolladores invirtieron una gran cantidad de arte en hacer que casi todo en ellos aparezca en 3D. Desde los primeros días de las interfaces gráficas de usuario, las pantallas han utilizado pseudo efectos 3D (sombras, gradientes, luces) para ayudar a los usuarios a comprender las acciones disponibles de un vistazo.

Estos efectos tridimensionales dan una ilusión de profundidad a una interfaz, ayudan a los usuarios a interpretar la jerarquía visual ya comprender qué elementos son interactivos:

- Los elementos que aparecen elevados parecen que podrían ser presionados. Esta técnica se utiliza a menudo como un significante para los botones.

- Los elementos que parecen hundidos (o huecos) parecen que podrían ser llenados. Esta técnica se utiliza a menudo como un significante para los campos de entrada.

El cuadro de diálogo de Windows 95 demuestra claramente cómo el uso de sombras y realces puede crear efectos 3D:

Observe cómo los botones aparecen elevados y los campos de entrada aparecen hundidos.

Skeuomorphism dio un salto evolutivo para esta idea. Es un lenguaje completo de imitación donde cada elemento de la interfaz de usuario imita objetos de la vida real en el espacio digital. En el mundo digital, skeuomorphism se asocia a menudo con los productos de Apple (especialmente iOS antes de 7), que proporcionan un gran ejemplo de cómo se ve a menudo en el diseño digital.

Diseño plano: cuando quita sombras reduce la detección

Para cada acción hay una reacción. Y en el mundo del diseño digital, el diseño plano fue una reacción contra el esqueleto. Puesto que cualquier cosa en una pantalla nunca se verá realmente tridimensional, por qué no pelar lejos la decoración ilusoria y centrarse en la funcionalidad en lugar de otro.

A diferencia del diseño tridimensional o del skeuomorfismo, el diseño plano original ni siquiera intenta reproducir la apariencia del mundo físico. Es literalmente plano, simplemente no hay ningún modelo de iluminación que emita sombras sutiles que indiquen lo que se puede hacer con un clic (porque se ve elevado por encima del resto) o donde se puede escribir (porque se ve sangrado por debajo de la superficie de la página).

Basta con echar un vistazo a Windows 8 con el lenguaje de diseño Metro de Microsoft:

La interfaz de usuario de Windows 8 es un ejemplo de diseño ultra plano

Todo parece demasiado plano y, de hecho, "Cambia los ajustes de la PC" se parece más a la etiqueta para el grupo de iconos que a un botón se le puede hacer clic y, como resultado, muchos usuarios simplemente pasan por alto esta opción. Los usuarios suelen pasar por alto o malinterpretar tales componentes GUI debido a la baja distintividad de los elementos y la pobre posibilidad de acción percibida.

Hay una razón por la que los diseñadores de GUI utilizan para hacer que los objetos se vean más detallados y procesables que en el diseño ultra plano (como los efectos brillantes, subidos en los botones o las sombras de inserción que hacen que los campos de entrada parezcan vacíos). A pesar de que los significantes varían de una aplicación a otra, los usuarios normalmente podrían basarse en dos suposiciones:

- Es probable que los elementos con significantes fuertes se puedan hacer clic.

- Los elementos sin significantes fuertes probablemente no se pueden hacer clic.

Por lo tanto, la eliminación completa sin distinciones visuales para producir diseños completamente planos sin significantes es un extremo malo. Los usuarios necesitan significantes para saber dónde pueden hacer clic / tocar en una página: pistas perceptibles que les ayudan a entender cómo usar las interfaces. Y las sombras son señales inestimables al decirle al cerebro humano qué elementos de la interfaz de usuario estamos viendo.

Interfaz gráfica

Diseño casi plano

Recientemente, los diseñadores han comenzado a darse cuenta de los problemas de usabilidad de diseño plano y como resultado, una interpretación más equilibrada de diseño plano ha surgido. La nueva solución a veces se refiere como "casi plana" o "plana 2, 0" de diseño. Este estilo de diseño es prácticamente plano, pero hace uso de sutiles sombras, realces y capas para crear algo de profundidad en la interfaz de usuario.

El diseño de material de Google es un buen ejemplo de plano 2.0 con los principios tomados de la física para ayudar a los usuarios a entender las interfaces e interpretar las jerarquías visuales en el contenido.

Sombras y elevación

Las interfaces modernas se vuelven con más capas y aprovechan al máximo el eje z. Este enfoque da una sensación de profundidad a la interfaz que hace que la experiencia sea más tangible. Y las sombras pueden dar esta impresión de la profundidad - las imágenes y los elementos con las sombras parecen estallar apagado de la página. Ellos dan un poco de especia visual al diseño sin convertirse en una distracción y ayudar a los usuarios a tener sentido de las interfaces:

- El sombreado indica que es posible hacer clic en el elemento.

- Las sombras ayudan a decir al usuario la jerarquía de elementos: ayudan a diferenciar entre dos objetos y en algunos casos, entienden que uno está sobre otro objeto.

- Sin una sombra, nada indica que el círculo redondo brillante está separado de las superficies de fondo.

- Las sombras proporcionan indicaciones visuales importantes sobre el movimiento direccional.

- La sombra crece más suave y más grande a medida que aumenta la elevación del objeto y crece más nítidas y más pequeñas a medida que disminuye la elevación.

- Las sombras trabajan a la par con la elevación. La elevación es la profundidad relativa, o de distancia, entre dos superficies a lo largo del eje z. Es medido desde el frente de una superficie a la parte frontal de otra, la elevación de un elemento indica la distancia entre las superficies y la profundidad de su sombra.

- Cuando los usuarios no se sienten seguros de que algo es clicable, necesitan una tranquilidad inmediata después de hacer clic / teclear. Y aquí la elevación entra en la escena. La elevación de un objeto determina la apariencia de su sombra.

 

Conclusión

Su diseño no debe confiar en sombras pesadas, gradientes extremos o efectos de iluminación complejos, todo lo cual puede distraer a los usuarios de su propósito. Sin embargo, las sombras sutiles y otros elementos de la interfaz de usuario "no planos" pueden ser buenos para su diseño porque poseen un valor de información importante: ayudan a crear significantes en la interfaz. Los usuarios prefieren cosas simples, limpias y ordenadas y los diseñadores deben tratar de guiar la percepción humana de la interfaz. Al examinar los diseños de interacción más exitosos de los últimos años, los ganadores claros son aquellos que ejecutan los fundamentos sin problemas.


Sobre esta noticia

Autor:
Forex007 (378 noticias)
Visitas:
4090
Tipo:
Opinión
Licencia:
Distribución gratuita
¿Problemas con esta noticia?
×
Denunciar esta noticia por

Denunciar

Comentarios

Aún no hay comentarios en esta noticia.