Faça um protótipo Hi-Fidelity em Atomic

Sep 12, 2025

Como

É fácil ser pego em tentar desenvolver uma ideia dentro de uma ferramenta de desenho de arquivo simples ou de desenho de arquivos simples, mas protótipo vale mais mil reuniões. Por que você se contentaria com qualquer coisa menos do que explorar suas idéias de maneira interativa?

Talvez você tenha uma ideia de como uma transição pode se comportar, mas você não tem certeza se seria certa para o usuário. Prototipando rapidamente a transição e interagir com ele diretamente dá uma experiência muito mais realista de como o produto final poderia funcionar no mundo real.

Nós vimos ferramentas trazem prototipagem para o espaço de design, mas nenhum como Atomic . Agora há uma maneira de construir protótipos totalmente interativos, hi-fidelidade que parecem e se comportam como a coisa real.

Prototipagem em atômica é incrivelmente rápida: você pode criar maquetes bonitos e avançados em minutos, sem escrever qualquer código, instalando qualquer software ou beber muito café. Você poderá visualizar o protótipo diretamente no seu dispositivo móvel ou compartilhá-lo com um companheiro de equipe para feedback. Também fizemos todos os ativos que você precisa para começar, então você não terá que importar uma coisa (mas você pode importar de esboço e Photoshop cc. também).

Neste tutorial, exploraremos uma simples transição de furto dentro de um aplicativo climático que criaremos em atômico. Vamos caminhar pelos passos fáceis para elaborar transições, e se você precisar de um desafio, também cobrirei alguns recursos de prototipagem mais avançados para você explorar.

01. Inscreva-se

Vamos começar! Se você ainda não tiver uma conta, abra o Google Chrome, visite atomic.io. e inscreva-se para uma avaliação gratuita. Isso dura 30 dias, que deve ser bastante tempo para você explorar atômico e fazer seu primeiro protótipo.

02. Dê uma olhada em volta

The Sample Project contains sample files to help you get familiar with Atomic — O projeto de amostra contém arquivos de amostra para ajudá-lo a se familiarizar com atômico

Agora você está ligado em sua conta, este é um ótimo momento para explorar. Você notará que um projeto de amostra foi configurado para você. Isso tem alguns arquivos de amostra introdutórios que você pode brincar enquanto estiver familiarizado com a atômica. Alternativamente, você pode visitar nosso Mostruário , que tem uma coleção de protótipos construídos por outros. Se você ficar preso, o melhor lugar para procurar uma solução é o nosso Central de ajuda .

03. Novo projeto

Crie um novo projeto clicando em 'Novo projeto' e nomeie o 'aplicativo de receita'. Pressionar ENTER abrirá a pasta do projeto. Aqui você pode ver todos os projetos dentro deste projeto específico. Como este é um novo projeto, está vazio. No entanto, os desenhos encherão aqui ao longo do tempo enquanto você os criam.

04. Pegue uma amostra

There's a ready-made sample file for this project — Há um arquivo de amostra pronto para este projeto

Em vez de criar um novo design vazio, cabeça aqui . Isso abrirá um arquivo de amostra que criamos para ajudá-lo a começar.

Veja o botão 'Copiar e Editar' no canto inferior direito? Clique nele e adicione-o ao seu projeto de aplicativo de receita. Clique em 'editar agora'. Assim, uma cópia do nosso arquivo de amostra está agora dentro do seu projeto pronto para você editar.

05. Explore o editor

Bem vindo ao editor! Se você usou uma ferramenta de design no passado, a atômica provavelmente se sentirá familiarizada. Vamos olhar ao redor. À esquerda, você encontrará acesso a ferramentas de desenho, layout e prototipagem, bem como duas guias que permitem alternar entre as páginas e os painéis de camadas. À direita, você notará o painel de propriedades, o que permite alterar o tamanho da sua página, além de trazer configurações para estilos e transições.

06. Confira os elementos

In the sample file's Assets page you’ll find the elements you need — Na página Ativos do arquivo de amostra, você encontrará os elementos que você precisa

Na página Ativos do arquivo de amostra, você verá que criamos todos os elementos usados neste protótipo para você. Mude para o painel Camadas e clique em alguns dos elementos na tela. Os elementos selecionados serão automaticamente destacados no painel Camadas. Acelere seu fluxo de trabalho pressionando '?' Para ver o intervalo de atalhos de teclado, você pode usar.

07. Preview.

Você pode visualizar e interagir com o seu protótipo sempre que quiser clicar em 'Preview' no canto inferior direito do editor. Nós usaremos isso mais tarde para testar como nossas transições se sentem. Selecionar 'Preview' agora mostrará os ativos no modo de tela inteira, mas se você navegar para a página 2 usando as setas, você verá um exemplo de referência do primeiro estado do nosso protótipo. Tente interagir com o exemplo de referência clicando no botão 'Saved Recipes' no cabeçalho para visualizar o que vamos criar.

08. Comece comece

Agora você está familiarizado com o protótipo que estamos construindo, é hora de começar! Selecione 'Editar', para voltar ao editor e, na página Ativos, selecione todos os elementos e copie-os para a área de transferência. Vá para a página 1 e cole os elementos na página.

09. Organize seus ativos

Sem quaisquer elementos selecionados, defina o preenchimento de fundo da sua tela para # f6f7f8 (procure no painel de propriedades da direita). Coloque o cabeçalho na tela, superior e centro.

Você vai querer reorganizar os ativos para que seu primeiro estado (todas as receitas) esteja posicionado na tela, e os ativos para o seu segundo estado de início a ser criado (receitas salvas) estão fora da tela para a direita. Aqui está o porquê: Quando o mesmo objeto existe na página 1 e página 2, a Atomic anima quaisquer alterações entre elas automaticamente.

10. Empilhe seus cartões

Quando você visualizou inicialmente o protótipo, talvez tenha notado a newsfeed de receitas na página 'Referência - All Recipes' é verticalmente rolável. Para adicionar esse efeito, organize as placas de receita em uma pilha vertical, incluindo o texto "voltar amanhã" que deve ser colocado por último, na parte inferior.

11. Crie um recipiente de rolagem

Selecione as placas de receita e "volte amanhã" texto e escolha a ferramenta de contêiner que terá aparecido no centro superior da tela. Selecione 'Criar Recipiente de Rolagem'. O conteúdo será então agrupado e colocado dentro do que chamamos de contêiner de rolagem, com rolagem vertical ativada por padrão. Certifique-se de definir os limites do seu contêiner arrastando o limite inferior para mascarar os elementos e atender a tela.

12. Coloque seus elementos

Para esta transição em particular, queremos a grade de "receitas salvas a partir da direita, e o texto" adicionar mais "chegando de baixo. Para garantir que isso aconteça, coloque cada elemento em sua respectiva posição inicial. Por exemplo, "receitas salvas" devem ser colocadas na página 1, fora da tela e à direita; Considerando que o texto "adicionar mais" deve ser colocado na página 1, fora da tela e abaixo.

13. Toque em Transição.

Como estamos criando uma transição de toque, onde queremos que os elementos em nossa próxima página deslize, é importante que eles também existam na página 1, fora da tela, para definir sua posição inicial. A qualquer momento, você pode se referir à página 'Referência - All Recipes' para ver como esta página deve ser organizada.

14. Duplicação.

For our transition, duplicate page 1 — Para nossa transição, duplicando página 1

Agora, configuramos a primeira página, é hora de criar o segundo estado para a transição, que faremos em uma nova página. Certifique-se de que o painel Páginas esteja selecionado e passe por Passe a página 1 para exibir o menu Hamburger na parte inferior direita do cartão de página. Clique no menu e selecione 'Duplicado'.

15. Receitas salvas

Atomic will animate any changes you make between Page 1 and your new Page 2 — Atomic animará quaisquer alterações feitas entre a página 1 e sua nova página 2

Navegue até sua página recém-duplicada para criar o segundo estado: suas receitas salvas. É importante aqui não excluir nenhum elemento na página, pois isso vai quebrar a transição. Como duplicamos a página, atômica sabe que os elementos em ambas as páginas são os mesmos elementos conectados. Portanto, ele sabe animar quaisquer alterações que façamos às propriedades dos elementos na página 2 (tamanho, posição, rotação, opacidade, cor e assim por diante).

16. Mais transições

Primeiro, mova o grupo de rolagem 'todos os receitas' à esquerda, fora da tela e o elemento 'Receitas salvas e' adicionar mais 'texto em suas novas posições: no corpo (no lugar do grupo' All Recipes ') em metade inferior da tela e no centro respectivamente. O único elemento que não estamos se movendo nessa transição é o cabeçalho. Isso ocorre porque o cabeçalho permanece na tela e apenas muda sutilmente - chegaremos a isso em breve.

17. Animações adicionais

Para o cabeçalho, queremos que o fundo azul deslize para o segundo estado. Enquanto na página 2, com o painel Camadas aberto, expanda o grupo intitulado 'Header' e selecione o retângulo azul. Em seguida, mova isso para a direita, por isso é colocado atrás de "receitas salvas". Legal!

18. A parte divertida

Add an interaction hotspot over the area you want users to interact with — Adicione um hotspot de interação sobre a área que você deseja que os usuários interajam com

Agora vem a parte divertida da criação da transição. Na página 1 vamos desenhar um hotspot sobre o texto "Receitas salvas" no cabeçalho, como esta é a área que queremos que nosso usuário interaja. Selecione a ferramenta Interaction Hotspot do painel Ferramentas à esquerda do editor (ou pressione H). Você pode desenhar hotspots usando o mesmo método que você usaria para desenhar um retângulo na tela: basta clicar e arrastar.

19. Configurações de transição.

Customise your transition, including the trigger gesture and motion type — Personalize sua transição, incluindo o gesto de gatilho e o tipo de movimento

Depois de desenhar seu hotspot, com ele ainda selecionado, você verá uma seção de interações aparecerá no painel Propriedades para a direita. É aqui que você pode especificar o gesto de gestos, a página de destino, o tipo de movimento e a duração da transição. Para esta transição, especifique as seguintes configurações: gesto: Clique ou toque em ; Vamos para: Página 2 ; Motion: E. ASE In-out ; Duração: 250. .

20. Baixo e para trás

Queremos ser capazes de alternar entre as duas transições, então também precisamos colocar um hotspot na página 2 para nos levar de volta à página 1. Copie o hotspot da página 1 usando os atalhos de teclado e cole na página 2 sobre o texto 'All Recipes' no 'cabeçalho'. Lembre-se de atualizar a configuração da página de destino do novo Hotspot à página 1.

21. Preview.

Click the Preview button to see your transition in action — Clique no botão Visualizar para ver sua transição em ação

É hora de visualizar sua transição! Navegue até Page 1 No painel Páginas e clique em Visualizar no canto inferior direito do editor (atalho CMD + Enter. ). Clique ou toque em "Receitas salvas" em seu protótipo para ir para a página 2. Em seguida, selecione "Todos os protótipos" Todos os Receitadores "serão retomados à página 1.

22. Tudo feito!

Agora você é um profissional! Selecione 'editar' para retornar ao editor, então se você excluir os ativos e duas páginas de referência (selecionando o menu Hamburger da página e, em seguida, "Delete página"), o protótipo que você acabou de fazer está pronto para compartilhar. Você pode facilmente criar um link de compartilhamento pressionando 'Compartilhar' no canto inferior direito do editor.

Este artigo originalmente apareceu em Revista Net. edição 283; compre aqui !

Faça um protótipo Hi-Fidelity em Atomic

01. Inscreva-se

02. Dê uma olhada em volta

03. Novo projeto

04. Pegue uma amostra

05. Explore o editor

06. Confira os elementos

07. Preview.

08. Comece comece

09. Organize seus ativos

10. Empilhe seus cartões

11. Crie um recipiente de rolagem

12. Coloque seus elementos

13. Toque em Transição.

14. Duplicação.

15. Receitas salvas

16. Mais transições

17. Animações adicionais

18. A parte divertida

19. Configurações de transição.

20. Baixo e para trás

21. Preview.

22. Tudo feito!

Como - Artigos mais populares

Designer de afinidade: Como usar a ferramenta Caneta

Adicionar animações da interface do usuário ao seu site

8 Segredos de segurança do WordPress essencial

Como criar personagens de desenhos animados peludos

Como adicionar fundos de diversão CSS aos seus sites

Como construir sites mais rápidos

Crie roupas 3D com vincos e dobras realistas

Como usar Fotografia de Stock Criativamente dentro de seu trabalho de design

Categorias