Por que o movimento importa
O Nielsen Norman Group descreve quatro funções que o movimento cumpre bem numa interface. Cada uma ajuda as pessoas a entender algo que poderiam deixar passar.
- Feedback: mostrar que o sistema ouviu você, como um botão que afunda ao ser pressionado.
- Mudança de estado: mostrar que algo mudou de modo, como um ícone de play que vira pausa.
- Navegação: mostrar para onde você foi, como um painel que desliza pela lateral.
- Significantes: sugerir o que você pode fazer, como um card que aparece um pouco para mostrar que dá para deslizá-lo.
Timing e easing
Nada no mundo real começa ou para instantaneamente. Easing é como uma animação acelera e desacelera, e é a maior diferença entre um movimento que parece barato e um que parece certo. A maior parte do movimento em interfaces é curta, uma fração de segundo, para ajudar sem fazer ninguém esperar.
Linear Robótico. A mesma velocidade o tempo todo.
Ease out Começo rápido, parada suave. Bom para coisas que chegam.
Mola Passa um pouco do ponto. Divertido, use com cuidado.
Microinterações
Microinterações são momentos minúsculos construídos em torno de uma única tarefa: curtir um post, ativar uma configuração, puxar para atualizar. Cada uma tem um gatilho, uma resposta e às vezes um pouco de personalidade. É nelas que muitos produtos mostram sua marca.
Movimento para todos
Algumas pessoas ficam tontas ou enjoadas com movimento na tela. Os sistemas operacionais permitem que elas peçam movimento reduzido, e os sites podem respeitar isso com a configuração prefers-reduced-motion. Parte do trabalho é desenhar uma versão calma de cada animação.
Motion graphics para marcas
Além das interfaces, você vai animar elementos de marca: logos que se constroem sozinhos, posts com tipografia em movimento, pequenos loops de produto. Você vai prototipar no Figma e usar ferramentas de IA para explorar ideias e storyboards rapidamente.
