Guia do Usuário Cancelar

Criar protótipos com teclados e controles

Saiba como criar protótipos usando teclados e controles como acionadores.

acionadores de teclado e de controle

O Adobe XD permite o uso de atalhos de teclado e botões de controle para simular aplicativos de desktop nativos e criar protótipos de experiências de jogo ou de design ainda melhores. Durante a vinculação de um protótipo, você pode selecionar Teclas e gamepad na lista suspensa Acionador e atribuir uma tecla ou botão. Depois, você pode reproduzir ou gravar essas animações na janela de visualização, no navegador ou em aplicativos para dispositivos móveis e compartilhá-las com os demais envolvidos no projeto para colaborarem na revisão. Isso ajuda a acompanhar melhor o progresso do protótipo, além de melhorar a experiência do usuário como um todo.

Você pode selecionar Teclas e gamepad para:

  • Vincular um objeto individual ou uma prancheta a outra prancheta.
  • Vincular dois estados de componente.
  • Vincular um estado de componente a outra prancheta.
  • Reproduzir fala, áudio, vídeo ou Lottie.

Trabalhar com acionadores de teclado

Ao criar determinados protótipos de aplicativos de desktop, recursos de acessibilidade, atalhos ou jogos, você precisa de um teclado para interagir com o protótipo. No protótipo, use os atalhos do teclado como acionadores para fazer a transição entre telas ou estados de componentes ou reproduzir fala, áudio, vídeo ou Lottie.

Durante a vinculação de um protótipo, selecione Teclas e gamepad. Em seguida, pressione qualquer tecla para defini-la como o acionador de um objeto individual, um estado de componente ou toda a prancheta, podendo ter vários acionadores em uma mesma prancheta.

Acionador de teclado
Acionadores de teclado

A. Acionador definido para o atalho de teclado B. Tecla de atalho C. Ação definida como animação automática D. Prancheta de destino ou estado de componente 

Você também pode combinar uma tecla com um modificador para definir acionadores usando atalhos, como CMD+S e CTRL+R. No entanto, não é possível usar a barra de espaço e outras teclas de sistema, como as de função, repouso, volume e liga/desliga. Se você atribuir vários acionadores a um mesmo atalho na mesma prancheta, o último acionador será o único atribuído e funcional durante a visualização.

Trabalhar com acionadores de controle

A melhor maneira de testar um protótipo de jogo é usando um hardware real de controle de jogos. No protótipo, use gamepads como acionadores para fazer a transição entre telas ou estados de componentes ou reproduzir fala, áudio, vídeo ou Lottie. Em seguida, interaja com o protótipo em um executor de desktop ou navegador da Web usando um controlador de gamepad conectado.

Conecte um controle de Xbox (Series X/S ou One) por Bluetooth ou um controle de PlayStation (DualSense ou DualShock 4) por Bluetooth ou USB e selecione Teclas e gamepad. Em seguida, você poderá pressionar qualquer botão no controle conectado para defini-lo como o acionador de um objeto individual, um estado de componente ou toda a prancheta.

Acionador de controle
Acionadores de controle

A. Definir Acionador como Controle B. Botão de atalho do controle C. Ação definida como animação automática D. Prancheta de destino ou estado de componente 

 Use o mesmo controle para criar e testar o protótipo. Por exemplo, você só poderá testar um protótipo com um controle de Xbox no desktop ou na Web caso ele tenha sido criado usando um controle de Xbox.

Experiência em aplicativos e navegadores da Web para dispositivos móveis

O XD permite o uso de teclados e controles na visualização de protótipos da Web e aplicativos pelo desktop. Se você visualizar o protótipo em um aplicativo ou navegador para dispositivos móveis, poderá tocar para fazer a transição entre as pranchetas, já que não haverá um teclado ou controle conectado.

Controles e navegadores compatíveis

Compatibilidade com USB e Bluetooth:

Controle

Mac (USB)

Mac (Bluetooth)

Win (USB)

Windows (Bluetooth)

Xbox (Series X/S, One)

Não

Sim

Sim

Sim

PlayStation (DualSense, DualShock 4)  

Sim

Sim

Sim

Sim

Compatibilidade com navegador:

Controle

Chrome (Mac)

Chrome (Windows)

Edge Chromium (Mac)

Edge Chromium (Windows)

Edge (antigo)

IE

Firefox (Mac e Windows)

Safari

Xbox (USB)

Não

Sim

Não

Sim

Não

Não

Não

Não

Xbox (Bluetooth)

Sim

Sim

Sim

Sim

Não

Não

Não

Não

PlayStation (USB)

Sim

Sim

Sim

Sim

Não

Não

Não

Não recomendado

PlayStation (Bluetooth)

Sim

Sim

Sim

Sim

Não

Não

Não

Não recomendado

Criar protótipos usando teclas de teclado ou botões de controle

  1. Alterne para a guia Protótipo.

  2. Para definir uma interação, clique no conector azul no objeto, estado de componente ou prancheta de origem. Defina as seguintes opções no Inspetor de propriedades:

    • Acionador: defina o tipo de acionador como Teclas e gamepad e pressione uma tecla no teclado ou um botão no controle para definir um acionador, exceto a barra de espaço e outras teclas de sistema, como as de função, repouso, volume e liga/desliga.
    • Tipo: selecione qualquer um dos tipos de ação disponíveis: TransiçãoAnimação automáticaSobreposiçãoRolar paraPrancheta anteriorReprodução de áudio, Reprodução de fala, Reprodução de vídeo ou Reprodução do Lottie.
    • Destino: defina a prancheta ou estado de componente de destino na lista suspensa (não disponível em alguns tipos de ação).

    Assim que o tipo de ação for escolhido, defina as opções específicas para cada tipo de ação.

  3. Para definir mais de uma interação para um objeto, estado de componente ou prancheta:

    1. Selecione-o e clique no botão + na prancheta. Você também pode clicar no botão + no Inspetor de propriedades.
    2. Defina as propriedades no Inspetor de propriedades.

     Lembre-se de que você pode aplicar os acionadores Tocar, Arrastar, Focalizar e Tempo uma vez e VozTeclas e Controle várias vezes. 

    1

  4. Para visualizar as alterações no desktop, selecione o ícone de Visualizar no desktop  .

  5. Para compartilhar seu protótipo com os envolvidos no projeto, no aplicativo de desktop do XD, selecione Compartilhar > Configurações de exibição > Revisão de design ou Desenvolvimento.

Mais itens semelhantes

Receba ajuda com mais rapidez e facilidade

Novo usuário?