102.3K+Descargar
Ir a la guía de uso
Animation Principlespor Owl-Listener

Animation Principles Skill.

Dale a una transición un propósito claro y un perfil de movimiento que respalde el cambio de estado de la interfaz.

  • Movimiento de interfaz
  • Guía de diseño
Descargar OpenDesignVer la guía de uso
Revisión de la fuente · Animation PrinciplesSKILL.md
Tarea UX Produce • Una justificación del movimiento para un evento de la interfaz • Recomendaciones de easing, duración y secuencia • Comportamiento ante interrupciones y con movimiento reducido Antes de empezar Indica los estados anterior y posterior de la interfaz, el disparador y los dispositivos de destino. Usa una vista previa ejecutable para comprobar la temporización, la interrupción y el comportamiento con movimiento reducido.
Resumen editorial · fuente revisada 2026-10-07 · no es un ejemplo generado

01 Qué hace

Refina una animación de interfaz

Una guía de diseño de un solo movimiento que cubre easing, duración, coreografía, interrupción y movimiento reducido.

Flujo de trabajo basado en la fuenteNo es un benchmark de ejecución

El enfoque de trabajo

Animation Principles es una guía de diseño de movimiento centrada en un movimiento de interfaz. Relaciona la dirección del easing, la duración, la puesta en escena y el seguimiento con lo que el usuario debería notar. Una entrada, una salida, un énfasis, un tratamiento de carga o una transición cumplen funciones distintas.

La fuente incluye rangos de tiempo y sugerencias de escalonado, pero son puntos de partida y no requisitos medidos para todas las interfaces. También pide un comportamiento interrumpible, compatibilidad con movimiento reducido y comprobaciones en dispositivos de menor potencia. Los tokens de movimiento para todo el producto pertenecen a otra tarea.

Entregables esperados

  • Una justificación del movimiento para un evento de la interfaz
  • Recomendaciones de easing, duración y secuencia
  • Comportamiento ante interrupciones y con movimiento reducido
Ver el brief de ejemplo

Del brief a la revisión

  1. 01
    Nombra el cambio de estado

    Identifica qué comunica la animación y qué elemento merece atención primero.

  2. 02
    Ajusta el movimiento

    Elige un perfil de easing y una duración adecuados para una entrada, salida, énfasis o transición.

  3. 03
    Revisa las alternativas

    Revisa la cancelación a mitad de la animación, el comportamiento con movimiento reducido y la capacidad de respuesta percibida en los dispositivos de destino.

02 Cuándo usarlo

Cuándo usarlo

Indica los estados anterior y posterior de la interfaz, el disparador y los dispositivos de destino. Usa una vista previa ejecutable para comprobar la temporización, la interrupción y el comportamiento con movimiento reducido.

Buen encaje

  • La entrada de un modalÚsalo para que una superficie entrante resulte receptiva e intencionada.
  • Una transición que distraeÚtil cuando la interacción funciona, pero su ritmo o su coreografía no se sienten bien.

Límites que conviene comprobar

  • No es un sistema de movimiento completoLa fuente lo separa de los tokens de duración y easing para todo el producto.
  • Los rangos necesitan contextoLos milisegundos sugeridos no deben prevalecer sobre las pruebas reales de interacción.

Aporta estos datos

  • Disparador y estadosMuestra el estado anterior, la acción y el estado resultante.
  • Objetivo de atenciónIndica qué debería entender quien lo ve a partir del movimiento.
  • Restricciones de dispositivoIdentifica las necesidades de movimiento reducido y de rendimiento.

03 Decisiones importantes

Decisiones importantes

  1. Propósito antes que decoración

    El movimiento se juzga por el cambio de estado que comunica.

  2. La interrupción importa

    Una transición debe tolerar otra acción del usuario antes de terminar.

04 Ejemplo de brief

Prueba un brief concreto

El brief de ejemplo de abajo no se ha probado. Revisa la configuración del skill antes de usarlo.

Revisa la configuración

Carga el SKILL.md de esta tarea desde el repositorio designer-skills en la ubicación de skills compatible con tu agente. El archivo de entrada no establece ningún comando de instalación universal.

Archivo fuente original
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/interaction-design/skills/animation-principles/SKILL.md

Indica los estados anterior y posterior de la interfaz, el disparador y los dispositivos de destino. Usa una vista previa ejecutable para comprobar la temporización, la interrupción y el comportamiento con movimiento reducido.

Empieza con un entregable

Adapta el alcance, el material de origen y las restricciones de este brief antes de ejecutar el skill.

Brief de ejemplo
Usa animation-principles para ajustar la entrada de este panel de filtros. Explica el easing y la duración, coordina el panel y su contenido, y define qué ocurre si se cierra a mitad de la animación. Incluye una alternativa para movimiento reducido y evita añadir bucles decorativos.

Inspecciona el resultado

Compara el resultado real con estos criterios observables.

  • La animación comunica un cambio específico.
  • Una segunda acción puede interrumpirla limpiamente.
  • El comportamiento con movimiento reducido sigue siendo comprensible.

OpenDesign ofrece un espacio de trabajo de diseño local para agentes de programación. Este listado no significa que el skill esté incluido ni que sus herramientas externas, credenciales y dependencias de software vengan incluidas.

Descargar OpenDesignLeer la guía de inicio rápido

05 Fuente y licencia

Fuente y licencia

Esta página describe la revisión fija de la fuente enlazada abajo. El comportamiento y los requisitos originales pueden cambiar.

Propietario de la fuente
Owl-Listener
Repositorio
Owl-Listener/designer-skills
Archivo del skill
interaction-design/skills/animation-principles/SKILL.md
Licencia
MIT
Versión revisada
2026-10-07 · 9a6930cf84a8
Resumen editorial de la fuente
Una guía de diseño de un solo movimiento que cubre easing, duración, coreografía, interrupción y movimiento reducido.

Resumen original de OpenDesign, basado en la fuente enlazada. Las estrellas del repositorio son una señal de popularidad con fecha, no el uso del skill ni una puntuación de calidad.

06 Preguntas antes de empezar

Preguntas antes de empezar

¿Define todos los tokens de movimiento?

No. Su alcance declarado es un solo movimiento; un skill de sistema de movimiento se ocupa de los tokens de todo el producto.

¿Son universales los rangos de tiempo?

Tómalos como orientación de diseño que hay que probar en contexto, no como valores óptimos garantizados.

¿La carga siempre debe animarse?

La fuente enumera patrones de carga, pero exige que el movimiento tenga un propósito y respete las preferencias de accesibilidad.

OpenDesign

Haz espacio para la próxima iteración de diseño.

Mantén tu brief, el material de origen y el trabajo de diseño juntos en un espacio de trabajo local. Revisa la configuración propia del skill antes de añadirlo a tu flujo de trabajo.

Descargar OpenDesignExplorar skills de diseño
Archivo fuente original
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/interaction-design/skills/animation-principles/SKILL.md