jesusgarciafernandez 0. Filosofía Human-Centric AI
Esta habilidad dota de vida y ritmo a las interfaces, utilizando la tecnología para crear un diálogo natural y fluido que respeta el tiempo y la atención del ser humano.
El Rol del Humano: El Motion Designer debe ser un "Coreógrafo de la Atención". La IA puede interpolar movimientos y generar transiciones automáticas entre estados, pero solo el humano puede definir la "personalidad" del movimiento, decidir si una animación es demasiado lenta y frustrante o demasiado rápida y estresante, y asegurar que cada movimiento tenga un propósito funcional claro: guiar, confirmar o deleitar al usuario sin distraerle de su objetivo principal. Empoderamiento: Usamos la tecnología para automatizar el renderizado de activos complejos y la exportación a formatos ligeros (Lottie/Rive), permitiendo que el creativo se centre en el ritmo narrativo y en la excelencia estética de la interacción.
1. Descripción Detallada
La Animación de Interfaces (Motion Design) es la disciplina que añade la dimensión del tiempo al diseño. No es solo "cosas que se mueven"; es Ingeniería del Feedback Sensorial. El enfoque v2.0 incorpora la Animación Contextual y el Rendimiento Adaptativo, donde cada transición, microinteracción o estado de carga se diseña con una lógica física (Easings, Inercia) que reduce la percepción de espera, explica jerarquías espaciales y refuerza la identidad de la marca mediante un movimiento elegante, fluido y técnico.
2. Escenarios de Aplicación
- Estados de Carga y Skeletons: Transformación de la espera en una experiencia informativa que minimiza la ansiedad del usuario.
- Microinteracciones de Éxito/Error: Confirmaciones visuales que cierran el bucle de acción del usuario de forma satisfactoria.
- Navegación y Jerarquía Espacial: Transiciones que ayudan al usuario a entender la relación entre pantallas y la profundidad del sistema.
- Highlights y Onboarding: Guía visual progresiva que enseña al usuario cómo usar una funcionalidad nueva sin necesidad de texto.
- Identidad Dinámica (Logos Animados): Refuerzo de la personalidad de marca mediante el movimiento característico de sus elementos visuales.
3. Requisitos de Implementación
- Maestría en Principios de Motion UX: Dominio de los 12 principios de Disney adaptados a interfaces (Anticipación, Escala, Squash & Stretch).
- Herramientas de Prototipado Interactive: Protopie (lógica), After Effects (narrativa) o Rive/Lottie (exportación ligera).
- Entendimiento de Curvas de Aceleración (Easings): Capacidad de definir curvas Cubic-Bezier para un movimiento natural y predecible.
4. Diferencial: Movimiento Decorativo vs. Motion UX Estratégico v2.0
| Dimensión | Enfoque "Hacer que se mueva" | Animación Estratégica (v2.0) |
|---|---|---|
| Finalidad | Adornar / Distraer. | Informar / Guiar / Confirmar. |
| Tiempo | Genérico (0.3s para todo). | Adaptativo (según distancia y complejidad). |
| Rendimiento | Pesado (Videos/Gifs). | Ultra-ligero (Lottie/Rive/CSS). |
| Efecto | Carga cognitiva extra. | Reduce la carga cognitiva al explicar el sistema. |
5. Instrucciones y Pasos Detallados (Protocolo Maestro)
Fase 1: Definición de la Coreografía Funcional
Objetivo: Decidir qué debe moverse y por qué antes de animar.
- Mapa de Estados: Define el estado Inicial, el estado de Transición y el estado Final de cada componente.
- Definición del 'Mood' del Movimiento: ¿Es una App seria (movimientos rápidos y secos) o lúdica (movimientos suaves y elásticos)?
Prompt Maestro de Dirección de Motion UI:
Actúa como Motion Designer Senior y Especialista en Interacción Dinámica. Para el flujo de [ACCIÓN_USUARIO] en la App [NOMBRE], diseña el protocolo de movimiento:
1. Define la 'Transición Maestra' entre pantallas: [Ej: Desplazamiento lateral con desvanecimiento y escalado suave].
2. Especifica la Microinteracción de éxito: Describe el movimiento de confirmación (Ej: El botón se expande, muestra un check animado y desaparece).
3. Indica el 'Easing' recomendado: [Ej: Cubic-Bezier (0.4, 0, 0.2, 1) para un inicio rápido y final suave].
4. Detalla el sistema de 'Skeleton Loading': Cómo aparecen los contenedores progresivamente para dar sensación de velocidad.
5. Describe el formato de salida: [Ej: Archivo Rive para interactividad total en runtime / Lottie para animaciones lineales ligeras].
Fase 2: Producción, Optimización de Fotogramas y Entrega
... (Expansión técnica sobre el ajuste de los Anchor Points, la simplificación de trazados para Lottie y la validación de la fluidez en dispositivos de distinta potencia -Frames per second-) ...
Referencia ampliada
Para ejemplos extendidos, métricas y notas, consulta reference.md (cárgalo solo cuando necesites ese detalle).