La versión corta
- El buen motion design se apoya en cinco principios: dar propósito a cada movimiento, medir bien su tiempo, suavizarlo, ordenarlo por importancia y usar el mínimo posible.
- Los movimientos pequeños de una interfaz suelen sentirse bien entre unos 150 y 300 milisegundos, mientras que los movimientos grandes y las entradas necesitan más tiempo.
- Lo que entra debe desacelerar, lo que sale debe acelerar y los bucles continuos deben moverse a un ritmo constante.
- Cuando se mueven varios elementos, el más importante debe moverse primero, y solo una cosa debe liderar cada vez.
- Un pequeño sistema de movimiento con tres duraciones y dos o tres curvas de suavizado mantiene coherente el movimiento de una marca en cada pieza.
En esta página
Los principios del motion design son las reglas prácticas que hacen que el movimiento se sienta natural y no aleatorio. La animación clásica de personajes tiene sus famosos doce, expuestos por los animadores de Disney Frank Thomas y Ollie Johnston en The Illusion of Life. Para el trabajo de diseño, como publicaciones, webs, logos y presentaciones, cinco hacen casi todo el trabajo: propósito, tiempo, suavizado, jerarquía y contención. Puedes usarlos sin abrir nunca una aplicación de animación.
Propósito: cada movimiento debe cumplir una función
El movimiento es ruidoso. Todo lo que se mueve atrae la mirada, así que mover algo equivale a afirmar que importa ahora mismo. Antes de animar, nombra la función. Si no puedes, déjalo quieto.
Movimiento con función
- Atrae la mirada hacia lo único que hay que leer primero
- Muestra de dónde viene o adónde va algo
- Confirma una acción: enviado, guardado, añadido
- Crea un ambiente con un fondo lento
Movimiento porque sí
- Cada elemento entrando con rebote al llegar
- Texto que sigue moviéndose mientras lo lees
- Logos que giran y botones que palpitan
- Transiciones que te hacen esperar
Tiempo: cuánto debe durar el movimiento
La duración es el principio que más gente hace mal, normalmente yendo demasiado lento en lo pequeño y demasiado rápido en lo grande. Ayudan dos reglas. Los movimientos pequeños y frecuentes deben ser rápidos, porque la gente los ve todo el tiempo. Los movimientos que recorren más distancia o cambian más deben durar más, porque el ojo necesita tiempo para seguirlos.
| Tipo de movimiento | Duración habitual | Por qué |
|---|---|---|
| Respuesta de botones e interruptores | Unos 100 a 200 ms | Se siente instantáneo, pero sigue siendo visible |
| Cambios pequeños de interfaz, menús | Unos 200 a 300 ms | Lo bastante rápido para no retrasar a nadie |
| Paneles grandes, cambios de página | Unos 300 a 500 ms | Más distancia necesita más tiempo |
| Texto que entra en una publicación o vídeo | Unos 0,4 a 1 s | Lo bastante largo para notarse como una entrada |
| Deriva del fondo en un bucle | Muchos segundos por ciclo | Es ambiente, no información: apenas debe notarse |
Una prueba útil: si la gente nota la animación en sí y no lo que muestra, es demasiado lenta o demasiado grande. Si no percibe el cambio, es demasiado rápida.
Suavizado: por qué nada debe moverse a velocidad constante
Los objetos reales aceleran y frenan. El movimiento a una velocidad constante, llamado lineal, se ve mecánico porque nada en el mundo se mueve así. Las curvas de suavizado añaden aceleración y desaceleración, y elegir la adecuada es sencillo cuando conoces tres casos.
- Entrar: ease out. Llega rápido y se asienta con suavidad, como un coche que se detiene. La mayoría de las entradas usan esto.
- Salir: ease in. Empieza con suavidad y se aleja acelerando. Las salidas también pueden ser más cortas que las entradas.
- Moverse dentro del encuadre: ease in out. Empieza y termina con suavidad.
- Bucles y rotaciones: lineal. El movimiento continuo debe mantener un ritmo constante, o parecerá dudar en la unión.
.panel-enter {
transition: transform 300ms cubic-bezier(0, 0, 0.2, 1); /* ease out */
}
.panel-leave {
transition: transform 200ms cubic-bezier(0.4, 0, 1, 1); /* ease in, and shorter */
}
.background-drift {
animation: drift 20s linear infinite; /* steady loop */
}Jerarquía: mueve primero lo importante
El movimiento crea un orden de lectura, igual que el tamaño y el peso en un diseño fijo. Lo que se mueve primero se lee primero. Cuando se animan varios elementos, escalónalos por orden de importancia, con un breve intervalo de unos 50 a 150 milisegundos entre cada uno, y deja que solo un elemento lidere cada vez. La jerarquía visual trata la versión fija de la misma idea.
En una versión animada de esta historia, el titular llega primero, luego la fecha y después los detalles. El fondo mantiene su propio ritmo lento por debajo.
- 1
El fondo se asienta
El campo ya se mueve despacio cuando aparece la publicación. Crea el ambiente sin pedir que se lea.
- 2
Entra el titular
Una entrada clara, con ease out, en menos de un segundo.
- 3
Siguen las líneas de apoyo
La etiqueta y los detalles llegan justo después, en orden de lectura, con un movimiento menor.
- 4
Todo se detiene
Las palabras se paran y permanecen quietas el tiempo suficiente para leerse. Solo el fondo sigue moviéndose.
Contención: usa menos movimiento del que crees
La quietud es lo que da sentido al movimiento. Si todo se mueve, nada destaca y el diseño resulta ansioso. Elige un movimiento principal por pieza, mantén cortas las distancias y deja que las palabras se queden quietas una vez han llegado. La contención también es cuestión de personas: a algunos espectadores el movimiento les resulta incómodo o incluso les provoca malestar, así que toda pieza debe funcionar con el movimiento desactivado. El movimiento reducido explica cómo planificarlo.
Coherencia: un pequeño sistema de movimiento
Las marcas mantienen coherentes los colores y las fuentes; el movimiento merece el mismo cuidado. Escribe un sistema diminuto y reutilízalo: tres duraciones, dos o tres curvas de suavizado y un movimiento propio para los fondos. Evita que cada pieza nueva invente su propia velocidad y hace reconocible tu movimiento, tal como describe movimiento para marcas estáticas.
:root {
--motion-quick: 150ms;
--motion-base: 250ms;
--motion-slow: 400ms;
--ease-out: cubic-bezier(0, 0, 0.2, 1);
--ease-in: cubic-bezier(0.4, 0, 1, 1);
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) {
:root {
--motion-quick: 1ms;
--motion-base: 1ms;
--motion-slow: 1ms;
}
}Aplica los mismos principios al animar un logo, una publicación o la cabecera de una web. Los logos animados y las publicaciones animadas los muestran en acción.
Preguntas frecuentes
¿Cuáles son los principios básicos del motion design?
Para el trabajo de diseño, cinco cubren casi todo: dar un propósito a cada movimiento, elegir una duración razonable, usar suavizado, ordenar el movimiento por importancia y usar el mínimo movimiento posible.
¿Cuánto debe durar una animación?
La respuesta de una interfaz suele funcionar en unos 100 a 300 milisegundos, los movimientos más grandes en unos 300 a 500 milisegundos y las entradas de texto en publicaciones o vídeo en torno a medio segundo o un segundo.
¿Qué suavizado debo usar?
Ease out para lo que entra, ease in para lo que sale, ease in out para lo que se mueve dentro del encuadre y lineal para los bucles continuos.
¿Cuáles son los 12 principios de la animación?
Son principios de la animación de personajes descritos por los animadores de Disney Frank Thomas y Ollie Johnston en The Illusion of Life. El tiempo y el suavizado, que ellos llaman slow in y slow out, son los que más directamente se trasladan al movimiento de diseño.
Escrito por Gradiently
El equipo detrás de Gradiently, una herramienta de diseño creada en torno a los Marks: degradados vivos que hacen que todo lo que diseñas parezca tuyo.
Ver nuestro perfil
