E aquela intro do next, hein?

Sabe a logo do next Bradesco? Já reparou o quanto ela é robusta, estilosa, verde e descolada? Pois é, não é só charme, ela precisa ser assim para permear toda a aplicação e ser parte viva e atuante da interface.

Seja representado progressos, investimentos, objetivos ou reforçando o espírito jovem, ousado e dinâmico dos seus clientes, ela tá sempre lá. Linda, jovem e verde. #respect

Mais do que um gráfico bonito a logo é uma chave para o universo next. Ela abre caminho, informa e reforça o conceito do que é ser um nexter.

Pensando nesses objetivos e em como é importante essa mensagem ser transmitida para o usuário desde o início da experiência é que chegamos à construção da introdução do App, que acabou se tornando parte fundamental do produto final.

A logo já está no ícone do dashboard e também na splash screen do App. Porque não aproveitar para criar uma interferência entre a splash e o conteúdo principal? Algo que realmente criasse uma conexão entre esses dois estados e, de quebra, mostrasse pro usuário que nada aqui é padrão: formato, conteúdo, linguagem e banco podem ser adaptados para aquilo que o usuário precisa.

Esse foi o ponto de partida para explorar a logo na abertura como um elemento que descortinasse o conteúdo principal do App.

Embora a ideia não seja algo novo, ela ainda é muito pouco explorada no iOS. Uber e Twitter têm bons exemplos de como fazer algo simples e eficiente. E foram, sem dúvida, uma das maiores referências para a intro do next.

Apps diferentes, abordagem semelhante: A logo do produto se transforma e revela o conteúdo principal.

Adotando o mesmo princípio: criamos a nossa versão de intro do next Bradesco.

Legal, né?

A logo é formada por 4 vetores que se encontram, ou seja, ela não é um objeto sólido e volumoso como vemos no pássaro do Twitter e no ícone do Uber. E isso acaba virando um grande problema se o objetivo é revelar algum conteúdo nas áreas de preenchimento. Pra piorar, ela é dinâmica, muda de forma enquanto é ampliada 😬, algo que não acontece nos outros Apps.

Por isso foi preciso pensar em uma maneira eficiente de respeitar o comportamento da identidade e, ao mesmo tempo, de revelar o conteúdo enquanto é animada.

Mas antes de falar como isso foi feito, é preciso explicar um pouco sobre o ciclo de vida do iOS e a limitação da LaunchScreen — que é a splash page de todo aplicativo no iOS.

LaunchScreen, quando você notar ela já foi embora

Performance. Ou você é performático ou dá tchau pra intro animada. A LaunchScreen no iOS não permite muita coisa. Na verdade, ela não permite quase nada (e precisa ser assim, pois é uma tela pré aplicação onde informações do sistema ainda estão sendo carregadas). O truque aqui é saber respeitar essa limitação e colocar em prática a imaginação.

Como resolvemos isso no next:

Fluxograma da intro.

LaunchScreen: básica como um bom jeans. BackgroundColor + imagem* gerada pelo NextLogo Build Tool®.

Intro: versão aditivada da LaunchScreen com todos os estados e métodos do NextLogo habilitados para a transição.

Home: a ViewController de destino. No next o usuário pode ter como tela de abertura 3 opções: Welcome, Adesão ou Login.

Resumindo, o que temos acima pode ser descrito da seguinte forma:

  • O App abre e chama a rootViewController que é uma ViewController (chamaremos aqui de Intro) idêntica a LaunchScreen e com o mesmo objeto — NextLogo — alinhado na mesma posição que a imagem da LS;
  • A Intro chama a tela de destino, ou Home, e a apresentação default do iOS é sobrescrita por uma Custom Transition;
  • A Custom Transition transforma a logo enquanto o NextLogo executa a interpolação de estados gerados pelo NextLogo Build Tool;
  • Quando a transição termina a Home se torna a rootViewController e passar a ser a única tela na stack.

NextLogo Build Tool

Para conseguir o resultado final da intro do next foi preciso manipular 4 pontos de controle da logo (CGPoint), a espessura das linhas (strokeHeight) e a escala (transform) de cada estado. Os estados são keyframes e representam momentos importantes da animação. Entre um keyframe e outro, geramos uma interpolação automática criando o efeito de animação.

Como qualquer trabalho que envolve animação, é preciso ser paciente para testar repetidamente estados, curvas, delays, duração, forma e resultado. Isso já é custoso em uma ferramenta própria para animação. Imagina realizar esse trabalho no XCode, onde você não tem uma timeline ou um editor gráfico voltado pra isso. Paulera!

Como qualquer trabalho que envolve animação, é preciso ser paciente para testar repetidamente estados, curvas, delays, duração, forma e resultado.

Por isso, desenvolvemos a nossa própria ferramenta para nos auxiliar nessa árdua tarefa.

O NextLogo Build Tool é uma aplicação que permite manipular e gravar os keyframes da intro do next. Com ela, passamos a gerenciar de forma visual todos os estados, possibilitando que outros profissionais como designers, uxers e motion designers explorassem os melhores ângulos e formatos.

* o NextLogo Build Tool também gera uma imagem do primeiro estado para ser utilizado na LaunchScreen.

E isso tornou tudo muito mais simples. Principalmente em uma época onde o Lottie ainda era uma biblioteca de uso interno e restrito do Airbnb.

E abaixo um compilado com estudos e resultado final:

Conclusão

Nada é apenas um detalhe. Todo tempo gasto desenvolvendo uma interface para edição e manipulação de pontos, estudando a melhor forma de explorar o ciclo de inicialização do iOS, arrastando pixel, ajustando tempo de execução e inúmeros builds para ter uma abertura de aproximadamente 1 segundo no final, vale! E vale muito!

O mais interessante é que essa tela nunca fez parte de nenhum estudo de wireframe ou layout. Essa ideia surgiu no time de Tech e quando apresentei o protótipo ao Head of Design, ele não pensou duas vezes: a tela foi incorporada ao projeto 🎉.

Isso prova o quanto é importante que a criação seja feita de maneira bidirecional em um projeto digital.

Precisamos nivelar por cima quando o assunto é experiência, pois estamos concorrendo com marcas globais como: Uber, SnapChat, Google, Instagram, entre outros. Os usuários estão acostumados com o tipo de qualidade, refinamento e simplicidade que esses produtos oferecem. Não investir nisso é abrir mão de um recurso essencial para convencer a audiência e ajudá-la a interpretar a mensagem que queremos passar.

Valeu, valeu. 😜