Alterne para o modo de Protótipo.
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 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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Quando a Ação é definida como Prancheta anterior, um ícone de cauda aparece no final do fio.
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.
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.
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.
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.
Especifique um nome e o local onde deseja salvar a gravação. A gravação é salva como um arquivo .mp4.
Aqui está um vídeo para ajudar você a começar com a interatividade:
Fazer logon em sua conta