Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Prototyping
Webdesign

Prototipando um Tour Interativo de um Produto para iOS com Framer.js

by
Difficulty:IntermediateLength:ShortLanguages:

Portuguese (Português) translation by Erick Patrick (you can also view the original English article)

O Framer.js e o ecossistema que o acompanha, o Framer Studio, são ótimas ferramentas para composição, apresentação e iteração de projetos de interação. Nesse artigo, mostrarei como construir um protótipo interativo para um tour de um aplicativo fictício para iOS, usando o Adobe Photoshop CC 2014 e o Framer Studio 1.9.29. Assumamos que queremos construir um aplicativo de feed de notícias, no qual as atualizações da rede de um usuário são apresentadas em uma linha do tempo, enquanto as configurações e opções adicionais são mostradas em uma barra lateral.

framer studio

Brinque um pouco com o protótipo na página de demonstração (suportado apenas por navegadores baseados no Webkit, como o Chrome, Safari, etc).

1. Preparação Inicial

Criando os Recursos no Photoshop

Primeiro, criaremos os recursos necessários para o protótipo no Photoshop. O tour do produto consistirá de quatro passos:

  1. Apresentação do App
  2. Apresentação do Feed de Notícias
  3. Apresentação da Barra Lateral
  4. Tela de Login

Ao trabalhar com o Framer, é importante notar que só as camadas agrupadas e visíveis serão importadas para o Framer Studio. Agrupe suas camadas pelas interações (por exemplo: coisas que tem a mesma interação deveriam ser agrupadas juntas), uma vez que as acessará através do nome do grupo ao qual pertencem quando trabalhar com o Framer. Para o tour desse produto, agrupei minhas camadas por função:

photoshop layers

Essas camadas serão acessadas no código, dessa forma:  myLayers.doneButtonmyLayers.dots, etc. 

Importando Para o Framer Studio

O próximo passo é importar seus recursos do Photoshop para o Framer Studio. Seu documento do Photoshop deve estar aberto e salvo ao realizar a importação. Clique no botão Import e você verá uma caixa de diálogo que parece mais ou menos com isso:

import

O Framer achatará seus grupos em imagens ao importá-los, e seus recursos estarão acessíveis pelo Framer depois que a importação estiver finalizada.

Use Variáveis para Facilitar Manipulação Posterior

É uma boa prática transformar seus objetos em variáveis, uma vez que os tenha importado para o Framer, já que isso facilitará seu trabalho quando for manipular o protótipo mais tarde, se for preciso. 

Por exemplo, em uma data posterior, você pode querer usar um arquivo diferente do Photoshop com grupos nomeados diferentes, mas usando as mesmas interações criadas. Será muito mais fácil se você estruturar as interações em relação aos nomes das variáveis, uma vez que você pode, simplesmente, alterar a referência da variável em uma linha e isso refletirá pelo resto do documento:

Agora que temos alguns recursos para usar no trabalho, você pode começar a criar as interações que trarão seu protótipo à vida. 

Use os Estados

Se tiver recursos que terão diferentes interações dentro da sua composição, os estados são uma forma muito poderosa de estruturar seu código. Nesse protótipo, cada um dos quatro passos usará diferentes recursos de formas diferentes. Os estados nos darão a flexibilidade de definir cada peça da composição de forma independente, aumentando a modularidade e facilidade de leitura do código. 

Por exemplo, a tela do feed de notícias terá quatro estados: 

  1. Original (lado direito da tela, não visível)
  2. Visível (centro da tela)
  3. Barra Lateral (lado direito mais distante da tela)
  4. Escondido (lado esquerdo da tela, não visível)

Nossos estados refletirão essas posições através da configuração de diferentes valores para x baseado no local onde nosso feed de notícias deveria estar em dada parte do tour:

2. Estruturando Interações no Framer

Habilitando Movimento de Arrastar nas Camadas

Para o tour do produto, queremos ilustrar as diferentes áreas do app após o usuário ter feito o movimento de deslizar para a esquerda para chegar até a próxima parte do tour do produto. Para isso, temos que habilitar a possibilidade de arrastar as camadas onde você quiser que haja esse movimento.

Crie um vetor:

Agora, crie um laço for para iterar por esse vetor, adicionando a propriedade de arrastável a essas camadas:

  • enabled = true permite que a camada seja arrastada
  • speedY = 0 desabilita o arrastar pelo eixo Y
  • maxDragFrame = drag.frame configura o quadro o qual pode ser arrastado para ficar dentro da própria camada
  • maxDragFrame.x = drag.x-drag.width permite que o quadro possa ser arrastado pelo eixo X com valores negativos (ou seja, da direita para esquerda)

Mude os Estados Quando Arrastada Após Certo Ponto

Após habilitar o arrastar das camadas, mire as camadas e altere o estado dos recursos quando elas passarem de um determinado ponto.

Quando o usuário terminar de arrastar a camada welcome, se ele tiver passado de 150 pixels para a esquerda (screenFrame.x < -150), então altere o estado do protótipo para o estado do feed de notícias:

Os estados dos outros elementos deveram ser alterados também (esconda o estado welcome, mova o ponto na parte inferior para indicar o segundo passo do tour, etc.). Então, repetiremos esse processo para as outras camadas arrastáveis (gradient, gradient2) e altere os estados de acordo. Continue assim e terá criado o protótipo do produto em pouquíssimo tempo. 

Anime as Camadas em um Vetor, Individualmente, Adicionando um Pequeno Atraso

Animar as atualizações do Feed de Notícias, individualmente, ao invés do grupo completo, dará ao seu protótipo um ar mais profissional, como demonstrado nesse (pequeno) gif animado abaixo:

Primeiro, crie um vetor com as camadas que você quer animar:

Após isso, crie uma função para animar cada camada para a posição x desejada, adicionando um pouco de atraso (algo como 0.1s) entre cada animação:

Dica de Profissional: Crie Funções para Suas Animações

Se você for reusar certas interações em vários lugares do seu protótipo, pense em criar funções que você pode reusá-las depois. Assim, ao invés de escrever a animação várias vezes, só precisará escrever uma vez e reusá-la quando necessário. Crie uma animação que pode ser reutilizada através de uma função, dessa forma:

Depois, quando precisar, você pode chamar "fadeOut" em qualquer camada, dessa forma: myLayer.fadeOut() 

Conclusão

O Framer é uma ótima ferramenta para a criação rápida de protótipos modernos, interativos e bonitos. Incorporá-lo em seu fluxo de trabalho, criando seus layouts no Photoshop (ou Sketch) e depois manipulando através do Framer, permitirá a você criar protótipos mais robustos de forma mais rápida. 

Você também será capaz de modificar seus projetos na ferramenta de layout visual e importá-las diretamente no Framer, permitindo para uma iteração mais eficiente de acordo com que o desenvolvimento progride. Se tiver configurado corretamente seu documento com variáveis, suas interações serão aplicadas os novos recursos importados, permitindo uma iteração rápida em relação às ideias do projeto visual e da interação. Se tivesse de entregar protótipos estáticos, teria de criar várias composições estáticas paracada novo elemento visual. Usando esse novo fluxo de trabalho, porém, só precisará fazer uma mudança em um único documento pai, reimportar para o Framer e pronto!

Fique ligado para mais tutoriais sobre prototipação. Também fique à vontade para comentar abaixo, e responderei a você tão logo quanto possível. Ótimas prototipações!

Seja o primeiro a saber sobre novas traduções–siga @tutsplus_pt no Twitter!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.