Guide d'utilisation Annuler

Création de prototypes avec des vidéos

  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. Configuration requise
      1. Configuration matérielle et logicielle requise
      2. Adobe XD, Big Sur et Apple Silicon | macOS 11
    5. Notions de base concernant l’espace de travail
    6. Changement de langue dans l’application Adobe XD
    7. Accès aux kits de conception d’interface utilisateur
    8. Accessibilité dans Adobe XD
    9. Raccourcis clavier
    10. Conseils et astuces
    11. Options d’abonnement à Adobe XD
    12. Modifications apportées à la formule de lancement d’Adobe XD
  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 d’actifs de conception
    12. Exportation et téléchargement de fichiers à partir de spécifications techniques
    13. Partage de groupe pour les entreprises
  6. Chartes graphiques
    1. Chartes graphiques et bibliothèques Creative Cloud
    2. Utilisation d’actifs de document dans Adobe XD
    3. Utilisation des bibliothèques Creative Cloud dans Adobe XD
    4. Migration d’actifs liés vers les bibliothèques Creative Cloud
    5. Utilisation des jetons de conception 
    6. Utilisation d’actifs 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 d’actifs externes
    2. Utilisation d’actifs de création provenant de Photoshop
    3. Copier-coller d’actifs 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 prototyper des expériences interactives avec des vidéos dans Adobe XD.

Vous pouvez choisir une option de lecture prédéfinie ou personnalisée pour votre vidéo, puis définir le fonctionnement des autres interactions avec celle-ci. Pour découvrir les différentes options de lecture vidéo et les interactions possibles, rien de tel que d’observer quelques exemples de prototypes réalistes impliquant des vidéos.

Avant de commencer

Définition d’une option de lecture

Définition d’une option de lecture pour votre vidéo
Définition d’une option de lecture pour la vidéo

Après avoir importé votre vidéo dans XD, contrôlez le moment où elle sera lue. Effectuez les étapes suivantes pour définir une option de lecture :

  1. En mode Design, sélectionnez la vidéo sur la zone de travail.
  2. Dans la section Vidéo de l’Inspecteur Propriétés, choisissez un préréglage :

Options de lecture et interactions associées

Lorsque vous définissez une option de lecture pour votre vidéo en mode Design, les interactions associées sont automatiquement définies en mode Prototype.

Appuyer pour lire

Si vous choisissez l’option Appuyer pour lire, le déclencheur Appuyer est défini automatiquement avec l’action par défaut Bouton Lecture/Pause.

Appuyer pour lire - Mode Design

Appuyer pour lire - Mode Prototype

Lire automatiquement

Si vous choisissez l’option Lire automatiquement, le déclencheur Délai est défini automatiquement avec un délai de 0 seconde.

Lire automatiquement - Mode Design

Lire automatiquement - Mode Prototype

Pas de lecture

Si vous choisissez l’option Pas de lecture, aucune interaction n’est créée en mode Prototype.

Personnalisation de la lecture vidéo

Choisissez Modifier la lecture pour personnaliser la lecture
Choisissez Modifier la lecture pour personnaliser la lecture

Pour personnaliser la lecture vidéo, dans la section Vidéo de l’Inspecteur Propriétés, sélectionnez Modifier la lecture.

Lorsque vous sélectionnez Modifier la lecture, vous passez automatiquement en mode Prototype.

En mode Prototype, optez pour l’une des personnalisations suivantes :

Choisissez l’un des déclencheurs suivants : Délai (définissez Délai sur plus de 0 seconde), Touches et manette de jeu ou Voix.

Choisissez le déclencheur Délai avec un délai défini sur plus de 0 seconde
Choisissez le déclencheur Délai avec un délai défini sur plus de 0 seconde

Modifiez l’action de lecture vidéo du déclencheur Appuyer en remplaçant Bouton Lecture/Pause par Lecture ou par Pause.

Personnalisez la lecture en choisissant le déclencheur Appuyer avec l’action Lecture ou Pause
Choisissez le déclencheur Appuyer avec l’action Lecture ou Pause

 Vous ne pouvez pas paramétrer une vidéo de manière à ce qu’un déclencheur Faire glisser entraîne sa lecture.

Utilisation de la lecture vidéo avec d’autres interactions

Vidéo avec un déclencheur Fin de lecture qui crée une transition vers un plan de travail
Vidéo avec un déclencheur Fin de lecture qui crée une transition vers un plan de travail

Une fois que vous avez défini une option de lecture pour votre vidéo, vous avez la possibilité de la relier à d’autres interactions :

  • Définir une interaction Fin de lecture pour que la vidéo déclenche une action après la lecture
  • Lire une vidéo et plusieurs fichiers Lottie en même temps

Pour en savoir plus sur le prototypage dans XD, consultez la section Création de prototypes interactifs.

Détails des interactions et du comportement de lecture des vidéos 

La lecture de la vidéo s’arrête ou continue en fonction des interactions que vous avez définies pour d’autres objets :

  • La lecture de la vidéo s’arrête lorsque des actions autres que Lecture Lottie et Animation automatique sont déclenchées.
  • Si vous souhaitez que la lecture de la vidéo continue lorsque vous survolez ou appuyez sur d’autres objets, utilisez l’option Animation automatique comme action pour les déclencheurs Survoler et Appuyer.

Déclencheurs Vidéo et Délai

Pour n’importe quel plan de travail :

  • Vous pouvez ajouter plusieurs déclencheurs Délai successifs en fonction du délai défini pour chacun.
  • Vous pouvez configurer une vidéo et plusieurs animations Lottie pour les lancer ensemble à la fin du même délai. Vous pouvez également définir une lecture automatique en choisissant un délai de 0 s.
  • Si vous définissez des déclencheurs Délai avec le même délai sur le plan de travail, la vidéo et les animations Lottie, la priorité est : plan de travail > vidéo > animations Lottie.

Exemples de prototypage

Maintenant que vous avez appris à définir une option de lecture pour votre vidéo et à la relier à d’autres interactions, testons ensemble quelques exemples.

Télécharger des exemples de fichiers

Exemple 1 : prototyper le bouton d’agrandissement d’une vidéo

Apprenez à prototyper le bouton d’agrandissement d’une vidéo.

Ex 1-artboard 1

  1. En mode Design, importez la vidéo Tip 1 et placez-la sur le plan de travail. Définissez l’option Appuyer pour lire.
  2. Placez l’icône Agrandir (disponible dans la section Icônes à droite des plans de travail) dans le coin inférieur droit de la vidéo. 
  3. En mode Prototype, reliez l’icône Agrandir à Ex 1-artboard 2 et définissez-la avec un déclencheur Appuyer et le type d’action Animation automatique.

Ex 1-artboard 2

  1. En mode Design, importez la vidéo Tip 1 et placez-la sur le plan de travail (vidéo en plein écran). Définissez l’option Appuyer pour lire.
  2. Placez l’icône Réduire (disponible dans la section Icônes à droite des plans de travail) dans le coin inférieur droit de la vidéo. 
  3. En mode Prototype, reliez l’icône Réduire à Ex 1-artboard 1 et définissez-la avec un déclencheur Appuyer et le type d’action Animation automatique.

Une fois que vous avez fini de relier les interactions, prévisualisez le prototype et vérifiez les interactions.

Exemple 2 : prototyper la lecture

Découvrez comment lire plusieurs vidéos d’affilée dans XD.

Ex 2-artboard 1

  1. En mode Design, importez la vidéo Intro et placez-la dans la section Introduction. Définissez l’option Pas de lecture.
  2. Importez les vidéos Tip 1 et Tip 2 et placez-les dans la section Conseils. Définissez l’option Pas de lecture.
  3. Placez une copie du bouton Lecture (disponible dans la section Icônes) sur toutes les vidéos.
  4. En mode Prototype :
  • Reliez le bouton Lecture de la vidéo Intro à Ex 2-artboard 2.
  •  Reliez le bouton Lecture de la vidéo Tip 1 à Ex 2-artboard 3.
  • Reliez le bouton Lecture de la vidéo Tip 2 à Ex 2-artboard 4. 

Définissez tous ces éléments avec un déclencheur Appuyer et le type d’action Transition.

Ex 2-artboard 2

  1. En mode Design, importez la vidéo Intro et placez-la au-dessus de la section Conseils. Définissez l’option Lire automatiquement.
  2. En mode Prototype, reliez la vidéo à Ex 2-artboard 3 et définissez-la avec un déclencheur Fin de lecture et le type d’action Transition.

Ex 2-artboard 3

  1. En mode Design, importez la vidéo Tip 1 et placez-la au-dessus de la section Tip 1. Définissez l’option Lire automatiquement.
  2. En mode Prototype, reliez la vidéo à Ex 2-artboard 4 et définissez-la avec un déclencheur Fin de lecture et le type d’action Transition.

Ex 2-artboard 4

  1. En mode Design, importez la vidéo Tip 2 et placez-la au-dessus de la section Tip 2. Définissez l’option Lire automatiquement.
  2. En mode Prototype, reliez la vidéo à Ex 2-artboard 1 et définissez-la avec un déclencheur Fin de lecture et le type d’action Transition.

Une fois que vous avez fini de relier les interactions, prévisualisez le prototype et vérifiez les interactions.

Plus d’exemples

Découvrez d’autres exemples avec des vidéos, des animations Lottie et des états de composants.

En savoir plus

Regardez cette vidéo de 2 minutes pour découvrir quelques conseils de pro concernant l’utilisation des vidéos dans XD.

Ressources associées

Vous avez une question ou une suggestion ?

questions à la communauté

Vous avez une question à poser ou une idée à partager ? Venez participer à la communauté Adobe XD. Nous serions ravis de vous compter parmi nous et de découvrir vos créations !

Logo Adobe

Accéder à votre compte