Protótipo com facilidade – um tutorial do InVision Studio

A menos que você estivesse dormindo no primeiro semestre de 2018, provavelmente estava ciente da expectativa febril na comunidade de design interativo que antecedeu o lançamento do aplicativo InVision Studio. A InVision é mais conhecida por seus conjuntos de plugins Sketch e Photoshop, como o Craft, e por ser a plataforma para transformar rapidamente designs de interface estática em protótipos clicáveis ​​e compartilháveis. Em um passo ousado no ano passado, eles anunciaram o desenvolvimento de seu próprio software de design digital para competir com os favoritos da indústria, como Sketch e Figma.

O produto foi anunciado como revolucionário e fez algumas promessas de peso para um fluxo de trabalho de design para protótipo, funcionalidade de interação complexa, animação de transição de tirar o fôlego - e seria gratuito. A InVision lançou alguns vídeos de teaser e demos bem empolgantes para animar os designers. A expectativa aumentou ainda mais quando a versão beta inicial foi adiada mais do que algumas vezes no início do ano.

À medida que mais designers começaram a brincar com o software, mais e mais tutoriais e guias estão surgindo para demonstrar os conceitos básicos da ferramenta de design de interface do aplicativo. A InVision também criou alguns próprios para integrar os usuários ao básico do InVision Studio.

Embora os lançamentos de acesso antecipado estejam recebendo críticas mistas, o Studio tem alguns recursos interessantes e muito potencial. Este tutorial tem como objetivo orientar os primeiros a adotar os conceitos básicos da prototipagem do InVision Studio e adicionar algumas animações básicas de protótipo.

Crie um protótipo interativo com transições animadas em pouco tempo seguindo este tutorial do InVision Studio!

O tour de níquel do espaço de trabalho do InVision Studio

Grande parte do Studio deve ser familiar para designers de interface do usuário e qualquer pessoa que esteja usando software de design digital como o Sketch. Grande parte da área de trabalho empresta dicas da interface do usuário do Sketch, com o painel do lado esquerdo abrigando páginas, camadas e grupos; o painel lateral direito para inspetores; e uma barra de ferramentas contextual na parte superior.

Você também encontrará muitas das mesmas ferramentas, embora algumas funcionalidades tenham nomes diferentes. Por exemplo, um “símbolo” do Sketch é chamado de componente no Studio.

O painel de interações

Para os propósitos deste tutorial, focaremos na utilização das ferramentas de interação para criar hotspots interativos entre telas e criar transições suaves entre elas. Muita mágica acontecerá no “painel de interações” no lado direito do espaço de trabalho do Studio.

A maneira simples de criar interações é selecionar uma camada ou grupo de gatilho e pressionar “c” no teclado (ou clicar no ícone de relâmpago na barra de ferramentas superior), que inicia um chicote azul para selecionar uma tela de destino. O Studio então solicitará ao designer que selecione o gesto ou a entrada do usuário que aciona o evento e escolha entre um conjunto de transições predefinidas ou uma transição de “movimento”.

Animação do InVision Studio

Existem muitos elementos para um ótimo design de interação, mas o uso correto de transições animadas e microinterações em uma interface de usuário é mais do que apenas uma fachada.

Eles melhoram a usabilidade e podem significar a diferença entre um produto amado e uma bagunça confusa.

Ao longo deste tutorial, usamos uma combinação de transições predefinidas e transições de movimento para criar nosso protótipo de aplicativo. As transições predefinidas são bastante diretas e serão familiares aos usuários da plataforma de protótipos online InVision.

As regras que governam como as transições de movimento funcionam entre as telas são um pouco mais misteriosas. Embora existam muitas considerações óbvias de designer levadas em consideração na construção da ferramenta - por exemplo, a vinculação automática de elementos entre telas - são necessárias algumas tentativas e erros para obter certos efeitos ao adicionar movimento a transições. Espero que este tutorial ajude os designers a se sentirem um pouco mais à vontade para experimentar o que o InVision Studio tem a oferecer.

Coisas para manter em mente

O Studio promete muitas funcionalidades inteligentes em torno de animações. Por exemplo, ele pode criar transições de movimento entre objetos duplicados de uma prancheta para outra quando conectados por meio de uma interação. Os designers podem então ajustar essas animações conforme desejado para realizar alguns belos easing e outros efeitos de movimento. Aprender as excentricidades de como isso funciona ao tentar fazer a transição de uma pilha de objetos em uma sequência específica pode exigir paciência e alguma prática.

As transições de movimento funcionam melhor com objetos em pranchetas que foram duplicados um do outro. O recurso de animação é “inteligente” na medida em que reconhece objetos duplicados com os mesmos nomes de camada, portanto, tome cuidado para não remover ou renomear camadas-chave entre as telas (o que é uma maneira frustrantemente fácil de arruinar uma ótima animação).

Tenha em mente que o Studio ainda está em sua infância, então os designers devem estar preparados para encontrar um quinhão de bugs. Por exemplo, o botão “preview” inicia uma visualização interativa do protótipo, mas ocasionalmente as interações não são acionadas, nesse caso você precisará salvar e reabrir o arquivo.

Enquanto aprendia o software, mais de um arquivo parecia se corromper estranhamente - excluindo todas as pranchetas e tornando todos os painéis de ferramentas inacessíveis. Relatei o bug e aprendi a salvar várias versões dos meus arquivos para não perder muito trabalho.

Por fim, sempre ajuda a ser organizado. Ao criar um protótipo em qualquer plataforma, seja Studio, Sketch ou Marvel, acompanhar objetos e rótulos de camada economizará tempo e frustração, especialmente se você estiver trabalhando com uma equipe ou entregando o arquivo em algum momento. Anote a ordem das camadas e grupos de camadas ao construir interações; isso geralmente faz uma grande diferença na obtenção do efeito de animação desejado.

O Tutorial!

Vamos começar! Se ainda não o fez, acesse o InVision Studio para baixar uma versão de acesso antecipado do aplicativo Studio. Depois de ter o InVision Studio em seu computador, baixe os arquivos do tutorial aqui. Depois de iniciar o software Studio, escolha abrir o arquivo de onde você o salvou.

Passo 1: Abra o arquivo e dê uma olhada

Este protótipo interativo será para um aplicativo móvel sobre artistas modernos do final do século 19 ao início do século 20. Todas as telas foram criadas com antecedência usando a duplicação cuidadosa da prancheta, necessária para o uso adequado do recurso de transição de movimento.

A hierarquia tem 3 níveis de profundidade, começando em “Home”, depois na biografia de cada artista individual e, finalmente, até um carrossel de quatro exemplos do trabalho do artista. Você notará que a prancheta “Home” tem um pequeno ícone de uma casa, que designa a prancheta inicial para o protótipo.

O tutorial se concentrará na criação de caminhos de navegação simples que conectam esses três níveis de profundidade. Usaremos as ferramentas de interação e transição do Studio para fazer com que o protótipo pareça um aplicativo devidamente interativo.

Etapa 2: conectar o bloco do artista à biografia do artista

Vá para a primeira prancheta. Reserve um momento para expandir o grupo de camadas “Artist Tile 1”. Você notará três grupos aninhados: um para o nome do artista, um para uma imagem em destaque e uma terceira camada contendo “Bio Text”.

Olhando para a tela da prancheta, o grupo da terceira camada não é imediatamente visível devido à maneira como o Studio lida com as transições de movimento - que veremos em breve. Apenas tome nota disso por enquanto.

Selecione o grupo de camadas que contém todos esses elementos: “Artist Tile 1”. Com este grupo selecionado, pressione “c” em seu teclado (ou clique no ícone de raio na barra de ferramentas superior) para iniciar a ferramenta de interação. Seu cursor será seguido por um chicote azul para escolher a tela de destino para sua interação.

Selecione a prancheta imediatamente à direita intitulada “Artist Bio 1” e você será solicitado a escolher o gatilho e o tipo de transição. Para o gatilho, escolha “Tap” e, em seguida, escolha “Motion” como a transição. Você pode então escolher a duração da transição. Vamos definir essa transição para 2 segundos e clicar em "Salvar".

Clique no botão play para visualizar o protótipo. Você viu como as coisas se movem pela tela e como a camada bio deslizou por baixo da imagem? Parabéns, você criou uma transição de interação muito elegante!

Etapa 3: conectar um botão Voltar à tela inicial

Agora devemos dar aos usuários uma maneira de voltar à tela inicial. Vá para a prancheta “Artist Bio 1” e selecione o componente “btn_back” no canto superior esquerdo. Crie um gatilho aqui pressionando “c” e selecionando a prancheta “Home”.

Novamente, vamos definir o gatilho para “Toque”, a interação para “Movimento” e a duração para 2 segundos. Clique em Visualizar e delicie-se com as transições abertas e fechadas que você acabou de criar. Observe como a animação acionada ao fechar o bloco é uma reversão da animação reproduzida ao abrir o bloco.

Etapa 4: conectar a galeria

Se você estiver anotando os nomes das camadas na primeira e na segunda pranchetas, poderá notar que elas são idênticas. Isso ocorre porque, como mencionado anteriormente, as animações do Studio vinculam automaticamente camadas duplicadas de uma prancheta para a próxima se elas compartilharem um nome. Alterar o nome dessas camadas quebrará o link da animação e a transição será padronizada para um simples fade - especialmente desafiador para aqueles obcecados com rótulos de camada significativos.

Queremos aplicar mais uma transição de movimento elegante para abrir a galeria de imagens do carrossel. A prancheta intitulada “Artist 1 - Image 1” contém elementos duplicados da prancheta “Artist Bio 1”, redimensionada para mostrar mais da imagem de exemplo.

Comece clicando na camada “Artist Bio 1” para selecionar o grupo “Featured Image”. Este será o gatilho para abrir a galeria. Crie uma interação “Toque” aqui conectando-se à primeira prancheta na galeria e selecione “Movimento”. Desta vez, defina a duração para ser um pouco mais rápida: 1 segundo.

Para criar uma boa transição para fechar a galeria, basta selecionar a camada do botão Fechar na prancheta “Artista 1 - Imagem 1” e conectá-la novamente à prancheta “Artista Bio 1”, com as mesmas configurações de antes.

Visualize esta animação e maravilhe-se com a forma como o protótipo transita da tela bio do artista para o carrossel de imagens e vice-versa. Agora conectamos a navegação através de três níveis da hierarquia do nosso aplicativo!

Etapa 5: conectar todas as imagens da galeria

Fizemos a maioria das transições de movimento que precisaremos fazer e agora começaremos a usar algumas das predefinições de animação para o resto da galeria.

O padrão de interação aqui para nosso usuário percorrer este carrossel de imagens será um gesto familiar de furto. A boa notícia é que esta última parte é bem simples e não levará muito tempo usando as predefinições de animação do Studio.

Selecione a prancheta "Artista 1 - Imagem 1" e crie uma interação que leve à próxima prancheta, "Artista 1 - Imagem 2". Desta vez, defina o gatilho para “Deslizar para a esquerda”. Para a transição, selecione “Preset” e escolha “Push Left” no menu suspenso.

Para criar uma interação reversa, selecione a prancheta “Artist 1 - Image 2” e conecte-a à prancheta anterior, só que desta vez usando um gesto “Swipe Right” e a transição “Push Right”.

Repita esse padrão com as próximas pranchetas, conectando as pranchetas da Imagem 2 à Imagem 3 e da Imagem 3 à Imagem 4. Fácil!

Para tornar isso ainda mais realista, vamos fechar o loop entre a Imagem 1 e a Imagem 4. Selecione a prancheta para a Imagem 4 e conecte-a à Imagem 1. Escolha um gatilho “Deslizar para a esquerda” e a transição “Puxar para a esquerda” como faria para a próxima imagem de uma série. Conecte a prancheta da Imagem 1 à Imagem 4 com o reverso e pronto - você criou uma galeria em loop!

Por fim, selecione cada um dos componentes “btn_close” nas pranchetas da galeria de imagens e vincule-os de volta à prancheta bio. Você pode escolher a transição que quiser aqui, mas eu fui com “Push Right”.

Até agora você tem um caminho de navegação muito bem sequenciado para mostrar. Clique em pré-visualizar e experimente; seu protótipo deve funcionar muito parecido com o gif no início deste tutorial. Dê a si mesmo um merecido tapinha nas costas.

Passo 6: Repita

Agora que você vinculou todas as telas do primeiro exemplo de artista com interações simples, repita as etapas para os outros dois conjuntos de telas no arquivo do tutorial. Eles são organizados de maneira semelhante e será uma boa prática para se acostumar com a maneira como o Studio funciona.

Próximos passos

Felizmente, este tutorial forneceu uma introdução a alguns dos recursos interessantes da prototipagem do InVision Studio. Ao pegar o jeito do Studio, você deve tentar ajustar as transições usando as ferramentas avançadas de animação. Experimente as outras ferramentas na área de trabalho e tente seguir alguns outros tutoriais do InVision Studio disponíveis. Com a prática, você pode se tornar um dos gurus de design do InVision Studio.

Você pode ter encontrado alguns bugs ou comportamento inesperado ao longo do caminho, mas essa é a natureza de experimentar um novo software. O pessoal da InVision tem sido muito receptivo ao feedback e definitivamente continuará melhorando o Studio, tornando-o cada vez mais estável e útil.

O Studio é uma ferramenta divertida para experimentar - e não há motivo para não experimentar uma ferramenta gratuita de prototipagem de aplicativos. Embora não seja provável que substitua softwares como o Sketch na comunidade de design hoje, ele tem muito potencial.

Leia mais no Blog Toptal Design:

• Aperfeiçoe seu processo de design de UX - um guia para o design de protótipos
• O poder do Figma como ferramenta de design
• Prototipagem com dados reais - Um tutorial do Framer
• O guia fundamental para usabilidade em dispositivos móveis
• Práticas recomendadas e erros de design de aplicativos para dispositivos móveis