Une fois que vous avez fini de mettre au point vos différents écrans, vous pouvez les relier les uns aux autres pour visualiser le résultat et voir ce que va donner votre application ou site web.
Adobe XD vous permet de créer des prototypes interactifs pour visualiser la navigation entre les écrans ou les wireframes. Vous pouvez prévisualiser les interactions pour contrôler l’expérience utilisateur et la reproduire sur votre design afin de gagner du temps au niveau du développement. Vous pouvez également enregistrer les interactions et les partager avec les personnes impliquées dans le projet pour obtenir leur avis. Utilisez les fonctions de zoom avant et arrière pour visualiser en détail certaines parties du prototype.
L’écran d’accueil est le tout premier écran de votre application ou site web. C’est à partir de cet écran que les utilisateurs pourront commencer à parcourir l’application ou le site.
Lorsque vous affichez l’aperçu de votre prototype sans avoir effectué de sélection préalable, c’est également sur l’écran d’accueil que débute l’aperçu. Par défaut, votre écran d’accueil est donc défini sur le premier plan de travail auquel vous ajoutez un lien.
Avant de commencer à relier des plans de travail ou des écrans, nommez-les correctement. Cela vous aide à identifier l’écran auquel vous souhaitez lier un écran donné.
-
Dans la fenêtre contextuelle qui apparaît, vous pouvez spécifier les éléments suivants :
- Options et durée de transition : si vous souhaitez conserver la position de défilement lors de la transition vers un autre plan de travail, sélectionnez Conserver la position de défilement. Cette option est très utile lorsque vous créez des prototypes de barres de navigation ou de pieds de page fixes. Si l’utilisateur fait défiler le plan de travail d’origine, le plan de travail suivant reconnaît la position de défilement depuis le plan de travail
d’origine . Lorsque vous cliquez sur un plan de travail ou sur n’importe quel élément du plan de travail, vous pouvez contrôler la position de défilement afin qu’il reste toujours à son emplacement d’origine d’un écran à l’autre. Cela évite les défilements répétés dans un sens ou dans l’autre au sein du fichier du projet. Par exemple, si un utilisateur fait défiler jusqu’à y=1000 sur le plan de travail A, la transition vers le plan de travail B se place par défaut à y=1000. Si le plan de travail d’origine n’a pas de défilement défini, l’option Conserver la position de défilement est inactive. - Superposition : si vous souhaitez simuler les états ou les transitions, par exemple les menus déroulants et les claviers coulissants, sélectionnez Superposition.
Utilisation des superpositions - Options et durée de transition : si vous souhaitez conserver la position de défilement lors de la transition vers un autre plan de travail, sélectionnez Conserver la position de défilement. Cette option est très utile lorsque vous créez des prototypes de barres de navigation ou de pieds de page fixes. Si l’utilisateur fait défiler le plan de travail d’origine, le plan de travail suivant reconnaît la position de défilement depuis le plan de travail
-
Répétez la procédure ci-dessus afin de créer des liens pour tous les éléments interactifs de votre projet.
CONSEIL :
En mode Prototype, pour accélérer le processus de création d’interactions :
- Vous pouvez copier et coller des objets entre différents plans de travail. L’objet est copié et collé avec son interaction.
- Vous pouvez aussi copier et coller l’interaction seule. Copiez un objet, faites un clic droit sur un autre objet, puis sélectionnez Coller l’interaction. Seule l’interaction est collée.
- Pour faire pointer un élément vers un autre écran, cliquez à nouveau sur la poignée et faites-la glisser jusqu’à l’écran voulu.
- Pour supprimer une interaction, faites glisser la poignée de destination du connecteur hors d’un plan de travail cible, vers la zone de brouillon.
Éléments interactifs avec liens vers des écrans cibles
A. Écran d’accueil B. Plans de travail associés C. Connexion sortante D. Connexion entranteRemarque :
Les liens en gris indiquent les connexions sortantes, et les liens en bleu montrent les connexions entrantes.
La transition temporisée dans Adobe XD vous permet de créer des expériences de prototype enrichies telles que les flux d’intégration, la redirection automatique vers un écran différent ou les barres d’avancement. De la même manière que lorsque vous appuyez pour déclencher des transitions, vous pouvez définir un délai pour spécifier la durée de la transition. Par exemple, lorsque vous créez des workflows d’intégration, vous pouvez utiliser l’option Délai pour lier et appliquer une transition entre des plans de travail.
En tant que designer, vous pouvez également utiliser une durée pour déclencher la transition vers un autre plan de travail. Par exemple, si vous concevez des flux d’intégration, vous pouvez utiliser une transition temporisée pour commencer par un écran de démarrage de flux d’application et appliquer automatiquement une transition entre quelques écrans d’intégration.
-
Dans la fenêtre contextuelle du déclencheur, définissez les options suivantes :
- Déclencheur : définissez-le sur Heure.
- Délai : définissez le délai de transition en secondes.
- Durée : définissez la durée de la transition en secondes.
- Action : définissez-la sur Transition.
Définir le déclencheur, le délai, la durée et l’action
A. Définir le déclencheur sur Heure B. Définir le retard en secondes C. Définir l’action sur Transition D. Définir la durée en secondes
pour prévisualiser les modifications.-
Dans l’application pour postes de travail, cliquez sur le bouton Partager dans l’angle supérieur droit et choisissez Partager pour révision. Lorsque le lien est créé, vous pouvez le copier et ouvrir le prototype sur le navigateur. Les transitions temporelles s’affichent au fur et à mesure que vous les créez dans l’application XD pour postes de travail.
-
Lorsque vous arrêtez la transition pour la première fois, Adobe XD affiche une notification qui signale l’arrêt de la transition temporelle. Pour reprendre la transition, appuyez sur le bouton de navigation vers la droite ou sur la touche flèche vers la droite du clavier pour que la transition continue.
-
En mode Prototype, sélectionnez l’élément que vous souhaitez lier. Lorsqu’une petite flèche apparaît, cliquez sur celle-ci pour définir automatiquement l’action comme plan de travail précédent. Vous pouvez également lier l’élément à un plan de travail et sélectionner Action > Plan de travail précédent.
Sélection du plan de travail précédent
Remarque :
L’enregistrement des prototypes n’est pas pris en charge dans Adobe XD sous Windows. Mais il existe une solution. Appuyez sur les touches Windows + G et utilisez l’enregistreur natif pour enregistrer la fenêtre d’aperçu.
Pour tester votre prototype avec les interactions définies, vous pouvez afficher son aperçu. Vous pouvez également enregistrer l’aperçu et sauvegarder l’enregistrement au format .mp4. Il vous suffit ensuite de partager ce fichier .mp4 avec vos collaborateurs, qui pourront visionner (et éventuellement vérifier) chaque étape du prototype et vous faire part de leurs commentaires.
-
Cliquez sur l’icône Aperçu sur ordinateur. La fenêtre d’aperçu apparaît et affiche le plan de travail actif.
Pour tester la navigation entre les écrans, cliquez sur les éléments interactifs.
Vous pouvez modifier le design et les interactions de votre prototype lorsque l’aperçu est affiché. Les modifications sont instantanément visibles dans l’aperçu.
Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.