Animation des prototypes

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

Avec l’animation automatique, vous pouvez créer des transitions immersives pour visualiser le mouvement de contenu entre des plans de travail.

Combinée avec le pouvoir des déclencheurs Faire glisser et Temps, l’animation automatique vous aide à créer une large gamme d’effets, comme un balayage et un glissement YouTube pour mieux rendre une story de prototype.

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

Pour créer un prototype animé, procédez comme suit :

  1. Avant de commencer, utilisez ces règles simples pour comprendre comment les objets sont gérés lors de l’animation :

    • Si un objet n’est pas présent sur le plan de travail cible, il apparaît en fondu.
    • Si un objet n’est pas présent sur le plan de travail source, il disparaît en fondu.
    • Si un objet a une correspondance en termes de nom du calque et de groupe, les attributs sont animés. Pour une liste complète des propriétés et des transitions prises en charge, lisez les Propriétés d’objet.
    • Si vous souhaitez prototyper un effet de défilement horizontal ou vertical, utilisez des groupes de défilement.
  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. Vous pouvez désormais affecter deux actions à un seul déclencheur, notamment Appuyer sur. Pour cela, réglez le premier bouton Action + dans l’Inspecteur Propriétés sur TransitionAnimation automatiqueSuperpositionDéfilement ou Plan de travail précédent, puis réglez le deuxième bouton Action + sur une action non transitoire, telle que Lecture audio ou Lecture vocale. Notez que si vous sélectionnez la lecture audio ou vocale comme première action, vous ne pouvez pas ajouter de deuxième action.
    • 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. Pour définir davantage d’interaction pour un objet, sélectionnez l’objet avec une interaction déjà définie, puis cliquez sur le bouton + sur le plan de travail ; vous pouvez également cliquer sur + sur l’Inspecteur Propriétés.

     Rappelez-vous que vous pouvez appliquer les déclencheurs de type Appuyer, Faire glisser, Survoler et Temporisé une seule fois et les déclencheurs de type VocalTouches/Manette à plusieurs reprises. 

  5. Sélectionnez l’aperçu de vos animations dans les navigateurs pris en charge

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

Exemples et exemples de fichiers

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.

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 ces options dans l’Inspecteur Propriétés du prototype :

  • 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.

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’Inspecteur Propriétés du prototype :
  • 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.

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)

En savoir plus

Visionnez cette vidéo pour en savoir plus sur l’animation automatique dans XD.
Temps de visionnage : 6 minutes

Logo Adobe

Accéder à votre compte