Como protótipo de um aplicativo móvel com o Profami Studio

Sep 15, 2025

Como

Em um mundo onde os usuários têm altas expectativas de sua experiência na web e mobile, prototipagem e avaliação do usuário é fundamental. Agora é comum ir progressivamente iterar em protótipos com fidelidade cada vez mais alta, e um florescimento experiência de usuário A indústria cresceu em torno desse conjunto crítico de atividades. Em última análise, obter software diretamente no estágio de prototipagem economiza tempo e / ou dinheiro mais tarde.

10 ferramentas de prototipagem superior

Há muitas abordagens que você pode levar para prototipagem e inúmeras ferramentas lá fora para ajudar. Um dos mais novos no bloco é ORIGAMI Studio. , desenvolvido pelo Facebook e disponível gratuitamente para MacOS.

O Profami Studio, que realmente iniciou sua vida como um plugin para o compositor de quartzo (uma linguagem de programação visual no ambiente de desenvolvimento Xcode de MacOS) antes de se tornar uma ferramenta autônoma, ganhou muita atenção no último ano.

Isso não é apenas porque é construído por um desenvolvedor de grandes nomes, mas também por causa da combinação de poder e simplicidade que traz ao desenvolvimento de alta fidelidade, protótipos interativos.

Siga estas etapas para descobrir o quão facilmente você pode usar o Protótipo Studio para construir um protótipo.

01. Um novo protótipo

Start by creating a new iPhone 8 prototype — Comece criando um novo protótipo do iPhone 8

Vamos criar um protótipo para um aplicativo móvel que nos permitirá roubar fotos de gatos e "como" alguns deles. Depois de instalar o Origami Studio, criaremos um novo protótipo do iPhone 8 da tela Splash.

02. Adicionando camadas

Podemos começar a adicionar algumas camadas ao nosso protótipo imediatamente. Nesse caso, adicionaremos um logotipo posicionado na parte superior da tela. Adicionamos a camada usando o botão + no canto superior direito e selecionando 'Layer de imagem'. Podemos então redimensionar e posicionar adequadamente, destacando e modificando as propriedades da camada. Depois da nossa marca, também adicionaremos uma imagem de coração na parte inferior da tela para servir como nosso botão "como".

03. Criando uma interação

For interactions you'll need to create a patch — Para interações, você precisará criar um patch

Precisamos fazer nosso botão de coração responder às interações do usuário. Você notará que na janela de visualização, o cursor muda para representar o toque em um dispositivo móvel. Para responder a isso, precisamos criar um 'patch', que é essencialmente uma função no origami que leva as entradas e produza saídas. Clique duas vezes na área cinza vazia para abrir uma lista de novos patches e pesquisar por 'interação'. Coloque o seu patch e ele deve aparecer na tela.

04. Vinculando as interações às camadas

Change the patch properties so that it only responds when you click in the right place — Altere as propriedades do patch para que ela responda apenas quando você clica no lugar certo

No momento, seu patch responderá ao toque em qualquer lugar do protótipo. Testá-lo clicando e você verá as propriedades 'Down' e 'Tap' mudando em tempo real. Se você selecionar a propriedade 'Layer' no patch, poderá vinculá-lo à camada contendo a imagem do coração e agora responderá apenas a cliques nessa área específica.

05. Animações.

A pop animation will give users a bit of visual feedback — Uma animação pop dará aos usuários um pouco de feedback visual

Agora queremos ter algo acontecer quando nossa interação disparar. Crie outro patch, desta vez uma 'animação pop'. Isso é usado para criar um efeito elétrico. Deixe as propriedades como são agora, mas criaremos um link entre a saída da opção da interação que criamos anteriormente e a entrada numérica de nossa nova animação pop. Fazemos isso clicando e arrastando entre os pequenos círculos ao lado de cada um. Se você clicar no coração agora, verá agora que a interação dispara uma mudança na saída "progresso" da animação pop.

06. Transições

You can change the extent to which objects change size when they're clicked — Você pode alterar a extensão para quais objetos alteram o tamanho quando eles são clicados

A próxima coisa que precisamos é de um patch de transição. Isso nos permitirá especificar valores baixos e altos para mover entre as alterações de saída do progresso da animação pop. Podemos ligar os valores de saída da transição à propriedade de escala da camada de imagem de coração para informar o origami para redimensioná-lo quando estiver clicado. Agora você deve descobrir que clicar no coração faz com que ele anime uma breve mudança de tamanho. Não é bem direito, no entanto, uma vez que aparece ao normal imediatamente.

07. Switches.

Use switch patches to toggle objects between different states — Use os patches do interruptor para alternar objetos entre estados diferentes

Mudar patches é o modo de origami de alternar entre dois estados. Isso é o que queremos para o nosso botão "como". Uma entrada passada para um patch de comutação pode virar entre os estados 'on' e 'off', que pode ser passado como uma saída para patches subseqüentes. Vamos criar um novo switch e colocá-lo entre a interação e a animação pop. Você deve então ser capaz de clicar no coração para alterá-lo entre os estados pequenos e grandes.

08. Comportamento mais complexo

By experimenting with patches you can add more complex behaviour to your prototype — Ao experimentar com patches, você pode adicionar comportamentos mais complexos ao seu protótipo

Parabéns! Você agora criou seu primeiro recurso interativo, usando os patches mais comuns que você encontrará tempo e tempo novamente. Podemos adicionar mais patches para criar um comportamento mais complexo. Vamos criar uma camada de coração diferente diretamente atrás do nosso atual, então adicione novos patches para dimensioná-lo simultaneamente e modificar a opacidade da nossa camada original para que seja visível. Agora, quando você toca no coração, ele alternará maior e menor, mas também parece mudar de cor.

09. Carrossel.

It's time to bring on all the cats — É hora de trazer todos os gatos

Para finalizar nosso protótipo, vamos adicionar um carrossel de imagem com os gatos que queremos permitir que os usuários "como". Para fazer isso, primeiro precisamos adicionar um grupo de camadas. Cada imagem será uma camada separada, com coordenadas x de forma cada vez mais compensada para que elas se sente essencialmente por tamanho lateral em uma linha com apenas uma visível na tela em qualquer item.

10. Swiping para a esquerda e para a direita

Follow these steps to add a classic swiping action to your carousel — Siga estas etapas para adicionar uma ação clássica de Swiping ao seu carrossel

A última coisa que precisamos fazer para que funcione é permitir que os vagas esquerdas e certas rolem o carrossel. Fazemos isso criando uma interação de rolagem para link para o grupo de camadas de carrossel (não as imagens individuais). A interação produz uma coordenada X que podemos ligar para a propriedade X do carrossel para movê-lo. Entre, adicionaremos um patch de clipe, que pode ser usado para limitar os valores para garantir que não role para coordenados fora da borda do carrossel.

11. Próximos passos

Now you've learned the basics you can add more advanced features — Agora você aprendeu o básico que você pode adicionar recursos mais avançados

É isso. Você criou um aplicativo muito básico. Você também pode usar os "quadros" de Origami Studio para colocá-lo em um fundo de dispositivo, que pode ajudar a dar um acabamento profissional. Agora que você está familiarizado com o básico de usar patches, você pode começar a criar comportamentos mais avançados. Há uma abundância de guias no site do Origami Studio, que explicam como implementar funcionalidades populares comumente vistas em aplicativos.

Este artigo foi originalmente publicado em emissão 270 da revista Creative Web Design Web Designer. Comprar edição 270 aqui ou Inscreva-se no web designer aqui .

Artigos relacionados:

Tendências que vão moldar o design do aplicativo em 2018
3 maneiras de construir um protótipo do site
Tudo que você precisa saber sobre maquetes, wireframes e protótipos

Como protótipo de um aplicativo móvel com o Profami Studio

01. Um novo protótipo

02. Adicionando camadas

03. Criando uma interação

04. Vinculando as interações às camadas

05. Animações.

06. Transições

07. Switches.

08. Comportamento mais complexo

09. Carrossel.

10. Swiping para a esquerda e para a direita

11. Próximos passos

Como - Artigos mais populares

Como desenhar um cão

Como desenhar Asuka de Neon Genesis Evangelion

Como criar formulários da Web acessíveis

Como desenhar um personagem em caneta e tinta

Obtenha mais de grafite com estas dicas

Use WordPress como um CMS sem cabeça

Desenhe uma figura em menos de cinco minutos

Como combinar mapas de deslocamento esculpido e pintado

Categorias