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. Servez-vous des fonctions de zoom avant et arrière pour observer 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.
-
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. Si l’utilisateur a fait défiler le plan de travail d’origine, le suivant reconnaît la position de défilement du 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 sa position 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 n’est pas active. Cette option est très utile lorsque vous créez des prototypes de barres de navigation ou de pieds de page fixes.
- 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 -
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.
Éléments interactifs avec liens vers des écrans cibles
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.
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 des indicateurs de progression. 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’optionDé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 Temps.
- 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 Temps 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.-
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.
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.