O design interativo não precisa ser complicado.

A interatividade ajuda a tornar as interfaces do usuário expressivas e fáceis de usar. Apesar de seu grande potencial, a interatividade é talvez a menos compreendida de todas as disciplinas de design. Isso pode ser devido ao fato de que a interatividade é um dos novos membros da família da interface do usuário. O design visual e o design de interação remontam às interfaces gráficas anteriores, mas o design interativo teve que esperar por equipamentos mais modernos para uma renderização suave da animação. A interatividade da interface do usuário em camadas com as animações tradicionais contribui para o mal-entendido. Pode-se passar uma vida inteira aprendendo os 12 princípios básicos da Disney , isso significa que a interatividade da interface do usuário também é difícil? As pessoas costumam me dizer que projetar interatividade é difícil ou que escolher os valores certos é ambíguo. Argumento que nas áreas mais importantes para a interface do usuário, o design interativo pode e deve ser simples.

Por onde começar?

O principal objetivo do design interativo é ajudar os usuários a navegar no aplicativo, ilustrando o relacionamento entre os elementos da interface do usuário. O design interativo também tem a capacidade de adicionar um personagem ao aplicativo com ícones animados, logotipos e ilustrações; no entanto, a usabilidade deve ter precedência sobre elementos expressivos. Antes de demonstrar as habilidades de animação de personagens, vamos começar criando interatividade básica, com foco nas transições de navegação.

Padrões de transição

Ao projetar uma transição de navegação, simplicidade e consistência são fundamentais. Para fazer isso, escolheremos dois tipos de movimentos:

1. Transições baseadas em contêiner
2. Transições sem um contêiner.

Transições baseadas em contêiner

Elementos, como texto, ícones e imagens, são agrupados em contêineres.

Se a composição incluir um contêiner, como um botão, cartão ou lista, o projeto de transição será baseado na animação do contêiner. Os contêineres geralmente são fáceis de detectar com base em suas bordas visíveis, mas lembre-se de que eles também podem ficar invisíveis antes do início da transição, como um item da lista sem separadores. Este modelo é dividido em três etapas:

1. Anime o contêiner usando a suavização de animação padrão (isso significa que ele acelera rapidamente e diminui lentamente). Neste exemplo, as dimensões do contêiner e os raios angulares são animados de um botão redondo para um retângulo, preenchendo completamente a tela.
   
   
   
2. Dimensione os itens no contêiner para caber na largura. Os elementos são anexados à parte superior e ocultados dentro do contêiner. Isso cria um link claro entre o contêiner e os elementos internos.
   
   
   

* A animação diminuiu para ilustrar a aparência e o desaparecimento de elementos

A aplicação desse padrão a todas as transições com um contêiner estabelece um estilo consistente. Também deixa clara a conexão entre as composições inicial e final, pois são conectadas por um contêiner animado. Para demonstrar a flexibilidade desse padrão, cinco composições diferentes são mostradas aqui:


* A animação diminuiu para ilustrar como as composições inicial e final são conectadas pelo contêiner

Alguns contêineres simplesmente aparecem por trás da tela usando a atenuação padrão. A direção do seu movimento é determinada pela localização do componente ao qual está associado. Por exemplo, clicar no ícone do menu de navegação no canto superior esquerdo moverá o contêiner para a esquerda.



Se o contêiner for de fora da tela, ele será exibido suavemente e aumentará o zoom. Em vez de animar de 0%, ele inicia a animação de 95% para evitar atenção excessiva à transição. A animação em larga escala usa a atenuação da desaceleração , ou seja, começa na velocidade máxima e diminui lentamente. Para desaparecer, o contêiner simplesmente desaparece suavemente sem descamação. O final da animação deve ser menos pronunciado que o início, a fim de focar a atenção do usuário no novo conteúdo.


* A animação é mais lenta para ilustrar como os contêineres podem surgir devido à mudança gradual de um elemento (dimensionamento, aparência e desaparecimento)

Transições sem contêiner

Algumas composições não possuem um contêiner no qual a transição se baseia, por exemplo, clicando no ícone na navegação inferior, que exibe o usuário em um novo destino. Nesses casos, um modelo de dois estágios é usado:

1. A composição começa desbotando, terminando com uma aparência suave.
2. À medida que a composição final desaparece, ela também é dimensionada quase imperceptivelmente, usando uma redução nos elementos amolecedores. Novamente, a escala é aplicada apenas no momento em que uma composição parece enfatizar o novo conteúdo em comparação com o antigo.

* A animação é mais lenta para ilustrar como as transições ocorrem sem um contêiner usando a escala, a aparência e o desaparecimento de elementos

Se o início e o fim da composição tiverem uma conexão espacial ou faseada clara, o movimento da articulação poderá ser usado para fortalecê-la. Por exemplo, ao navegar em um componente da etapa, o início e o fim da composição rolam verticalmente à medida que desaparecem ou aparecem gradualmente. Isso aprimora seu layout vertical. Quando você pressiona o botão Avançar para se familiarizar com mais material, a composição rola horizontalmente. Mover da esquerda para a direita aprimora a compreensão do evento subsequente. O movimento conjunto usa elementos de mitigação padrão.


* A animação diminuiu para ilustrar como ocorrem os movimentos verticais e horizontais

Melhores práticas

Quanto mais simples, melhor

Dada a alta frequência e os laços estreitos com a usabilidade, a navegação de navegação geralmente deve suportar a funcionalidade de estilo. Isso não significa que eles nunca devem ser estilizados, apenas certifique-se de que a escolha do estilo seja justificada pela marca. O movimento dos olhos geralmente é mais atrasado por elementos como ícones pequenos, logotipos, gerenciadores de inicialização ou um estado livre. O exemplo simples abaixo pode não atrair tanta atenção no Dribbble, mas tornará o aplicativo mais conveniente.


* A animação diminuiu para ilustrar vários estilos de movimento

Escolha a duração e a mitigação corretas

As transições de navegação devem usar durações que priorizam a funcionalidade enquanto são rápidas, mas não tão rápidas que não se tornam um fator desorientador. A duração é selecionada dependendo da porcentagem da tela que a animação ocupa. Como as transições de navegação geralmente ocupam a maior parte da tela, 300 ms é um método comprovado. Por outro lado, componentes pequenos, como comutadores, usam uma duração curta de 100 ms. Se a transição for muito rápida ou lenta, ajuste seu comprimento em incrementos de 25 ms até atingir o equilíbrio correto.

A suavização descreve a velocidade com que uma animação acelera e desacelera. A maioria das transições de navegação usa o amaciador de elementos padrão, que é um tipo de amaciador assimétrico. Isso significa que os elementos aceleram rapidamente e depois diminuem com cuidado para se concentrar no final da transição. Esse tipo de suavização confere à animação uma qualidade natural, pois os objetos no mundo real não podem iniciar e parar subitamente. Se a transição parecer difícil ou robótica, é mais provável que a atenuação simétrica ou linear tenha sido escolhida erroneamente.


* A animação diminuiu para ilustrar vários tipos de suavização

Os padrões e as melhores práticas descritas neste artigo foram criados para criar um estilo de movimento prático e discreto. Isso funciona para a maioria dos aplicativos, mas algumas marcas podem exigir expressões de estilo mais intensas. Para saber mais sobre o estilo de movimento, consulte nossas instruções de personalização aqui .

Depois que as transições de navegação são implementadas, começa a tarefa de adicionar um caractere ao seu aplicativo. É aqui que padrões simples não funcionam, e aqui você pode realizar plenamente suas habilidades de animação ...


Animação personalizada pode adicionar facilidade a um erro grave

Se você estiver interessado em aprender mais sobre a possibilidade de movimento, leia nossos guias sobre a interatividade de elementos .