En los propios términos del Skill
Este skill diseña e implementa microinteracciones, motion design, transiciones y patrones de feedback de usuario para mejorar la usabilidad y deleitar a los usuarios. Proporciona pautas de timing específicas: 100-150ms para micro-feedback como hovers y clics, 200-300ms para transiciones pequeñas como toggles y dropdowns, 300-500ms para transiciones medias incluyendo modales y cambios de página, y 500ms+ para animaciones coreografiadas complejas.
El skill cubre estados de carga con skeleton screens e indicadores de progreso, interacciones basadas en gestos como swipe-to-dismiss, transiciones de página y patrones de feedback como efectos ripple. Enfatiza el movimiento con propósito que comunica en lugar de decorar, usando cuatro principios: feedback para confirmar acciones, orientación para mostrar el movimiento de elementos, foco para dirigir la atención, y continuidad para mantener el contexto durante las transiciones.
Qué produce
- Microinteracciones de botón con animaciones de hover, tap y spring
- Skeleton screens con animación de pulso para estados de carga
- Componentes toggle con transiciones de estado suaves basadas en spring
- Transiciones de página con opacidad y movimiento vertical usando AnimatePresence
Cómo funciona
- 01Siga las Pautas de Timing según la Escala de la Interacción
Use 100-150ms para micro-feedback como hovers y clics, 200-300ms para transiciones pequeñas como toggles, 300-500ms para transiciones medias como modales, y 500ms+ para animaciones complejas.
- 02Seleccione Funciones de Easing Apropiadas
Use ease-out (desaceleración) para elementos que entran, ease-in (aceleración) para elementos que salen, ease-in-out para el movimiento entre estados, y spring para efectos de overshoot lúdicos.
- 03Respetar las preferencias de accesibilidad
Comprobar la media query prefers-reduced-motion y reducir la duración de las animaciones a 0.01 ms cuando los usuarios hayan solicitado movimiento reducido, garantizando que las animaciones no causen molestias.