Cómo hacer que la interfaz sea emocional: diseño de interfaz basado en escenarios

Recordando algunos de los diseños que he hecho, la mayoría son similares excepto por la combinación de colores y los íconos. A veces, para un desarrollo rápido, los componentes interactivos son similares. Parece aún menos diferenciado y aburrido.

Actualmente estoy haciendo los ejercicios diarios en UI100day.com. Después de leer los trabajos de todos, descubrí que esos trabajos atractivos a menudo incluyen elementos interesantes y divertidos. Si bien estas interfaces cumplen con los requisitos funcionales, también están diseñadas con expresión emocional. Al mismo tiempo, los usuarios también pueden entrar en el escenario de uso cuando lo utilizan, creando más conexiones entre las personas y el producto.

De hecho, si lo piensas bien, el diseño esqueuomórfico del pasado era un diseño de interfaz situacional, un bloc de notas como un cuaderno, un reloj como un reloj... En el momento en que el usuario abre la interfaz , está integrado en el escenario de uso. Es solo que hoy en día el diseño de cuasiobjetos es demasiado complicado y pesado. Entonces, cómo expresar claramente la información de la página y hacer que la página tenga cosas más divertidas es una cuestión en la que vale la pena pensar.

He recopilado algunos diseños de interfaz que utilizan escenas emocionales y se resumen a continuación.

Usar imágenes grandes en el encabezado es probablemente la forma más común de mejorar la contextualización de la página.

La siguiente imagen es la interfaz de la VPN polimórfica. De hecho, hay muy poca información para mostrar, pero con la adición de una imagen de encabezado grande, no aparecerá demasiado en blanco y también hará que el producto sea más amigable.

Esta interfaz es realmente adorable. Aunque no todo el envío urgente se realiza en motocicletas, las exquisitas ilustraciones y el gatito perezoso hacen que la gente sienta que el bebé del envío urgente definitivamente lo estará. lograrse con éxito! Las curvas degradadas del fondo también hacen que el producto sea elegante pero no monótono.

También hay una imagen de fondo completa. Este tipo de imagen de fondo general solo transmite muy poca información y se utiliza principalmente para realzar la atmósfera. Por ejemplo, en la imagen siguiente, la interfaz de Moji Weather solo transmite información meteorológica y distingue el día y la noche.

El método de diseño más común para la barra de navegación es utilizar un color sólido o un degradado como fondo. El fondo de la barra de navegación de esta interfaz de 58.com es una escena de la ciudad. En diferentes ciudades, se cambiarán diferentes ilustraciones para representar la ciudad. Lo que es aún más interesante es que cuando se despliega toda la interfaz, las ilustraciones también tienen efectos de animación, reemplazando el estado de carga durante la carga.

En algunas páginas de estado anormales comunes, como páginas de datos vacías, también podemos agregar ilustraciones para que este estado sea menos molesto. Si tu producto tiene una mascota, esta también es una buena oportunidad para mostrar tu imagen de marca.

La interfaz en la imagen de abajo es bastante típica. Se trata de una caricatura antropomórfica para ayudar en la visualización de información.

También vale la pena señalar que su barra Tab también utiliza un método de rejuvenecimiento de la piel personalizado, de modo que los productos pueden adaptarse a diferentes temas de eventos.

Los anteriores son varios diseños que he experimentado para hacer que la interfaz esté basada en escenarios. En este período en el que la interfaz de usuario se vuelve cada vez más difícil de crear, estos métodos para hacer que los productos sean emocionales siguen siendo bastante importantes. Esta es también una razón importante por la que la posición de UI todavía existe.

¿Quién es mi lofter? /

Bienvenidos a todos a comunicarse y progresar juntos.