O que Artesanato de Motion Design faz?
Bom motion é invisível: ele direciona a atenção e sai do caminho.
Durações (a 30 fps)
| Movimento | Quadros | Segundos |
|---|---|---|
| Microfeedback (pressionar botão, destaque) | 4 a 8 | 0,15 a 0,25 |
| Entrada ou saída de elemento | 10 a 18 | 0,35 a 0,6 |
| Transição de cena | 12 a 20 | 0,4 a 0,7 |
| Movimento grande pela tela | 20 a 30 | 0,7 a 1,0 |
| Escalonamento entre itens de lista | 3 a 6 | 0,1 a 0,2 |
Saídas são mais rápidas que entradas (cerca de 70% do tempo de entrada). Mais de um segundo parece lento, a menos que seja uma revelação deliberada.
Easing
Escolha o easing de acordo com o que o objeto está fazendo:
- Entrando no quadro: ease-out (início rápido, aterrissagem suave).
- Saindo do quadro: ease-in (início lento, acelera para fora).
- Movendo-se entre posições na tela: ease-in-out.
- Contínuo (loops, barras de progresso): linear.
Nunca use linear simples para movimento semelhante a UI; parece robótico.
Molas
Use molas criticamente amortecidas ou levemente subamortecidas para um assentamento natural. No Remotion, damping: 200 é suave sem oscilação; damping menor (10 a 20) adiciona overshoot, apropriado apenas para conteúdo lúdico. Mantenha o overshoot abaixo de cerca de 10%.
Tempo de leitura para texto
segundos_na_tela = max(1.5, palavras * 0.35 + 0.5)
Um título de 6 palavras precisa de cerca de 2,6 segundos. Se a narração lê o texto, mostre-o um pouco antes da voz dizê-lo.
Ritmo
- Escolha uma batida (por exemplo, 0,5 s ou um compasso da música) e alinhe cortes e entradas a múltiplos dela. Movimento desalinhado parece desleixado, mesmo que os espectadores não saibam explicar por quê.
- Varie a duração das cenas; durações idênticas parecem mecânicas.
- Corte na ação: comece o próximo take enquanto o movimento do anterior ainda está acontecendo.
Hierarquia
- Um elemento focal de cada vez. Escureça ou desfoque o que não é o assunto.
- Texto do corpo com pelo menos 36 px em 1080p; títulos com 72 px ou mais. Espectadores em celular precisam de letras maiores.
- Taxa de contraste de pelo menos 4,5:1 para texto sobre fundos; adicione um véu ou contorno sobre o vídeo.
- Margens: mantenha o conteúdo dentro dos 90% centrais (área segura), 80% para vídeo vertical.
Transições com um propósito
Use uma transição apenas quando ela diz algo: um wipe para uma mudança de tempo, um push para o próximo passo, um cross-fade para uma mudança suave de tópico. Caso contrário, use um corte direto. Não misture mais de dois estilos de transição em um vídeo.
O que faz um vídeo parecer gerado
Evite esses padrões, a menos que escolhidos de propósito:
- Tudo desvanece de opacidade 0 com a mesma duração.
- Texto centralizado sobre um gradiente escuro com bolhas flutuantes.
- Um gradiente roxo-azul para toda marca.
- Todo elemento quicando com uma mola.
- Duração de cena idêntica e a mesma transição entre todas as cenas.
- Emoji padrão usado como ícone.
- Texto que aparece de uma vez, muito antes de ser falado.
Correções: use a paleta da marca e ativos reais, varie o movimento por função, escalone de forma significativa e deixe algumas cenas apenas cortarem.
Lista de verificação de revisão
- Você pode pausar qualquer quadro e ver um assunto claro?
- Algo se move sem motivo?
- O texto é legível no tamanho de celular?
- Os últimos 2 segundos ficam parados o tempo suficiente para ler a chamada para ação?