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 validar 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 as partes interessadas para receber feedback. Amplie/reduza o zoom para exibir partes específicas do protótipo em detalhes.
A tela inicial é a primeira tela do seu aplicativo ou site. Seus usuários começam a navegar no aplicativo ou site pela tela inicial.
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.
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.
-
Na janela pop-up exibida, especifique o seguinte:
- Opções de transição e a duração da transição: se deseja manter a posição de rolagem ao fazer a transição para outra prancheta, selecione Preservar posição de rolagem. Essa opção é útil quando você estiver criando protótipos de barras de navegação ou rodapés fixos. Se o usuário rolar na prancheta original, a próxima prancheta reconhece a posição de rolagem da prancheta
original . 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 tem rolagem definida, a opção Preservar posição de rolagem fica inativa. - Sobreposição: se você deseja simular os estados ou as transições como menus suspensos e teclados deslizantes, selecione Sobreposição.
Trabalhar com sobreposições - Opções de transição e a duração da transição: se deseja manter a posição de rolagem ao fazer a transição para outra prancheta, selecione Preservar posição de rolagem. Essa opção é útil quando você estiver criando protótipos de barras de navegação ou rodapés fixos. Se o usuário rolar na prancheta original, a próxima prancheta reconhece a posição de rolagem da prancheta
-
DICA:
No modo 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 excluir uma interação, arraste a alça de destino do conector em uma prancheta de destino ou para a área de rascunho.
Elementos interativos vinculados a telas de destino
A. Tela inicial B. Pranchetas vinculadas C. Conexão de saída D. Conexão de entradaObservação:
Os links cinza indicam conexões de saída e os azuis mostram as conexões de entrada.
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 Toque para acionar 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.
-
Na janela Acionamento, defina as seguintes opções:
- Acionamento: defina como Tempo.
- Atraso: defina o tempo de atraso de uma transição em segundos.
- Duração: defina a duração da transição em segundos.
- Ação: defina como Transição.
Definir acionamento, atraso, duração e ação
A. Definir Acionamento como Tempo B. Definir atraso em Segundos C. Definir ação como Transição D. Definir duração em Segundos
para visualizar as alterações.-
No modo 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
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 as partes interessadas, 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.
As publicações do Twitter™ e do Facebook não são cobertas pelos termos do Creative Commons.