Guia do Usuário Cancelar

Criar protótipos usando vídeos

  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. Gerenciamento de cores
    5. Requisitos de sistema
      1. Requisitos de hardware e software
      2. Adobe XD, Big Sur e Apple Silicon | macOS 11
    6. Noções básicas sobre a área de trabalho
    7. Alterar o idioma do aplicativo no Adobe XD
    8. Acessar kits de design de interface
    9. Acessibilidade no Adobe XD
    10. Atalhos de teclado
    11. Dicas e truques
  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
    14. Fazer backup ou transferir ativos do XD
  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 de experiências interativas com vídeos no Adobe XD.

É possível escolher uma opção de reprodução predefinida ou personalizada para o seu vídeo e defina como outras interações funcionam com ele. Conforme você explora as opções e interações de reprodução de vídeo, verifique alguns exemplos de prototipagem realistas envolvendo vídeos.

Antes de começar

Definir uma opção de reprodução

Definir uma opção de reprodução para o seu vídeo
Definir uma opção de reprodução para o vídeo

Depois de importar seu vídeo para o XD, controle quando seu vídeo será reproduzido. Siga estas etapas para definir uma opção de reprodução:

  1. No modo de Design, selecione o vídeo na tela.
  2. Na seção Vídeo do Inspetor de propriedades, escolha uma predefinição:

Opções de reprodução e interações associadas

Quando você define uma opção de reprodução para o seu vídeo no modo de Design, as interações associadas são definidas automaticamente no modo de Protótipo.

Reproduzir ao tocar

Quando a opção Reproduzir ao tocar é escolhida, o acionador Tocar é definido automaticamente com a ação padrão como Alternar reprodução/pausa.

Reproduzir ao tocar - Modo de design

Reproduzir ao tocar - Modo de protótipo

Reproduzir automaticamente

Quando a opção Reproduzir automaticamente é escolhida, o acionador de Tempo é definido automaticamente com um atraso de 0 segundos.

Reproduzir automaticamente - Modo de design

Reproduzir automaticamente - Modo de protótipo

Sem reprodução

Quando a opção Sem reprodução é escolhida, nenhuma interação é criada no modo de protótipo.

Personalizar a reprodução de vídeo

Escolher Editar reprodução para personalizar a reprodução
Escolher Editar reprodução para personalizar a reprodução

Para personalizar a reprodução de vídeo, na seção Vídeo do Inspetor de propriedades, selecione Editar reprodução.

Ao selecionar Editar reprodução, você muda automaticamente para o modo de Protótipo.

No modo de Protótipo, opte por qualquer uma destas personalizações:

Escolha um destes acionadores: Tempo (defina Atraso em mais de 0 segundos), Teclas e controle ou Voz.

Escolher o acionador Tempo com Atraso definido em mais de 0 segundos
Escolher o acionador Tempo com Atraso definido em mais de 0 segundos

Altere a ação de reprodução de vídeo do acionador Tocar de Alternar reprodução/pausa para Reproduzir ou Pausar.

Personalizar a reprodução escolhendo o acionador Tocar com Reproduzir ou Pausar como a ação
Escolher o acionador Tocar com Reproduzir ou Pausar como a ação

 Você não pode definir um vídeo para ser reproduzido com um acionador Arrastar.

Usar a reprodução de vídeo com outras interações

Vídeo com um acionador Fim da reprodução que faz a transição para uma prancheta
Vídeo com um acionador Fim da reprodução que faz a transição para uma prancheta

Depois de definir uma opção de reprodução para seu vídeo, explore a conexão com outras interações:

  • Defina uma interação Fim da reprodução do vídeo para acionar uma ação após a reprodução.
  • Reproduza um vídeo e vários arquivos Lottie ao mesmo tempo.

Para saber mais sobre prototipagem no XD, consulte Criar protótipos interativos.

Compreender as interações e o comportamento de reprodução de vídeo 

Seu vídeo é interrompido ou continua a ser reproduzido com base nas interações que você definiu para outros objetos:

  • O vídeo para de ser reproduzido quando outras ações além de Animação automática e Lottie são acionadas.
  • Se quiser que o vídeo continue a ser reproduzido quando você passar o mouse ou tocar em outros objetos, use a Animação automática como a ação para os acionadores Passar o mouse e Tocar.

Acionadores de vídeo e tempo

Em qualquer prancheta:

  • É possível estabelecer vários acionadores de tempo em sequência com base em seu atraso.
  • Você pode configurar a reprodução simultânea de um vídeo e várias animações Lottie após o mesmo atraso. Também é possível configurar a reprodução simultânea deles automaticamente (atraso definido como 0 segundos).
  • Se você definir os acionadores de tempo com o mesmo atraso na prancheta, vídeo e Lottie, a prioridade será: prancheta > vídeo > Lottie.

Exemplos de prototipagem

Agora que você já sabe como definir uma opção de reprodução para seu vídeo e conectá-lo a outras interações, vamos usar alguns exemplos.

Baixar arquivos de amostra

Exemplo 1: Criar o protótipo do botão Maximizar para o vídeo

Saiba como criar o protótipo do botão Maximizar para o vídeo.

Ex 1-artboard 1

  1. No modo de design, importe o vídeo Tip 1 e coloque-o na prancheta. Defina-o como Reproduzir ao tocar.
  2. Posicione o ícone Maximizar (fornecido na seção Ícones à direita das pranchetas) no canto inferior direito do vídeo. 
  3. No modo de protótipo, conecte o ícone Maximizar ao Ex 1-artboard 2 e defina-o como um acionador Tocar com o Tipo de ação como Animação automática.

Ex 1-artboard 2

  1. No modo de design, importe o vídeo Tip 1 e coloque-o na prancheta (vídeo em tela inteira). Defina-o como Reproduzir ao tocar.
  2. Coloque o ícone Minimizar (fornecido na seção Ícones) no canto inferior direito do vídeo. 
  3. No modo de protótipo, conecte o ícone Minimizar ao Ex 1-artboard 1 e defina-o como um acionador Tocar com o Tipo de ação como Animação automática.

Ao concluir a conexão das interações, visualize o protótipo e verifique as interações.

Exemplo 2: Criar o protótipo de reprodução

Saiba como reproduzir vídeos consecutivos no XD.

Ex 2-artboard 1

  1. No modo de design, importe o vídeo Intro e coloque-o na seção de introdução. Defina-o como Sem reprodução.
  2. Importe os vídeos Tip 1 e Tip 2 e coloque-os na seção Dicas. Defina-os como Sem reprodução.
  3. Coloque uma cópia do botão Reproduzir (fornecido na seção Ícones) em todos os vídeos.
  4. No modo de protótipo:
  • Conecte o botão Reproduzir no vídeo Intro ao Ex 2-artboard 2.
  •  Conecte o botão Reproduzir no vídeo Tip 1 ao Ex 2-artboard 3.
  • Conecte o botão Reproduzir no vídeo Tip 2 ao Ex 2-artboard 4. 

Defina-os como um acionador Tocar com Tipo de ação como Transição.

Ex 2-artboard 2

  1. No modo de design, importe o vídeo Intro e coloque-o acima da seção Dicas. Defina-a como Reproduzir automaticamente.
  2. No modo de protótipo, conecte o vídeo ao Ex 2-artboard 3 e defina-o como um acionador Fim da reprodução com Tipo de ação como Transição.

Ex 2-artboard 3

  1. No modo de design, importe o vídeo Tip 1 e coloque-o acima da seção Tip 1. Defina-a como Reproduzir automaticamente.
  2. No modo de protótipo, conecte o vídeo ao Ex 2-artboard 4 e defina-o como um acionador Fim da reprodução com Tipo de ação como Transição.

Ex 2-artboard 4

  1. No modo de design, importe o vídeo Tip 2 e coloque-o acima da seção Tip 2. Defina-a como Reproduzir automaticamente.
  2. No modo de protótipo, conecte o vídeo ao Ex 2-artboard 1 e defina-o como um acionador Fim da reprodução com Tipo de ação como Transição.

Ao concluir a conexão das interações, visualize o protótipo e verifique as interações.

Mais exemplos

Explore mais exemplos envolvendo vídeos, animações de Lottie e estados do componente.

Saiba mais

Assista a este vídeo de 2 minutos para conhecer algumas dicas profissionais sobre como trabalhar com vídeos no XD.

Recursos relacionados

Tem alguma dúvida ou sugestão?

pergunte à comunidade

Você tem alguma dúvida ou sugestão? Participe da comunidade do Adobe XD. Gostaríamos muito de ver suas criações e ouvir o que você tem a dizer!

 Adobe

Receba ajuda com mais rapidez e facilidade

Novo usuário?

Adobe MAX 2024

Adobe MAX:
a conferência da criatividade

14 a 16 de outubro, Miami Beach e online

Adobe MAX

A conferência da criatividade

14 a 16 de outubro, Miami Beach e online

Adobe MAX 2024

Adobe MAX:
a conferência da criatividade

14 a 16 de outubro, Miami Beach e online

Adobe MAX

A conferência da criatividade

14 a 16 de outubro, Miami Beach e online