A quebra de simetria proporciona contraste e apelo aos seus projetos. Saiba quando e como aplicar isso aos seus projetos.
A precisão de animação assimétrica melhora a experiência do usuário, permitindo que você expresse personalidade e, ao mesmo tempo, responda 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 precisão de animação assimétrica para dar personalidade e contraste ao seu trabalho.
- Sempre favoreça a 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 a maioria das "regras" da animação, você deve testar para descobrir o que funciona no seu aplicativo, mas, quando se trata da experiência do usuário, os usuários são notoriamente impacientes. A regra prática é sempre responder à 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 exibi-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, digamos, em torno da marca de 300 ms.
Por outro lado, quando você abre uma visualização modal, é normal que um erro ou outra mensagem importante seja exibida. Nesses casos, convém exibir a visualização um pouco mais lentamente, novamente em torno da marca de 300 ms, mas o descarte, 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 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).