jesusgarciafernandez 0. Filosofía Human-Centric AI
Esta habilidad dota de vida a los pequeños gestos digitales, utilizando la tecnología para crear una conversación íntima y reactiva que reconoce y celebra cada acción humana.
El Rol del Humano: El Diseñador de Microinteracciones debe ser un "Poeta del Detalle Funcional". La IA puede automatizar la interpolación de fotogramas y sugerir comportamientos estándar para botones, pero solo el humano puede imbuir a una pequeña animación de la "calidez" justa, decidir si un sonido de confirmación es elegante o molesto, y asegurar que cada pequeño feedback sirva para guiar y deleitar al usuario en lugar de distraerlo, creando una sensación de calidad artesanal en el software. Empoderamiento: Usamos la tecnología para automatizar el renderizado de activos ligeros y la exportación a código, permitiendo que el creativo se centre en la sutileza del movimiento y en la psicología del feedback instantáneo.
1. Descripción Detallada
Las Microinteracciones son los detalles que transforman un producto funcional en uno memorable. No son solo "animaciones": son Ingeniería del Momento Máximo de Feedback. El enfoque v2.0 incorpora la Estructura de Dan Saffer (Disparador, Reglas, Feedback, Bucles/Modos) y el Diseño para el Deleite Inmediato, donde cada cambio de estado de un botón, cada indicador de carga o cada mensaje de error se diseña como una coreografía física que comunica el estado del sistema, reduce la ansiedad del usuario y refuerza la identidad de marca mediante el movimiento.
2. Escenarios de Aplicación
- Feedback de Éxito en Acciones Críticas: Un check animado tras una compra que libera dopamina y confirma seguridad.
- Gestión Visual de la Carga (Spinners/Skeletons): Transformación de la espera aburrida en un momento informativo y fluido.
- Prevención de Errores en Tiempo Real: Sacudida visual de un campo de formulario (Shake effect) cuando el dato es incorrecto, imitando el lenguaje corporal humano.
- Micro-navegación y Guía de Atención: Un sutil pulso de luz en un nuevo botón que enseña al usuario qué hacer a continuación.
- Gamificación Sutil mediante el Movimiento: Recompensas visuales (confeti, vibración háptica) al completar hitos diarios o tareas tediosas.
3. Requisitos de Implementación
- Maestría en los Componentes de Saffer: Capacidad de definir el Disparador (Trigger), las Reglas (Rules), el Feedback y los Bucles/Modos (Loops/Modes).
- Dominio de Herramientas de Motion UI: Lottie (After Effects), Rive (Interactividad nativa) o los estados avanzados de Figma.
- Entendimiento de la Física del Movimiento: Dominio de Easings (aceleraciones), Inercia, Squash & Stretch y Staging aplicados a píxeles.
4. Diferencial: Cambio de Estado Estático vs. Microinteracción de Alta Densidad v2.0
| Dimensión | Enfoque "Cambiar color" | Microinteracción Vital (v2.0) |
|---|---|---|
| Feedback | Binario (On/Off). | Narrativo (Muestra el proceso del cambio). |
| Propósito | Funcional (Informar). | Emocional y Funcional (Deleitar e Informar). |
| Ubicación | Aislada. | Sistémica (Parte de un lenguaje de marca). |
| Memoria | Invisible / Olvidable. | Firma visual del producto (Efecto "Wow"). |
5. Instrucciones y Pasos Detallados (Protocolo Maestro)
Fase 1: Identificación de Momentos 'Aha!' y Definición de Reglas
Objetivo: Encontrar los puntos del Journey donde un detalle visual marcará la diferencia.
- Selección del Momento: Elige la tarea más común (ej: pulsar 'Me gusta', 'Añadir al carrito' o 'Guardar').
- Definición de las Reglas: ¿Qué ocurre exactamente? ¿Cuánto dura (máx 300ms)? ¿Qué suena? ¿Cómo vibra?
Prompt Maestro de Dirección de Microinteracciones:
Actúa como Motion Designer Senior y Especialista en Interacción de Detalle. Para el componente [COMPONENTE], realiza el siguiente diseño de micro-comportamiento:
1. Define el 'Disparador' (Trigger): [Ej: Acción manual del usuario al soltar el botón].
2. Especifica el 'Feedback Visual': Describe la animación (Ej: El botón se comprime un 10% y explota en una pequeña nube de partículas de marca).
3. Establece el 'Timing' y la curva de 'Easing': [Ej: Duración total de 250ms, Cubic-bezier (0.175, 0.885, 0.32, 1.275) para un efecto de rebote elástico].
4. Detalla el 'Loop' o 'Modo': ¿Qué ocurre la segunda vez que se pulsa? (Ej: Cambio de estado persistente con desvanecimiento).
5. Protocolo de 'Rendimiento': Define el formato de exportación (Lottie/Rive) para asegurar que no pesa más de 50KB.
Fase 2: Animación, Exportación a Código y Validación de Rendimiento
... (Expansión técnica sobre el ajuste de los Anchor Points para giros naturales, la simplificación de capas para Lottie y la validación en dispositivos reales para asegurar los 60 FPS sin drenaje de batería) ...
Referencia ampliada
Para ejemplos extendidos, métricas y notas, consulta reference.md (cárgalo solo cuando necesites ese detalle).