Apprenez à créer des micro-interactions à l’aide de l’animation automatique.

Avec l’animation automatique, vous pouvez facilement créer des prototypes animés avec les effets YouTube de type balayer/glisser ou ondulations qui vous aident à visualiser le mouvement du contenu sur les différents plans de travail. Le récit du prototype est ainsi plus vivant, tout en ajoutant une couche riche à l’expérience client globale.

Interactions de type ondulations sur un site web
Effet d’ondulations sur un site web
Effet glissage/balayage sur un appareil tactile
Effet glissage/balayage sur un appareil tactile

Création d’un prototype animé

  1. Informations préalables :

    • Les objets que vous souhaitez animer doivent porter le même nom de calque sur les différents plans de travail.
    • Vous ne pouvez animer que des propriétés d’objet spécifiques telles que la taille, la position et la rotation. Pour en savoir plus, consultez la section Propriétés de l’objet.
  2. Reliez les plans de travail en mode Prototype. 

  3. Cliquez sur le connecteur pour afficher le panneau d’interaction qui figure dans l’inspecteur Propriétés et définissez les options suivantes :

    • Déclencheur : sélectionnez une option pour déclencher une animation. Par exemple, pour simuler une expérience de saisie de carte, sélectionnez Appuyer. 
    • Action : sélectionnez Animation automatique.
    • Destination : sélectionnez le plan de travail cible vers lequel l’animation doit permettre d’effectuer la transition.
    • Rythme : sélectionnez une option pour simuler des effets de type accélération/décélération. Par exemple, sélectionnez Décélération si vous voulez que vos animations disparaissent de votre prototype au ralenti.
    Le processus d’animation automatique
    Le processus d’animation automatique

    A. Sélectionnez le type de déclencheur. B. Sélectionnez l’action à animer automatiquement. C. Sélectionnez le plan de travail cible. D. Sélectionnez les options de rythme. 
  4. Sélectionnez   dans l’application XD pour prévisualiser vos animations sur les navigateurs pris en charge (application pour postes de travail, mobile ou web). Pour partager votre prototype avec vos parties prenantes à partir de l’application XD pour postes de travail, cliquez sur Partager et sélectionnez Partager pour révision.

Exemples et exemples de fichiers

Kit d’interface utilisateur auto-animée à partir de Behance

Voulez-vous connaître les rudiments de l’animation automatique ? Commencez avec ce kit d’interface utilisateur qui inclut des interactions de base, des éléments d’interface utilisateur, des exemples de type glisser et bien plus encore.

Vous pouvez également utiliser d’autres exemples de fichiers de ce type pour tester l’animation automatique.

Effet de balayage YouTube

Vous souhaitez obtenir un effet de balayage YouTube sans vous soucier des durées et des images clés ?

Reliez vos plans de travail et sélectionnez les options suivantes dans l’affichage ATH Déclencheur :

  • Déclencheur : sélectionnez Faire glisser. 
  • Action : sélectionnez Animation automatique.
  • Destination : sélectionnez le plan de travail cible vers lequel l’animation doit permettre d’effectuer la transition.
  • Rythme : sélectionnez une option pour créer des effets de type accélération/décélération. Par exemple, sélectionnez Accélération-Décélération pour que vos animations apparaissent et disparaissent de votre prototype au ralenti.

Téléchargez les exemples de fichiers et testez-les, ou regardez cette vidéo pour plus d’informations.

Temps de visionnage : 1 minute.


Menu mobile animé

Vous voulez savoir comment créer un menu mobile animé avec un effet d’accélération ? 

  1. Téléchargez les exemples de fichiers.
  2. En mode Prototype, reliez le menu hamburger au plan de travail home_expanded et sélectionnez les options suivantes dans l’affichage ATH Déclencheur :
  • Déclencheur : sélectionnez Appuyer. 
  • Action : sélectionnez Animation automatique.
  • Destination : sélectionnez le plan de travail cible vers lequel l’animation doit permettre d’effectuer la transition.
  • Rythme : sélectionnez l’effet Accélération.
  • Durée : définissez une durée de 0,8 secondes.

Ajout de micro-interactions avancées avec After Effects

Vous souhaitez ajouter des animations avancées à vos conceptions ? Regardez cette vidéo pour savoir comment travailler avec After Effects. 

Exportation d’Adobe XD vers After-Effects (Temps de visionnage : 1 minute)


Vous pouvez également consulter la communauté XD pour obtenir d’autres tutoriels et exemples de fichiers.

Bonnes pratiques

Saviez-vous que vous pouvez jouer avec les différentes options de rythme pour changer l’expérience client de vos prototypes animés ? Lisez les bonnes pratiques et découvrez des astuces concernant l’utilisation de l’animation automatique.

Temps de visionnage : 1 minute.


Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne