it-swarm-pt.tech

Como e quando você deve usar a animação em seu aplicativo?

Às vezes, os aplicativos podem se beneficiar de animações na interface do usuário.

  • Que dicas você tem para determinar quando deve usar animação?
  • Como você pode maximizar a utilidade das animações e evitar o uso indevido?
12
Dair

Pense causa e efeito. Se eu passar o mouse sobre um botão, gostaria de receber algum tipo de feedback. Se eu puder arrastar algo, indique isso de alguma forma. Se houver um alerta ou notificação, discretamente chame minha atenção para ele. Além disso, a menos que você tenha um motivo muito específico para a animação, não use um. Tente evitar qualquer coisa que possa ficar irritante se continuar. Se a animação não for importante e se distrair do objetivo principal da página, elimine-a.

6
Virtuosi Media

Alguns locais onde a animação pode ser apropriada:

  • Minimizando um painel para um local específico - a animação ajuda a ensinar ao usuário onde o painel minimizado foi e como restaurá-lo.
  • Ocultar coisas automaticamente, por exemplo, uma barra de navegação - a animação chama a atenção do usuário de que algo simplesmente desapareceu e de onde pode ser recuperado.
  • Atualizando uma área que não está imediatamente próxima à área em que a alteração que causou isso aconteceu. Por exemplo, editar dados em uma lista/grade que altera a representação visual desses dados em outro painel.

A animação (mudança/movimento) chama a atenção mais do que a maioria das outras coisas, por isso é ótimo quando você deseja chamar a atenção para uma ação que poderia ter desviado a atenção do usuário.

No entanto, mesmo para os itens acima, pode valer a pena fazê-lo apenas nas primeiras vezes - uma vez que o olho é atraído automaticamente, ele serve como uma distração e, portanto, deve ser evitado depois que a "orientação" inicial for concluída .

6
Dan Barak

Você sempre deve ter algum tipo de animação ocupada/funcional para impedir que o usuário pense que o aplicativo parou de funcionar (especialmente importante para aplicativos ajax).

Transições rápidas simples são aceitáveis ​​se adicionarem à experiência geral do usuário, mas não exageram.

Você já usou um aplicativo em que pensou que "gostaria que o desenvolvedor dedicasse tanto tempo ao planejamento dos recursos reais quanto ao planejamento dos efeitos interessantes da interface do usuário"? Lembre-se disso quando adicionar animações.

4
Sruly

Ótima pergunta. Como sempre, isso depende do aplicativo (os jogos provavelmente devem usar muito mais animação da interface do que os aplicativos de produtividade, por exemplo), mas existem alguns princípios gerais.

Quando os iThings eram novos e quentes, tudo tinha que ser animado, mas é interessante olhar para o VS2010 e o Office 2010 e ver quanto é não animado. Em particular, no Office 2010, passe o mouse sobre a transição/substituição do botão (enquanto o Office 2007 o fez). OMI, parece mais responsivo. Os menus ainda desaparecem/diminuem (embora valha a pena notar que os menus demoram cerca de duas vezes mais para desaparecer out do que para desaparecer in, o que pode aumentar a percepção capacidade de resposta).

Em geral, a animação deve ser usada quando os componentes da interface do usuário se movimentam sem que o usuário os arraste/role explicitamente . Se o usuário estiver arrastando um ícone para o lugar, "arrastar" outros ícones para fora do caminho transmite os efeitos da ação do usuário (embora algumas vezes uma linha de ponto de inserção seja suficiente). A "barra de informações" no IE/Firefox empurra outras coisas para baixo para reduzir o salto e atrair a atenção do usuário. Os menus acordeão e árvore foram testados melhor com animação, pois o usuário vê para onde os outros elementos vão.

Vi um estudo uma vez que mostrou que usuários de todos os níveis estão menos inclinados a interagir com um elemento da interface do usuário que está animando (se eu encontrar o link, atualizarei isso). Portanto, se você acender um botão por mais de 2 segundos quando o usuário passar o mouse sobre ele, mesmo se o botão funcionar durante a animação, os usuários aguardam subconscientemente a conclusão da animação. Para ter uma idéia, confira o exemplo Temas do WPF . Alguns temas têm animações flutuantes mais longas do que outros, e você pode determinar imediatamente quais se sentem lentos. Os efeitos de desbotamento lento também podem ter contribuído para os usuários dizerem que o Vista parecia lento - no Win7, todas as mesmas animações estão lá (por isso é tão lento no processador/placa gráfica), mas muitas são mais curtas.

OTOH, o novo google.com apresenta novidades e a pesquisa de imagens do Google agora apresenta caixas de luz. Portanto, a tendência está indo nos dois sentidos.

3
Robert Fraser

Para resumir, as animações têm dois efeitos fortes no cérebro que você pode usar:

  • Reduza a carga cognitiva: Eles permitem que o usuário veja o que aconteceu entre dois estados, para que o cérebro não precise "preencher a lacuna". Isso faz com que o usuário sinta que tudo é mais claro e fácil de usar --> Faça amplo uso de animações para transições (cf Apple)

  • Capte a atenção do usuário: Os seres humanos são realmente bons para detectar movimentos em um local que não estão olhando diretamente. Isso é feito graças a células de nossa haste , as células usadas para detectar movimento, que são realmente densas nas bordas externas da retina (deve ter algo a ver com a sobrevivência em ambiente hostil) -> Use animação se algo realmente importante aconteceu em um local distante.

Este efeito é muito forte porque está diretamente conectado ao nosso cérebro reptiliano. Poderoso e perigoso ao mesmo tempo.

3
user396

Ao fazer animações para um aplicativo Web/nativo, sempre adoto a abordagem do Github, quase "distraindo o usuário" por meio segundo, enquanto o conteúdo está sendo carregado. Encontre as partes mais lentas do aplicativo (especialmente as partes em que você aperta um botão e, durante um bom meio segundo, parece que nada está acontecendo, e encontre uma maneira de fazer uma animação, isso é para minimizar a frustração do usuário (" Apertei o botão, mas nada está acontecendo "), observe que não quero dizer uma roda de carregamento rotativa ou algum tipo de animação de carregamento, quero dizer como uma animação deslizante ou algo parecido, para criar a ilusão de uma mancha , interface rápida, (consulte: https://github.com/github/linguist sempre que você clicar em alguma coisa, existe esta animação de slides que faz o github parecer super rápido e suave), observe que não exagere esse (usando essa técnica em partes de seus aplicativos que levam mais de 500 ms) me sinto em 500 ms, é o número mágico, mas experimente e encontre o seu.

2
David

Você precisa perguntar: essa animação ajuda o usuário a descobrir o que está acontecendo? Desliguei imediatamente o efeito gênio do OS X, mas aprecio a simples animação de minimizar/restaurar, porque é rápida e dá uma pista extra do que aconteceu. Da mesma forma com Spaces/Exposé. Ou talvez seja uma transição curta, simples e suave que faça com que algo pareça menos abrupto e mais humano.

Por outro lado, um pouco de talento pode ser sua marca registrada, como o 'Lucas wipe' de Star Wars.

2
John Ferguson

A animação tem um objetivo, e esse objetivo é visualizar mudanças de estado.

É mais fácil entender quando você pensa em animação declarativa, como o presente no CSS moderno, apresentado pelo webkit. Nesse contexto, você especifica como os elementos ficam em um determinado estado e depois informa ao CSS como eles ficam em um estado diferente. Como você especifica estados? Com regras CSS, como nomes de classe e IDs. Então, por exemplo (e me desculpe por usar o código aqui!):

.myBox { width: 100px; height: 100px; border: solid 1px red; -webkit-transition: linear .3s; }
.myBox.open { width: 100px; height: 120px; border: solid 3px red; }

O que estamos descrevendo aqui é uma caixa que se abre e estamos dizendo ao código como animar entre as duas regras CSS. Isso os torna estados e, quando você percebe isso, aplicar animação ao aplicativo de repente se torna muito mais lógico. Em vez de pensar em termos de para onde vai a animação, você está vendo a animação como um subproduto das mudanças de estado; um indicador de que algo aconteceu ou feedback para o usuário de que uma mudança está ocorrendo.

Quando aprendi a diferenciar entre "animação" pura (do ponto de vista de programação) e "mudança de estado" (do ponto de vista declarativo), tornou todos os meus designs de interface do usuário muito mais sólidos e lógicos.

1
Rahul