Encontrei este pequeno artigo de Paul Lewis e me lembrou da importância de animações adequadas na IU. É quase como dirigir um filme, cada quadro tem que ser colocado ali cuidadosamente. Jogar sem pensar várias transições aleatórias em sua página ou aplicativo provavelmente acabaria irritando o usuário se ele usar a interface por pelo menos um minuto.
Mas sem falar mais sobre o assunto, aqui estão algumas dicas básicas:
- Facilite . Certifique-se de usar uma função de atenuação não linear . No mundo real, quase nunca existe algo como movimento “linear”. Até mesmo o iRobot do Roomba acelera e desacelera no caminho pela sua casa!
- Calma . Ao responder à ação do usuário, na maioria dos casos, você deseja relaxar . Dessa forma, nosso usuário obtém as informações solicitadas rapidamente, sem aquela “lentidão” no início
- “Expandir rápido, contrair mais devagar” , como diz Paul. De forma mais geral, isso significa tornar as ações de abertura mais rápidas do que as de fechamento , justamente pelo motivo dado anteriormente: quando o usuário solicita informações, ele quer que apareçam o mais rápido possível (e muitas vezes zero animação também é bom!), Porém ele não está focado na tarefa mais, podemos adicionar um pouco de suavidade extra ao fechar a caixa de luz ou recolher o menu
- Experimente . Gaste tempo com essas coisas. Não deixe os parâmetros em seus padrões e siga em frente, brinque com durações de animação e funções de atenuação e veja se você pode ajustar a interação do usuário aqui. Por falar em funções de atenuação, o jQuery tem várias variantes predefinidas . Embora você normalmente não queira usar algo como atenuação de rejeição para o menu principal de um site , esses efeitos funky podem ser úteis se não forem frequentes. Lembre-se de que isso é possível com funções de atenuação personalizadas.
DICA DE BÔNUS: Nenhuma animação é melhor do que uma que estressa.
As transições animadas devem melhorar a experiência, guiando o usuário através do fluxo de suas tarefas de maneira amigável e natural, não causando ataques epilépticos ou dissonância cognitiva. Se você não está pronto para sentar e gastar algum tempo planejando cuidadosamente essas transições, é melhor deixar sua interface sem animação por enquanto. Se você alterar os estados com JavaScript, certifique-se de alternar as classes CSS apropriadas nos elementos, dessa forma, você poderá adicionar animações facilmente mais tarde, sem tocar na lógica de negócios.
Para obter mais detalhes e ilustrações, consulte o artigo de Paul: http://aerotwist.com/tutorials/protip-choose-your-ease/