Como escrever diretrizes de motion da marca (logo, mascote e UI)

O que deve constar nas diretrizes de movimento da marca?

Tudo o que um designer, desenvolvedor ou agência teria que adivinhar. Um roteiro prático, curto o bastante para que as pessoas realmente leiam:

Princípios são a parte mais fácil de escrever e a menos útil sozinha. Os fundamentos de movimento da Atlassian mostram o tamanho certo: quatro princípios (Human, Clarity, Accessible, Performant), cada um com uma frase, como "Motion is a clarifying layer, not decoration." As Human Interface Guidelines da Apple resumem a ideia central em uma linha: "Adicione movimento com propósito, apoiando a experiência sem ofuscá-la." Escreva os seus nesse tamanho e use o resto do documento para regras que alguém possa verificar.

Como definir tokens de duração e easing para o movimento?

Escolha uma escala pequena e nomeada e associe um uso a cada degrau. Os sistemas públicos são bons pontos de partida porque são documentados e testados em grande escala:

Os atributos de tema do Material para Android definem 16 durações, de motionDurationShort1 (50 ms) a motionDurationExtraLong4 (1000 ms), com a regra de que "a duração deve aumentar conforme aumenta a área/o percurso de uma animação". A Atlassian dá faixas em vez de tokens: cerca de 50 a 150 ms para interações e 150 a 400 ms para transições.

O easing recebe o mesmo tratamento. O Carbon divide as curvas em conjuntos productive ("eficiência e responsividade, mantendo-se sutil") e expressive ("entusiasmado, vibrante e bem visível"), cada um com curvas standard, de entrada e de saída; a productive standard é cubic-bezier(0.2, 0, 0.38, 0.9). O easing padrão do Material é cubic-bezier(0.2, 0, 0, 1), com curvas de desaceleração para elementos que entram e de aceleração para elementos que saem. O Material também define tokens de spring nas velocidades fast, default e slow, divididos em springs "spatial" para movimento e springs "effects" para cor e opacidade, que não devem ter overshoot.

Essa divisão entre productive e expressive se encaixa bem em uma marca: tokens productive para o feedback da interface e expressive reservados ao logo, ao mascote e aos momentos de lançamento. Entregue os tokens como código para que ninguém precise redigitá-los:

:root {
  --motion-duration-fast: 120ms;     /* hover, press, toggle */
  --motion-duration-moderate: 240ms; /* panels, toasts */
  --motion-duration-slow: 400ms;     /* page transitions */
  --motion-duration-brand: 1200ms;   /* logo intro, mascot reactions */

  --motion-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --motion-ease-enter: cubic-bezier(0, 0, 0, 1);
  --motion-ease-exit: cubic-bezier(0.3, 0, 1, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-duration-moderate: 0ms;
    --motion-duration-slow: 0ms;
    --motion-duration-brand: 0ms;
  }
}

Os valores acima são uma escala de exemplo, não um padrão: escolha os seus, mas mantenha a lista curta. Quatro a seis durações e três curvas de easing cobrem quase qualquer produto.

O que um logo animado pode fazer, e o que é proibido?

Uma animação de logo continua sendo o logo, então as regras estáticas da marca valem também, e o movimento acrescenta algumas próprias. Uma lista de pode e não pode é o formato mais claro:

Quatro regras que as diretrizes estáticas costumam esquecer:

1. A área de respiro inclui o envelope do movimento. Se a marca quica 10% acima da altura de repouso, a área de respiro é medida a partir do topo do quique. Caso contrário, o logo animado colide com a navegação ou com a borda do vídeo.
2. Tamanho mínimo para versões animadas. Um detalhe que se lê bem a 200 px vira cintilação a 32 px. Defina um tamanho abaixo do qual só se usa o logo estático (favicons, avatares pequenos, cabeçalhos compactos).
3. O último frame é o logo. Toda animação única termina na arte aprovada em repouso, porque um vídeo pausado ou um dispositivo lento mostra o frame em que parar.
4. Sempre existe um fallback estático, idêntico ao frame final, para e-mail, impressão, movimento reduzido e falhas de carregamento.

Para o vocabulário de reveals, stings e loops, veja logo reveal vs sting vs loop.

Como um mascote ou personagem de marca deve se comportar?

Descreva o mascote como um personagem na bíblia de uma série: quem ele é, o que faz em cada situação e o que nunca faz. Uma versão de uma página:

• Personalidade em três palavras, cada uma com um comportamento. Para um mascote como o Kiko: curioso (se inclina quando o usuário digita), calmo (idle com respiração lenta), encorajador (um pequeno aceno de cabeça no sucesso, nunca uma comemoração por ações rotineiras).
• Uma lista fixa de estados. Idle, loading, success, error, vazio, atenção e quaisquer estados de assistente, como listening e talking. Novos estados passam por revisão, assim como novas animações de logo. Veja estados de animação de mascote para uma lista completa.
• Comportamento em erros. O mascote pode parecer preocupado, nunca debochado. Ele não ri do usuário, não cobre a mensagem de erro e não faz o usuário esperar pela reação dele antes de tentar de novo.
• Frequência. A orientação da Apple se aplica diretamente: "em geral, evite adicionar movimento a interações de interface que acontecem com frequência" e "permita que as pessoas cancelem o movimento", porque ninguém deveria esperar por uma reação que já viu vinte vezes. Uma boa regra é o mascote reagir a marcos, não a cada clique.
• Proporções e model sheet. Limites de squash and stretch, as poses que estão dentro do modelo e os ângulos dos quais o personagem nunca é desenhado.
• Posicionamento. Onde o mascote pode aparecer (onboarding, estados vazios, carregamento, comemorações) e onde não pode (erros no checkout, telas jurídicas, qualquer coisa urgente).

A Apple também pede "brevidade e precisão nas animações de feedback", o que, para um mascote, significa reações curtas ligadas a um evento real e depois a volta ao idle.

Quando o movimento da marca deve ficar em loop, e quando deve ter som?

Decida por animação e registre na especificação, porque isso muda tanto a acessibilidade quanto a escolha do arquivo.

• Única por padrão. Intros de logo, revelações e reações do mascote tocam uma vez e param.
• Loops precisam de um motivo e de um limite. Um loop idle ao lado de conteúdo, que começa sozinho e dura mais de cinco segundos, precisa de uma forma de pausar, parar ou ocultar, segundo a WCAG 2.2 SC 2.2.2 (Nível A). Ou faça o loop parar depois de alguns ciclos, ou ofereça um controle de pausa visível.
• Loops precisam ser perfeitos. O último frame de um loop flui para o primeiro sem salto de posição ou de cor. Coloque isso na checklist de revisão.

O som deve vir desligado por padrão e nunca carregar significado sozinho. A orientação da Apple é "tornar o movimento opcional" e evitar que ele seja "a única forma de comunicar informações importantes"; a mesma lógica vale para o som. Na web, os navegadores decidem por você de qualquer forma: o MDN observa que a reprodução de mídia com áudio geralmente é bloqueada até o usuário interagir com a página, enquanto vídeo sem som pode tocar automaticamente. Um conjunto útil de regras:

• O movimento da interface é silencioso.
• Um sonic logo (a versão sonora do logo) existe só em vídeo e transmissão, onde o espectador escolheu ouvir o som.
• Sons do mascote, se houver, tocam só depois de uma ação do usuário e respeitam uma configuração de mudo.

O que as diretrizes de movimento devem dizer sobre movimento reduzido e flashes?

Dê a cada animação das diretrizes uma versão escrita para movimento reduzido. "Desligar" é uma resposta válida para decoração; para tudo o que carrega significado, especifique o substituto. O sistema da Atlassian declara sua regra com clareza: "quando o movimento reduzido está ativo, o movimento fica desligado e instantâneo", e pede às equipes que "verifiquem se a interface continua totalmente utilizável com todo o movimento desativado". O IBM Carbon diz: "Sempre ofereça alternativas para as transições de estado da interface" e "garanta que sempre haja uma forma de comunicar mensagens semelhantes de forma estática".

Na web, a configuração é a media feature prefers-reduced-motion, que o MDN descreve como a preferência do usuário por uma interface que "remove, reduz ou substitui animações baseadas em movimento". Os detalhes de implementação estão em animação acessível e movimento reduzido.

Mais duas regras devem estar em todas as diretrizes de marca:

• Flashes. WCAG 2.2 SC 2.3.1 (Nível A): nada pode "piscar mais de três vezes em qualquer período de um segundo", a menos que fique abaixo dos limites gerais e de flash vermelho. Varreduras rápidas de luz, efeitos de glitch e vídeos de lançamento com efeito estroboscópico precisam ser verificados.
• Scroll e parallax. O SC 2.3.3 (Nível AAA) pede que o movimento disparado por interação possa ser desativado; a explicação do W3C cita o scroll com parallax como uma animação muitas vezes não essencial que "pode desencadear distúrbios vestibulares".

Quais arquivos e formatos as diretrizes de movimento devem entregar?

Especifique as entregas por plataforma, com nomes, para que o desenvolvedor receba a mesma animação que o designer aprovou:

A linha do Rive merece cuidado extra: os nomes na state machine são uma API. Se as diretrizes dizem que o mascote tem um número mood e um trigger success, todo arquivo novo precisa manter esses nomes, senão o código do app quebra. Trate renomeá-los como uma mudança incompatível.

Se você precisa desses arquivos a partir de um logo existente, o Charmotion anima as partes do seu próprio logo em vez de redesenhá-lo, e os conjuntos de personagem vêm como um arquivo Rive com 17 animações, state machine e data binding, mais MP4, GIF, WebM e MOV transparentes, pôsteres e código pronto para copiar e colar para web, iOS, Android, Flutter e React Native. Isso dá às suas diretrizes um conjunto concreto e nomeado para documentar. Os planos estão na página de preços.

Como escrever diretrizes de movimento da marca

1. Escreva os princípios. Três ou quatro princípios de uma frase que descrevam como o movimento deve parecer e para que ele serve.
2. Defina os tokens. Quatro a seis durações nomeadas e três curvas de easing, cada uma com um uso, entregues como código.
3. Defina as regras do logo. Liste as animações de logo aprovadas, o que é proibido, a área de respiro incluindo o envelope do movimento e um tamanho mínimo para uso animado.
4. Descreva o mascote. Personalidade, a lista fixa de estados, o comportamento em erros, com que frequência ele reage e onde pode aparecer.
5. Decida sobre loops e som. Marque cada animação como loop ou reação única, adicione regras de parada para loops com mais de cinco segundos e mantenha o movimento da interface silencioso.
6. Escreva a coluna de movimento reduzido. Dê a cada animação uma versão para movimento reduzido e verifique os flashes com base na WCAG 2.3.1.
7. Especifique a entrega. Liste os formatos por plataforma, os nomes da state machine e das propriedades do Rive, os pôsteres e onde ficam os arquivos-fonte.

Perguntas frequentes

Qual deve ser a duração de uma animação de logo nas diretrizes da marca?

Longa o bastante para ser lida, curta o bastante para não atrasar nada. A maior parte do movimento de interface no Carbon, no Material e na Atlassian fica entre cerca de 50 e 400 ms, com valores maiores reservados a mudanças grandes ou em tela cheia. Intros de logo duram mais porque são momentos de marca, mas na web mantenha-as em um ou dois segundos, terminando no logo estático e com opção de pular.

As diretrizes de movimento devem usar curvas de easing ou springs?

Os dois funcionam, desde que sejam nomeados e compartilhados com os desenvolvedores. Carbon e Atlassian publicam curvas cubic-bezier; o Material define tanto curvas de easing quanto tokens de spring, com springs spatial para movimento e springs effects para cor e opacidade. Escolha uma abordagem por plataforma e documente os valores.

Quem deve ser responsável pelas diretrizes de movimento de uma marca?

Normalmente a equipe de design system ou de marca, com um desenvolvedor como corresponsável pelos tokens e nomes de arquivo. Os tokens e os nomes de propriedades do Rive ficam no código, então mudanças precisam da mesma revisão que qualquer mudança de API.

Fontes

• Motion, IBM Carbon Design System
• Motion system: easings, durations and springs (Material 3 theme attributes), Material Components for Android on GitHub
• Motion, Apple Human Interface Guidelines
• Motion, Atlassian Design System
• Understanding SC 2.2.2: Pause, Stop, Hide, W3C WAI
• Understanding SC 2.3.1: Three Flashes or Below Threshold, W3C WAI
• Understanding SC 2.3.3: Animation from Interactions, W3C WAI
• prefers-reduced-motion, MDN Web Docs
• Autoplay guide for media and Web Audio APIs, MDN Web Docs