Guia do Usuário Cancelar

Criar protótipos interativos

Pesquisar

Última atualização em 18 de set de 2024

Guia do usuário do Adobe XD
Introdução
Design
1. Pranchetas, guias e camadas
2. Formas, objetos e caminho
3. Texto e fontes
  1. Trabalhar com ferramentas de desenho e texto
  2. Fontes no Adobe XD
4. Componentes e estados
5. Mascaramento e efeitos
6. Layout
7. Vídeos e animações Lottie
Protótipo
Compartilhar, exportar e analisar
Sistemas de design
Documentos na nuvem
Integrações e plug-ins
XD para iOS e Android
1. Visualizar em dispositivos móveis
2. Perguntas frequentes sobre o Adobe XD para dispositivos móveis
Solução de problemas
1. Problemas conhecidos e corrigidos
  1. Problemas conhecidos
  2. Problemas corrigidos
2. Instalação e atualizações
3. Inicialização e falha
4. Documentos na nuvem e bibliotecas da Creative Cloud
5. Prototipagem, publicação e revisão
6. Importação, exportação e trabalho em outros aplicativos

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 utilizarão seu aplicativo ou site criando um protótipo interativo.

Você pode conectar suas telas na sequência de navegação desejada e organizar vários fluxos de interação com duas ou mais pranchetas conectadas. Quando suas telas estiverem prontas, você poderá compartilhar cada fluxo como links compartilháveis para revisão, coletar feedback e publicá-los em várias superfícies de destino ao mesmo tempo.

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.

Alterne para o modo de Protótipo.
Clique na prancheta que deseja definir como tela inicial. Um ícone cinza é exibido no canto superior esquerdo.
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

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.

Configurar vários fluxos em seu projeto

Ao utilizar vários fluxos, você pode criar e compartilhar várias versões de um design de um mesmo documento ou no mesmo arquivo e reaproveitar o mesmo conjunto de pranchetas entre vários protótipos ou especificações de design. Cada fluxo retém seu próprio conjunto de fios e detalhes de compartilhamento, assim você pode fazer alterações e republicar sem precisar desfazer e refazer todas as configurações toda vez.

Se quiser criar versões de seu design, defina uma segunda prancheta inicial, vincule-as e compartilhe links separados para cada conjunto. Pranchetas inicias são o ponto de partida do design, a partir do qual você pode arrastar fios para conectar diferentes telas.
Use o mesmo conjunto de pranchetas em vários protótipos, sem precisar duplicar seu trabalho. Faça alterações em seus designs e atualize seus links, tudo na mesma página.

Outro exemplo de configuração de vários fluxos pode ser encontrado ao criar um site que é voltado para várias plataformas, como dispositivos móveis, desktop, tablet, entre outros. Você pode definir e criar vários fluxos de interação, cada um deles representando uma jornada de usuário, e depois compartilhar cada fluxo com seus colaboradores para receber feedback.

Continue lendo para saber como configurar uma ou mais pranchetas iniciais e definir vários fluxos.

Vincular elementos interativos a telas de destino — Configurar vários fluxos

Alterne para o modo de Protótipo.
Configure a prancheta Inicial para definir o ponto inicial do design.
Insira um nome para cada fluxo para organizá-los melhor.
Se o design consiste em vários fluxos, defina pranchetas Iniciais para cada um desses fluxos.
Clique no próximo objeto ou nas pranchetas que deseja vincular. Uma alça de conexão com uma seta é exibida no objeto ou na prancheta. Clique e arraste para soltar a alça no objeto ou na prancheta de destino.

Adicionar interações para objetos e pranchetas

Assim que as telas forem definidas e conectadas, você poderá tornar seus protótipos mais envolventes ao acrescentar acionadores e ações para objetos e pranchetas. Para fazer isso:

Selecione um objeto e clique em + ao lado dele ou clique em + no Inspetor de propriedades. Defina Acionadores e Tipo de ação. Assim que o tipo de ação for escolhido, defina as opções específicas para cada tipo de ação, incluindo o Destino (se aplicável).

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 um tipo de ação. Para obter mais informações, consulte Criar links de navegação em uma prancheta.

Opções de prototipagem

A. Defina como Tocar, Arrastar, Focalizar, Tempo, Teclas e gamepad, Voz ou Fim da reprodução. B. Defina o atraso em segundos. C. Defina como Transição, Animação automática, Sobreposição, Rolar para, Prancheta anterior, Reprodução de áudio, Reprodução de fala, Reprodução de vídeo ou Reprodução do Lottie. 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.
Se selecionar Tocar como acionador, você poderá combinar uma Transição com uma ação não transitória, como a Reprodução de fala ou Reprodução de áudio. Para adicionar a segunda ação, 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.

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

Observação:

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

Você pode criar uma simulação realista de rolagem em seus designs. Para manter os elementos do design em uma posição fixa, selecione Posição fixa ao rolar no Inspetor de propriedades.
Para visualizar seu protótipo, clique em Visualizar no desktop .

Você pode gerenciar e publicar cada fluxo como links compartilháveis para revisão e coletar feedback. Para obter mais informações sobre como compartilhar vários fluxos, consulte Compartilhar designs e protótipos.

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.
Para ocultar temporariamente os fios no modo de Protótipo, mantenha pressionada a tecla Option (macOS) ou Alt (Windows).
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

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
Quando a Ação é definida como Prancheta anterior, um ícone de cauda aparece no final do fio.

Definir o destino

Observação:

Se quiser desconectar um fio de uma prancheta, clique em qualquer ponto do fio e arraste-o para afastá-lo da prancheta de destino.
Use a janela anterior para visualizar o vínculo.

Desvincular pranchetas

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

Observação:

A opção Nenhuma estará disponível somente se a prancheta estiver vinculada a um destino.
Visualize os vínculos em um navegador. Qualquer vínculo 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.

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.
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
Especifique um nome e o local onde deseja salvar a gravação. A gravação é salva como um arquivo .mp4.

Saiba mais

Aqui está um vídeo para ajudar você a começar com a interatividade:

Recursos relacionados

Fale conosco

Se você tiver alguma dúvida ou sugestão para compartilhar, venha participar da comunidade do Adobe XD. Adoraríamos ver suas criações e ouvir o que você tem a dizer.

Receba ajuda com mais rapidez e facilidade

Novo usuário?