Los 20 mejores regalos para los aspirantes a diseñadores de movimiento de UX

Los diseñadores de interfaces se están interesando más en el diseño de UX con maquetas animadas que emulan las acciones de los usuarios. Estas maquetas de UX confiar en el movimiento Con efectos animados para definir. Cómo debe responder una interfaz a la entrada del usuario..

La mayoría de los diseñadores de UX aprenden a usar software para crear estas animaciones. Las dos opciones más populares son Adobe After Effects y Principle (solo OS X). Usted puede maquetas de interfaz de diseño en un programa como Photoshop, y mueva las interfaces de usuario a estos programas para animacion.

Si estás interesado en aprender la animación de UX, los regalos serán un gran activo. Puedes estudiar el trabajo de otros y jugar con sus diseños para ver cómo funciona todo..

A continuación encontrará los mejores regalos para los usuarios de Principle y AE. entrar en el diseño de movimiento UX. Seguramente te ayudarán a entender. ¿Cómo funciona la animación UX?, y como construir tu propio.

1. Eliminar acción

Deslizar Es una acción muy común en aplicaciones móviles para diversos propósitos. La acción predeterminada de deslizamiento de iOS se utiliza para mostrar opciones alternativas para editar / eliminar elementos, y eso es exactamente lo que obtienes en este regalo de promoción creado por Ramil Derogongun.

Puede descargar el archivo AEP gratuito para After Effects y probarlo usted mismo. La interfaz de usuario sigue a esquema de estructura de alambre muy básico con la entrada del usuario mostrada como un punto azul. Estos tipos de comportamientos de los usuarios son los mejores para mostrar a través de la animación Porque le da a los desarrolladores la oportunidad de ver cómo debería funcionar la interfaz.

2. Widget Swipe

Aquí hay otra maqueta animada que se enfoca en los artículos del carrito en una presentación de diapositivas. Diseñada por Leon Wu, esta animación de deslizamiento gratuito viene con un archivo PRD que está hecho para Principle.

La animación es extremadamente simple y muestra cómo los elementos deben moverse en la pantalla. cuando se aplica presion. También tienes una idea de la efecto calmante cada vez que se libera la acción de deslizar.

3. Interfaz de usuario dualshock

Aquí hay un efecto de animación UX increíblemente dinámico compartido por Alexander Boychenko. Esta maqueta se basa en el controlador de PlayStation para una interfaz de usuario de la aplicación móvil. Incluye un archivo de Sketch and Principle que puedes descargar gratis.

Este programa muestra cómo crear transiciones que deslizar entre pantallas. Pero también puedes ver cómo los elementos de la página se animan alrededor de la pantalla. en varias direcciones.

4. Animación Del Menú De La Hamburguesa

Los íconos de las hamburguesas siguen causando furor en las interfaces móviles. Este icono de menú muestra cómo animar el icono de tres barras en un icono "X".

Es un animación repetida, así que la "X" también se anima de nuevo en un icono del menú de hamburguesas. Este es un gran regalo para aprender sobre Manipulación de vectores para elementos de la interfaz de usuario..

5. Snapster

Esta maqueta gratuita es para una aplicación móvil llamada Snapster. Se enfoca en la pantalla de bienvenida / incorporación donde los usuarios pueden ver demostraciones de la aplicación y aprender cómo funciona realmente.

Es un archivo PRD, y desafortunadamente esto no funciona bien con After Effects, por lo que solo los usuarios de Principle pueden beneficiarse de este.

6. cargando hilanderos

Aquí hay un programa gratuito de AEP After Effects para hiladores de carga móvil. Estos tipos de GIF animados se hicieron muy populares cuando Ajax se abrió camino en el desarrollo web general..

Ahora estos cargadores móviles son una moneda de diez centavos una docena, y pueden incluso ser muy personalizado para adaptarse a ciertas interfaces. Este programa gratuito viene con un archivo AEP y un archivo Sketch para editar los vectores si desea modificarlos..

7. Reproducir / Pausa Transición

Efectos de transición A menudo parecen muy simples pero en realidad requieren una buena cantidad de trabajo. Esta animación de reproducción / pausa creada por Alex Pronsky es un gran ejemplo..

Con este programa gratuito puedes examinar cómo animar varios iconos de líneas finas en formas y símbolos. Una vez que aprendes el programa, es mucho más fácil hacer este tipo de cosas, por lo que es útil tener regalos a tu disposición para la investigación..

8. Maqueta del iPhone

Si bien este programa gratuito no contiene directamente la animación, debe utilizarse para trabajos de producción en aplicaciones de iPhone. Es un archivo AEP de iPhone 5S gratuito para usar en After Effects como plantilla de iPhone.

Simplemente importe su maqueta de interfaz y cree las animaciones en After Effects. Luego puedes conectarlo a esta maqueta de iPhone para compartir con tu equipo..

9. Plantilla de iPhone

Este es otro plantilla personalizada de After Effects con un diseño de iPhone más moderno. El regalo de promoción está disponible desde esta página en UX in Motion.

Todo en la plantilla es super fácil de personalizar. En la página de descarga, también encontrará una sección titulada "Instrucciones de video" donde puede aprender cómo animar la aplicación.

10. micro animación

Incluso las animaciones más pequeñas de la aplicación pueden tener un gran impacto en la experiencia del usuario. Este regalo muestra una "Me gusta" micro animación cada vez que un usuario "le gusta" una publicación.

El icono del corazón tiene su propia animación con la foto del perfil del usuario agregada a la pila de "me gusta". Este regalo es solo para Principio y también tienes un .mov archivo para descargar si lo desea.

11. aplicación de billetera

Las billeteras digitales son cada vez más populares, y este programa gratuito facilita el diseño de una. Obtendrá un archivo Sketch con todos los elementos vectoriales sin procesar, además de un archivo PRD gratuito para la animación Principle.

Este freebie fue diseñado por Sergey Bykov como un pequeño proyecto lateral divertido. Pero puede ser muy educativo si lo desarmas y trabajas con la animación paso a paso..

12. Conmutador iOS

Con el iOS 7 de Apple, el mundo obtuvo un interruptor recientemente diseñado para las etiquetas de encendido / apagado. Esto llevó a muchos efectos diferentes, incluyendo una animación gratuita que imita el interruptor de encendido / apagado nativo.

En este archivo, obtienes un efecto de animación muy simple con un alivio básico. El interruptor se mueve sobre, y el fondo se vuelve verde, luego vuelve cuando el interruptor se apaga.

13. Aplicación Ritter

Aquí hay otro gran regalo gratuito lanzado por Sergey Bykov para lo que él llama la aplicación Ritter. Esto incluye un archivo Sketch gratuito para la interfaz vectorial, junto con un archivo PRD gratuito para la animación Principle.

Obtendrás muchas animaciones diferentes en este programa gratuito, por lo que creo que sería más útil para un diseñador de nivel intermedio a avanzado. Los principiantes también pueden aprender mucho de esto, pero pueden tener una curva de aprendizaje empinada.

14. Invitar amigos

Todos conocemos y amamos el menú desplegable de íconos positivos de Google. Bueno, Jardson Almeida creó un menú de Invitación a amigos basado en un concepto simple de Diseño de materiales..

Todo fue diseñado en Sketch, e importado a Principio para la animación. Usted obtiene ambos archivos como regalos para descargar y jugar con.

15. Pase de tarjeta

Aquí hay otro regalo de promoción general hecho solo para usuarios de Principle. Esto es un interfaz de pase de tarjeta creado para presentaciones de diapositivas de propósito general o UI de aplicaciones nativas.

Creo que este es el regalo de promoción perfecto para un principiante que acaba de entrar en Principle. No es tan complicado que te sientas perdido, pero no es tan simple que te sientas trivializado.

16. Chat en el mapa

Muchos diseñadores todavía usan Photoshop para interfaces, y también es cierto en este mapa de chat de regalo. Puede descargar un archivo PSD para la interfaz y un archivo PRD para la animación Principio.

Es una animación sorprendentemente dócil para el estilo, pero aún se ve genial y funciona exactamente como lo esperaría en una aplicación de mapas / geolocalización simple..

17. Aplicación de carga

Las aplicaciones móviles a menudo utilizan cargando pantallas para decirle a los visitantes que algo está sucediendo en el backend. Uno de mis regalos favoritos de esta colección es esta animación de carga creada por Roman Wagner.

Carga elementos individuales. Uno después del otro Una vez finalizada la pantalla de carga. Esta animación es muy suave y completamente creíble en el ámbito del diseño de aplicaciones móviles..

18. Tarjetas de incorporación

Incorporación de usuarios Es un paso crucial para cada nueva aplicación móvil. Siempre es bueno incluir algunas animaciones en esta etapa, es por eso que estas animaciones de tarjetas incorporadas pueden ser muy útiles para los diseñadores de aplicaciones..

Esto fue creado por Austin Baird y se lanzó de forma gratuita para ser utilizado en cualquier proyecto de UI / UX.

19. Principios de Demos.

A medida que profundice en Principio, aprenderá muchas técnicas avanzadas de flujo de trabajo. Uno de los mejores regalos para ir más lejos es este creado para el equipo creativo de Yalantis..

Este es un recurso completamente gratuito para que los usuarios de Principle puedan descargar y jugar. Cubre algunos trucos que muestran cómo convertirse en un profesional en la animación Principle.

20. Menús desplegables

Los menús desplegables a menudo emplean animaciones locas para captar nuestra atención. Este programa gratuito de After Effects utiliza un animación de escaleras desplegables en el menú de elementos individuales para hacerlos caer como escaleras.

Puede que no sea útil para todos, pero sin duda es una excelente manera de aprender sobre la animación de la interfaz de After Effects..

Ultimas palabras

Todos estos recursos son completamente gratis para descargar y jugar en tus propios proyectos. Si eres nuevo en la animación UX, te garantizo que aprenderás mucho estudiando estos regalos. Si conoce algún otro gran recurso, no dude en colocar enlaces en los comentarios..