coastdigitalgroup/coastai-skills

Sistema de Movimiento de Interfaz

Propósito

El Sistema de Movimiento de Interfaz proporciona una metodología para diseñar "movimiento funcional" — movimiento que cumple un propósito específico en la interfaz de usuario. Va más allá de la animación decorativa para establecer un sistema de duraciones, curvas de suavizado y coreografía que ayuda a los usuarios a comprender relaciones espaciales, proporciona retroalimentación para las acciones y reduce la carga cognitiva durante los cambios de contexto.

Casos de Uso

• Definir tiempos de transición y curvas estándar para una librería de UI.
• Diseñar cambios de diseño complejos (ej., expandir una tarjeta a pantalla completa).
• Establecer movimientos de retroalimentación para acciones del usuario (ej., marcas de verificación de éxito, spinners de carga).
• Coreografiar la entrada y salida de capas de UI (Modales, Cajones, Notificaciones).
• Usar movimiento para guiar la atención hacia un elemento o cambio específico.

Cuándo NO Usar

• Estética de Marca Estática Only: Cuando el estilo visual evita intencionalmente el movimiento para transmitir un tono específico (ej., diseños minimalistas, brutalistas o "similares al papel").
• "Relleno" Puramente Decorativo: Animaciones que no agregan valor funcional y distraen al usuario de su tarea principal (ej., elementos de fondo que se mueven sin interacción).
• Entornos de Alta Latencia: Donde el costo de rendimiento de renderizar movimiento supera el beneficio de UX, provocando "tirones" o retrasos.

Entradas

1. Personalidad de Marca: ¿El movimiento es "Ágil/Productivo" (rápido, lineal) o "Natural/Fluido" (elástico, suave, orgánico)?
2. Contexto de Interacción: ¿Qué se está moviendo? (Elemento atómico, contenedor o página completa).
3. Tipo de Disparador: ¿El movimiento es activado por el sistema (Carga), el usuario (Clic/Desplazamiento) o el entorno (Scroll)?
4. Capacidades de la Plataforma: Restricciones técnicas de los navegadores o dispositivos de destino.

Salidas

1. Escala de Duración: Un conjunto de tokens de tiempo estandarizados (ej., motion-fast, motion-standard, motion-slow).
2. Paleta de Suavizado: Un conjunto definido de curvas Bezier para diferentes intenciones de movimiento (ej., ease-in, ease-out, emphasized).
3. Reglas de Coreografía: Estándares para cómo los elementos entran, salen y se mueven en relación entre sí.
4. Especificación de Tokens de Movimiento: Documentación de variables de movimiento para desarrolladores.

Flujo de Trabajo

1. Establecer la Escala de Duración

Crea una progresión lógica de tiempos basada en el tamaño del cambio:

• Rápido (100–150ms): Para micro-interacciones y estados atómicos (Hover, Toggle, Activo).
• Estándar (200–300ms): Para transiciones medianas (Desplegables, Tooltips, Expansiones pequeñas).
• Lento (350–500ms): Para cambios de diseño grandes o transiciones inmersivas (Modales, cambios a nivel de página).

2. Definir las Curvas de Suavizado

Asigna significado semántico a diferentes curvas Bezier:

• Estándar (Ease-in-out): Para elementos que se mueven de un punto a otro dentro del viewport.
• Entrada (Ease-out): Para elementos que aparecen o entran al viewport (comienzan rápido, terminan lento para sentirse receptivos).
• Salida (Ease-in): Para elementos que desaparecen o salen del viewport (comienzan lento, terminan rápido para sentirse con propósito).
• Enfatizado (Complejo): Una curva personalizada (ej., cubic-bezier(0.4, 0, 0.2, 1)) para transiciones primarias que deben sentirse de alta calidad.

3. Diseñar para Modelos Mentales Espaciales

Usa el movimiento para explicar de dónde viene un elemento y hacia dónde va:

• Continuidad Direccional: Si un cajón se desliza desde la derecha, debe salir hacia la derecha.
• Relación Padre-Hijo: Un elemento hijo (como un menú) idealmente debería originarse de su padre (el botón).

4. Coreografiar Secuencias (Escalonamiento)

Cuando varios elementos aparecen a la vez, evita el efecto "Pop-in":

• Escalonamiento: Introduce elementos con un ligero retraso (20–50ms) entre cada uno para guiar el ojo en un orden específico.
• Escalonamiento Direccional: Escalonea los elementos en la dirección de lectura (de arriba a abajo o de izquierda a derecha).

5. Planificar para Accesibilidad (Movimiento Reducido)

El movimiento debe ser inclusivo:

• La Verificación "Pre-vuelo": Siempre define un fallback para usuarios que tienen "Reducir Movimiento" activado a nivel de sistema operativo.
• Visuales Alternativas: Reemplaza el movimiento con desvanecimientos de opacidad o sin animación cuando prefers-reduced-motion esté activo.

Reglas de Decisión

• La Regla "Funcional Primero": Si no puedes explicar qué comunica un movimiento al usuario, elimínalo.
• Tiempos Responsivos: Las duraciones deben ser más cortas en pantallas pequeñas (móvil) porque la distancia física que recorre un elemento es menor.
• Velocidad sobre Fluidez para Acción: La retroalimentación de interacción (ej., un clic en un botón) debe sentirse instantánea (<100ms) incluso si la transición resultante es más larga.
• Sin Bucles Infinitos: Evita animaciones en bucle continuo (spinners, pulsos) a menos que representen un estado activo que bloquea el fondo.

Restricciones

• Accesibilidad: Debe respetar prefers-reduced-motion. El movimiento no debe desencadenar convulsiones (evita parpadeos rápidos o patrones de alta frecuencia a gran escala).
• Rendimiento: Limítate a propiedades "Solo Compositor" (transform y opacity) para garantizar 60fps. Evita animar width, height o margin.
• Consistencia: Usa la misma duración y suavizado para el mismo tipo de componente en todo el sitio.

Patrones de Falla Comunes

• La Trampa del "Mareo por Movimiento": Usar movimientos amplios y abarcadores (ej., la página entera deslizándose) que causan malestar vestibular.
• Interfaces Lentas: Establecer duraciones demasiado largas (ej., 1 segundo para un menú), haciendo que el usuario espere y que el sitio se sienta roto.
• Movimiento Lineal: Usar suavizado "linear", que se siente mecánico y antinatural en comparación con la aceleración/desaceleración del mundo físico.
• Dirección Confusa: Un modal que "crece" desde el centro pero "se desliza" hacia abajo al salir, rompiendo el modelo espacial del usuario.
• El Efecto "Temblor": Escalonar elementos con retrasos demasiado largos, haciendo que la página se sienta como si estuviera cargando lentamente.

Criterios de Validación

• Cada transición tiene un token de Duración y Suavizado definido.
• Las duraciones son proporcionales al tamaño de la transición (Rápido para pequeño, Lento para grande).
• El movimiento respalda un modelo mental espacial claro (Entrada/Salida lógica).
• Se usa escalonamiento para revelaciones de múltiples elementos para guiar el ojo.
• Accesibilidad: prefers-reduced-motion se aborda con una estrategia de simplificación clara.
• Rendimiento: Solo se usan transform y opacity para animaciones frecuentes.
• El movimiento de retroalimentación (ej., clic en botón) comienza en <100ms.