Guide d'utilisation Annuler

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

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

Vous pouvez utiliser des commandes vocales pour déclencher une interaction entre les plans de travail ou les états de composant, ou pour une lecture vocale, audio, vidéo ou Lottie.

Définissez Voix comme déclencheur et entrez la commande vocale. Comme type d’action, choisissez Transition, Animation automatique, Superposition, DéfilementPlan de travail précédent, Lecture audioLecture vocale, Lecture vidéo ou Lecture Lottie. 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.

Ajout d’une commande vocale à un prototype

  1. Passez en mode 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. Définissez les options suivantes dans l’Inspecteur Propriétés :

    • Déclencheur : définissez l’option sur Voix.
    • Commande : entrez 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 l’icône +. Alternativement, cliquez sur l’icône + dans l’Inspecteur Propriétés.
    2. Définissez des propriétés de texte dans l’Inspecteur Propriétés.

     Vous pouvez appliquer les déclencheurs de type Appuyer, Faire glisser, Survoler et Temporisé une seule fois et les déclencheurs Voix et 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 le bouton 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 d’une option de lecture à un prototype

Ajout d’une option de lecture audio

Utilisez l’action 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 option de 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 : définissez sur Appuyer.
    • Action : définissez sur Lecture audio, puis naviguez jusqu’au fichier audio pour l’ajouter. 

     La lecture automatique d’un fichier audio ne fonctionne dans Safari que si vous avez activé la lecture automatique dans les paramètres de Safari. Pour activer la lecture automatique du son associé aux liens de prototypes XD, consultez la section Activation de la lecture automatique du son dans Safari.

Ajout de plusieurs actions sur un seul déclencheur

Vous pouvez ajouter une action non transitoire telle que Lecture audio avec une action transitoire principale telle que Transition ou Animation automatique sur un seul déclencheur. 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 : définissez sur Appuyer.
    • Définissez le premier bouton Action + (action transitoire) sur Transition, Animation automatique, Superposition, Défilement ou Plan de travail précédent
    • Définissez 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 définissez le déclencheur Appuyer. En outre, 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 option de lecture vocale

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

  1. Reliez 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 sur Délai.
    • Délai : définissez le délai (en secondes) pour spécifier à quel moment la lecture vocale doit démarrer. 
    • Action : définissez sur Lecture vocale.
    • Voix : choisissez une voix pour la lecture vocale.
    • Voix : entrez le texte que vous souhaitez pour la lecture vocale.
    Utilisation de la lecture vocale
    Utilisation de la lecture vocale

    A. Définir le déclencheur sur Délai B. Définir le délai en secondes C. Définir l’action sur Lecture vocale D. Définir la voix  E. Entrez le texte que vous souhaitez pour la lecture vocale. 

  3. Pour prévisualiser les modifications, sélectionnez le bouton 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.

  2. Sélectionnez la flèche déroulante à côté du bouton d’enregistrement et sélectionnez l’option Activer le microphone (macOS). Si vous êtes sur Windows, activez le microphone via un contrôle au niveau du système d’exploitation dans Gamecenter. Lors de l’enregistrement, vérifiez que l’icône rouge clignote bien sur l’interface.

  3. Enregistrez l’enregistrement sous forme de fichier MP4, et partagez-le avec les parties concernées ou publiez-le dans 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 sur ordinateur, cliquez sur l’icône Partager dans le coin supérieur droit et choisissez Vérification du design (pour les prototypes) ou Développement (pour les spécifications techniques).

  2. Lors de la prévisualisation d’un prototype sur l’un des appareils ou outils suivants, procédez comme suit :

    • Ordinateur de bureau ou portable : maintenez la barre d’espace enfoncée.
    • 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.
    • Navigateur mobile sur un smartphone : maintenez l’icône du micro 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.

Activation de la lecture automatique du son dans Safari

Par défaut, la lecture automatique du son est désactivée dans Safari. Pour activer la lecture automatique du son dans les liens de prototypes XD, effectuez les étapes suivantes :

  1. Ouvrez un lien de prototype XD dans Safari.
  2. Dans la barre de menus macOS, accédez à Safari > Préférences.
  3. Dans l’onglet Sites Web, sélectionnez Lecture automatique dans le volet de gauche.
  4. Dans la fenêtre Autoriser les sites Web ci-dessous à lire automatiquement les médias, choisissez Autoriser toutes les lectures automatiques en regard de xd.adobe.com

Ce paramètre garantit le fonctionnement automatique du son associé aux liens de prototypes XD.

Activation de la lecture automatique des médias dans Safari
Activation de la lecture automatique des médias dans Safari

Activation du son dans Chrome

Lorsque vous exécutez un prototype dans Chrome, si vous recevez un message d’erreur indiquant qu’il y a eu un problème avec l’action de lecture, activez le son dans les paramètres de Chrome.

Effectuez les étapes ci-dessous pour activer le son des liens de prototypes XD dans les paramètres de Chrome :

  1. Dans la barre d’adresse de Chrome, saisissez chrome://settings/content/sound. Appuyez sur Entrée.
  2. Dans la section Comportements personnalisés, cliquez sur Ajouter à côté d’Autorisé à diffuser du son, et ajoutez https://xd.adobe.com.

Ce paramètre permettra la lecture du son associé aux liens de prototypes XD.

Activation du son pour les liens de prototype XD dans les paramètres de Chrome
Activation du son pour les liens de prototype XD dans les paramètres de Chrome

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 ordinateur et sur le web. Les collaborateurs 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 à XD est comparée à tous les déclencheurs vocaux présents sur le plan de travail ou le composant en question. Si aucune correspondance n’est trouvée, vous recevez une notification indiquant Aucune correspondance trouvée pour : {la commande que vous avez donnée}. Voir ce que 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 $. Les chiffres ayant remplacé les mots dans la notification, vous savez maintenant qu’il faut modifier l’interaction pour utiliser des chiffres au lieu de mots.

Recevez de l’aide plus rapidement et plus facilement

Nouvel utilisateur ?