Sur les plans de travail prédéfinis : faites glisser le point le plus bas du plan de travail vers le bas pour augmenter sa longueur au-delà de l'écran de l'appareil. Le début du contenu défilant est indiqué par une ligne en pointillé.
Dernière mise à jour le
10 févr. 2023
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.
Création d’un défilement vertical
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.
Reliez les plans de travail en mode Prototype.
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.
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 souhaitez utiliser des paramètres de plans de travail prédéfinis pour créer une liste déroulante avec un défilement vertical ?
- Utilisez l’outil Sélectionner pour cliquer sur le nom du plan de travail ou faire glisser sur les plans de travail. Vous pouvez également cliquer sur un nom de plan de travail dans le panneau Calques pour le sélectionner dans la fenêtre de document.
- Pour allonger le plan de travail sélectionné, faites glisser le point inférieur du plan de travail vers le bas. Une ligne en pointillés indique la hauteur initiale du plan de travail.
- Vous pouvez prévisualiser directement le défilement d’un plan de travail dans XD à l’aide de l’option Aperçu sur ordinateur.
Téléchargez les exemples de fichiers et testez-les, ou regardez cette vidéo pour plus d’informations.
Temps de visionnage : 1 minute.
Lorsque vous créez vos designs pour poste de travail ou mobile, voulez-vous voir des parties de votre site web uniquement lors du défilement et épingler les éléments de design sans qu'ils soient flottants ?Regardez cette vidéo pour en savoir plus sur les plans de travail avec défilement et les éléments fixes.
Durée de visionnage : 1 minute.
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 ?
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.
Concevoir des prototypes UX avec Adobe XD
Créez des maquettes interactives pour sites web et applications mobiles.
