Alterne para o modo de Protótipo.
Última atualização em
27/01/2022
Saiba como criar designs e protótipos usando comandos de voz, reprodução de fala e reprodução de áudio.
Use comandos de voz para acionar uma interação entre pranchetas ou estados de componentes ou para reproduzir fala, áudio vídeo ou Lottie.
Defina Voz como o gatilho e insira o comando de voz. Como tipo de ação, escolha 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. Por exemplo, se estiver integrando uma pesquisa por voz em um aplicativo para dispositivo móvel, use Voz e Reprodução de fala para fazer a transição automaticamente entre as pranchetas.
Adicionar um comando de voz a um protótipo
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 como Voz.
- Comando: digite o comando de voz como texto.
- Ação: defina como Transição.
- Destino: defina a prancheta ou estado de componente de destino.
- Animação: defina as animações de acordo com as opções disponíveis.
- Atenuação: defina a atenuação de acordo com as opções disponíveis.
- Duração: defina a duração em segundos.
A. Definir Acionador como Voz B. Inserir comando de voz como texto
A. Definir Acionador como Voz B. Inserir comando de voz como texto C. Definir Destino como um estado de componente
Para definir mais de uma interação para um objeto, estado de componente ou prancheta:
- Selecione-a e clique em + . Como alternativa, clique em + no Inspetor de propriedades.
- Defina as propriedades no Inspetor de propriedades.
Você pode aplicar os acionadores Tocar, Arrastar, Focalizar e Tempo uma vez e Voz, Teclas e Controle várias vezes.
Para ver as alterações que você atualizou, selecione o botão Visualizar no desktop
.
Para visualizar a transição para a próxima prancheta ou estado de componente, segure a barra de espaço e repita o comando de voz.
Adicionar reprodução a um protótipo
Adicionar uma reprodução de áudio
Use a ação Reprodução de áudio para adicionar efeitos sonoros aos seus protótipos. Por exemplo, uma confirmação de áudio após a entrega bem-sucedida de um email. Você pode importar um áudio como MP3 ou arquivo WAV.
Para adicionar reprodução de áudio em um objeto ou prancheta, execute as seguintes etapas:
No modo Protótipo, selecione o objeto ou a prancheta.
No Inspetor de propriedades, defina as seguintes opções:
- Clique em + para adicionar a interação.
- Acionador: defina como Tocar.
- Ação: defina como Reprodução de áudio e, em seguida, procure e adicione o arquivo de áudio.
A reprodução automática de áudio funciona no Safari apenas se você habilitou a reprodução automática nas configurações do Safari. Para habilitar a reprodução automática para links de protótipo XD, consulte Ativar reprodução automática de som no Safari.
Adicionar várias ações usando um único acionador
Você pode adicionar uma ação não transitória, como uma Reprodução de áudio, com uma ação transitória primária, como Transição ou Animação automática no mesmo acionador. Por exemplo, um som de clique do mouse ao passar de uma prancheta para outra.
Para adicionar várias ações ao protótipo, execute as seguintes etapas:
No modo de Protótipo, selecione o objeto ou a prancheta na qual deseja adicionar várias ações.
No Inspetor de propriedades, defina as seguintes opções:
- Clique em + para adicionar a interação.
- Acionador: defina como Tocar.
- Defina o primeiro botão Ação + (ação transitória) como Transição, Animação automática, Sobreposição, Rolar para ou Prancheta anterior.
- Defina o segundo botão Ação + (ação não transitória) como Reprodução de áudio ou Reprodução de fala.
O segundo botão Ação + no Inspetor de propriedades é habilitado somente quando você define Tocar como o acionador. Além disso, se você definir uma ação não transitória, como Reprodução de áudio ou Reprodução de fala como a primeira ação, o segundo botão Ação + não será habilitado.
Adicionar uma reprodução de fala
Para adicionar reprodução de fala em um objeto ou uma prancheta, execute as seguintes etapas:
Arraste o fio da prancheta de origem para a prancheta de destino.
Para adicionar uma reprodução de fala, no Inspetor de propriedades, defina as seguintes opções:
- Acionador: defina como Tempo.
- Atraso: defina o atraso (em segundos) para definir quando a reprodução de fala deve ser iniciada.
- Ação: defina como Reprodução de fala.
- Voz: selecione uma voz para a reprodução de fala.
- Fala: digite o texto desejado para a reprodução da fala.
A. Definir Acionador como Tempo B. Definir o atraso em segundos C. Definir Ação como Reprodução de fala D. Definir voz E. Digite o texto que deseja reproduzir.
Para visualizar as alterações, clique no botão Visualizar no desktop .
Para exibir a transição de reprodução de fala para a próxima prancheta, segure a barra de espaço e repita o comando de voz.
Adicionar uma narração a um protótipo
No modo de Protótipo, selecione a Tela inicial na qual o início do fluxo é definido e clique no botão Visualizar no desktop.
Selecione a seta suspensa ao lado do botão Gravar e selecione a opção Ativar microfone (macOS). Se estiver usando Windows, ative o microfone por meio de um controle n nível do SO em Gamecenter. Durante a gravação, observe o ícone vermelho que pisca na interface.
Salve a gravação como MP4 e compartilhe com os envolvidos no projeto ou publique-a nas redes sociais.
Isso não captura diretamente a saída de áudio do XD, como a reprodução de fala. O microfone ouvirá ou gravará a saída dependendo da configuração do usuário (o microfone do sistema captará os alto-falantes do sistema tocando a reprodução de fala).
Compartilhar e revisar protótipos ou especificações de design na Web
No aplicativo de desktop, clique no ícone Compartilhar na parte superior direita e selecione Revisão de design (para protótipos) ou Desenvolvimento(para especificações de design).
Quando visualizar um protótipo em um:
- Desktop ou notebook: segure a barra de espaço.
- Aplicativo Adobe XD para dispositivos móveis (iOS/Android): use um gesto de pressionar em qualquer lugar da tela. Coloque o dedo na tela (sem movê-lo) e use o comando de voz antes de levantar o dedo.
- Navegador móvel em smartphones: segure o ícone de microfone localizado no canto inferior direito da tela.
Ao visualizar especificações de design, os desenvolvedores podem ler ou exibir os comandos de voz e a reprodução de fala como texto.
Especificações de design não são compatíveis com interações de voz.
Por padrão, a reprodução automática de som está desabilitada no Safari. Para ativar a reprodução automática de som em links de protótipo do XD, siga as etapas abaixo:
- Abra um link de protótipo do XD no Safari.
- Na barra de menu do macOS, navegue até Safari > Preferências.
- Na guia Websites, selecione Reprodução automática no painel esquerdo.
- Na janela Permitir que os sites abaixo reproduzam mídia automaticamente, selecione Permitir reprodução automática ao lado de xd.adobe.com
Esta configuração garante que o som nos links de protótipo do XD funcione automaticamente no futuro.
Ao executar um protótipo no Chrome, se você receber um erro informando que houve um problema com a ação de reprodução, habilite o som nas configurações do Chrome.
Siga as etapas abaixo para habilitar o som nos links de protótipo do XD nas configurações do Chrome:
- Na barra de endereço do Chrome, digite chrome://settings/content/sound. Pressione Enter.
- Na seção Comportamentos personalizados, clique em Adicionar ao lado de Sem autorização para reproduzir som e adicione https://xd.adobe.com.
Esta configuração garante que o áudio seja reproduzido em links de protótipo do XD no futuro.
Solução de problemas de interações de voz usando notificações
Agora, você pode solucionar problemas de interações com comandos de voz durante as visualizações de protótipo no desktop ou na Web. Os envolvidos no projeto, que revisam as especificações de design, também podem usar este recurso para compreender melhor como interagir com os protótipos no Adobe XD.
Antes de interagir com seu protótipo na visualização, verifique se a opção de menu Mostrar notificações está marcada. Por padrão, essa opção já está marcada quando você inicia o Adobe XD.
Cada comando falado ao XD é comparado a todos os acionadores de voz presentes na prancheta ou estado de componente atual. Se nenhuma correspondência for encontrada, você receberá a seguinte notificação: Nenhuma correspondência encontrada para: {o comando falado}. Saber o que o XD ouviu ajuda a determinar por que uma correspondência não está sendo encontrada quando você fala.
Pode haver diferentes razões pelas quais uma correspondência não pode ser encontrada. Talvez o comando de voz falado não esteja sendo usado em nenhuma interação nessa prancheta ou estado de componente. ou o serviço de conversão de fala em texto esteja retornando um resultado inesperado.
Por exemplo, você pode adicionar a frase dois dólares como um comando de voz em uma interação. Mas, quando falado, o serviço de conversão de fala em texto pode retornar o resultado US$ 2,00. Como numerais substituíram as palavras na notificação, você deverá alterar a interação para usar números em vez de palavras.
Mais itens semelhantes
Criar protótipos de UX com o Adobe XD
Crie modelos interativos para sites e aplicativos para dispositivos móveis.
