Comment créer un geste de glissement dans Adobe XD | Tutoriels Adobe XD
La création d'une expérience utilisateur fluide est essentielle pour votre application mobile. Cynthia Fong a utilisé les ressources de design de Zhenya Rynzhuk pour prototyper des gestes de glissement, afin de vérifier le bon fonctionnement de certains éléments clés, tels qu'un carrousel de photos, avant le lancement de son application. Dans ce tutoriel rapide, découvrez comment Cynthia crée une expérience utilisateur optimale avec des gestes de glissement dans Adobe XD.

Zhenya Rynzhuk est une spécialiste du design digital qui aide ses clients à développer leur activité en recourant au Design Thinking pour améliorer leur expérience utilisateur. Elle peut créer votre projet de A à Z ou collaborer sur le remaniement d'un design existant.

Étape 1 : définition d'une destination

Cynthia a dupliqué son plan de travail d'origine. La duplication des plans de travail dans Adobe XD préserve les noms des calques. Ce point est important pour la suite du tutoriel.

Carrousel d'images dans un design d'application mobile affiché sur deux plans de travail dans Adobe XD, nom de l'un des plans de travail mis en surbrillance en orange

Étape 2 : changement de l'image mise en évidence

Sur le nouveau plan de travail, Cynthia a laissé le carrousel groupé. Elle a ensuite double-cliqué sur chaque image et modifié la taille et la position dans l'inspecteur Propriétés pour simuler l'apparition et la disparition des images lorsque l'utilisateur fait glisser le carrousel. Elle a également fait passer le calque de texte du groupe 1 au groupe 2 et modifié le texte.

Panneau Calques montrant l'élément de texte avec une légende indiquant son transfert vers un nouveau groupe, carrousel d'images montrant la nouvelle image centrale

Étape 3 : liaison et animation

Cynthia est passée en mode Prototype pour définir l'interaction utilisateur. Elle a double-cliqué sur l'image centrale sur le premier plan de travail et l'a reliée au second plan de travail. Elle a ensuite défini le déclencheur sur Faire glisser, ce qui a automatiquement défini l'action sur Animation automatique. Pour terminer, elle a créé un lien entre l'image centrale sur le second plan de travail et le premier. Adobe XD a mémorisé ses précédents paramètres. Enfin, elle a testé l'interaction en mode Aperçu sur ordinateur.

Ligne bleue reliant la photo centrale dans le carrousel d'images au second plan de travail, déclencheur défini sur Faire glisser et action sur Animation automatique

Création de gestes de glissement

Créez des gestes de glissement pour simuler des interactions utilisateur réalistes dans vos applications mobiles.

Main tenant un téléphone mobile avec le design d'une application musicale sur l'écran

Remarque : les fichiers de projet fournis avec ce tutoriel le sont uniquement à des fins d'entraînement.

09/02/2020

Artiste : Zhenya Rynzhuk

Contributeur Adobe Stock : visualbricks

Cette page vous a-t-elle été utile ?