Saiba como criar protótipos interativos no Adobe XD que podem ser usados para validar a experiência de usuário.

Depois de concluir o design de suas telas, conecte-as para visualizar como os usuários vão experimentar seu aplicativo ou site.

O Adobe XD permite criar protótipos interativos para visualizar a navegação entre as telas ou wireframes. Você pode visualizar a interação para testar a experiência e repeti-la no seu design para poupar tempo no desenvolvimento. Você também pode gravar as interações e compartilhá-las com os envolvidos no projeto para receber feedback. Amplie/reduza o zoom para exibir partes específicas do protótipo em detalhes.

Definir a tela inicial

A tela inicial é a primeira tela do seu aplicativo ou site. Seus usuários começam a navegar no aplicativo ou site por ela.

Além disso, ao visualizar seu protótipo sem nenhuma seleção, a visualização começa na tela inicial. Isto é, por padrão, sua tela inicial é definida como a primeira prancheta na qual você adiciona uma conexão.

  1. Alterne para o modo de Protótipo.

  2. Clique na prancheta que deseja definir como tela inicial. Um ícone cinza é exibido no canto superior esquerdo.

  3. Clique no ícone inicial. Ele muda para azul indicando que a prancheta ou tela agora está definida como tela inicial.

    Definir como opção de tela inicial
    Definir como opção de tela inicial
    Tela inicial definida
    Tela inicial definida

    Para definir uma prancheta diferente como tela inicial, clique no ícone inicial associado à prancheta.

Vincular elementos interativos a telas de destino

Antes de começar a vincular pranchetas ou telas, dê um nome às pranchetas. Isso ajuda você a identificar a tela com a qual você deseja vincular uma tela específica.

  1. Alterne para o modo de Protótipo.

  2. Clique no objeto que deseja vincular.

    Uma alça de conexão com uma seta é exibida no objeto. Ao passar o ponteiro do mouse sobre a alça, o cursor muda para um conector.

    Vincular elementos interativos a telas de destino
    Vincular elementos interativos a telas de destino
  3. Clique e arraste o mouse para ver o conector. Solte o mouse na tela ou prancheta de destino.

    Quando você conecta o primeiro elemento, a prancheta do elemento é definida como a prancheta inicial. 

  4. No painel Interação exibido no Inspetor de propriedades, você pode especificar o seguinte:

    • Transição e duração: se deseja manter a posição da rolagem ao fazer a transição para outra prancheta, selecione Manter posição de rolagem. Essa opção é útil ao criar protótipos de barras de navegação ou rodapés fixos. Se o usuário rolar na prancheta original, a próxima prancheta reconhecerá a posição de rolagem da pranchetaoriginal. Ao clicar em uma prancheta ou em qualquer elemento na prancheta, você pode controlar a posição de rolagem para manter o local original de uma tela para a próxima. O controle impede a rolagem repetida para frente e para trás no arquivo de projeto. Por exemplo, se um usuário rolar para baixo até y = 1000 na prancheta A, a transição para a prancheta B será padronizada para y = 1000. Se a prancheta original não tiver rolagem definida, a opção Manter posição de rolagem ficará inativa.
    • Sobreposição: se você deseja simular os estados ou as transições como menus suspensos e teclados deslizantes, selecione Sobreposição.

    Pressione Esc ou clique fora do pop-up para descartá-lo.

    Trabalhar com sobreposições
    Trabalhar com sobreposições
  5. Repita as etapas acima para vincular todos os elementos interativos em seu projeto.

    DICA:

    No modo de Protótipo, para agilizar o processo de criação de interações:

    • Você pode copiar e colar objetos em pranchetas. O objeto é copiado e colado junto com sua interação.
    • Você também pode copiar e colar uma interação sozinha. Copie um objeto, clique com o botão direito do mouse em outro objeto e selecione Colar interação. Somente a interação é colada.
    • Para apontar o elemento para uma tela diferente, clique na alça novamente e arraste-a para a tela desejada.
    • Para exibir as conexões de/para uma prancheta específica, selecione o título da prancheta.
    • Para excluir uma interação, remova a alça de destino do conector de uma prancheta de destino e arraste-a para a área de rascunho.
    Elementos interativos vinculados a telas de destino
    Elementos interativos vinculados a telas de destino

    A. Tela inicial B. Pranchetas vinculadas C. Conexão de saída D. Conexão de entrada 

    O Adobe XD permite o uso de atalhos de teclado e botões de controle para simular aplicativos de desktop nativos e criar protótipos de experiências de jogo ou de design ainda melhores. Durante a vinculação de um protótipo, você pode selecionar Teclas/Controle na lista suspensa da opção Acionador e atribuir uma tecla ou botão. Você pode usar esses acionadores com Tocar, Arrastar, Tempo e Voz, o que permite criar protótipos para diferentes casos de uso, como aplicativos de desktop, jogos e apresentações.

    Observação:

    Os links cinza indicam conexões de saída e os azuis mostram as conexões de entrada.

Usar transições temporizadas

As transições temporizadas do Adobe XD permitem criar experiências avançadas de protótipos, como fluxos de integração, redirecionamento automático para telas diferentes ou barras de progresso. Da mesma forma que você pode usar a opção Tocar para acionar uma transição, também é possível usar Atraso para especificar a duração da transição. Por exemplo, quando você cria fluxos de trabalho de integração, você pode usar a opção Atraso para vincular as pranchetas e criar as transições entre elas.

Como designer, você também pode usar tempo para acionar uma transição para outra prancheta. Por exemplo, se você está criando o design de fluxos de integração, use a transição temporizada para começar em uma tela inicial de um fluxo de aplicativo e fazer a transição automaticamente entre algumas telas de integração.

Criar uma transição temporizada para fluxos de trabalho de integração

Transições temporizadas
Transições temporizadas

A. Definir o Acionador como Tempo B. Definir o atraso C. Definir a Ação como Transição D. Selecionar a prancheta de destino E. Selecionar o efeito de animação 
  1. No XD, mude para o modo de Protótipo.

  2. Para exibir o conector, selecione a prancheta e passe o ponteiro do mouse sobre a alça.

  3. Clique, arraste e solte o conector da prancheta de origem para a prancheta de destino. Quando você conecta o primeiro elemento, a prancheta do elemento é definida como a prancheta inicial.

  4. Clique no conector para exibir o painel Interação no Inspetor de propriedades e selecione as seguintes opções:

    • Acionador: defina como Tempo.
    • Atraso: defina o tempo de atraso de uma transição em .
    • Duração: defina a duração da transição em segundos.
    • Ação: defina como Transição.
    Definir acionador, atraso, duração e ação
    Definir acionador, atraso, duração e ação

    A. Definir Acionador como Tempo B. Definir atraso em segundos C. Definir ação como Transição D. Definir duração em segundos 
  5. Selecione o ícone Visualizar no desktop   para visualizar as alterações.

Revisar o link de protótipo na Web

  1. No aplicativo de desktop, clique no botão Compartilhar na parte superior direita e selecione Compartilhar para revisão. Assim que o link for criado, copie-o e abra o protótipo no navegador. As transições temporizadas são reproduzidas conforme você cria o design no aplicativo de desktop do XD.

  2. Para interromper a transição temporizada, pressione a tecla de seta para trás ou o botão de navegação de seta para trás e você será levado de volta à tela anterior.

  3. Quando você interrompe a transição pela primeira vez, o Adobe XD exibe a informação de que a transição temporizada foi interrompida. Para resumir, pressione o botão de navegação de seta direita ou a tecla de seta direita.

Vínculo com a prancheta anterior

  1. No modo de Protótipo, selecione o elemento que você deseja vincular. Quando uma pequena seta for exibida, clique na seta e a ação será definida automaticamente como a prancheta anterior. Você também pode vincular o elemento a uma prancheta e selecionar Ação > Prancheta anterior.

    Selecionar prancheta anterior
    Selecionar prancheta anterior
  2. Quando a Ação for definida para Prancheta anterior, o ícone muda.

    Definir o destino
    Definir o destino
  3. Use a janela anterior para visualizar o vínculo.

Desvincular pranchetas

  1. No modo de Protótipo, selecione Destino > Nenhum.

    Você também pode arrastar o fio da prancheta para a área de rascunho (o espaço cinza entre as pranchetas).

    Desvincular pranchetas
    Desvincular pranchetas

    Observação:

    A opção Nenhum está disponível somente se a prancheta estiver vinculada a um destino.

  2. Visualize os vínculos em um navegador.

    Qualquer link de destino definido anteriormente do elemento é removido.

Visualizar e gravar interações

Observação:

Não é possível fazer gravações de protótipos no Adobe XD para Windows. No entanto, há uma solução alternativa. Pressione as teclas Windows + G e use o gravador nativo para gravar a janela de visualização.

Para testar o protótipo e as interações, você pode visualizar o protótipo. Você também pode gravar a visualização e salvar a gravação como um arquivo .mp4. Então, você pode compartilhar o arquivo .mp4 com os envolvidos no projeto, que podem ver (ou revisar) o passo a passo do protótipo e fornecer feedback.

  1. Clique no ícone Visualizar no desktop. A janela Visualizar é exibida na prancheta em foco.

    Para testar a navegação entre as telas, clique nos elementos interativos.

    Você pode editar o design e as interações de seu protótipo enquanto visualiza na janela de visualização. As alterações ficam disponíveis para visualização imediatamente.

  2. Para gravar a interação, clique no ícone Gravar na janela de visualização. Para terminar a gravação, pressione Esc ou clique no ícone Gravar novamente.

    Gravar interações dos protótipos
    Gravar interações dos protótipos
  3. Especifique um nome e o local onde deseja salvar a gravação. A gravação é salva como um arquivo .mp4.

Esta obra está licenciada sob uma licença não adaptada da Creative Commons Attribution-Noncommercial-Share Alike 3.0  As publicações do Twitter™ e do Facebook não são cobertas pelos termos do Creative Commons.

Avisos legais   |   Política de privacidade online