Um guia passo a passo para animação de interface do usuário com princípio e esboço

Projetar uma interface de interface do usuário com animação e transições em mente é uma ótima maneira de planejar uma melhor experiência do usuário (UX) para seu próximo aplicativo. As micro-interações animadas são a maneira perfeita de estimular o engajamento do usuário, em um mundo de curtos períodos de atenção. É por isso que o Airbnb introduziu recentemente o Lottie – sua “nova ferramenta de código aberto que facilita a adição de animação a aplicativos nativos”.

Projetos como Lottie mostram a crescente importância de adicionar movimento como um novo elemento para criar UX aprimorado para aplicativos e sites.

Neste tutorial, você aprenderá técnicas eficazes de animação de interface do usuário usando o Principle for Mac. Depois de ler este guia, você poderá transformar maquetes sem graça e estáticas em protótipos interativos para mostrar melhor seu trabalho. Você pode aplicar o que aprenderá aqui para melhorar seu próximo pitch de UI e dribles.

Vamos começar.

Baixe estes recursos gratuitos para acompanhar.

Você só precisará dos aplicativos Principle e Sketch para acompanhar. Se você ainda não os possui, pode fazer o download de uma avaliação gratuita usando os links abaixo.

• Faça o download de uma avaliação gratuita do Principle aqui.

• Baixe uma avaliação gratuita do Sketch aqui.

• Baixe o arquivo fonte do tutorial gratuito aqui.

Uma Visão Geral da Interface Princípio

Se você está acostumado com o Mac OS, a interface do Principle parecerá muito familiar. Ele tem três seções principais: uma barra lateral, uma área de design que mostra as pranchetas e a janela de visualização que você pode redimensionar e mover.

Entendendo os conceitos básicos de animação em princípio

É relativamente simples animar com o Princípio. Você não precisa ter um plano de fundo de animação para começar. Na verdade, a maior parte do trabalho pesado é automatizado pelo Principle, e você só precisa se concentrar no que inicia uma animação (ou seja, um botão, um link, um evento de rolagem), como a animação começa e como termina.

Para ajudá-lo a acompanhar melhor, aqui está um breve léxico de termos que você verá ao longo do guia.

• Componente: Um componente é um tipo de agrupamento que ajuda a conter elementos e até animações. É o equivalente a um “objeto inteligente” no Photoshop ou um “símbolo” no Illustrator.
• Trigger: Uma maneira de iniciar uma animação - ou seja, tocando, rolando, pairando, etc. No Principle, um gatilho pode ser definido selecionando qualquer elemento dentro do Principle e clicando no ícone que aparece no lado direito com um ícone de relâmpago.
• Transição: Uma mudança de estado de uma prancheta para outra, ou seja, deslizando para a esquerda ou para a direita.
• Efeito de atenuação: o nível de suavidade de uma transição com base em como a animação começa e termina.

A. Gatilho e Transição

O primeiro passo para animar com o Principle é configurar um gatilho (o comportamento ou ação que inicia a animação) em um elemento (ou seja, um botão ou link) e alterar seu estado inicial e/ou final (ou seja, sua posição ou escala do início ao fim da animação).

1. Defina um estado inicial: como seus elementos de interface do usuário são exibidos no início, antes que a animação ocorra.
2. Defina o gatilho: selecionando o elemento de interação e qual ação ativa a animação.
3. Defina o estado final: como os elementos são exibidos no final da animação.

Depois de definir a animação, você pode visualizá-la na janela de visualização.

B. Duração da animação e efeito de atenuação

Por padrão, o Principle cria uma animação de meio segundo. Às vezes, isso não é suficiente para ver o efeito de transição em detalhes. Você pode alterar a duração e o efeito de “facilitação” no painel de animação seguindo estas três etapas.

1. Abra o Painel de Animação: Selecione as setas pretas entre duas pranchetas e clique no botão “Animar” localizado na barra superior.
2. Estender a duração da animação: Mova as extremidades das linhas azuis.
3. Aplicar Easing: Selecione todos os pontos em forma de diamante e escolha “Ease Both” no menu suspenso para suavizar as transições.

O que você vai conseguir

Este vídeo mostra o que você poderá criar depois de passar por este tutorial. O aplicativo de demonstração mostra a paleta de cores do Material Design do Google e fornece mais detalhes quando você seleciona uma cor. Você criará uma animação de carregamento, algumas transições de página com um efeito de paralaxe suave e um controle deslizante de menu.

Certifique-se de fazer o download do arquivo de origem do tutorial gratuito aqui.

Vamos começar.

Indo de um arquivo de esboço ao princípio

1. Mova as pranchetas para preparar as transições naturais entre elas: por exemplo, uma tela deslizando da direita deve tocar a borda direita da tela que está substituindo sobre a animação.
2. Assim que seu arquivo Sketch estiver pronto, vá para Principle, crie um documento em branco que corresponda à proporção de 360x640 e clique no botão “Import”.

Removendo os cabeçalhos das telas para rolagem perfeita

Para criar uma transição perfeita entre as páginas, você pode remover cada cabeçalho, exceto o primeiro. Os cabeçalhos foram adicionados inicialmente apenas para mostrar a aparência do aplicativo. Você manterá apenas o cabeçalho na tela “Bem-vindo”, e ele servirá como uma barra adesiva com o menu e o título do aplicativo.

Criando a Animação de Carregamento - As Formas

1. Selecione o grupo de formas de carregamento e clique em “Criar Componente” contendo as formas de carregamento e o texto. Crie um Componente para o texto dentro do primeiro símbolo; vamos animar o texto separadamente logo em seguida.
2. Selecione as formas agrupadas. Escolha o gatilho “Toque” e arraste e solte em cima da mesma prancheta para criar uma duplicata.
3. A segunda prancheta representa o estado final da animação e você pode girar o grupo usando a propriedade angle. Dê diferentes valores de ângulo para “preenchimento” e “contorno” para criar um efeito mais interessante.
4. Para finalizar, selecione as setas entre as pranchetas, clique em “Animate” para abrir o “painel de animação” e altere a duração deslizando os pontos finais para cerca de 1,00 s.

Criando a animação de carregamento - o texto

1. Primeiro, crie a animação deslizante. Selecione a forma do botão e aplique o evento de disparo “Tap”. Na nova prancheta, mova todas as telas para cima em 640px (igual à altura atual da prancheta).
2. Agora, vamos criar a paralaxe. Vá para a prancheta anterior, na tela de boas-vindas, mova as formas geométricas e o texto para baixo em diferentes valores de Y.
3. Por fim, dentro do painel de animação, estenda a linha do tempo, digamos, para 1s. Aplique um efeito “Ease Both” à linha do tempo (certifique-se de ter selecionado todos os pontos em forma de diamante e clique em qualquer linha azul para aplicar o efeito a todos).
4. Visualize sua animação e mova as formas até que o efeito de paralaxe pareça bom para você.

Criando o efeito de paralaxe - página de boas-vindas

1. Selecione o componente de carregamento e aplique o gatilho “Toque” arrastando uma seta dele em qualquer lugar na prancheta.
2. Selecione todas as telas (do grupo mestre) e mova-as para cima em 640px. Esta etapa exibe a tela de boas-vindas.
3. Volte para a prancheta anterior e mova as formas na tela “Bem-vindo” para baixo. Isso cria o efeito de deslizamento assíncrono chamado paralaxe.
4. Ajuste a animação adicionando tempo à transição dentro do painel de animação: selecione a seta entre a prancheta e arraste os pontos finais nas linhas azuis para cerca de 1s.

Criando o efeito de paralaxe - página Sobre

1. Selecione o botão de seta para baixo (certifique-se de selecionar todo o grupo) e aplique o gatilho “Toque” arrastando uma seta dele para qualquer lugar na prancheta.
2. Selecione todas as telas (do grupo mestre) e mova tudo para cima em 640px. Esta etapa exibe a tela Sobre.
3. Volte para a prancheta anterior e mova as formas na tela “Sobre” para baixo. Isso cria o efeito de deslizamento assíncrono chamado paralaxe.

Criando o Efeito Paralaxe - Página Cores

1. Aplique o gatilho “Toque” no botão de seta para baixo (certifique-se de selecionar todo o grupo) e isso criará uma nova prancheta.
2. Na nova prancheta, selecione todas as telas e mova-as para cima em 640px.
3. Na prancheta anterior, mova as cores e o texto para baixo. Observe que quanto mais baixo você mover um objeto, mais tempo levará para deslizar de volta para cima, portanto, certifique-se de usar um posicionamento diferente para criar um efeito mais dinâmico.
4. Por fim, estenda a animação e aplique um “facilitar os dois” em todas as linhas de tempo azuis dentro do painel de animação.

Deslizando uma página pela lateral - página de seleção de cores

1. Aplique um gatilho “Toque” no botão “Carregar mais” na tela “Cores”.
2. Na nova prancheta, mova o conteúdo “Cores” e “Seleção” para a esquerda em 360px (largura da prancheta)
3. Volte para a prancheta anterior e mova o conteúdo da tela na direção oposta - direita.
4. Observe que você também pode animar a opacidade da tela deslizando de zero por cento a 100 por cento.
5. Brinque com a duração da animação e o efeito de atenuação para ajustar o efeito de transição.

Animando o ícone do menu

1. Observe que qualquer camada e forma que teve um efeito (como sombras) do arquivo original do Sketch é importada para o Principle como uma imagem. Se você precisar editar formas dentro do Principle, tente não adicionar nenhum efeito especial até depois da importação.
2. Dito isto, usando o ícone existente como guia, desenhe três retângulos finos e agrupe-os para criar o ícone do menu de hambúrguer. Agora, você pode excluir ou ocultar o ícone do menu anterior.
3. Selecione o ícone recém-criado e aplique um gatilho de “toque” nele.
4. Na nova prancheta, gire o retângulo superior e inferior no ícone do menu, certifique-se de que estejam alinhados ao centro e dê zero por cento de opacidade ao meio.
5. Para ver a animação que você acabou de criar, vincule novamente o ícone do menu alterado à prancheta de visualização com um acionador “Toque” e teste-o.

Criando o efeito de controle deslizante de menu

1. Na prancheta de estado final, mova as telas para a direita até que os links do menu estejam alinhados à esquerda do ícone do menu de fechamento.
2. Selecione tudo dentro da pasta “Colors”, exceto o conteúdo do menu e o fundo cinza claro, e reduza a opacidade para 25%. A animação irá diminuir o conteúdo da página para focar no menu.
3. Estenda a duração da animação e vá para a prancheta anterior para mover levemente o conteúdo do menu para criar um efeito suave.

Movendo para a tela de contato

1. No menu aberto, aplique um gatilho “Toque” no botão “Fale Conosco”.
2. Na prancheta recém-criada, mova todas as telas para cima em 640 px.
3. Em seguida, volte para a prancheta de visualizações e mova os elementos da página “Formulário” para baixo.
4. Mova os elementos em diferentes valores de Y para criar o efeito de paralaxe.
5. Por fim, selecione as setas entre as pranchetas, estenda a duração da animação e aplique “Ease Both” às linhas de tempo azuis.

Terminando com a página de agradecimento

1. Aplique um gatilho “Toque” no botão “enviar mensagem”.
2. Na nova prancheta, mova todas as telas para cima em 640 px.
3. Em seguida, volte para a prancheta de visualizações e mova os elementos da página “Confirmação” para baixo.
4. Brinque com escala e rotação para o ícone colorido para criar um efeito mais dinâmico.
5. Certifique-se de adicionar a duração da animação para perceber melhor o efeito de transição.

A Simplicidade de Adicionar Animações com Princípio.

O Principle é uma ferramenta fantástica para dar vida às suas ideias de interação com a interface do usuário.

A interface é compatível com Mac e foi criada para funcionar perfeitamente com arquivos do Sketch.

O Principle automatiza a maior parte da animação e do efeito de transição para você. Tudo o que você precisa fazer é aplicar um gatilho a uma forma em uma prancheta e alterar qualquer propriedade dos elementos que deseja animar na prancheta final.

Por favor, deixe qualquer dúvida nos comentários abaixo. Fico feliz em respondê-los.