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

() translation by (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.

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:

Apresentação do App
Apresentação do Feed de Notícias
Apresentação da Barra Lateral
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:

Essas camadas serão acessadas no código, dessa forma: myLayers.doneButton, myLayers.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:

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:

# Isso importa todas as camadas para o tour para tourLayers
ly = Framer.Importer.load "imported/tour"

## ------------------- VARIÁVEIS ---------------------
welcome = ly.welcome
dots = ly.dots
moveDot = ly.movingDot
done = ly.doneButton
login = ly.login
logo = ly.logo
news = ly.newsFeed
siderbar = ly.siderbar
gradient = ly.gradient
background = ly.background
feedDescription. ly.feedDescription

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:

Original (lado direito da tela, não visível)
Visível (centro da tela)
Barra Lateral (lado direito mais distante da tela)
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:

news.states.add
origin: { x: 750 }
    shown: { x: news.originX }
    sidebar: { x: 655 }
    hidden: { x; -750 }

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:

1	dragLayers = [welcome, gradient, gradient2]

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

for drag in dragLayers
# habilita o arrastar
    drag.draggable.enabled = true
    drag.draggable.speedY = 0
    # Previne o arrastar da esquerda para direita
    drag.draggable.maxDragFrame = drag.frame
    drag.draggable.maxDragFrame.width *= 2
    drag.draggable.maxDragFrame.x = drag.x-drag.width

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.

1	welcome.on Events.DragEnd, ->
2	if welcome.screenFrame.x < -150

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:

welcome.on EventsDragEnd, ->
if welcome.screenframe.x < -150
  	welcome.states.switch "hidden"
		news.states.switch "shown"
		moveDot.states.switch "second"
		gradient.states.switch "shown"

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:

1	newsLayers = [ly.celeb1, ly.celeb2, ly.celeb3, ly.celeb4, ly.celeb5, ly.celeb6]

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:

newsCurve = 'spring(50, 30, 30)'
newsAnimation = ->
for i in [0 .. newsLayers.length-1]
		newsLayers[i].animate
			delay: i * 0.1
			properties:
				x: 0
			curve: newsCurve

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:

Layer::fadeOut = ->
this.animate
	    properties:
			opacity: 0
		curve: 'ease-in-out'
		time: 0.5

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!