A quebra de simetria proporciona contraste aos seus projetos e os torna mais atraentes. Saiba quando e como aplicar isso aos seus projetos.
A marcação do tempo de animação assimétrica melhora a experiência do usuário, permitindo que você expresse personalidade ao mesmo tempo em que responde rapidamente às interações do usuário. Ela também proporciona um sensação de contraste, o que torna a interface mais visualmente atraente.
- Use a marcação de tempo de animação assimétrica para adicionar personalidade e contraste ao seu trabalho.
- Sempre dê preferência à interação do usuário. Use durações mais curtas ao responder a toques ou cliques e reserve durações mais longas para quando não houver resposta.
Como na maioria das "regras" de animação, você deve experimentar para descobrir o que funciona para o seu aplicativo, mas quando se trata de experiência do usuário, os usuários são notoriamente impacientes. A regra prática é sempre responder a uma interação do usuário rapidamente. Dito isso, na maioria das vezes a ação do usuário é assimétrica e, portanto, a animação também pode ser.
Por exemplo, quando um usuário toca para exibir uma navegação de barra lateral, você deve mostrá-la o mais rápido possível, com uma duração de cerca de 100 ms. No entanto, quando o usuário dispensa o menu, você pode animar a visualização um pouco mais lentamente, por exemplo, em torno da marca de 300 ms.
Por outro lado, quando você exibe uma visualização modal, normalmente ela mostra um erro ou alguma outra mensagem crítica. Nesses casos, convém mostrar a visualização um pouco mais devagar, mais uma vez em torno de 300 ms, mas a dispensa, que o usuário aciona, deve acontecer muito rapidamente.
A regra geral é a seguinte:
- Animações da interface do usuário acionadas pela interação de um usuário, como transições de visualização ou exibição de um elemento, têm introdução rápida (curta duração) e saída lenta (duração mais longa).
- Animações da interface do usuário acionadas pelo seu código, como erros ou visualizações modais, têm introdução mais lenta (duração mais longa) e saída rápida (duração curta).