Control por voz en Adobe XD: Así lo implementas con éxito

AdobeXDse ha establecido como una herramienta potente para la creación de prototipos. Especialmente interesante es la posibilidad de integrar control por voz. Esta función te permite diseñar interacciones con tu prototipo mediante comandos verbales. En esta guía, aprenderás cómo implementar el control por voz en Adobe XD. De este modo, tu prototipo no solo será más fácil de usar, sino que también llevará la interactividad a un nuevo nivel.

Principales conclusiones

• El control por voz permite la interacción con objetos a través de comandos de voz.
• Las pistas visuales son cruciales para hacerle saber a los usuarios que se pueden usar comandos de voz.
• Puedes definir tus propios comandos de voz y establecer sus reacciones en el prototipo.

Guía paso a paso

Crea tu Artboard

Comienza creando un nuevo Artboard. Elige un color de fondo adecuado y dale a tu prototipo un aspecto moderno. Aquí puedes, por ejemplo, optar por un tono suave para crear un ambiente agradable.

Agregar texto

Ahora es el momento de comunicarte de manera relevante. Usa la herramienta de texto para agregar un cuadro de texto en el que coloques la pregunta "¿Qué puedo hacer por ti?". Formatea el texto de manera atractiva para destacarlo. Un tamaño de fuente de 90 puntos es ideal para ser llamativo sin parecer recargado.

Pistas visuales para control por voz

Para señalar al usuario que los comandos de voz son posibles, deberías crear un símbolo de micrófono. Puedes diseñar un micrófono ilustrativo dibujando un rectángulo redondeado y utilizando la herramienta de círculos. Asegúrate de combinar elementos decorativos de tal manera que resulten en un diseño atractivo.

Agrega el segundo cuadro de texto

Ahora agrega otro cuadro de texto que muestre mensajes como "Cierra esta aplicación". Elige un formato de texto adecuado para destacarlo. El objetivo es mostrar activamente a los usuarios qué entradas de voz pueden dar.

Crear animaciones

Para agregar elementos dinámicos a tu aplicación, deberías crear varios Artboards. Estos mostrarán los diferentes estados de tu prototipo durante el uso interactivo. Puedes establecer la estructura de las animaciones en el prototipo, de modo que se inicie una animación fluida al dar un comando de voz.

Sincroniza las animaciones

Usa las configuraciones de animación para establecer las transiciones entre las pantallas. Puedes usar Auto-Animate para asegurarte de que la animación se reproduzca sin problemas durante las fases de carga. Esto proporciona una experiencia de usuario positiva mientras los usuarios esperan sus entradas.

Usa comandos de voz en el modo prototipo

Ahora cambia al modo prototipo y define la transición del control por voz. El disparador debe estar configurado para el control por voz, no para tocar. Establece el comando "Cierra esta aplicación" como disparador para la siguiente acción. Debes asignar a cada comando una animación específica y una duración.

Prueba el prototipo

Una vez que todo esté configurado, dirígete al panel de vista previa y prueba tu aplicación. Mantén presionada la barra espaciadora durante la prueba para dar comandos de voz. Verifica si tu prototipo responde correctamente a las entradas de voz y si las animaciones funcionan. Prueba el comando "Cierra esta aplicación" y observa el flujo.

Resumen - Cómo utilizar eficazmente el control por voz en Adobe XD

En esta guía, has aprendido cómo implementar el control por voz en Adobe XD. Has pasado por los pasos para crear un prototipo, agregar cuadros de texto y pistas visuales, así como establecer animaciones y transiciones. Esta técnica te ayudará a mejorar la interacción del usuario y hacer tu prototipo más atractivo.