Créer un prototype interactif peut être complexe sans les bons outils.
Sans une bonne maîtrise des interactions et animations, le prototype peut sembler rigide et peu intuitif.
Cet article explore l’utilisation d’Adobe XD pour créer des prototypes interactifs avec des animations fluides et engageantes.
Maîtrisez les fonctionnalités de base d'Adobe XD-UX Designer et créez des prototypes d'interface utilisateur interactifs
C’est dans le mode Prototype , qu’on va créer le prototype qui va suivre le scénario qu’on vient d’imaginer. Cela va commencer par l’ appui sur le bouton commencer . Pour cela, on va choisir la page d’accueil comme la page flux .
Après cela, on va ajouter une interaction sur le bouton Commencer. Pour cela, il faut sélectionner le Groupe du bouton Commencer , et on va la relier sur la page suivie.
Pour bien réaliser les animations et les transitions, il faut suivre étape par étape les paramètres indiqués sur la figure ci-dessous.
Après cela, on va passer à la première page Cornet. On va cliquer sur le cornet qui se trouve sur le bord droit , seulement le cornet , mais pas le groupe entier du carrousel. Puis on va le faire interagir sur la page Cornet suivante.
Puis, dans la deuxième page Cornet , on va sélectionner le cornet ( seulement le cornet ) qui se trouve au bord gauche et on va le relier à la première page Cornet .
Après cela, toujours dans la deuxième page , on va sélectionner le cornet qui se trouve sur le bord droit et on va le relier à la troisième page . Pour les interactions des 2 cornets, on va garder les mêmes paramètres qu’on a utilisés précédemment .
Après cela, on passe à la troisième page et on sélectionne le cornet sur le bord gauche (seulement le cornet), puis on le relie sur la deuxième page . On prend le même paramètre précédemment utilisé.
Après cela, toujours dans la troisième page , on va ajouter une interaction sur le cornet qui se trouve au milieu , et on va le relier à la quatrième page .
Maintenant, on va faire le passage vers la page Saveur , à partir du moment où on clique sur le cornet au milieu . L’animation sera automatique jusqu’à la première page Saveur .
Donc, ce qu’on va faire, c’est sélectionner la dernière page Cornet (facilement en cliquant sur le nom du plan de travail ) et après, on va la relier à la première page Saveur . Vu que l’animation sera automatique, on a choisi Délai pour déclencheur .
Voilà le processus et les paramètres qu’on va utiliser sur les pages dans lesquelles l’utilisateur va faire le choix de cornet, saveur, garniture et sauce.
Maintenant, on va créer une interaction qui permet à l’utilisateur de revenir sur la page précédente en cas d’ annulation de choix . Pour cela, on va cliquer sur le footer (tout le groupe du footer) de la page Saveur et on va la relier directement sur la première page Cornet pour refaire le choix.
Après cela, on doit créer la même interaction avec les pages Cornet qui permet de faire glisser le carrousel. Il suffit juste de répéter le même processus et les paramètres qu’on a fait pour les pages Cornet.
On fait les interactions avec les éléments de chaque carrousel, puis l’animation automatique, jusqu’à la fonction retour pour l’annulation de choix pour les pages : Saveur ; Sauce et Garniture .
Puis, sur la quatrième page Garniture , après avoir fait l’animation avec la validation du choix, on va créer une autre interaction qui mène automatiquement à la première page de Chargement .
Après cela, on va relier la première page de chargement à la deuxième page . Les paramètres qu’on va utiliser pour relier ces 2 pages, on va les copier pour relier la deuxième page de chargemen t au troisième , le troisième au quatrième.
Comme on l’a dit, on va utiliser les mêmes paramètres pour relier les pages restantes.
On va relier la dernière page de chargement à la première page finale . Toutes ces animations seront en continu automatiquement depuis la validation de la garniture.
Puis après cela, on va relier la première page Finale à la deuxième pour continuer l’animation automatique.
Pour relier la deuxième page Finale à la troisième page , on va utiliser les mêmes paramètres qu’on vient utiliser.
Pour l’interaction entre la troisième page et la quatrième page , on va utiliser les mêmes paramètres, mais on va changer un petit détail : la durée de l’animation .
Pour finir, on doit créer une interaction entre la quatrième page et la cinquième qui remercie l’utilisateur pour la commande.
Voilà, on a fini de créer notre prototype. On a tout paramétré pour qu’il suive le scénario qu’on a imaginé avant.
Maintenant, on va voir un aperçu du prototype qu’on a créé.
Formez-vous gratuitement avec Alphorm !
Maîtrisez les compétences clés en IT grâce à nos formations gratuites et accélérez votre carrière dès aujourd'hui.
FAQ
Comment créer un prototype dans Adobe XD ?
Comment ajouter des interactions dans Adobe XD ?
Comment gérer les animations dans Adobe XD ?
Comment faire un carrousel dans Adobe XD ?
Comment tester un prototype dans Adobe XD ?
Conclusion
La création d’un prototype dans Adobe XD nécessite une attention aux détails pour assurer une expérience utilisateur fluide. Quelles autres fonctionnalités d’Adobe XD aimeriez-vous explorer pour enrichir vos prototypes ?
