Como protótipo de um aplicativo móvel com o Adobe XD

Este tutorial, mostrando como fazer um protótipo de aplicativo móvel no Adobe XD, foi colocado usando Adobe XD CC (2017 Beta) Em 2016. O. Recém-lançado Adobe XD CC teve alguns ajustes, tornando-o ainda mais fácil de usar.

• Receba um desconto de 15% na Adobe Creative Cloud aqui

Se você é um designer criando experiências de usuário para aplicativos ou sites móveis, você pode ser usado para usar várias ferramentas para diferentes tarefas quando prototipagem .

Você começa com pesquisa. Então você esboçar idéias em caneta e papel, e depois transferir seus pensamentos para uma ferramenta de design. Para criar o melhor fluxo, você exporta todos os seus ativos e trazê-los para outra ferramenta para construir um protótipo. A partir daí, você compartilha ou testa seu protótipo, coleta feedback e retorna ao meio do ciclo para iterar, trocar da ferramenta para ferramenta à medida que você refina seu design.

Várias ferramentas de design cada um enfrenta uma parte diferente do problema. Mas em vez de tornar sua vida como um designer mais fácil, mudar entre todas essas ferramentas apenas diminui seu ritmo.

E se houvesse uma única ferramenta que significava que você poderia desfrutar de um fluxo de trabalho totalmente conectado? Onde você poderia projetar e prototipar suas experiências em minutos, compartilhá-los na Web para capturar feedback, então faça edições facilmente sem quebrar seu passo? O objetivo com design de experiência na Adobe - ou, à medida que chamamos, o Adobe XD - foi fazer exatamente isso.

Neste tutorial, mostraremos as principais áreas do Adobe XD, projetando, prototipando e compartilhando um simples "Conheça o aplicativo móvel da equipe".

Criaremos uma página de conteúdo listando os membros da equipe do produto, então os usuários poderão clicar nas entradas individuais a serem tomadas para uma página biológica mais aprofundada. Você aprenderá como criar desenhos de alta fidelidade, protótipos e compartilhá-los para reunir feedback.

Assista ao vídeo acima e siga as etapas escritas abaixo para aprender a protótipo com o Adobe XD. Não apenas mostraremos como fazer, também mostraremos como testá-lo, gravar um vídeo de visualização dele em ação e como compartilhar e exportá-lo.

Observe que alguns processos podem ter mudado ligeiramente na versão mais recente do Adobe XD.

01. Instale o Adobe XD e inicie um novo design

Primeiro, certifique-se de que o Adobe XD é instalado no seu computador . Lançá-lo, dê uma olhada na tela de boas-vindas e inicie um novo design com um modelo de Artboard do iPhone.

02. Crie um segundo artboard

Use a ferramenta Artboard ( UMA ) Para criar uma segunda prancheta, altere seus títulos (clicando duas vezes neles) para 'iPhone - Página de equipe' e 'iPhone - página de detalhes'. Altere as cores de fundo de Artboards para preto usando o inspetor de propriedade à sua direita. Com a ferramenta selecionada ( V. ) Selecionado, você pode pressionar a barra de espaço a qualquer momento para atravessar seu projeto.

03. Faça o download de ativos do tutorial

Eu coloquei uma pasta de ativos que eu vou estar usando ao longo deste tutorial. Você pode baixá-los aqui . Do localizador, arraste 'iphone-status-bar.svg' para o topo da Artboard 1 ( X: 8, Y: 5 ). Em seguida, copie e cole-o no Artboard 2, para que ambos os Artboards tenham a barra de status no topo. Acertar CMD + L. Para bloquear essas barras de status em ambos os Artboards, para que suas propriedades não possam ser modificadas. Para desbloqueá-los, você pode usar o atalho novamente ou clicar no ícone 'Lock'.

04. Desenhe um retângulo e ajuste as dimensões

Vamos nos concentrar na Artboard 1 (a página da equipe). Usando a ferramenta retângulo ( R. ), desenhe um retângulo rosa (# FF2BC2 sem borda) na Artboard 1 e defina suas dimensões para 375 x 230 usando o painel Inspetor de propriedades à direita.

05. Reordenar objetos

Para ligar a borda ou preencher e desligar, clique no ícone "olho" à direita. Acertar Shift + CMD + [ para enviá-lo até a parte de trás, ou ir para Objeto & GT; Organizar & gt; Enviar para trás . Se você quiser alterar as cores usando valores hexadecimais, clique no ícone da cor e, quando o selecionador de cores nativo aparecer, selecione a segunda guia no topo e altere a lista suspensa para 'RGB SLIDERS'.

06. Crie um cabeçalho

Usando a ferramenta de texto ( T. ), clique para criar um cabeçalho para sua página de equipe. O meu é Helvetica Bold, 20, #FFFFFF, X: 18, Y: 123. Vamos começar a reunir nossa lista de membros da equipe. Desenhe uma praça cinza onde a foto do membro da equipe se sentará (100 x 100, X: 8, Y: 238, # D0d0d0 sem borda).

07. Adicione outro retângulo

À direita disso, precisamos de um retângulo branco (260 x 100, X: 108, Y: 238, #ffffff sem borda) no qual incluiremos o nome do membro da equipe como um cabeçalho e um título de trabalho como subtítulo. Por enquanto, use texto de espaço reservado e estilize-o como desejar.

08. Adicione um ícone de seta

Para mostrar esta caixa será uma área tapetável, incluiremos um ícone de seta. Arraste 'PATH.SVG' do Finder para a tela XD para um ponto de praga. Em seguida, reposicione-o para X: 330, Y: 279.

09. Coloque seu headshot

Do localizador, arraste um headshot no lugar no quadrado cinza.

10. Crie a lista

Agora podemos criar nossa lista. Neste ponto, você normalmente estaria copiando e colando o item superior, movendo a versão copiada para baixo e ajustando a margem. Você faria o mesmo para novos itens, e se quisesse mudar as margens, teria que fazê-lo manualmente, um por um.

Bem, não com o Adobe XD - você pode usar o recurso de grade de repetição. Selecione os itens que você deseja repetir, clique no botão 'Repetir grade' no inspetor de propriedades à sua direita ( CMD + R. ) e use as alças verdes para repetir os itens verticalmente. Você também pode repeti-los horizontalmente para uma versão do tablet.

11. Ajuste a margem

Ajuste a margem da sua grade repetida pairando na borda de seus itens, clicando e arrastando. Vamos definir a margem para 7. Arraste a grade de repetição para a parte inferior da sua prancheta. Agora temos quatro linhas para brincar.

12. Edite os campos de texto

Enquanto propriedades (cores, posições X e Y, e assim por diante) são globais, o conteúdo de cada item pode ser único. Edite os campos de texto para o nome de cada indivíduo e o cargo. Você pode clicar duas vezes para entrar na grade e no grupo ou CMD + clique para selecionar diretamente qualquer elemento dentro de um grupo ou uma grade repetida. Agora precisamos pegar todos os headshots de uma só vez e arrastá-los para a grade e terminamos com esta tela.

13. Crie um efeito escurecido

Vamos pular para o Artboard 2 (a página de detalhes). Mais uma vez, vamos começar com um retângulo de espaço reservado (375 x 444, x: 0, y: 0, #ffffff sem borda) e arraste um headshot para preenchê-lo. Criaremos um efeito escurecido alterando a opacidade da imagem para 60% e enviando para as costas ( Shift + CMD + [ ).

14. Adicione outra flecha

Em seguida, bloqueie o item Headshot ( CMD + L. ) e adicione outra flecha ('back-arrow.svg') para indicar que o usuário pode retornar à lista de equipe. Isso precisa se sentar em X: 20, Y: 40. É importante bloquear a imagem primeiro, porque caso contrário, o SVG substituirá o headshot.

15. Adicionar barra de informações de contato

Queremos incluir uma barra rosa em cada página, que listará os detalhes de contato do membro da equipe (375 x 45, X: 0, Y: 400). Use a ferramenta de texto ( T. ) Para criar um elemento de texto lendo 'link de espaço reservado', central, estilo, e coloque-o em X: 169, Y: 416.

16. Crie mais instâncias do elemento de texto

Vamos usar a ferramenta Repetir Grid para criar mais duas instâncias deste elemento de texto. Primeiro, converta o texto para uma grade de repetição ( CMD + R. ), em seguida, mantenha a tecla de opção ao expandir sua grade horizontalmente. Linda, não é? Selecione diretamente o texto ( CMD + clique ) e altere o conteúdo para ler "e-mail", 'Twitter' e 'LinkedIn'.

17. Criar nome e Bio Box

Para terminar o design, crie uma caixa branca (360 x 214, X: 8, Y: 445) que incluirá o nome do membro da equipe e o biog. Primeiro adicione um elemento de texto usando o "nome da pessoa" de espaço reservado. Para o elemento de texto que contém o biog, queremos usar o texto da área. Para fazer isso, selecione a ferramenta de texto ( T. ) e clique e arraste para definir a área para sua cópia. Mais uma vez, digite algum texto de espaço reservado por enquanto, e ajuste suas propriedades de estilo.

18. Crie Artboards para outros membros da equipe

Agora vamos fazer algumas novas artes para outros membros da equipe. Primeiro desbloqueie a imagem principal ( CMD + L. ) e, em seguida, clique no título do Artboard 2 para selecioná-lo e acertar CMD + C. para copiá-lo. Reduzir o zoom ( CMD + - ou use o trackpad para pinch-to-zoom) e, em seguida, bater cmd + v. para colar três novos artes de arte. Adicione algumas informações de biog a cada página. Atualize os nomes e as imagens da Headshot e organize as capas de arte na tela. Legal! Nosso design está terminado por enquanto.

19. Configure o fluxo

É hora de começar a definir o fluxo do aplicativo. Um protótipo pode valer mais que mil reuniões, por isso vamos criar um para comunicar nossa intenção de design. Basta saltar para o modo de protótipo (parte superior esquerda), selecione o item que será aproveitado pelo usuário (HOLD cmd. para selecionar diretamente) e arraste um fio para o artboard direito. Quando o mouse é liberado, podemos definir o Segue, facilitar e duração. Simples.

20. Conecte-se

Vamos embora cada um dos itens da nossa lista na Artboard 1 e conecte-os para sua respectiva página de detalhes. Para cada um destes, queremos definir o SEGUE para deslizar para a esquerda e a facilitação para facilitar. Em seguida, podemos conectar as setas traseiras em cada uma das páginas de detalhes Voltar para o Artboard 1 - Lembre-se de definir o Segue para deslizar para a direita desta vez. Boom - Nosso protótipo está pronto.

21. Teste o protótipo

Para testar o protótipo, clique no botão Play no canto superior direito (visualização). Você não precisa fechar a janela de visualização para atualizar seu projeto ou seus fios. Basta começar a fazer alterações, e eles serão automaticamente refletidos na janela de visualização.

22. Faça um vídeo

É fácil registrar um vídeo de suas interações ao testar o protótipo. Com a janela de visualização aberta, clique no botão Registrar para iniciar e parar a gravação. Salve o arquivo '.mov' e compartilhe com seus stakeholders.

23. Compartilhe seu trabalho

Para compartilhar os protótipos na Web, clique no último botão no canto superior direito (compartilhar on-line). Clique no botão Criar link. Todos os ativos serão carregados para nuvem criativa e um link será criado. Se as alterações forem necessárias, você poderá voltar ao modo de design, fazer as alterações e compartilhar novamente. Todo o fluxo apenas funciona.

24. Exportar arquivos

Do XD, você pode exportar PNGs para Web, iOS e Android em diferentes tamanhos, bem como arquivos SVG altamente otimizados.

25. Aproveite os resultados

Parabéns! Você dominou os fundamentos da Adobe Experience Design CC (Preview). Sinta-se à vontade para compartilhar seus protótipos na Web e na mídia social - adicionar #adobexd. Então podemos ver o seu trabalho.

Este artigo originalmente apareceu em Revista Net. Edição 280. Inscreva-se na NET AQUI .

Artigos relacionados

• Como evitar prototipagens armadilhas
• Como usar animação em aplicativos móveis
• 10 dicas para melhor design móvel ux