Chegou a Black Friday! Crie um app e aproveite 50% de desconto agora!
Os apps GoodBarber estão prontos para o iPhone Duo. Veja como
Blog

Como animar o passo a passo do meu app?

No GoodBarber, o passo a passo, ou walkthrough, apresenta o seu app na primeira abertura, em cinco telas no máximo, que só são vistas uma vez. O seu app tem só alguns segundos para se apresentar, e o passo a passo é configurado em poucos minutos no back office, com as cores e as fontes do seu app. Cada passo mostra uma imagem ou, se você quiser, uma animação Lottie.

  7 min de leitura

Veja o que um passo a passo faz pelo seu app, os dois layouts entre os quais escolher e como animar um passo.

O que é um passo a passo e quando ele aparece

O passo a passo é o seu app se apresentando. No back office do GoodBarber, ele fica em Meu app › Passo a passo. Ele aparece no celular, uma única vez, na primeira abertura do app depois da instalação. Ele vem antes dos pedidos de permissão, notificações ou localização, para que a primeira coisa vista seja o seu app.

Ele tem até cinco passos, cada um com uma mídia, um título e uma descrição, todos opcionais. Em volta, os mesmos elementos de um passo para o outro, o título da página ou o seu logo, o botão Pular, o paginador e o botão Próximo, que vira Começar no último passo. Para avançar, basta tocar no botão ou deslizar a tela.

O fundo, as fontes, a cor do botão e do paginador são os do seu app, é o nosso princípio "Set once, consistent everywhere". Você não tem nada para redesenhar. O passo a passo é o primeiro momento do onboarding, cujas boas práticas já detalhamos.

Polaroid ou Immersive, dois layouts para os passos do passo a passo

O back office do GoodBarber oferece dois layouts para os passos. No Polaroid, a mídia aparece acima do título, nas proporções originais, nunca ampliada, e uma imagem de 1200 × 1200 pixels basta. No Immersive, a mídia ocupa a tela inteira, como um fundo, e o texto fica por cima. Prepare 1536 × 2048 pixels e escolha um Efeito nas imagens, Nenhum, Opacidade ou Gradient, para que o texto continue legível sobre a foto. Nos dois layouts, o alinhamento do conteúdo oferece seis posições, à esquerda ou no centro, em cima, no meio ou embaixo.

Uma regra simples para escolher. Uma foto que traz um clima pede o Immersive, foi o que fez a escola de música Eastside Music Workshop com as fotos das aulas. Um desenho ou uma animação que explica pede o Polaroid, com um fundo próprio, foi a escolha da Unit 7, o ateliê de serigrafia, cujos três passos são desenhados.

Animar um passo, com uma animação Lottie no lugar da imagem

Uma imagem diz o que o seu app faz. Uma animação mostra. No primeiro passo da Unit 7, um horário da agenda fica verde e a palavra BOOKED é carimbada, e você entende que a reserva é feita pelo celular antes mesmo de ler a frase. No segundo, um rodo atravessa a tela de serigrafia e o contador passa de 23 para 24 impressões. No terceiro, um tambor de Riso sinalizado como vazio volta a ficar disponível, com AVAILABLE em adesivo. Três gestos de três segundos, em loop. É o nosso princípio "Polish you can feel", o movimento que faz sentir um app bem-feito.

Essas animações são arquivos Lottie, um formato de animação vetorial, leve, que o app reproduz diretamente. Você as encontra na biblioteca LottieFiles, como explica a nossa ajuda, ou pode mandar desenhá-las com as cores do seu app, como as da Unit 7. No GoodBarber, uma animação é configurada com a mesma facilidade de uma imagem. No passo, escolha LottieFiles em vez de Imagem, envie o arquivo e depois ajuste a Velocidade de reprodução, de x0.5 a x3, e a Reprodução em loop. Em todos os casos, a animação recomeça do início toda vez que o passo aparece. No Polaroid, ela ocupa a largura da tela e mantém as proporções. No Immersive, ela preenche a tela como uma foto.

A animação continua sendo uma escolha. Um passo funciona muito bem com uma imagem fixa, e as duas se combinam no mesmo passo a passo.

Configure o passo a passo no GoodBarber

O passo a passo é uma extensão do GoodBarber. Instale-a em Loja de extensões › Todas as extensões, na página Passo a passo do app, com o botão Instalar. Ela custa 5 € por mês nas ofertas Standard e Premium e está incluída na oferta Pro. O menu Meu app › Passo a passo aparece então, com a pré-visualização do seu app ao lado.

  1. Escolha o layout, Immersive ou Polaroid, no alto do painel.
  2. Adicione os passos, cinco no máximo. Clique em Adicionar um passo e depois em Imagem ou LottieFiles. Para uma animação, a aba Arquivo recebe o seu arquivo Lottie JSON, e a aba URL, o link do asset de uma animação LottieFiles. Depois ajuste a velocidade e o loop, e escreva o Título e a Descrição. A pré-visualização, ao lado, abre no primeiro passo, e o botão Próximo dela mostra os outros.
  3. Ajuste as Configurações gerais, comuns a todos os passos. A Cor do fundo, o Alinhamento do conteúdo, o Título da página ou um logo no lugar dele, a fonte e a cor do título e da descrição do passo, o Botão de pular e o Botão "Próximo", a cor do Paginador e, no Immersive, o Efeito nas imagens. Tudo é salvo sem botão para clicar, e a pré-visualização acompanha.

No vídeo, o Alinhamento do conteúdo passa para embaixo à esquerda, e todos os passos acompanham. Para que um único passo tenha configurações próprias, um fundo só dele, outro alinhamento, outra cor de título ou de botão, use o JSON do seu app. A extensão gratuita Edição avançada o abre com um clique em { EDIÇÃO }, como para a sombra, as bordas ou a forma. O editor abre em walkthrough. Abra steps, depois o passo a ser modificado, e adicione as chaves do painel que você quer mudar. Por exemplo, para que só o primeiro passo coloque o texto embaixo à esquerda, clique em "+ Adicionar", digite contentAlign no campo newKey e o valor bottom_left, e depois "Adicionar". Por fim, clique em "Guardar". Os outros passos mantêm o Alinhamento do conteúdo do painel.

Antes, depois: o mesmo passo, em imagem e depois em animação

Para ver o que uma animação muda, aqui está duas vezes o mesmo passo, o da tiragem na Unit 7. À esquerda, a imagem fixa. O desenho é caprichado, mas parado. Fica um pouco abstrato, e não dá para entender de cara o que ele mostra. À direita, a mesma ilustração animada. O rodo atravessa a tela de serigrafia, a tinta aparece por onde ele passa, o contador vai de 23 para 24, e você reconhece na hora uma tiragem em andamento. Nada mais mudou, nem o texto, nem as cores, nem o botão.

Aqui, o movimento deixa o passo fácil de ler. Mas mesmo quando o desenho já é claro, a animação dá vida ao passo a passo e mostra que o seu app é caprichado.

O meu passo a passo preferido é animado

O que eu prefiro é um passo a passo animado. Para apresentar um app em poucas telas, não conheço nada mais expressivo que o movimento. O da Unit 7, um ateliê de serigrafia compartilhado, é um belo exemplo. Ele usa o Polaroid, sobre um fundo Charcoal #282727, com o logo do ateliê no lugar do título. Os títulos estão em Archivo Black 28, as descrições em Archivo 17, num cinza Concrete #A7A7A7. O botão, com cantos retos, e o paginador ganham o verde do ateliê, Unit Green #B9FF00. As três animações Lottie foram desenhadas para o app, nas suas cores, e cada uma mostra em três segundos um gesto dos membros, reservar, imprimir, avisar. Em vinte segundos, você entende para que serve o app, e a tela inicial assume.

O passo a passo em resumo

  • Em um app GoodBarber, o passo a passo, ou walkthrough, aparece uma única vez, na primeira abertura no celular, e tem até cinco passos.
  • Cada passo traz uma mídia, um título e uma descrição, todos opcionais. Em volta, o título da página ou o seu logo, o botão Pular, o paginador e o botão Próximo, que vira Começar no último passo.
  • Dois layouts, Polaroid, a mídia acima do título, e Immersive, a mídia em tela cheia com um efeito para a legibilidade do texto.
  • Uma animação Lottie é configurada como uma imagem, com velocidade de x0.5 a x3 e reprodução em loop. Ela recomeça do início toda vez que o passo aparece.
  • Tudo é configurado em Meu app › Passo a passo, e cada passo pode ter configurações próprias no JSON, com a extensão gratuita Edição avançada.

É a sua vez

Instale o Passo a passo do app na Loja de extensões, abra Meu app › Passo a passo e adicione um primeiro passo com uma imagem, o seu título e uma frase. A pré-visualização o mostra na hora. Depois experimente uma animação Lottie no lugar da imagem e veja a página ganhar vida.

Ainda não tem um app? Crie o seu com o GoodBarber, o Mobile App Builder.

Continue lendo