Guia do Usuário Cancelar

Criar protótipos interativos

Pesquisar
  1. Guia do usuário do Adobe XD
  2. Introdução
    1. Novidades no Adobe XD
    2. Perguntas frequentes
    3. Criar designs e protótipos e compartilhar com o Adobe XD
    4. Requisitos de sistema
      1. Requisitos de hardware e software
      2. Adobe XD, Big Sur e Apple Silicon | macOS 11
    5. Noções básicas sobre a área de trabalho
    6. Alterar o idioma do aplicativo no Adobe XD
    7. Acessar kits de design de interface
    8. Acessibilidade no Adobe XD
    9. Atalhos de teclado
    10. Dicas e truques
    11. Opções de assinatura do Adobe XD
    12. Alterações no plano inicial do XD
  3. Design
    1. Pranchetas, guias e camadas
      1. Introdução às pranchetas
      2. Usar guias e grades
      3. Criar pranchetas com rolagem
      4. Trabalhar com camadas
      5. Criar grupos de rolagem
    2. Formas, objetos e caminho
      1. Selecionar, redimensionar e girar objetos
      2. Mover, alinhar, distribuir e organizar objetos
      3. Agrupar, bloquear, duplicar, copiar e virar objetos
      4. Definir traçado, preenchimento e sombra projetada para objetos
      5. Criar elementos de repetição
      6. Criar designs de perspectiva com transformações em 3D
      7. Editar objetos usando operações boolianas
    3. Texto e fontes
      1. Trabalhar com ferramentas de desenho e texto
      2. Fontes no Adobe XD
    4. Componentes e estados
      1. Trabalhar com componentes
      2. Trabalhar com componentes aninhados
      3. Adicionar vários estados aos componentes
    5. Mascaramento e efeitos
      1. Criar uma máscara com formas
      2. Trabalhar com efeitos de desfoque
      3. Criar e modificar degradês
      4. Aplicar efeitos de mesclagem
    6. Layout
      1. Redimensionamento responsivo e restrições
      2. Definir preenchimento fixo para componentes e grupos
      3. Criar designs dinâmicos com pilhas
    7. Vídeos e animações Lottie
      1. Trabalhar com vídeos
      2. Criar protótipos usando vídeos
      3. Trabalhar com animações Lottie
  4. Protótipo
    1. Criar protótipos interativos
    2. Animar protótipos
    3. Propriedades de objeto compatíveis com a Animação automática
    4. Criar protótipos com teclados e controles
    5. Criar protótipos usando reprodução e comandos de voz
    6. Criar transições temporizadas
    7. Adicionar sobreposições
    8. Criar protótipos de voz
    9. Criar links de âncora
    10. Criar hiperlinks
    11. Visualizar designs e protótipos
  5. Compartilhar, exportar e analisar
    1. Compartilhar pranchetas selecionadas
    2. Compartilhar designs e protótipos
    3. Definir permissões de acesso para links
    4. Trabalhar com protótipos
    5. Revisar protótipos
    6. Trabalhar com especificações de design
    7. Compartilhar especificações de design
    8. Inspecionar especificações de design
    9. Navegar em especificações de design
    10. Revisar e comentar especificações de design
    11. Exportar ativos de design
    12. Exportar e baixar ativos de especificações de design
    13. Compartilhamento em grupo para corporações
  6. Sistemas de design
    1. Sistemas de design com as Bibliotecas da Creative Cloud
    2. Trabalhar com ativos de documento no Adobe XD
    3. Trabalhar com as Bibliotecas da Creative Cloud no Adobe XD
    4. Migrar de ativos vinculados para as Bibliotecas da Creative Cloud
    5. Trabalhar com tokens de design 
    6. Usar ativos das Bibliotecas da Creative Cloud
  7. Documentos na nuvem
    1. Documentos na nuvem no Adobe XD
    2. Colaborar e coeditar designs
    3. Coeditar documentos compartilhados com você
  8. Integrações e plug-ins
    1. Trabalhar com ativos externos
    2. Trabalhar com ativos de design do Photoshop
    3. Copiar e colar ativos do Photoshop
    4. Importar ou abrir designs do Photoshop
    5. Trabalhar com ativos do Illustrator no Adobe XD
    6. Abrir ou importar designs do Illustrator
    7. Copiar vetores do Illustrator para o XD
    8. Plug-ins para o Adobe XD
    9. Criar e gerenciar plug-ins
    10. Integração do JIRA com o XD
    11. Plug-in do Slack para XD
    12. Plug-in do Zoom para XD
    13. Publicar o design do XD no Behance
  9. XD para iOS e Android
    1. Visualizar em dispositivos móveis
    2. Perguntas frequentes sobre o Adobe XD para dispositivos móveis
  10. Solução de problemas
    1. Problemas conhecidos e corrigidos
      1. Problemas conhecidos
      2. Problemas corrigidos
    2. Instalação e atualizações
      1. O XD aparece como não compatível no Windows
      2. Código de erro 191
      3. Código de erro 183
      4. Problemas ao instalar plug-ins XD
      5.  Solicitação para instalar e reinstalar o XD no Windows 10
      6. Problemas com a migração de preferências
    3. Inicialização e falha
      1.  O XD trava ao ser iniciado no Windows 10
      2.  O XD fecha ao fazer logoff da Creative Cloud
      3. Problema com o status da assinatura no Windows
      4. Aviso de aplicativo bloqueado ao iniciar o XD no Windows
      5. Geração de dump de falha no Windows
      6. Coleta e compartilhamento de registros de falhas
    4. Documentos na nuvem e bibliotecas da Creative Cloud
      1. Problemas com os documentos na nuvem do XD
      2. Problemas com componentes vinculados
      3. Problemas com bibliotecas e links
    5. Prototipagem, publicação e revisão
      1. Não é possível gravar interações de protótipo no macOS Catalina
      2. Problemas com fluxos de trabalho de publicação
      3. Links publicados não são exibidos nos navegadores
      4. Protótipos não são renderizados corretamente nos navegadores
      5. Painel de comentários aparecendo repentinamente em links compartilhados
      6. Não é possível publicar bibliotecas
    6. Importação, exportação e trabalho em outros aplicativos
      1. Exportação e importação no XD
      2. Arquivos do Photoshop no XD
      3. Arquivos do Illustrator no XD
      4. Exportar do XD para o After Effects
      5. Arquivos do Sketch no XD
      6. Aplicativos de terceiros não visíveis na exportação

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.

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

    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

  1. Alterne para o modo de Protótipo.
  2. Configure a prancheta Inicial para definir o ponto inicial do design.
  3. Insira um nome para cada fluxo para organizá-los melhor.
  4. Se o design consiste em vários fluxos, defina pranchetas Iniciais para cada um desses fluxos.
  5. 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:

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

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

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

    Combinar vários acionadores
    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.

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

  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.

Saiba mais

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

Mais itens semelhantes

Logotipo da Adobe

Fazer logon em sua conta

Links rápidos

Veja todos os seus planos Gerenciar seus planos

Avisos legais | Política de privacidade online