Como criar animações de carregamento personalizadas para diminuir as taxas de rejeição

Originalmente conhecido como throbber, uma animação de carregamento é usada para indicar o progresso da coleta de dados ou renderização da interface. Embora você pudesse usar uma barra de progresso maçante para indicar isso, esses dias se foram.

Hoje, uma animação bem trabalhada com CSS, jQuery ou GIFs animados simples é uma oportunidade de animar suas interfaces e adicionar personalidade ao seu produto.

Animações bem pensadas podem entreter seus usuários enquanto eles esperam o carregamento do seu conteúdo. Uma boa animação de carregamento ajuda a gerenciar as expectativas e melhora a experiência do usuário, mantendo o interesse.

Neste tutorial, usaremos o Sketch para criar formas básicas e o Principle para criar rapidamente animações de carregamento personalizadas simples. (Ambos esses aplicativos são para Mac.) Você aprenderá a criar as animações de carregamento coloridas usadas pelo Trello, Flickr, Slack e muito mais.

Vamos lá.

Animação de carregamento do Slack

No Sketch, trace quatro quadrados arredondados com lados de 50px ou um raio de 100px cada. Eles devem parecer círculos perfeitos, mas estamos usando quadrados com cantos arredondados para criar o efeito de alongamento de linha na animação.

Posicione as quatro formas de forma a criar um quadrado imaginário com 150px de espaço entre cada lado. Aplique quatro cores diferentes (#35BA90 verde, #69CADD azul, #EBA900 amarelo e #E20661 rosa).

Importe as formas para o Principle, agrupe-as e clique em “Create Component” para aninhar o grupo.

Entre no grupo aninhado e gire a prancheta em 15 graus. Em seguida, selecione cada círculo individual e gire-o de volta à sua posição original (15 graus para trás). Isso cria o efeito de alongamento em linha reta.

Aplique um gatilho “Automático” à prancheta e, em seguida, estique cada retângulo arredondado para o lado oposto da prancheta para um comprimento de 295px. Dê uma opacidade de 75% para cada forma em ambas as pranchetas.

Aplique outro gatilho “Automático” à segunda prancheta. Na nova prancheta, reduza cada linha para sua largura original de 50px, mas no lado oposto de sua posição original.

Vincule a última prancheta à primeira com um gatilho “Auto”. Clique no botão “Back to Parent” para visualizar o resultado final.

Dica: quando você for "Voltar ao pai", poderá girar o grupo principal em -30 graus para ficar mais parecido com o Slack. Além disso, você pode alterar o ritmo da animação dentro do painel “Animate” e aplicar um efeito “Ease Both” para suavizar as transições.

Trello Carregando Animação

Usando Sketch, trace um quadrado azul de 100px. Desenhe um retângulo branco de 60px de largura por 140px de altura. Alinhe-o com o canto superior esquerdo do quadrado anterior com uma margem superior e esquerda de 30px. Duplique esse retângulo branco, alinhe-o à direita do quadrado com uma margem direita de 30px e reduza sua altura para 70px.

Importe a prancheta para o Principle e aplique o gatilho “Auto” para criar um novo quadro-chave. Na nova prancheta, inverta as alturas dos retângulos brancos (deixe o retângulo esquerdo com 70px de altura e o retângulo direito com 140px). Aplique um efeito “Ease-Both” no painel “Animate” para suavizar a transição.

Círculo de rolamento

Trace um círculo no Sketch. Aplique uma borda de 10px com valores “Dash” e “Gap” e sem preenchimento. Use uma cor “Angular Gradient” para a borda que irá acentuar o efeito de rotação que você criará mais tarde.

Abra um novo arquivo Principle e use o botão “Import” para transferir o círculo do Sketch. Aplique dois gatilhos “Automáticos” seguidos.

Para criar o efeito de rotação, selecione o círculo na prancheta do meio e altere seu valor “Angle” para 360 graus. Em seguida, selecione o terceiro círculo e dê a ele um nome diferente (ou seja, “copiar”) dentro do painel esquerdo. Isso vai falsificar a rotação infinita.

Por fim, vincule a terceira prancheta à inicial com outro gatilho “Auto”. Aplique uma transição “Linear” à linha do tempo entre as pranchetas 1 e 2. Verifique a animação que você acabou de criar na janela de visualização.

Animação de carregamento do Flickr

Trace um círculo azul e um círculo rosa lado a lado. Importe-os para o Principle e aplique um gatilho “Auto” para criar uma nova prancheta.

Inverta as posições dos círculos e aplique um novo gatilho “Auto” para criar uma terceira prancheta. Nessa nova prancheta, inverta a ordem da camada dos círculos no painel esquerdo.

Aplique um terceiro gatilho “Auto” para criar uma quarta prancheta. Na última prancheta, inverta a posição dos círculos mais uma vez e aplique um acionador “Auto” final da última prancheta de volta à inicial.

Tipo de carregamento

Crie um novo projeto no Principle e, usando a ferramenta Text, escreva “LOADING”. Alinhe o texto à esquerda e centralize-o verticalmente na prancheta.

Aplique um gatilho “Automático” cinco vezes seguidas. Faça com que o quinto gatilho do último loop da prancheta volte para a prancheta inicial.

Começando da prancheta inicial e movendo para a direita, edite o texto em cada prancheta para adicionar zero, um, dois, três, dois e um pontos, respectivamente, ao lado do texto original “LOADING”. A progressão das pranchetas deve ser algo assim:

CARREGAMENTO CARREGAMENTO. CARREGANDO.. CARREGANDO… CARREGANDO.. CARREGANDO.

Agora você pode visualizar a animação que acabou de criar.

Pontos pulsantes

Trace um ponto de 60px. Copie e cole mais um ponto e coloque-o 60px à direita. Certifique-se de que ambos os pontos, incluindo o espaço de 60px, estejam perfeitamente centralizados em sua prancheta.

Aplique um gatilho “Automático” quatro vezes seguidas.

Na segunda prancheta, reduza o segundo ponto para 30px.

Na terceira prancheta, reduza o segundo ponto para 0px e o primeiro para 30px.

Na quarta prancheta, dimensione o segundo ponto de volta para 30px e reduza o primeiro ponto para 0px.

Na quinta prancheta, reduza o primeiro ponto para 30px e vincule a prancheta de volta à primeira placa com um gatilho “Auto”.

Pontos rolantes

Coloque cinco pontos no arranjo que você encontraria em um dado de seis lados. Importe a prancheta para o Principle e centralize-a.

Aplique um gatilho “Automático” na prancheta.

Na nova prancheta, gire o grupo de pontos em 360 graus.

Vincule a segunda prancheta de volta à primeira com um gatilho “Auto”.

Círculo Pulsante

Comece com um círculo de 50 px alinhado ao centro dentro de um círculo de 150 px que tenha uma borda de 5 px, mas sem preenchimento.

Aplique um gatilho “Automático” três vezes seguidas.

Na primeira prancheta, dimensione o círculo de linha para 50px e o círculo interno para 10px.

Na terceira prancheta, dimensione o círculo de linha até 200px e dê 0% de opacidade. Dimensione o círculo interno até 150px e dê 50% de opacidade.

Na última prancheta, dimensione o círculo interno até 200px e dê 0% de opacidade. Dimensione o círculo de linha para 50px e dê 25% de opacidade.

Aplique um gatilho “Automático” à última prancheta. Reduza o círculo interno para 10px com 50% de opacidade.

Vincule a última prancheta à primeira com um gatilho “Auto”.

Pontos saltitantes

Alinhe três círculos perfeitos de 50px de altura com 50px de espaçamento entre eles.

Aplique um gatilho “Automático”. Na segunda prancheta, mova o primeiro círculo para cima em 50px.

Aplique um gatilho “Auto” à segunda placa. Na terceira prancheta, selecione os dois primeiros círculos e mova-os para cima 50px. Os três círculos devem estar em uma linha diagonal.

Aplique um gatilho “Automático” à terceira placa. Na quarta prancheta, mova o primeiro círculo para baixo 50px. Selecione os dois últimos círculos e mova-os para cima 50px.

Aplique um gatilho “Auto” na quarta placa. Na quinta prancheta, mova os dois primeiros círculos 50px para baixo. Selecione o último círculo e mova-o para cima 50px.

Aplique um gatilho “Auto” na quinta placa. Na sexta prancheta, mova os dois últimos círculos para baixo 50px.

Por fim, volte para a primeira prancheta, mova o primeiro ponto 50px para cima e vincule a última prancheta à primeira com um gatilho “Auto”. Você pode visualizar o resultado final.

Carregador clássico

Trace um círculo no Sketch e dê a ele uma borda cinza de 20px sem preenchimento.

Cole uma cópia do mesmo círculo em cima dele e altere o preenchimento da cópia para uma cor diferente. Para este exemplo, usaremos azul.

Trace um quadrado sobrepondo um quarto do círculo azul. Mova a camada do retângulo abaixo da camada do círculo e aplique “Máscara” à camada do retângulo.

Vá para Principle e importe a arte do Sketch com o botão “Import”.

Aplique um gatilho “Automático” à primeira prancheta e gire o círculo azul 360 graus.

Aplique um segundo gatilho “Automático” à segunda prancheta. Renomeie a terceira camada de círculo gerada para “copiar” e vincule-a de volta à primeira prancheta com um gatilho “Automático”.

Conclusão

Depois de praticar a criação de algumas dessas animações de carregamento testadas e comprovadas, você deve se sentir confiante em suas habilidades para criar uma animação exclusiva para seus próprios aplicativos usando as habilidades aprendidas aqui.

Com um pouco de imaginação e as ferramentas úteis encontradas no Sketch e no Principle, você pode criar uma animação de carregamento exclusiva que corresponda ao design do seu aplicativo em questão de minutos. Seus usuários apreciarão a aparência profissional e o indicador amigável de que seu aplicativo está trabalhando duro.

• • •

Leia mais no Blog Toptal Design:

• eCommerce UX – Uma visão geral das melhores práticas (com infográfico)
• A Importância do Design Centrado no Homem no Design de Produto
• Os melhores portfólios de UX Designer – Estudos de caso e exemplos inspiradores
• Princípios heurísticos para interfaces móveis
• Design Antecipatório: Como criar experiências de usuário mágicas