Guide d'utilisation Annuler

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

  1. Guide de l’utilisateur d’Adobe XD
  2. Introduction
    1. Nouveautés d’Adobe XD
    2. Questions fréquentes
    3. Design, création de prototypes et partage avec Adobe XD
    4. Gestion des couleurs
    5. Configuration requise
      1. Configuration matérielle et logicielle requise
      2. Adobe XD, Big Sur et Apple Silicon | macOS 11
    6. Notions de base concernant l’espace de travail
    7. Changement de langue dans l’application Adobe XD
    8. Accès aux kits de conception d’interface utilisateur
    9. Accessibilité dans Adobe XD
    10. Raccourcis clavier
    11. Conseils et astuces
  3. Conception
    1. Plans de travail, repères et calques
      1. Prise en main des plans de travail
      2. Utilisation des guides et des grilles
      3. Création de plans de travail défilants
      4. Utilisation de calques
      5. Création de groupes de défilement
    2. Formes, objets et chemins
      1. Sélection, redimensionnement et rotation d’objets
      2. Déplacement, alignement, répartition et disposition d’objets
      3. Regroupement, verrouillage, duplication, copie et retournement d’objets
      4. Application d’un contour, d’un fond ou d’une ombre portée à un objet
      5. Création d’éléments répétés
      6. Création de designs en perspective avec des transformations 3D
      7. Modification d’objets à l’aide d’opérations booléennes
    3. Texte et polices
      1. Utilisation d’outils de dessin et de texte
      2. Polices dans Adobe XD
    4. Composants et états
      1. Utilisation de composants
      2. Utilisation de composants imbriqués
      3. Ajout de plusieurs états aux composants
    5. Masquage et effets
      1. Création d’un masque avec des formes
      2. Utilisation des effets de flou
      3. Création et modification de dégradés
      4. Application des effets de fusion
    6. Mise en page
      1. Redimensionnement réactif et contraintes
      2. Définition d’un remplissage fixe pour des composants et des groupes
      3. Création de conceptions dynamiques avec des piles
    7. Vidéos et animations Lottie
      1. Utilisation de vidéos
      2. Création de prototypes avec des vidéos
      3. Utilisation d’animations Lottie
  4. Prototypage
    1. Création de prototypes interactifs
    2. Animation des prototypes
    3. Propriétés d’objet prises en charge pour l’animation automatique
    4. Création de prototypes avec clavier et manette de jeu
    5. Création de prototypes à l’aide de la lecture et des commandes vocales
    6. Création de transitions temporisées
    7. Ajouter des incrustations
    8. Conception de prototypes de voix
    9. Création de liens d’ancrage
    10. Création d’hyperliens
    11. Aperçu de designs et de prototypes
  5. Partage, exportation et révision
    1. Partage des plans de travail sélectionnés
    2. Partage de conceptions et de prototypes
    3. Définition des autorisations d’accès pour les liens
    4. Utilisation de prototypes
    5. Révision de prototypes
    6. Utilisation des spécifications techniques
    7. Partage de spécifications techniques
    8. Inspection de spécifications techniques
    9. Navigation dans les spécifications techniques
    10. Révision des spécifications techniques et commentaires
    11. Exportation de ressources de design
    12. Exportation et téléchargement de fichiers à partir de spécifications techniques
    13. Partage de groupe pour les entreprises
    14. Sauvegarde et transfert de ressources XD
  6. Chartes graphiques
    1. Chartes graphiques et bibliothèques Creative Cloud
    2. Utilisation de ressources de document dans Adobe XD
    3. Utilisation des bibliothèques Creative Cloud dans Adobe XD
    4. Migration de ressources liées vers les bibliothèques Creative Cloud
    5. Utilisation des jetons de conception 
    6. Utilisation de ressources provenant de bibliothèques Creative Cloud
  7. Documents en ligne
    1. Documents en ligne dans Adobe XD
    2. Collaboration et cocréation de conceptions
    3. Cocréation de documents partagés
  8. Intégrations et plug-ins
    1. Utilisation de ressources externes
    2. Utilisation de ressources de design provenant de Photoshop
    3. Copier-coller de ressources depuis Photoshop
    4. Importation ou ouverture de conceptions Photoshop
    5. Utilisation des fichiers Illustrator dans Adobe XD
    6. Ouverture et importation de conceptions Illustrator
    7. Copie de vecteurs d’Illustrator vers XD
    8. Plug-ins pour Adobe XD
    9. Création et gestion des plug-ins
    10. Intégration Jira pour XD
    11. Plug-in Slack pour XD
    12. Plug-in Zoom pour XD
    13. Publication de designs depuis XD vers Behance
  9. XD pour iOS et Android
    1. Aperçu sur appareils mobiles
    2. FAQ concernant Adobe XD pour mobile
  10. Résolution des problèmes
    1. Problèmes connus et résolus
      1. Problèmes connus
      2. Problèmes résolus
    2. Installation et mises à jour
      1. XD semble incompatible avec Windows
      2. Code d’erreur 191
      3. Code d’erreur 183
      4. Problèmes d’installation des modules externes XD
      5.  Invitation à désinstaller et réinstaller Adobe XD sur Windows 10
      6. Problèmes liés à la migration des préférences
    3. Lancement et blocage
      1.  XD se bloque au lancement sur Windows 10
      2.  XD se ferme lorsque vous vous déconnectez de Creative Cloud
      3. Problème lié à l’état d’un abonnement sur Windows
      4. Avertissement d’application bloquée lors du lancement de XD sur Windows
      5. Génération du fichier de vidage sur Windows
      6. Collecte et partage de journaux d’incidents
    4. Documents en ligne et bibliothèques Creative Cloud
      1. Problèmes liés aux documents en ligne XD
      2. Problèmes relatifs aux composants liés
      3. Problèmes relatifs aux bibliothèques et aux liens
    5. Prototype, publication et révision
      1. Impossible d’enregistrer les interactions de prototypes sur macOS Catalina
      2. Problèmes liés aux workflows de publication
      3. Les liens publiés n’apparaissent pas dans les navigateurs
      4. Les prototypes ne s’affichent pas correctement dans les navigateurs
      5. Le panneau de commentaires s’affiche soudainement sur les liens partagés
      6. Impossible de publier des bibliothèques
    6. Importation, exportation et utilisation d’autres applications
      1. Importation et exportation dans XD
      2. Fichiers Photoshop dans XD
      3. Fichiers Illustrator dans XD
      4. Exportation dans After Effects à partir de XD
      5. Fichiers Sketch dans XD
      6. ++Applications tierces non visibles lors de l’exportation

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.

 Adobe

Recevez de l’aide plus rapidement et plus facilement

Nouvel utilisateur ?