Tempo de animação assimétrica

bookmark_border Mantenha tudo organizado com as coleções Salve e categorize o conteúdo com base nas suas preferências.

Romper a simetria proporciona contraste e apelo aos seus projetos. Saiba quando e como aplicar isso aos seus projetos.

O tempo de animação assimétrico melhora a experiência do usuário, permitindo que você expresse sua personalidade e responda rapidamente às interações do usuário. Ele também oferece contraste à sensação, o que torna a interface mais atraente visualmente.

• Use o tempo de animação assimétrico para adicionar personalidade e contraste ao seu trabalho.
• Sempre priorize a interação do usuário. Use durações mais curtas ao responder a toques ou cliques e reserve durações mais longas para momentos em que você não está interagindo.

Como a maioria das "regras" de animação, você precisa experimentar para descobrir o que funciona para sua aplicação, mas, quando se trata da experiência do usuário, eles são notoriamente impacientes. A regra geral é responder sempre rapidamente à interação do usuário. No entanto, 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 mostrar uma navegação na barra lateral, ela precisa ser exibida o mais rápido possível, com uma duração de cerca de 100 ms. No entanto, quando o usuário dispensar o menu, você poderá animar a visualização um pouco mais devagar, digamos, em torno da marca de 300ms.

Por outro lado, quando você mostra uma visualização modal, normalmente é para mostrar um erro ou outra mensagem importante. Nesses casos, é necessário exibir a visualização um pouco mais devagar, novamente em torno da marca de 300 ms, mas o encerramento, que o usuário aciona, precisa acontecer muito rapidamente.

A regra geral é a seguinte:

• Para animações de interface acionadas pela interação do usuário, como transições de visualização ou exibição de um elemento, tenha uma introdução rápida (de curta duração) e um outro lento (de duração mais longa).
• Para animações da interface acionadas pelo código, como erros ou visualizações modais, tenha uma introdução mais lenta (duração maior) e uma outra rápida (duração curta).