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 Controle 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 Controle para vincular:

  • Um objeto individual ou uma prancheta a outra prancheta.
  • Dois estados de componente.
  • Um estado de componente a outra prancheta.

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. Buscando atender a essa necessidade, o Adobe XD apresenta o recurso que permite definir um atalho de teclado como acionador de transições entre telas ou estados de componente em um protótipo.

Durante a vinculação de um protótipo, selecione Teclas e Controle. Em seguida, você poderá pressionar 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. O Adobe XD permite interagir com um protótipo do XD em um reprodutor de desktop ou um navegador da Web usando um controle conectado e criar protótipos com controles definidos como acionadores de transições entre telas ou estados de componente. 

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 Controle. Em seguida, você poderá pressionar qualquer botão no controle conectado para defini-la 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 Controle 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.
    • Ação: selecione uma das opções disponíveis: Transição, Animação automática, Sobreposição, Rolar para, Prancheta anterior, Reprodução de áudio ou Reprodução de fala.
    • Destino: defina a prancheta ou estado de componente de destino na lista suspensa.
    • Animação: selecione as opções na lista suspensa. Isso é aplicável apenas se você tiver definido uma Ação como Transiçã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.