Saiba como criar protótipos interativos que outras pessoas podem usar para testar, otimizar e aperfeiçoar a experiência do usuário.

Depois de concluir o design de suas telas, você pode visualizar como os usuários podem experimentar seu aplicativo ou site criando um protótipo interativo.

Você pode conectar suas telas na sequência de navegação desejada e ter a experiência como usuários reais.

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 de tela inicial. Ele muda para azul indicando que a prancheta agora está definida como tela inicial.

    Opção para definir como tela inicial
    Opção para definir como tela inicial
    Tela inicial definida
    Tela inicial definida

    Para definir uma prancheta diferente como tela inicial, clique no ícone de tela inicial associado à prancheta. Para exibir todas as pranchetas após a publicação, vincule todas as pranchetas relevantes.

Conectar suas telas

Para vincular as pranchetas de um protótipo interativo, você pode conectá-las conectando os elementos interativos a um objeto ou pranchetas de destino. Antes de vincular pranchetas ou telas, nomeie as pranchetas adequadamente. Isso ajuda a identificar a tela com a qual você deseja criar o vínculo.

  1. Alterne para o modo de Protótipo.

  2. Clique no objeto ou na prancheta que deseja vincular. Uma alça de conexão com uma seta é exibida no objeto ou na prancheta. 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 prancheta de destino.

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

  4. Para deixar seus protótipos mais interessantes, você pode adicionar acionadores e ações. Para isso, clique no botão + na tela ou clique em + no Inspetor de propriedades e selecione as opções na tela.

    Por exemplo, para melhorar a experiência de navegação dos protótipos, você pode optar por adicionar links de âncora configurando Rolar para como uma ação. Para obter mais informações, consulte Criar links de navegação em uma prancheta.     

    Opções de prototipagem
    Opções de prototipagem

    A. Defina como Tocar, Arrastar, Focalizar, Tempo, Teclas e controle ou Voz. B. Defina o atraso em segundos. C. Defina como Transição, Animação automática, Rolar para, Sobreposição ou Reprodução de fala. D. Altere a prancheta de destino, se necessário. E. Defina como Dissolver ou Nenhum. F. Selecione o efeito de atenuação. G. Insira a duração do tempo em segundos. 

    Agora, ao selecionar Tocar como acionador, você poderá combinar duas ações, como Transição, e uma ação não transitória, como a Reprodução de fala ou Reprodução de áudio. Para adicionar várias ações, defina o primeiro botão Ação + no Inspetor de propriedades como Transição, Animação automática, Sobreposição, Rolar para ou Prancheta anterior e defina o segundo botão Ação + como Reprodução de áudio ou Reprodução de fala.

    Observe que, se você selecionar a Reprodução de áudio ou a Reprodução de fala como a primeira ação, não poderá adicionar uma segunda ação.

  5. Você também pode combinar vários acionadores para criar interações avançadas sem distribui-los entre diferentes objetos em uma prancheta. Para isso, use o botão + na tela ou clique em + no Inspetor de propriedades, e selecione Acionadores, Ação e Destino, como na Etapa 4.

    Lembre-se de que você pode aplicar os acionadores Tocar, Arrastar, Focalizar, e Tempo apenas uma vez e Voz e Teclas e Controle várias vezes. 

    Combinar vários acionadores
    Combinar vários acionadores
  6. Para visualizar seu protótipo, clique em Visualização no desktop  .

Tutoriais

“Como os fluxos de trabalho de prototipagem continuam a evoluir, há cada vez mais formas de interagir com seu design. Gestos de tocar e arrastar, atalhos de teclado e reconhecimento de voz podem não só ser usados, como também combinados para acionar uma variedade de interações.”- Dani Beaumont, gerente de produto principal do Adobe XD.

Assista a este tutorial e descubra como combinar vários acionadores para obter uma variedade de interações.

Duração: 4 minutos e 20 segundos.


Dicas

Para editar ou excluir um fio, selecione os fios para editá-los ou exclui-los. Também é possível selecionar uma única interação no Inspetor de propriedades e editar suas interações.

Passe o mouse sobre o fio para ver uma dica de ferramenta que informa a quantidade e o tipo das interações. 

Para aplicar a interação definida a outro objeto, selecione o objeto ou a prancheta, selecione copiar, clique no objeto ou na prancheta de destino e, no menu de contexto do botão direito do mouse, selecione Colar interação.

Vincular com a prancheta anterior

  1. No modo de Protótipo, selecione o elemento ou a prancheta que deseja vincular. Quando uma seta pequena for exibida, clique e arraste a seta para a prancheta anterior ou selecione Ação > Prancheta anterior.

    Selecionar prancheta anterior
    Selecionar prancheta anterior
  2. Quando a Ação é definida como Prancheta anterior, um ícone de cauda aparece no final do fio.

    Definir o destino
    Definir o destino

    Se quiser desconectar um fio de uma prancheta, clique em qualquer ponto do fio e arraste-o para afastá-lo da prancheta de destino.

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

Desvincular pranchetas

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

    Você também pode clicar em qualquer ponto do fio e arrastá-lo para desconectá-lo da prancheta de destino.

    Desvincular pranchetas
    Desvincular pranchetas

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

  2. Visualize os vínculos em um navegador. Qualquer vínculo de destino definido anteriormente do elemento é removido.

Visualizar e gravar interações

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
  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