Animation Principlespor Owl-Listener

Animation Principles Skill.

Dê a uma transição um propósito claro e um perfil de movimento que apoie a mudança de estado da interface.

Movimento de interface
Orientação de design

Revisão da fonte · Animation PrinciplesSKILL.md

Tarefa UX Produz • Uma justificativa de movimento para um evento da interface • Recomendações de easing, duração e sequência • Comportamento de interrupção e de movimento reduzido Antes de começar Forneça os estados anterior e posterior da interface, o gatilho e os dispositivos de destino. Use uma prévia executável para verificar o tempo, a interrupção e o comportamento de movimento reduzido.

Resumo editorial · fonte revisada 2026-10-07 · não é um exemplo gerado

01 Funcionalidades

Refine uma animação de interface

Um guia de design de movimento único que cobre easing, duração, coreografia, interrupção e movimento reduzido.

Fluxo de trabalho baseado na fonteNão é um benchmark de execução

A abordagem de trabalho

Animation Principles é um guia de motion-design focado em um único movimento de interface. Ele conecta a direção do easing, a duração, o escalonamento e o follow-through ao que o usuário deve perceber. Uma entrada, uma saída, uma ênfase, um indicador de carregamento ou uma transição têm funções diferentes.

A fonte inclui faixas de tempo e sugestões de escalonamento (stagger), mas são pontos de partida, não requisitos medidos para toda interface. Ela também pede comportamento interrompível, suporte a movimento reduzido e verificações em dispositivos com menos potência. Tokens de movimento para o produto inteiro pertencem a outra tarefa.

Entregas esperadas

Uma justificativa de movimento para um evento da interface
Recomendações de easing, duração e sequência
Comportamento de interrupção e de movimento reduzido

Ver o briefing de exemplo

Do briefing à revisão

01
Nomeie a mudança de estado
Identifique o que a animação comunica e qual elemento merece atenção primeiro.
02
Ajuste o movimento
Escolha um perfil de easing e uma duração adequados à entrada, saída, ênfase ou transição.
03
Verifique as alternativas
Revise o cancelamento no meio da animação, o comportamento de movimento reduzido e a sensação de resposta nos dispositivos de destino.

02 Quando usar

Quando usar

Forneça os estados anterior e posterior da interface, o gatilho e os dispositivos de destino. Use uma prévia executável para verificar o tempo, a interrupção e o comportamento de movimento reduzido.

Bom uso

A entrada de um modalUse para fazer uma superfície que entra parecer responsiva e intencional.
Uma transição que distraiÚtil quando a interação funciona, mas o ritmo ou a coreografia parecem errados.

Limites a verificar

Não é um sistema de movimento completoA fonte separa isso de tokens de duração e easing para o produto inteiro.
As faixas dependem do contextoOs milissegundos sugeridos não devem substituir testes reais da interação.

Traga estas informações

Gatilho e estadosMostre o estado anterior, a ação e o estado resultante.
Objetivo de atençãoDiga o que quem vê deve entender a partir do movimento.
Restrições de dispositivoIdentifique as necessidades de movimento reduzido e de desempenho.

03 Decisões importantes

Decisões importantes

Propósito acima de decoração
O movimento é avaliado pela mudança de estado que comunica.
A interrupção importa
Uma transição deve tolerar outra ação do usuário antes de terminar.

04 Exemplo de briefing

Experimente um briefing focado

O briefing de exemplo abaixo não foi testado. Verifique a configuração da skill antes de usá-lo.

Revise a configuração

Carregue o SKILL.md desta tarefa a partir do repositório designer-skills no local de skills compatível com seu agente. O arquivo de entrada não estabelece um comando de instalação universal.

Arquivo de origem upstream

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

Comece com uma entrega

Adapte o escopo, o material de origem e as restrições deste briefing antes de executar a skill.

Briefing de exemplo

Use animation-principles para ajustar a entrada deste painel de filtros. Explique o easing e a duração, coordene o painel e o conteúdo e defina o que acontece se ele for fechado no meio da animação. Inclua uma alternativa para movimento reduzido e evite adicionar loops decorativos.

Inspecione o resultado

Compare o resultado real com estes critérios observáveis.

A animação comunica uma mudança específica.
Uma segunda ação pode interrompê-la de forma limpa.
O comportamento de movimento reduzido continua compreensível.

OpenDesign oferece um espaço de trabalho de design local para agentes de código. Esta listagem não significa que a skill esteja incluída no pacote nem que suas ferramentas externas, credenciais e dependências de software estejam incluídas.

Baixar OpenDesign Ler o guia rápido

05 Fonte e licença

Fonte e licença

Esta página descreve a revisão fixada da fonte vinculada abaixo. O comportamento e os requisitos upstream podem mudar.

Responsável pela fonte: Owl-Listener
Repositório: Owl-Listener/designer-skills
Arquivo da skill: interaction-design/skills/animation-principles/SKILL.md
Licença: MIT
Versão revisada: 2026-10-07 · 9a6930cf84a8

Resumo editorial da fonte

Um guia de design de movimento único que cobre easing, duração, coreografia, interrupção e movimento reduzido.

Resumo original de OpenDesign, com base na fonte vinculada. As estrelas do repositório são um sinal datado de popularidade, não de uso da skill nem uma nota de qualidade.

06 Perguntas antes de começar

Perguntas antes de começar

Isso define todos os tokens de movimento?

Não. O escopo declarado é um único movimento; uma skill de motion-system cuida dos tokens do produto inteiro.

As faixas de tempo são universais?

Trate-as como orientação de design a testar no contexto, não como valores ideais garantidos.

O carregamento deve ser sempre animado?

A fonte lista padrões de carregamento, mas exige que o movimento tenha um propósito e respeite as preferências de acessibilidade.

OpenDesign

Abra espaço para a próxima iteração do design.

Mantenha seu briefing, o material de origem e o trabalho de design juntos em um espaço de trabalho local. Verifique a configuração da própria skill antes de adicioná-la ao seu fluxo de trabalho.

Baixar OpenDesign Explorar skills de design