Transforme o ícone do seu app em uma intro de abertura

O que é uma intro de abertura com o ícone do app?

É uma animação de um a três segundos do ícone que a pessoa acabou de tocar, exibida na sua primeira tela logo depois da launch screen estática. É a versão honesta de um "ícone de app animado": iOS e Android não permitem animar o ícone na tela inicial (veja dá para animar o ícone de um app?), mas deixam o seu app animar o que quiser depois que ele está rodando.

O HIG da Apple diz que a launch screen deve ser quase idêntica à sua primeira tela e não é uma oportunidade de branding (Apple HIG). Uma intro com o ícone respeita isso: a launch screen continua simples, e o momento da marca acontece dentro do app, de forma breve, terminando em um estado que a próxima tela pode aproveitar.

Para as regras de cada plataforma sobre launch screens no iOS, no Android e na web, leia animação de abertura e splash screen de apps. Este guia trata do ícone em si: que movimento dar a ele e como alinhar os frames.

Que movimento funciona em uma intro com o ícone do app?

Escolha uma ação clara e dê peso físico a ela. Ícones são formas pequenas e sólidas, então o movimento que os trata como objetos é o que se lê melhor:

• Surgir com overshoot: escale de cerca de 60% até um pouco além de 100% e depois assente.
• Squash and stretch na aterrissagem: uma queda ou um pulinho curto com squash ao tocar o chão faz o ícone parecer pesado e real.
• Uma leve inclinação: alguns graus de rotação, indo e voltando, dão vida sem mudar a silhueta.
• Uma piscada, se o ícone tiver olhos: uma piscada em repouso costuma ser o momento mais encantador.

Mantenha curta a parte que faz o usuário esperar. O Google recomenda que a animação do ícone da splash no Android não passe de 1.000 ms (Android Developers), e cerca de um segundo é o limite para não interromper o fluxo de pensamento do usuário (NN/g). Se a sua intro for mais longa, faça a interface aparecer gradualmente na parte final, para que as pessoas possam interagir antes de ela terminar.

Como combinar a intro com a launch screen estática?

A launch screen é um frame parado da sua intro. Escolha uma destas duas configurações e mantenha-a:

Em "o ícone ganha vida", o ícone em repouso precisa ter o mesmo tamanho e a mesma centralização nos dois lugares. No iOS, UILaunchScreen aceita uma cor e uma imagem, e um storyboard de inicialização só pode usar classes padrão do UIKit (Apple Developer Documentation). No Android, o ícone estático da splash tem 288×288 dp com o conteúdo em um círculo de 192 dp, ou 240×240 dp em um círculo de 160 dp quando há fundo de ícone, então o ícone da intro precisa ser desenhado nesse tamanho visível.

Use um color asset nomeado ou um único valor hex para todos os fundos, e confira os modos claro e escuro separadamente. Uma diferença de um tom é o motivo mais comum para a transição parecer uma piscada.

Dá para animar um ícone de app 3D ou com gradiente?

Sim, se você movê-lo em vez de reconstruí-lo. Converter um ícone 3D brilhante, um gradiente de malha ou um lettering em formas vetoriais muda a aparência dele, e isso é a única coisa que uma marca não pode aceitar. Em vez disso, trate o ícone como uma única imagem e anime a transformação: escala, rotação, posição e escala não uniforme para squash and stretch. Os pixels nunca mudam, então o ícone em repouso é exatamente o ícone da tela inicial.

É assim que o Charmotion trata esses ícones. Envie um PNG, JPEG ou WebP (com pelo menos 512 px): arte plana recebe um rig vetorial, enquanto ícones 3D, com degradê e com texto vão para o modo Motion, que remove o fundo e anima a sua arte exata com compressão, alongamento, inclinação, pulinhos e piscadas onde encontra olhos. De qualquer forma, você recebe uma intro de abertura de 2,6 segundos que termina no ícone em repouso, além de outras 16 animações (humores em loop e reações únicas), como um arquivo Rive com LaunchStateMachine, WebM transparente e MOV HEVC, MP4, GIF e um vídeo de abertura 9:16. Os conjuntos vêm com os planos pagos (a partir de US$ 20/mês) e normalmente levam poucos minutos. Ele não produz arquivos Lottie nem AnimatedVectorDrawable. A prévia grátis mostra o seu ícone em telas de app e, para arte plana, um clipe animado curto de teste primeiro.

Em qual formato a intro do ícone deve ser entregue?

Seja qual for o formato, confira como o seu código sabe que a intro terminou. Players de vídeo e o Lottie informam a conclusão. Uma state machine do Rive só informa o que o autor incluiu nela, então, se o seu arquivo de abertura não tiver um evento de fim, espere a duração da intro com um timer.

Quando a intro de abertura deve tocar?

• Em cold starts, não a cada retomada. Ao voltar do segundo plano, o app deve aparecer imediatamente.
• Intro completa na primeira abertura, mais curta depois. Considere a versão completa após a instalação ou uma atualização, e uma acomodação rápida nas aberturas do dia a dia.
• Nunca alongue uma abertura rápida. Se o app estiver pronto, deixe as pessoas interagirem enquanto os últimos frames terminam.
• Respeite o movimento reduzido. Mostre o ícone em repouso e siga em frente. No SwiftUI, leia accessibilityReduceMotion (Apple); na web, prefers-reduced-motion.
• Reaproveite fora do app. A mesma intro rende um ótimo primeiro segundo para a prévia na loja e para o vídeo de lançamento.

Como transformar o ícone do app em uma intro de abertura

1. Escolha a configuração. Decida se a launch screen mostra só a cor de fundo (revelação do ícone) ou o ícone em repouso (o ícone ganha vida).
2. Anime um único movimento. Dê ao ícone uma entrada, um pulinho ou um squash que termine exatamente no ícone em repouso, mantendo a parte que bloqueia em cerca de um segundo.
3. Combine os frames. Use o mesmo hex de fundo e o mesmo tamanho e centralização do ícone na launch screen e na intro.
4. Reproduza na primeira tela. Inclua o .riv ou o vídeo no pacote do app, inicie quando a primeira tela aparecer e continue após a duração dele.
5. Adicione os fallbacks. Pule a intro com movimento reduzido e em retomadas a quente, e adicione um timeout de segurança caso o arquivo não carregue.

Perguntas frequentes

A intro de abertura deve terminar no ícone ou na primeira tela do app?

Termine no ícone em repouso e depois deixe a interface aparecer ao redor dele ou mova o ícone para o lugar dele, como o logo da barra de navegação. Terminar em outra pose obriga a um corte, que é justamente a emenda que você quer esconder.

Posso usar a mesma intro do ícone na prévia da App Store?

Sim, se ela aparecer como parte de uma captura de tela do seu app. A diretriz 2.3.4 diz que as prévias só podem usar capturas de vídeo do próprio app, com narração e sobreposições permitidas. Uma intro que o seu app realmente toca na abertura se enquadra.

Uma intro de abertura deixa a inicialização do app mais lenta?

Ela só acrescenta tempo se você fizer o usuário esperar. Carregue o arquivo enquanto a launch screen estática ainda está visível, inicie a intro quando a primeira tela aparecer e deixe a interface aceitar interação durante a parte final. Pule a intro em retomadas a quente.

Fontes

• Launching, Apple Human Interface Guidelines
• Specifying your app's launch screen, Apple Developer Documentation
• Splash screens, Android Developers
• Response Times: The 3 Important Limits, Nielsen Norman Group
• HEVC Video with Alpha (WWDC19), Apple Developer
• accessibilityReduceMotion, Apple Developer Documentation
• App Review Guidelines (2.3.4, 2.3.8, 2.5.1), Apple