Les utilisateurs sont souvent confrontés à des pages de chargement ennuyeuses qui manquent d’indications visuelles.
Cela peut entraîner de la frustration et une mauvaise expérience utilisateur, affectant l’engagement et la satisfaction.
Cet article explore la création de pages de chargement dynamiques dans Adobe XD, avec un footer animé, pour enrichir 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 créer des pages de chargement dans Adobe XD?
Comment animer un footer dans Adobe XD?
Quelle est l'importance des pages de chargement animées?
Comment intégrer du texte sur les pages de chargement?
Comment dupliquer des éléments dans Adobe XD?
Conclusion
En intégrant des animations subtiles et des designs soignés dans vos pages de chargement, vous pouvez considérablement améliorer l’expérience utilisateur. Comment pourriez-vous utiliser ces techniques pour d’autres éléments de design dans vos projets Adobe XD?
