Por qué importa el movimiento
Nielsen Norman Group describe cuatro funciones que el movimiento cumple bien en una interfaz. Cada una ayuda a la gente a entender algo que de otro modo se le escaparía.
- Feedback: mostrar que el sistema te ha oído, como un botón que se hunde al pulsarlo.
- Cambio de estado: mostrar que algo cambió de modo, como un icono de reproducir que se convierte en pausa.
- Navegación: mostrar adónde fuiste, como un panel que entra deslizándose desde un lado.
- Señales: insinuar lo que puedes hacer, como una tarjeta que asoma para mostrar que se puede deslizar.
Timing y easing
Nada en el mundo real arranca ni se detiene al instante. El easing es cómo una animación acelera y frena, y es la mayor diferencia entre un movimiento que se siente barato y uno que se siente bien. La mayor parte del movimiento en interfaces es breve, una fracción de segundo, para que ayude sin hacer esperar a nadie.
Lineal Robótico. La misma velocidad todo el rato.
Ease out Arranque rápido, parada suave. Ideal para lo que llega.
Resorte Se pasa un poco. Juguetón, úsalo con cuidado.
Microinteracciones
Las microinteracciones son pequeños momentos construidos alrededor de una sola tarea: dar me gusta a una publicación, activar un ajuste, deslizar para actualizar. Cada una tiene un disparador, una respuesta y a veces un poco de personalidad. Ahí es donde muchos productos muestran su marca.
Movimiento para todo el mundo
A algunas personas el movimiento en pantalla les marea o les sienta mal. Los sistemas operativos les permiten pedir movimiento reducido, y los sitios web pueden respetarlo con el ajuste prefers-reduced-motion. Parte del trabajo es diseñar una versión tranquila de cada animación.
Motion graphics para marcas
Más allá de las interfaces, animarás elementos de marca: logos que se construyen solos, publicaciones con tipografía en movimiento, bucles cortos de producto. Prototiparás en Figma y usarás herramientas de IA para explorar ideas y storyboards rápido.
