Les utilisateurs ne savent pas si leur commande est en cours de traitement.
Cela peut mener à des frustrations et à l’impression que l’application est figée.
Découvrez comment créer des pages de chargement dynamiques avec des animations de footer dans Adobe XD pour améliorer l’expérience utilisateur.
Maîtrisez les fonctionnalités de base d'Adobe XD-UX Designer et créez des prototypes d'interface utilisateur interactifs
Maintenant, on va designer les pages de chargement pour indiquer à l’utilisateur que sa commande est en cours. Dans ces pages, notre footer va tourner à droite et à gauche.
Pour commencer, on va dupliquer la première page de garniture. On va le placer en dessous pour bien organiser, comme on le fait toujours. On va supprimer tous les éléments sur la page sauf le footeur.
Après tout cela, il faut bien positionner le footer au milieu de la page. Puis on doit renommer la page en : Page de chargement , par exemple. Après cela, on duplique la page, et sur cette dernière, on diminue la taille du footer pour que toute sa taille soit à l’intérieur du plan de travail.
Puis on va encore dupliquer la dernière page qu’on vient de créer et on va faire tourner le footer.
Après cela, on va dupliquer la dernière page. Et après, on va encore faire tourner le footer de cette page qu’on vient de créer.
Puis après ça, on va dupliquer la dernière page et pour la nouvelle page ( cinquième page ), on va ajouter +90 degrés à l’angle affiché.
Après cela, on va encore dupliquer la cinquième page qu’on vient de créer. Et pour la nouvelle page ( sixième page ), on va faire -90 à l’angle affiché.
Après tout cela, on va introduire un texte. Puis on va dupliquer ce texte à toutes les pages.
Voilà, on a fini de créer la page de chargement. Cette page apparaitra quand on aura choisi le cornet, la saveur, la sauce et la garniture. Maintenant, on va voir la création de la page de commande.
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 dupliquer une page dans Adobe XD?
Comment animer un footer dans Adobe XD?
Pourquoi utiliser une page de chargement?
Quelle est l'importance du positionnement du footer?
Comment créer une séquence de rotation dans Adobe XD?
Conclusion
En explorant les techniques pour design des pages de chargement, vous améliorez non seulement l’interactivité mais aussi l’expérience utilisateur. Comment pourriez-vous intégrer ces animations dans d’autres projets?
