Conozca cómo diseñar y crear prototipos mediante comandos de voz, reproducción de voz y reproducción de audio.

Adobe XD proporciona una solución fácil de usar que permite utilizar comandos de voz para desencadenar una interacción entre mesas de trabajo y estados del componente. Al igual que cuando se usa Clic Tocar como Desencadenador, puede utilizar Comandos de voz para desencadenar una interacción de prototipo y una Reproducción de voz, Reproducción de audio Desplazarse a como acciones desencadenadas. Por ejemplo, si está integrando la búsqueda por voz en una aplicación móvil, puede usar Comandos de voz y Reproducción de voz para realizar una transición entre mesas de trabajo. Para mejores capacidades de desplazamiento dentro del diseño, puede usar Desplazarse a para configurar vínculos de anclaje y navegar a secciones específicas en una mesa de trabajo.

Añadir un comando de voz a un prototipo

  1. Cambie a la pestaña Prototipo.

  2. Para definir una interacción, haga clic en el conector azul del objeto de origen, el estado del componente o la mesa de trabajo. Establezca las siguientes opciones en el Inspector de propiedades:

    • Desencadenante: establecer en Voz.
    • Comando: introducir el Comando de voz como texto.
    • Acción: establecer en Transición.
    • Destino: establecer la mesa de trabajo de destino o el estado del componente.
    • Animación: establecer animaciones según las opciones disponibles.
    • Suavizado: establecer el suavizado según las opciones disponibles.
    • Duración: establecer la duración en Segundos.
    Establecer desencadenadores por voz
    Establecer desencadenadores por voz para mesas de trabajo

    A. Establecer los desencadenadores en forma de voz B. Introducir comandos de voz como texto 

     

     

    Establecer desencadenadores de voz para estados del componente
    Establecer desencadenadores de voz para estados del componente

    A. Establecer los desencadenadores en forma de voz B. Introducir comandos de voz como texto C. Establecer Destino en un estado del componente 
  3. Para definir más de una interacción para un objeto, estado del componente o mesa de trabajo:

    1. Selecciónelo y haga clic en el botón + en la mesa de trabajo. También puede hacer clic en el botón + en el Inspector de propiedades.
    2. Establezca las propiedades en el Inspector de propiedades.

     Recuerde que puede aplicar los desencadenadores de Pulsar, Arrastrar, Pasar el ratón, y Hora una vez y VozTeclas y mando de juego muchas veces. 

    2
    Usar múltiples desencadenadores para definir más interacciones
  4. Para ver los cambios actualizados, seleccione el icono Vista previa de escritorio .

  5. Para obtener una vista previa de la transición a la siguiente mesa de trabajo o estado del componente, mantenga presionada la barra espaciadora y repita el comando de voz.

Añadir reproducción a un prototipo

Añadir una reproducción de audio

Use la acción Reproducción de audio para añadir efectos de sonido a sus prototipos. Por ejemplo, una confirmación de audio después de la entrega correcta de un correo electrónico. Puede importar un audio como MP3 o archivo WAV.

Para añadir reproducción de audio en un objeto o mesa de trabajo, realice los siguientes pasos:

  1. En el modo Prototipo, seleccione el objeto o la mesa de trabajo.

  2. En el Inspector de propiedades, establezca las siguientes opciones:

    • Haga clic en + para añadir la interacción. 
    • Desencadenador: establézcalo en Pulsar.
    • Acción: se establece en Reproducción de audio, y luego se busca y se añade el archivo de audio. 

     La reproducción de audio en un vínculo de prototipo para un explorador Safari solo funciona si ha configurado la reproducción automática en la configuración del explorador.

Añadir múltiples acciones desde un solo desencadenador

Puede añadir una acción sin transición, como una Reproducción de audio con una acción de transición primaria, como Transición o Animación automática. Por ejemplo, al hacer clic con el ratón se emite un sonido al pasar de una mesa de trabajo a otra.

Para añadir múltiples acciones a su prototipo, realice los siguientes pasos:

  1. En el modo Prototipo, seleccione el objeto o la mesa de trabajo en la que desea añadir varias acciones. 

  2. En el Inspector de propiedades, establezca las siguientes opciones:

    • Haga clic en + para añadir la interacción. 
    • Desencadenador: establézcalo en Pulsar.
    • Establezca el botón de la primera Acción + (acción de transición) en Transición, Animación automática, Superposición, Desplazarse a o Mesa de trabajo anterior
    • Establezca el botón de la segunda Acción + (acción sin transición) en Reproducción de audio o Reproducción de voz
    acciones múltiples
    Establecer múltiples acciones para un objeto o una mesa de trabajo

     El botón de la segunda Acción + en el Inspector de propiedades está habilitado solo cuando establece Tocar como el desencadenador. Además, si establece una acción sin transición, como Reproducción de audio o Reproducción de voz como primera acción, el botón de la segunda Acción + no está habilitado.

Añadir una reproducción de voz

Use la reproducción de voz para añadir una reproducción de voz a sus prototipos.

Para añadir reproducción de voz en un objeto o en una mesa de trabajo, realice los siguientes pasos:

  1. Arrastre el cable desde la mesa de trabajo de origen hasta la mesa de trabajo de destino.

  2. Para añadir una reproducción de voz, en el Inspector de propiedades, establezca las siguientes opciones:

    • Desencadenador: establézcalo en Tiempo.
    • Retardo de tiempo: el retardo de tiempo se establece (en segundos) para definir cuándo se debe ejecutar la reproducción de voz. 
    • Acción: establézcala en Reproducción de voz.
    • Voz: elija una voz para la reproducción de voz.
    • Voz: escriba el texto que desea reproducir.
    Usar reproducción de voz
    Usar reproducción de voz

    A. Establecer el desencadenador en Tiempo B. Establecer el retardo de tiempo en Segundos C. Establecer la acción en Reproducción de voz D. Establecer voz E. Añadir la respuesta de voz 
  3. Para obtener una vista previa de los cambios, seleccione el icono Vista previa de escritorio.

  4. Para obtener una vista previa de la transición de la reproducción de voz a la siguiente mesa de trabajo, mantenga presionada la barra espaciadora y repita el comando de voz. 

    Vista previa de la reproducción de voz
    Vista previa de la reproducción de voz

Añadir una narración de voz a un prototipo

  1. En modo Prototipo, seleccione la Pantalla Inicio donde se haya establecido el inicio del flujo y haga clic en el botón Vista previa de escritorio.

     Los usuarios de Mac tienen la opción de habilitar el micrófono antes de iniciar una grabación de vista previa; los usuarios de Windows pueden habilitar esto a través de un control en el nivel de sistema operativo en Gamecenter.

  2. Seleccione la flecha desplegable próxima al botón de grabación y elija la opción Habilitar el micrófono. Al grabar, observe el icono rojo que parpadea en la interfaz.

  3. Puede guardar la grabación como archivo mp4 y compartirla con los interesados o publicarla en las redes sociales. 

     En realidad, esto no captura directamente la salida de audio de XD, como la reproducción de voz. El micrófono escucha o graba la salida en función de la configuración del usuario (el micrófono del sistema escucharía a los altavoces del sistema reproducir la reproducción de la voz).

Compartir y revisar el vínculo de prototipo o especificaciones de diseño en la Web

  1. En la aplicación de escritorio, haga clic en el icono Compartir de la parte superior derecha y elija Compartir para revisión (para prototipos) o Compartir para desarrollo (para especificaciones de diseño).

  2. Al obtener una vista previa de un prototipo en:

    • Escritorio o portátil: mantenga pulsada la barra espaciadora.
    • Aplicación móvil Adobe XD (iOS/Android): utilice un gesto de pulsación larga en cualquier lugar de la pantalla. Coloque el dedo en la pantalla (sin moverlo) y use el comando de voz antes de volver a levantar el dedo.
    • Navegador móvil en un smartphone: mantenga presionado el icono del micrófono ubicado en la esquina inferior derecha de la pantalla.
  3. Al obtener una vista previa de especificaciones de diseño, los desarrolladores pueden leer o ver los comandos de voz y la reproducción de voz como texto. 

     Las especificaciones de diseño no admiten interacciones de voz.

Solucionar los problemas de interacción de voz utilizando notificaciones

Ya es posible solucionar problemas de las interacciones desencadenadas por voz durante las vistas previas de prototipo en escritorio o la Web. Los interesados que revisan las especificaciones de diseño también pueden usar esta función para conocer mejor cómo interactuar con su prototipo en Adobe XD.

Antes de hablar al prototipo durante la vista previa, asegúrese de que esté marcada la opción de menú Mostrar notificaciones. De forma predeterminada, esta opción del menú está en estado marcado al iniciar Adobe XD.

Mostrar notificaciones
Mostar notificaciones de prototipos de voz

Cada comando que diga a Adobe XD se compara frente a todos los desencadenadores de voz presentes en la mesa de trabajo o estado del componente actuales. Si no se encuentra ninguna coincidencia, recibirá una notificación indicando No se han encontrado coincidencias para: {el comando que haya pronunciado}. El ver qué es lo que ha escuchado Adobe XD ayuda a determinar por qué no se produce una coincidencia cada vez que hable.

Puede haber diferentes razones por las que no se puede encontrar una coincidencia. Quizás el comando de voz pronunciado no se esté utilizando en ninguna interacción de esa mesa de trabajo o estado del componente. O tal vez el servicio de voz a texto está devolviendo un resultado inesperado.

Por ejemplo, puede haber decidido agregar la frase dos dólares como comando de voz en una interacción. Sin embargo, al pronunciarla, el servicio de voz a texto puede devolver un resultado de $2,00. Al ver esto en la notificación, ahora sabrá que debe cambiar la interacción para usar números en lugar de palabras.