Construa protótipos com o Adobe XD

Na Web contemporânea e design de aplicativos, muitas vezes há momentos em que a interação não abre uma nova página ou tela inteira. A abordagem moderna para criar conteúdo interativo requer transições entre elementos de interface de design para que o usuário fique surpreso e defendido pela experiência de alteração do conteúdo. Isso tudo acontece na mesma tela ou página, sem atualização. Projetando esses tipos de interações e refiná-los a trabalhar corretamente pode levar tempo, mas vale a pena fazer antes de escrever seu código.

É isso que o Adobe XD passou os últimos meses de desenvolvimento à direita. Crie conteúdo em um estado em uma tela, mova esse conteúdo para o novo estado na tela Nova e simplesmente escolha a opção 'Auto-Animate' para transição. Todo o conteúdo que é o mesmo em ambas as telas anime automaticamente de uma posição para outra. Se você não quiser todo o conteúdo visível em ambas as telas, torne o conteúdo invisível no primeiro e se transita no lugar.

Descubra sobre outro software Adobe, como Dimensão da Adobe. .

• 8 Prototipagem Essencial e Ferramentas de Construção

Aqui vamos mostrar como criar um protótipo de aplicativo que faz apenas isso (para mais Como criar um aplicativo Tutoriais, confira nosso resumo dos melhores). E indo além disso, um novo recurso do XD permite que o usuário controle interações com sua voz. Exploraremos isso como um recurso de design e como o aplicativo também pode falar ao usuário, que pode fornecer algumas oportunidades interessantes de design.

Baixe os arquivos do projeto para este tutorial.

01. Iniciando o projeto

Se você não tiver o Adobe XD, você pode baixá-lo e instalá-lo aqui . Quando a instalação estiver concluída, abra o software e a tela de boas-vindas permitirá que você escolha um tamanho de tela para baixar. Neste caso, escolha o iPhone 6/7/8, como esse é o tamanho certo para este projeto, mas você verá que há uma variedade de tamanhos disponíveis.

02. Importe a primeira imagem

Existem diferentes maneiras de importar imagens, mas nesta primeira instância vá para o arquivo & gt; Importar. Escolha a pasta 'Ativos' a partir dos arquivos do projeto e a primeira imagem para importar será 'sky.png'. Coloque-o no topo da tela e mova-o um pouco de pixels para baixo.

03. Coloque a cabine

A próxima imagem para o design será a 'cabine.png'. Basta importar isso da mesma maneira que você fez no passo anterior e colocá-lo para preencher a tela. Finalmente, importe a imagem 'trees.png' e coloque-a na parte inferior da tela com as árvores sobre o lago.

04. Traga o logotipo

A razão pela qual essas imagens são camadas separadas é para que, quando uma transição é criada entre telas, elas podem se mover separadamente. Vá para o menu Arquivo e escolha Importar. Desta vez, selecione "logotipo.ai", que é uma imagem vetorial. Coloque esta imagem no centro superior da tela.

05. Adicione um círculo

Selecione a ferramenta Circle e desenhe um círculo apenas ligeiramente maior que o logotipo. No painel Propriedades à direita, remova o derrame e faça o fundo preto. Selecione o desfoque de fundo e reduza o brilho a -30 para que o círculo ainda seja preto.

06. Reordenar os gráficos

Agora o círculo precisa se mover para trás do logotipo. Selecione Objeto e GT; Organizar e enviar para trás. Como em outros produtos da Adobe, também é Cmd / ctrl + [ para mover qualquer gráfico para trás na ordem da camada. Usando o suporte quadrado direito, enquanto isso, trará um objeto para frente no pedido.

07. Coloque o microfone

Agora, importa a imagem 'Mic.ai' e redimensione a imagem para ser relativamente pequena. Coloque isso na parte inferior da tela. Desenhe um círculo em torno deste e desmarque o preenchimento para que seja removido. Em seguida, faça o branco e dois pixels de largura. Posição que em torno da imagem 'mic'.

08. Mensagem de texto.

Use a ferramenta de texto para adicionar as palavras 'Fale para pesquisar' abaixo do microfone. Faça o texto branco e mude para o Helvetica Neue condensado preto. No canto inferior esquerdo da tela, clique no ícone do painel de ativos para abri-lo. Com o texto selecionado na tela, clique no ícone '+' ao lado de 'estilos de caractere' para salvar este formato para o texto.

09. Junte-se a um grupo

Selecione o ícone do painel de camada no canto inferior esquerdo da tela. Na tela, selecione o texto 'Search' e Shift clique para adicionar o círculo e o ícone do microfone. Vá para o objeto e escolha o grupo. No painel da camada renomeie este grupo 'pesquisa'. É útil nomear grupos, especialmente ao animá-los.

10. Agrupe o logotipo

Assim como no último passo, selecione o logotipo e o círculo borrado em torno dele e agrupe-os juntos. No painel da camada, renomeie todo o grupo 'logotipo' para que seja facilmente identificável se você precisar editar isso novamente mais tarde. No momento em que o design da primeira tela está completo.

11. Elementos Extra

Mesmo que a primeira tela esteja completa, ainda há mais elementos de design que precisam ser adicionados. É assim que a animação é criada alterando o posicionamento dos elementos entre telas. Vá para a ferramenta retângulo e segure Mudança Para adicionar um quadrado na tela, fazendo a fronteira branca.

12. Importação diferente.

Agora abra a pasta para os ativos através do sistema operacional. Selecione a imagem 'cabin1.png' e arraste isto diretamente para o quadrado que você criou na etapa anterior. Ele será automaticamente mascarado dentro disso. Clique duas vezes para editar a posição da imagem e certifique-se de que a cabine esteja visível no quadrado.

13. Adicione um rótulo

Usando a ferramenta de texto, adicione a etiqueta 'cabine florestal' abaixo do texto e use o painel Ativos para estilizar o texto no estilo salvo da etapa 8. Selecione a imagem e o rótulo e agrupe-os juntos. Nomeie o grupo 'cabine esquerda' no painel Camadas.

14. Duplicar o grupo

Normalmente, repetir um elemento de interface é o trabalho perfeito para a ferramenta 'Repetir Grid'. No entanto, isso precisará de animação específica, o que não funciona com a rede de repetição. Selecione o grupo de imagem e texto, copie e cole-o para que seja ao lado do original e adicione a imagem 'cabine2.png'.

15. Renomear e copie novamente

Mude o texto para 'cabine de neve', e no nome do painel de camadas esta "cabine direita". Selecione a cabine esquerda e direita e duplique-as, posicione as duplicatas abaixo e atualize seus textos e imagens com 'cabine3.png' e 'cabin4.png'. Grupo ambos juntos e nomear a "cabine baixa do grupo".

16. Título do Texto.

Adicione texto à página com o texto 'Resultados de pesquisa para cabines'. Dê a este typeface rockwell e salve isso nos estilos de personagem no painel Ativos. Agora, posicione o grupo 'cabine inferior' na parte inferior da tela e leve a aparência até zero para que seja invisível nesta tela.

17. Alterando a opacidade

Agora selecione as cabines esquerda e direita, mova-as para a parte inferior da tela e leve o controle deslizante de aparência para zero. Repita novamente para o texto de pesquisa. Quando nos movemos para outra tela, todos analisarão suas novas posições. No painel da camada, mova a "cabine esquerda" acima de todos os outros grupos de cabine.

18. Duplique a tela

Selecione a Artboard clicando em seu nome e, em seguida, clique duas vezes na Artboard e altere o nome para 'Home'. Copie e cole o Artboard e renomeie-o 'Pesquisar'. Agora selecione o logotipo e mova-o para quase fora da tela e reduza sua aparência para zero.

19. Mova os fundos

Selecione a imagem do céu e empurre-se ligeiramente na tela. Selecione a imagem da cabine e mova-a até que a cabine esteja na parte superior da tela. Em seguida, clique na imagem das árvores e mova-a sobre a cabine. Por fim, selecione o grupo 'Pesquisar' e reduza a aparência para zero.

20. Novos elementos aparecem

Selecione os resultados da pesquisa no painel Camada e traga sua aparência até 100. Mova-a na tela. Repita isso para a cabine esquerda, cabine direita e cabine inferior. Use a ferramenta Caneta para desenhar um botão de costas simples e adicionar um círculo ao redor dele. Faça o fundo borrão e tire o brilho desse até -30.

21. Complete o botão Voltar

Selecione a seta de trás e circule, agrupe-os e nomeie-os "botão de volta" no painel Camada. Mude para o modo 'Prototype' pressionando 'Prototype' no canto superior esquerdo da interface XD. Selecione a tela inicial, arraste a seta azul para a tela de pesquisa e um painel pop-up aparecerá.

22. Comando de voz.

Altere o gatilho para voz e digite a palavra 'pesquisa' como o comando de voz para controlar isso. Altere a ação para animar automaticamente e flexibilizar. Faça a duração 1.5s. Na tela de pesquisa, clique no botão Voltar e arraste a seta azul de volta para a tela 'Home'. Basta alterar o gatilho para tocar.

23. Teste o protótipo

No canto superior direito da interface XD é um botão de reprodução. Clique nisso e um protótipo de trabalho agora aparecerá na tela. Na página inicial, você precisará segurar a barra de espaço enquanto fala o comando de voz 'Search'. Quando você solta a barra de espaço, ele levá-lo para a próxima tela e animará a interface gráfica na posição.

24. voltando

Quando a transição tiver executado, você pode pressionar o botão Voltar para voltar para a tela inicial. Feche o protótipo e clique na tela de pesquisa e clique na seta azul para a direita (não arraste). Altere o gatilho para o tempo, faça o atraso 0s e defina a ação para a reprodução da fala. Tornar os resultados da busca do discurso para cabines disponíveis.

25. Confirmação de fala

Teste isso agora com o botão Play para ouvir uma confirmação de voz da pesquisa. Feche o protótipo quando você tentou isso. Outra tela será criada, então vamos clicar na visualização 'Design' no canto superior esquerdo da interface XD. Clique na tela de pesquisa clicando no nome e copie e cole.

26. Escalando a imagem

Renomeie a nova tela 'cabine'. Clique duas vezes na imagem para a camada 'cabine esquerda'. Redimensione as alças de canto para que ele preencha a tela e reposicione a imagem por dentro para que ela cubra essa tela. Clique no texto dos resultados da pesquisa e tire a aparência para zero para removê-lo da exibição.

27. Novos elementos de tela

Clique duas vezes no texto 'Forest Cabin' como faz parte do grupo. Aumente o tamanho do texto para 26 pixels e mova-o levemente na tela. Adicione texto à tela no meio de Helvetica Neue em 14 pixels size e coloque-o para branco para se destacar no fundo. Adicione uma linha branca com a ferramenta de linha sob o cabeçalho.

28. Crie um botão

Use a ferramenta Retângulo para desenhar um retângulo na tela na parte inferior do design. Arraste nas alças de canto para dar a esta forma redonda cantos. Adicione a palavra 'Reserva' para isso, usando o estilo de caractere salvo no painel Ativos para Helvetica Neue em Negrito Condensado.

29. Mover para o modo de protótipo

Todos os elementos de design estão em vigor agora para todo o desenho do aplicativo. Mova-se para o modo 'Prototype' clicando na palavra 'protótipo' no canto superior esquerdo. Na tela de pesquisa, clique no grupo "Florestas" da imagem e do texto. Arraste a alça azul de cima para a tela 'cabine'.

30. Configurações de animação.

No painel pop-up para a transição entre telas, escolha Toque como o gatilho e, em seguida, faça a ação animar automaticamente. Continue facilitando como snap, mas reduz a duração deste para 0.6s. Isso garante que a animação não arraste - o movimento da primeira tela para a segunda tela teve um monte de movimento que exigia uma transição mais longa.

31. Vincular o botão traseiro

Agora selecione o botão Voltar a partir da tela final e arraste a seta azul a partir desta de volta para a tela 'Search'. Todas as configurações da transição anterior devem ser lembradas. Agora você está pronto para ir em frente e testar isso clicando no botão Play.

32. Auto-animação

O que você verá com o Auto-Animate agora é que a imagem se expande para preencher a tela e os elementos que não são mais necessários desaparecerão enquanto o novo texto desaparecerá. O oposto acontece quando voltar. Isso fornece uma boa maneira de ver o trabalho auto-animado em três telas.

33. Salve o projeto

Por padrão, seu projeto deve economizar automaticamente na nuvem criativa, mas é uma boa ideia salvar uma cópia para o seu próprio disco rígido, caso haja algum problema. Clique em Arquivo e GT; Salvar, altere o local para o seu próprio computador e nomeie o projeto com um nome adequado.

34. Compartilhando o projeto

O ponto inteiro de prototipagem é testar o projeto em outras pessoas. Felizmente, há um botão de compartilhamento no canto superior direito da interface XD que torna isso uma brisa. Clique no botão Share e no menu Drop exibido selecione o compartilhamento de opções para revisão.

35. Publicar protótipos

Na próxima tela, você é informado de que o suporte de animação automática ainda não está disponível para a Web, mas está chegando em breve. Clique em Criar link público e, em seguida, clique no link no canto superior direito para visitar o link público em um navegador da Web. Você precisará manter a barra de espaço para baixo para usar o comando de voz com o protótipo.

36. Versão de vídeo.

Outro protótipo pode ser compartilhado registrando a interface em ação. Clique no botão Compartilhar e escolha Gravar vídeos. Isso abrirá uma janela e, quando você fechar isso, será solicitado a salvar uma gravação da tela como um arquivo MP4, que também é uma maneira útil de compartilhar seu protótipo.

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

Artigos relacionados:

• Design de aplicativo móvel: um guia para iniciantes
• Como criar um aplicativo com vue.js
• Obter apertos com aplicativos móveis a bordo