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

Pendant un certain temps, XD proposait uniquement les types de transition de base qui imitaient les transitions natives de votre téléphone, tels que pousser, glisser et dissoudre. Ces offres étaient idéales pour avoir un aperçu du flux utilisateur. Avec l’introduction de l’animation automatique, vous pouvez visualiser le mouvement du contenu avec des prototypes animés. 

Vous pouvez utiliser l’animation automatique pour créer des effets époustouflants, tels que l’effet de glissage/balayage de YouTube ou des interactions d’ondulation, pour une expérience client attrayante et interactive. 

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

Pour créer des animations, dupliquez un plan de travail, modifiez les propriétés de l’objet, telles que la taille, la position, la rotation et appliquez une action d’animation automatique entre les plans de travail. Vous pouvez ensuite lire ou enregistrer ces animations dans la fenêtre d’aperçu, un navigateur Web ou des applications mobiles et les partager avec les parties prenantes pour des revues collaboratives. Cela vous aide à raconter une meilleure histoire de prototype tout en ajoutant une couche riche à l’expérience client globale.

Avant de créer un prototype, assurez-vous que les objets que vous souhaitez animer portent le même nom de calque dans chaque plan de travail. Livrée avec XD 13.0, l’animation automatique ne fonctionne que sur des propriétés spécifiques ; pour plus d’informations, consultez la section Propriétés prises en charge et non prises en charge.

  1. Pour créer un prototype animé dans XD, sélectionnez tous les plans de travail du canevas en mode Prototypepour afficher les liens existant entre eux.

  2. Faites glisser un connecteur à partir d’un calque dans le plan de travail source vers le plan de travail cible. Lorsque vous associez le premier élément, c’est le plan de travail de cet élément qui est défini comme plan de travail d’accueil.

  3. Dans l’affichage ATH Déclencheur, définissez les options suivantes :

    • Déclencheur : définissez le type de geste sur Faire glisser, Appuyer ou Voix.Si vous souhaitez simuler un effet de glissement de carte, sélectionnez Faire glisser.
    • Action : définissez Animation automatique.
    • Destination : définissez-la sur le second plan de travail.
    • Accélération : sélectionnez les options dans la liste déroulante.
    Le processus d’animation automatique
    Le processus d’animation automatique

    A. Type de déclencheur pour faire glisser B. Action pour l’animation automatique C. Plan de travail de destination D. Options d’accélération 

    Vous souhaitez ajouter des micro-interactions avancées à vos conceptions ? Améliorez vos créations dans After-Effects. Regardez cette vidéo pour un aperçu du flux de travaux.

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

  4. Pour prévisualiser les changements dans les navigateurs pris en charge sur un poste de travail, un appareil mobile ou le Web, sélectionnez l’icône Aperçu sur l’ordinateur

    Remarque :

    XD ne prend pas en charge l’effet de défilement lors de l’aperçu des plans de travail animés avec l’animation automatique.

  5. Pour partager votre prototype avec les parties prenantes depuis l’application de bureau XD, cliquez sur Partager et choisissez Partager pour révision (pour Prototype) ou Partager pour développement (pour des spécifications techniques). Pour plus d’informations sur le partage de prototypes et de spécifications techniques, consultez la section Partage de prototypes et de spécifications techniques.

Vous pouvez également consulter cette vidéo pour découvrir l’animation automatique.

Temps de visionnage : 1 minute.


Exemples

Bonnes pratiques

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