Création de prototypes à l’aide de la lecture et des commandes vocales

Rechercher
Adobe XD Guide d'utilisation

Sur cette page

S’applique à : Adobe XD

某些 Creative Cloud 应用程序、服务和功能在中国不可用。

Découvrez comment concevoir et créer des prototypes avec des commandes vocales, de la lecture vocale et de la lecture audio.

Adobe XD propose une solution simple permettant d’utiliser des commandes vocales pour déclencher une interaction entre des plans de travail ou les états de composant. À la manière dont vous utilisez un clic ou un appui comme déclencheur, vous pouvez utiliser des commandes vocales pour déclencher une action de prototype et la lecture vocale, la lecture audio ainsi que le défilement comme actions déclenchées. Par exemple, si vous intégrez la recherche vocale dans une application mobile, vous pouvez utiliser les commandes vocales et la lecture vocale pour effectuer automatiquement la transition entre les plans de travail. Vous pouvez optimiser les capacités de défilement dans la conception en utilisant l’action Défilement pour définir des liens d’ancrage et naviguer vers des sections spécifiques d’un plan de travail.

Ajout d’une commande vocale à un prototype

  1. Passez à l’onglet Prototype.

  2. Pour définir une interaction, cliquez sur le connecteur bleu sur l’objet source, l’état du composant ou le plan de travail. Dans l’Inspecteur Propriétés, définissez les options suivantes :

    • Déclencheur : définissez l’option sur Vocal.
    • Commande : saisissez la commande vocale sous forme de texte.
    • Action : définissez l’action sur Transition.
    • Destination : définissez le plan de travail de destination ou l’état du composant.
    • Animation : configurez les animations en fonction des options disponibles.
    • Accélération : configurez le rythme en fonction des options disponibles.
    • Durée : définissez la durée en secondes.
    Définition des déclencheurs vocaux
    Définition des déclencheurs vocaux pour les plans de travail

    A. Définir le déclencheur sur Voix B. Saisir la commande vocale sous forme de texte 

     

     

    Définir des déclencheurs vocaux pour les états des composants
    Définir des déclencheurs vocaux pour les états des composants

    A. Définir le déclencheur sur Voix B. Saisir la commande vocale sous forme de texte C. Définir la destination sur un état de composant 

  3. Procédez comme suit pour définir plusieurs interactions pour un objet, un état de composant ou un plan de travail :

    1. Sélectionnez-le et cliquez sur le bouton + sur le plan de travail. Vous pouvez également cliquer sur le bouton + dans l’inspecteur Propriété.
    2. Définissez des propriétés de texte dans l’inspecteur Propriétés.

     Rappelez-vous que vous pouvez appliquer les déclencheurs de type Appuyer, Faire glisser, Survoler et Temporisé une seule fois et les déclencheurs Vocal, Touches/Manette à plusieurs reprises. 

    2
    Utilisation de plusieurs déclencheurs pour définir plus d’interactions

  4. Pour visualiser les modifications mises à jour, sélectionnez l’icône Aperçu sur ordinateur.

  5. Pour prévisualiser la transition vers le plan de travail ou l’état de composant suivant, maintenez la barre d’espace enfoncée et répétez la commande vocale. 

Ajout de la lecture à un prototype

Ajout d’une lecture audio

Utilisez l’action de lecture audio pour ajouter des effets sonores à vos prototypes. Par exemple, une confirmation audio après la livraison réussie d’un e-mail. Vous pouvez importer un fichier audio sous forme de fichier MP3 ou WAV.

Pour ajouter une lecture audio à un objet ou un plan de travail, procédez comme suit :

  1. En mode Prototype, sélectionnez l’objet ou le plan de travail.

  2. Dans l’Inspecteur Propriétés, définissez les options suivantes :

    • Cliquez sur + pour ajouter l’interaction. 
    • Déclencheur : réglez sur Appui.
    • Action : réglez sur Lecture audio, puis naviguez jusqu’au fichier audio pour l’ajouter. 

     La lecture audio dans un lien Prototype pour un navigateur Safari ne fonctionne que si vous avez défini la lecture automatique dans les paramètres du navigateur.

Ajout de plusieurs actions à partir d’un seul déclencheur

Vous pouvez ajouter une action non transitoire telle qu’une lecture audio avec une action transitoire principale comme la transition ou l’animation automatique. Par exemple, le son du clic de la souris lorsque vous passez d’un plan de travail à un autre.

Pour ajouter plusieurs actions à votre prototype, procédez comme suit :

  1. En mode Prototype, sélectionnez l’objet ou le plan de travail auquel vous souhaitez ajouter plusieurs actions. 

  2. Dans l’Inspecteur Propriétés, définissez les options suivantes :

    • Cliquez sur + pour ajouter l’interaction. 
    • Déclencheur : réglez sur Appui.
    • Réglez le premier bouton Action + (action transitoire) sur Transition, Animation automatique, Superposition, Défilement ou Plan de travail précédent. 
    • Réglez le deuxième bouton Action + (action non transitoire) sur Lecture audio ou Lecture vocale. 
    plusieurs-actions
    Définir plusieurs actions sur un objet ou un plan de travail

     Le deuxième bouton Action + dans l’Inspecteur Propriétés n’est activé que lorsque vous réglez Appui comme déclencheur. Si vous définissez une action non transitoire telle que Lecture audio ou Lecture vocale comme première action, le deuxième bouton Action + n’est pas activé.

Ajout d’une lecture vocale

Utilisez la lecture vocale pour ajouter une lecture vocale à vos prototypes.

Pour ajouter une lecture vocale à un objet ou un plan de travail, procédez comme suit :

  1. Faites glisser le lien entre les plans de travail source et cible.

  2. Pour ajouter une lecture vocale, dans l’Inspecteur Propriétés, sélectionnez l’une des options suivantes :

    • Déclencheur : définissez l’option sur Temps.
    • Délai : définissez le délai (en secondes) pour spécifier à quel moment la lecture vocale doit s’exécuter. 
    • Action : définissez l’option sur Lecture vocale.
    • Voix : choisissez une voix pour la lecture vocale.
    • Voix : saisissez le texte que vous souhaitez lire.
    Utilisation de la lecture vocale
    Utilisation de la lecture vocale

    A. Définir le déclencheur sur Heure B. Définir le retardement sur Secondes C. Définir l’action sur Lecture vocale D. Définir la voix E. Ajouter la réponse vocale 

  3. Pour prévisualiser les modifications, sélectionnez l’icône Aperçu sur ordinateur.

  4. Pour prévisualiser la transition de la lecture vocale vers le plan de travail suivant, maintenez la barre d’espace enfoncée et répétez la commande vocale. 

    Prévisualisation de la lecture vocale
    Prévisualisation de la lecture vocale

Ajout d’une narration vocale à un prototype

  1. En mode Prototype, sélectionnez l’écran d’accueil où le début du flux est défini et cliquez sur le bouton Aperçu sur ordinateur.

     Les utilisateurs sous Mac ont la possibilité d’activer le microphone avant de lancer un enregistrement de l’aperçu. Les utilisateurs sous Windows peuvent l’activer via un contrôle au niveau du système d’exploitation dans Gamecenter.

  2. Sélectionnez la flèche déroulante à côté du bouton d’enregistrement et sélectionnez l’option Activer le microphone. Lors de l’enregistrement, vérifiez que l’icône rouge clignote bien sur l’interface.

  3. Vous pouvez conserver l’enregistrement au format mp4 et le partager avec les parties concernées ou le publier sur les réseaux sociaux. 

     Cela ne capture pas directement la sortie audio depuis XD, comme la lecture vocale. Le micro entend ou enregistre la sortie en fonction de la configuration de l’utilisateur (le micro du système entend les haut-parleurs du système reproduire la lecture vocale).

Partage et consultation du lien du prototype ou des spécifications techniques sur le Web

  1. Dans l'application de bureau, cliquez sur l'icône Partager dans le coin supérieur droit et sélectionnez Partager pour consultation (pour prototypes) ou Partager pour développement (pour spécifications techniques).

  2. Lors de la prévisualisation d’un prototype :

    • Sur un ordinateur de bureau ou portable : maintenez la barre d’espace enfoncée.
    • Dans l’application mobile Adobe XD (iOS/Android) : effectuez un appui long n’importe où sur l’écran. Placez votre doigt sur l’écran (sans le bouger), puis utilisez la commande vocale avant de soulever votre doigt.
    • Dans un navigateur mobile sur un smartphone : maintenez l’icône du microphone située dans le coin inférieur droit de l’écran.

  3. Lors de la prévisualisation de spécifications techniques, les développeurs peuvent lire ou afficher les commandes vocales et la lecture vocale sous forme de texte. 

     Les spécifications techniques ne prennent pas en charge les interactions vocales.

Résolution des problèmes d’interactions vocales à l’aide de notifications

Vous pouvez maintenant résoudre les problèmes d’interactions par commande vocale depuis l’aperçu de prototype sur votre bureau et sur le Web. Les parties prenantes qui examinent les spécifications techniques peuvent également utiliser cette fonctionnalité pour mieux comprendre comment interagir avec votre prototype dans Adobe XD.

Avant de parler à votre prototype pendant l’aperçu, assurez-vous que l’option de menu Afficher les notifications est activée. Par défaut, cette option de menu est activée lorsque vous démarrez Adobe XD.

Afficher les notifications
Affichage des notifications de prototype vocal

Chaque commande que vous donnez à Adobe XD est comparée à tous les déclencheurs vocaux présents sur le plan de travail ou l’état du composant actuel. Si aucune correspondance n’est trouvée, vous recevrez une notification indiquant Aucune correspondance trouvée pour : {la commande que vous avez donnée}. Voir ce qu’Adobe XD a entendu vous aide à déterminer pourquoi une correspondance n’est pas trouvée à chaque fois que vous parlez.

Il peut y avoir différentes raisons pour lesquelles aucune correspondance ne peut être trouvée. Peut-être que la commande vocale donnée n’est utilisée dans aucune interaction de ce plan de travail ou l’état du composant actuel. Ou peut-être que le service de conversion de parole en texte a renvoyé un résultat inattendu.

Par exemple, vous pouvez décider d’ajouter la phrase deux dollars comme commande vocale dans une interaction. Mais lorsque vous donnez la commande, le service de conversion de parole en texte peut renvoyer le résultat 2,00 $. En voyant cela dans la notification, vous saurez maintenant qu’il faut modifier l’interaction en utilisant des chiffres plutôt que des mots.