Tutorial Adobe XD: interações básicas de protótipo

Aprenda a criar protótipos interativos no Adobe XD usando fios e os acionadores Tocar e Tempo, com Ethan Parry

Um dos grandes benefícios de usar o Adobe XD é que ele faz mais do que apenas permitir a criação de pranchetas. Com a capacidade de criar protótipos que podem ser compartilhados com desenvolvedores, o programa permite que você teste e explore mais suas ideias, resultando num produto final mais rico.

Para o designer de serviços e consultor de pesquisa de UX Ethan Parry (@ethanparry), a prototipagem é uma parte crucial de seu processo. Ao permitir que os designers solicitem feedback de outras pessoas e testem suas hipóteses sobre o comportamento do usuário, os protótipos podem ajudar designers UX e empresas a reduzir o investimento de tempo e recursos em conceitos que acabam não atendendo ao objetivo final. Ao fornecer uma nova maneira de interagir com um design, a prototipagem pode também ser um excelente método para idear e encontrar novas inspirações e soluções.

Neste tutorial, Parry explica como usar o Adobe XD para criar protótipos usando ações básicas, simulando como será a navegação e experiência dos usuários em um design.

Como criar interações básicas de protótipo no Adobe XD

1. Vá para a barra de menu superior e selecione o modo Protótipo.

2. Selecione sua prancheta inicial e clique no pequeno ícone de casa que aparece no canto superior esquerdo. Isso definirá a prancheta como sua tela principal.

3. Selecione o elemento em sua primeira prancheta no qual deseja que as pessoas cliquem para iniciar uma ação. Normalmente, será um botão. Após selecioná-lo, você verá uma pequena seta azul aparecer em sua borda. Se clicar nela, uma interação será criada.

4. Arraste a seta para outra prancheta, cuja borda ficará azul. Isso criará um fio. Agora, quando clicarem no elemento selecionado em sua primeira prancheta, serão direcionadas para esta.

5. No menu Interação no lado direito da tela, selecione Tocar como seu acionador, defina Transição como sua Ação e verifique se o Destino é a prancheta correta.

6. Você pode continuar repetindo esse processo em mais elementos que levem a diferentes pranchetas. O Adobe XD guardará suas configurações de interação para que não precise ajustá-las manualmente todas as vezes. Isso é especialmente útil quando precisar criar muitas interações na mesma página, por exemplo, um e-commerce com vários produtos. Você pode selecionar um bloco de conteúdo ou uma única imagem e, em seguida, arrastar o fio para a prancheta do produto correspondente. Isso pode ser repetido nos blocos de conteúdo que restam.

7. Outra interação importante de incluir é um botão Voltar. Para fazer isso, vá para o modo Design na barra de menu superior. Em seguida, adicione um botão ou símbolo Voltar à sua prancheta.

8. Retorne ao modo Protótipo e clique no botão Voltar. Uma pequena seta azul aparecerá em sua borda, que você pode usar para arrastar um fio até a prancheta para a qual deseja que o botão retorne. Outra solução seria clicar na seta, ir para o menu Interação e, em Ação, selecionar Prancheta Anterior.

9. Para excluir uma interação, basta selecioná-la e pressionar backspace em seu teclado.

10. Se quiser criar uma interação temporizada em que os usuários são conduzidos a uma página diferente sem precisar concluir nenhuma ação, selecione a prancheta inteira e pressione + no menu Interação. Em seguida, selecione Tempo como seu acionador e escolha o delay desejado.

11. Vá para a visualização no canto superior direito da tela para testar suas interações e ver se seu protótipo está funcionando conforme deseja e, em seguida, faça os ajustes necessários.

Se quiser aprender mais a respeito do uso do Adobe XD para projetar e fazer protótipos de projetos UX, confira o curso online de Ethan Parry, "Introdução ao Adobe XD".

Você também pode se interessar por:

- Introdução ao UX design, um curso de Ethan Parry
- Estratégia de marca para plataformas online, um curso de James Eccleston