Alterne para o modo de Protótipo.
Last updated on
|
Also Applies to Adobe XD
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.
-
-
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.
.jpg.img.jpg)
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.
- 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.
Assim que as telas forem definidas e conectadas, você poderá tornar seus protótipos mais envolventes ao acrescentar acionadores e ações. Para fazer isso:
-
Clique no botão + na tela ou clique em + no Inspetor de propriedades e selecione as opções.
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 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.
-
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
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 Visualização 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
.png){kind=icon}
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 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 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
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:
Mais itens semelhantes
Fazer logon em sua conta