Movimiento
Usa movimiento para hacer visibles los cambios y guiar la experiencia con naturalidad.
Principios del movimiento
Funcional
El movimiento se aplica con propósito e intención para servir a la funcionalidad de la experiencia. Úsalo para mostrar el próximo paso, informar cambios en la interfaz y celebrar lo que la persona logró.
Notificaciones
Pausadas
Natural
El movimiento Lexy se siente fluido y real al respetar leyes físicas como la inercia, la gravedad, el peso y la velocidad. Esto vuelve las animaciones creíbles y predecibles.
Consistente
La consistencia en el movimiento unifica las experiencias y mejora el flujo entre productos. Aporta sensación de familiaridad.
Atractivo
Las animaciones bien diseñadas atraen. Diseñar momentos cautivadores con movimiento ayuda a conectar con el producto y crear experiencias memorables.
Duración y easing
Duración y easing describen cuánto tiempo se mueve un objeto y cómo cambia su velocidad en el camino. Acertar en estos parámetros garantiza que las personas tengan tiempo suficiente para notar el movimiento e interpretar lo que comunica.
Duración
Las animaciones deben encontrar el equilibrio entre lentas y abruptas. Tienden a sentirse naturales y rápidas cuando consideran tamaño y distancia recorrida. Da más tiempo a elementos grandes que a pequeños. Apunta a un movimiento veloz y fluido sin hacer esperar.
Easing
El easing es lo que da a una animación una sensación natural y orgánica, en oposición a un movimiento uniforme y rígido. Linear: velocidad constante, útil para rotaciones. Ease-in: arranca lento y acelera. Ease-out: arranca rápido y desacelera. Ease-in-out: lento al inicio, rápido al medio, lento al final.
Transiciones, o el movimiento en práctica
Las transiciones introducen, descartan o modifican contenido mediante animación, y son el corazón del movimiento de interfaz. Ayudan a entender cómo funciona la UI y le dan acabado de calidad.
Entrada y salida
Introducen o descartan elementos. Pueden venir desde fuera de pantalla o desde dentro de los límites de la pantalla. Patrón común para menús, dialogs y otros elementos interactivos.
Elevación
Comunica visualmente cambios en elevación o profundidad. Se usa para estados de botón, drag and drop, ventanas y para construir jerarquía entre elementos.
Top level
Para navegar entre páginas y destinos principales. Como los elementos del nivel superior ocupan mucho espacio, prefiere un fade rápido en lugar de mover o deslizar elementos. Mantiene la interfaz consistente y evita desorientación.
Container transform
Cambia el layout o la posición de un contenedor mediante redimensionamiento o reposicionamiento. Útil en diseño responsivo, para ajustar layout a distintos tamaños y orientaciones.
Coreografía
La coreografía es la disposición y orden de los movimientos en una animación. Una coreografía floja vuelve la animación barata o excesivamente larga.
Staggering
Es desplazar el inicio de varias animaciones para suavizar la entrada de grupos grandes o dirigir la mirada. Cuida la duración total y usa offsets cortos. Cuando se carga el mismo contenido varias veces, considera variar los offsets, partiendo con separaciones más amplias y reduciéndolas. En la mayoría de casos, la versión escalonada es preferible; deja la simultaneidad para grupos muy grandes donde el escalonado alargaría demasiado.
Jerarquía
La jerarquía es el orden en que se animan los elementos. Te permite dirigir la atención hacia áreas críticas y suaviza la navegación. Da más énfasis a los elementos importantes con movimientos más prominentes y mayores duraciones; agrupa los menos relevantes con timing sincronizado para crear cohesión.
Diseño de movimiento accesible
"Uno para todos, todos para uno" significa considerar las necesidades de todas las personas en cada aspecto del diseño. Algunos grupos pueden no percibir el movimiento o verse afectados por él: personas con trastornos vestibulares, baja visión, lectores de pantalla o sensibilidad a estímulos visuales. Algunas reglas generales:
- Diseña e incluye un modo "sin movimiento" en tu app o sitio, como recomienda WCAG.
- Mantén las duraciones cortas y el movimiento natural.
- Evita destellos, sacudidas o cambios bruscos que puedan detonar epilepsia.
- Mantén el movimiento contenido al elemento en foco. Animar otras zonas distrae de la tarea.
- Considera otras formas de comunicar lo que la animación dice, como ARIA live regions para anunciar contenido dinámico.
Movimiento reducido
Animación contenida
Tokens
| Token | Valor | Uso |
|---|---|---|
| --durationUltraFast | 50ms | Feedback inmediato (hover, focus ring). |
| --durationFaster | 100ms | Cambios de estado pequeños (checkbox, switch). |
| --durationFast | 150ms | Tooltips, popovers, hover destacados. |
| --durationNormal | 200ms | Por defecto para transiciones de UI. |
| --durationGentle | 250ms | Cambios de superficie pequeños. |
| --durationSlow | 300ms | Modales, drawers, paneles. |
| --durationSlower | 400ms | Container transforms; entrada/salida principal. |
| --durationUltraSlow | 500ms | Solo para hero / onboarding storytelling. |
| --curveAccelerateMax | cubic-bezier(.9,.1,1,.2) | Salida abrupta hacia el límite. |
| --curveAccelerateMid | cubic-bezier(1,0,1,1) | Salida rápida estándar. |
| --curveAccelerateMin | cubic-bezier(.8,0,.78,1) | Salida suave. |
| --curveDecelerateMax | cubic-bezier(.1,.9,.2,1) | Entrada destacada con rebote suave. |
| --curveDecelerateMid | cubic-bezier(0,0,0,1) | Entrada estándar de elementos. |
| --curveDecelerateMin | cubic-bezier(.33,0,.1,1) | Entrada sutil. |
| --curveEasyEaseMax | cubic-bezier(.8,0,.2,1) | Transiciones bidireccionales destacadas. |
| --curveEasyEase | cubic-bezier(.33,0,.67,1) | Easing por defecto en bucles UI. |
| --curveLinear | cubic-bezier(0,0,1,1) | Sólo para indicadores continuos (progress). |