Guide d'utilisation Annuler

Création de plans de travail défilants

Découvrez comment créer des plans de travail défilants.

Lorsque vous créez un design XD, il arrive parfois qu’un plan de travail ne soit pas suffisamment long pour s’adapter à votre contenu. En rallongeant un plan de travail et en choisissant des options en fonction de vos besoins de conception, vous pouvez faire défiler verticalement un plan de travail pour l’adapter à différentes tailles d’appareils.

Le défilement vertical permet de simuler des effets de défilement lors de la conception de listes déroulantes défilantes ou de sites Web. Cependant, vous pouvez utiliser des groupes de défilement pour ajouter un nouveau niveau d’interaction lors de la conception d’interfaces à plusieurs panneaux, de mappages et de galeries d’images horizontales.

Plan de travail défilant

Création d’un défilement vertical

  1. Sur des plans de travail prédéfinis : Faites glisser le point le plus bas du plan de travail afin qu’il soit plus long que l’écran de l’appareil. Le début du contenu défilant est indiqué par une ligne en pointillé. 

    Ligne pointillée et contenu défilant
    Ligne pointillée et contenu défilant

  2. En mode Design, sélectionnez les options suivantes sous Inspecteur Propriétés :

    • Défilement : sélectionnez Vertical ou Aucun
    • Position fixe lors du défilement : vous permet d'épingler les éléments dans une position fixe afin d’éviter le défilement avec le contenu. 
    • Hauteur de la fenêtre : spécifiez la hauteur de la fenêtre dans laquelle vous pouvez visualiser le plan de travail. 

    Vous pouvez appliquer un effet de défilement vertical pour déplacer le contenu de votre plan de travail vers le haut et vers le bas.

    Défilement vertical sur un plan de travail avec taille personnalisée
    Défilement vertical sur un plan de travail

  3. Reliez les plans de travail en mode Prototype.

  4. En mode Prototype, sélectionnez les options suivantes sous Inspecteur Propriétés :

    • Conserver la position de défilement : les transitions permettent de passer au plan de travail suivant tout en conservant la position du plan de travail précédent. Consultez cette publication Twitter pour plus de détails. 
    • Position fixe lors du défilement : épingle les éléments de la conception dans une position fixe afin d’éviter le défilement avec le contenu. 
    Conservation de la position de défilement
    Conservation de la position de défilement

    Position fixe lors du défilement
    Position fixe lors du défilement

  5. Pour prévisualiser le plan de travail, sélectionnez Aperçu sur ordinateur  . Faites glisser la fenêtre d’aperçu pour afficher le défilement vertical.

Exemples et exemples de fichiers

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

Conseils et astuces

Pour créer des effets de défilement horizontal dans vos créations, utilisez des groupes de défilement. Les groupes de défilement vous permettent de prototyper une fenêtre de contenu qui peut défiler horizontalement, verticalement ou dans les deux directions.


Ressources associées

Vous avez une question ou une suggestion ?

Questions à la communauté

Si vous avez une question à poser ou une idée à partager, rejoignez la communauté Adobe XD. Nous serions ravis de vous compter parmi nous et de découvrir vos créations.

Recevez de l’aide plus rapidement et plus facilement

Nouvel utilisateur ?