Contrôle vocal dans Adobe XD : Comment l'implémenter avec succès

AdobeXDs'est établi comme un outil puissant pour le prototypage. Particulièrement intéressant est la possibilité d'intégrer la commande vocale. Cette fonction te permet d'interagir avec ton prototype par des commandes verbales. Dans ce guide, tu découvriras comment mettre en œuvre la commande vocale dans Adobe XD. Ainsi, ton prototype sera non seulement plus convivial, mais il élèvera également l'interactivité à un nouveau niveau.

Principales découvertes

• La commande vocale permet d'interagir avec des objets par des commandes vocales.
• Des indices visuels sont essentiels pour montrer aux utilisateurs que des commandes vocales peuvent être utilisées.
• Tu peux définir tes propres commandes vocales et déterminer leurs réactions dans le prototype.

Guide étape par étape

Créer ton plan de travail

Commence par créer un nouveau plan de travail. En choisissant une couleur de fond appropriée, donne à ton prototype un look moderne. Par exemple, tu peux choisir une teinte douce pour créer un environnement agréable.

Ajouter du texte

Il est maintenant temps de communiquer de manière pertinente. Utilise l'outil Texte pour ajouter un champ de texte où tu placeras la question « Que puis-je faire pour toi ? ». Formate le texte de manière attrayante pour le mettre en valeur. Une taille de police de 90 points est idéale pour être frappante sans paraître surchargée.

Indices visuels pour la commande vocale

Pour signaler à l'utilisateur que des commandes vocales sont possibles, tu devrais créer un symbole de microphone. Tu peux designer un microphone en dessinant un rectangle arrondi et en utilisant l'outil Ovale. Assure-toi de combiner les éléments décoratifs de manière à obtenir un design attrayant.

Ajouter le deuxième champ de texte

Maintenant, ajoute un autre champ de texte qui affiche des messages tels que « Ferme cette application ». Choisis un formatage de texte approprié pour le mettre en évidence. L'objectif est de montrer activement aux utilisateurs quelles saisies vocales ils peuvent effectuer.

Créer des animations

Pour ajouter des éléments dynamiques à ton application, tu devrais créer plusieurs plans de travail. Ceux-ci montreront les différents états de ton prototype lors de l'utilisation interactive. Tu peux définir la structure des animations dans le prototype, de sorte qu'une animation fluide soit déclenchée lors de la commande vocale.

Synchroniser les animations

Utilise les paramètres d'animation pour définir les transitions entre les écrans. Tu peux utiliser l'Auto-Animate pour t'assurer que l'animation se déroule de manière fluide pendant les phases de chargement. Cela garantit une expérience utilisateur positive pendant que les utilisateurs attendent leurs saisies.

Utilise les commandes vocales en mode prototype

Maintenant, passe en mode prototype et définis la transition de la commande vocale. Le déclencheur doit être réglé sur la commande vocale, et non sur le tapotement. Définis la commande « Ferme cette application » comme déclencheur pour la prochaine action. À chaque commande, tu dois attribuer une animation spécifique et une durée.

Tester le prototype

Une fois que tout est configuré, va au panneau de prévisualisation et teste ton application. Pendant le test, maintiens la barre d’espace enfoncée pour donner des commandes vocales. Vérifie si ton prototype réagit correctement aux saisies vocales et si les animations fonctionnent. Teste la commande « Ferme cette application » et observe le déroulement.

Résumé – Utiliser efficacement la commande vocale dans Adobe XD

Dans ce guide, tu as appris comment mettre en œuvre la commande vocale dans Adobe XD. Tu as suivi les étapes pour créer un prototype, ajouter des champs de texte et des indices visuels, ainsi que définir des animations et des transitions. Cette technique t'aidera à améliorer l'interaction utilisateur et à rendre ton prototype plus attrayant.