Découvrez comment créer des designs et des prototypes à l’aide de l’animation automatique avec gestes de glissement.

L’animation automatique permet de créer facilement des prototypes avec des transitions animées percutantes. Il vous suffit de dupliquer un plan de travail, de modifier les propriétés de l’objet, telles que la taille, la position et la rotation, et d’appliquer une action d’animation automatique pour créer une transition animée entre les plans de travail. Pour utiliser l’animation automatique, assurez-vous que les objets que vous souhaitez animer portent le même nom de calque dans chaque plan de travail.

Comment fonctionne l’animation automatique ?

Les designers utilisent habituellement plusieurs transitions entre différents plans de travail pour associer les interactions entre leurs prototypes.  Avec l’animation automatique, les designers peuvent utiliser XD pour créer des micro-interactions entre deux plans de travail en :

  • Dupliquant des objets entre les plans de travail
  • Modifiant leurs propriétés telles que la taille, la position, la rotation, etc. Pour plus d’informations sur les propriétés prises en charge, reportez-vous à la section Propriétés prises en charge pour l’animation automatique.
  • Passant au mode de prototypage
  • Ajoutant l’animation automatique comme une nouvelle transition , puis 
  • Prévisualisant le prototype sur un poste de travail ou un appareil mobile

Comme vous utilisez la fonction Appuyer pour déclencher des transitions, vous pouvez combiner le geste de glissement à l’animation automatique pour définir des micro-interactions entre les plans de travail. Les nouveaux objets apparaissent en fondu et les objets supprimés disparaissent en fondu lors d’une transition utilisant l’animation automatique.

Remarque :

Actuellement, l’animation automatique n’étant pas prise en charge dans les navigateurs web, les prototypes auto-animés sont visibles en fondu sur le web.

Comment un geste de glissement fonctionne-t-il avec la fonction d’animation automatique ?

Adobe XD s’est transformé. Au-delà de simples interactions utilisateur par clics, l’application propose aujourd’hui des options de création de prototypes innovantes, telles que Heure, Appuyer, Faire glisser et Voix (anglais uniquement).

Vous pouvez utiliser un geste de glissement pour simuler des expériences utilisateur telles que le déplacement de cartes ou d’écrans. Lorsque vous sélectionnez Faire glisser dans la liste des déclencheurs, XD définit automatiquement l’action sur Animation automatique.

Remarque :

Actuellement, la prévisualisation du geste de glissement est pris en charge uniquement sur les postes de travail et appareils mobiles.

  1. En mode Prototype, modifiez la position du même objet sur le plan de travail cible et définissez le paramètre Déclencheur sur Faire glisser.

  2. La position de début et de fin d’un objet détermine le sens du glissement. Faites glisser de gauche à droite dans la fenêtre d’aperçu ou dans l’application mobile si l’objet sur le premier plan de travail se situe à gauche et que la position du même objet sur le deuxième plan de travail est à droite. Vous pouvez également créer un événement de glissement de droite à gauche ou de haut en bas, etc.

  3. Pour prévisualiser les changements sur un poste de travail ou un appareil mobile, sélectionnez l’icône Aperçu .

     

    Geste de glissement en action
    Geste de glissement en action

Création d’une transition à animation automatique par glissement pour intégrer des workflows

  1. En mode Prototype, sélectionnez tous les plans de travail dans la zone de travail pour 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.
    • 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 geste sur Faire glisser B. Action sur Animation automatique C. Définir le plan de travail cible D. Sélectionner les options d’accélération 
  4. Pour prévisualiser les changements sur un poste de travail ou un appareil mobile, sélectionnez l’icône Aperçu sur l’ordinateur .

    L’animation automatique en action
    L’animation automatique en action

Enregistrement de transitions auto-animées

  1. Dans l’application XD pour postes de travail, cliquez sur l’icône Partager dans l’angle supérieur droit et choisissez Enregistrement vidéo.

  2. En mode Aperçu, utilisez le bouton d’enregistrement  pour enregistrer vos animations.

Partage et révision du lien de prototype sur poste de travail et appareil mobile

Dans l’application pour postes de travail, cliquez sur Partager et choisissez Publier le prototype ou Publier la spécification technique. Pour plus d’informations sur le partage de prototypes et de spécifications techniques, reportez-vous à la section Partage de prototypes et de spécifications techniques.

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