Guide d'utilisation Annuler

Création de liens d’ancrage dans Adobe XD

Rechercher
  1. Guide de l’utilisateur d’Adobe XD
  2. Introduction
    1. Nouveautés d’Adobe XD
    2. Questions fréquentes
    3. Design, création de prototypes et partage avec Adobe XD
    4. Configuration requise
      1. Configuration matérielle et logicielle requise
      2. Adobe XD, Big Sur et Apple Silicon | macOS 11
    5. Notions de base concernant l’espace de travail
    6. Changement de langue dans l’application Adobe XD
    7. Accès aux kits de conception d’interface utilisateur
    8. Accessibilité dans Adobe XD
    9. Raccourcis clavier
    10. Conseils et astuces
    11. Options d’abonnement à Adobe XD
    12. Modifications apportées à la formule de lancement d’Adobe XD
  3. Conception
    1. Plans de travail, repères et calques
      1. Prise en main des plans de travail
      2. Utilisation des guides et des grilles
      3. Création de plans de travail défilants
      4. Utilisation de calques
      5. Création de groupes de défilement
    2. Formes, objets et chemins
      1. Sélection, redimensionnement et rotation d’objets
      2. Déplacement, alignement, répartition et disposition d’objets
      3. Regroupement, verrouillage, duplication, copie et retournement d’objets
      4. Application d’un contour, d’un fond ou d’une ombre portée à un objet
      5. Création d’éléments répétés
      6. Création de designs en perspective avec des transformations 3D
      7. Modification d’objets à l’aide d’opérations booléennes
    3. Texte et polices
      1. Utilisation d’outils de dessin et de texte
      2. Polices dans Adobe XD
    4. Composants et états
      1. Utilisation de composants
      2. Utilisation de composants imbriqués
      3. Ajout de plusieurs états aux composants
    5. Masquage et effets
      1. Création d’un masque avec des formes
      2. Utilisation des effets de flou
      3. Création et modification de dégradés
      4. Application des effets de fusion
    6. Mise en page
      1. Redimensionnement réactif et contraintes
      2. Définition d’un remplissage fixe pour des composants et des groupes
      3. Création de conceptions dynamiques avec des piles
    7. Vidéos et animations Lottie
      1. Utilisation de vidéos
      2. Création de prototypes avec des vidéos
      3. Utilisation d’animations Lottie
  4. Prototypage
    1. Création de prototypes interactifs
    2. Animation des prototypes
    3. Propriétés d’objet prises en charge pour l’animation automatique
    4. Création de prototypes avec clavier et manette de jeu
    5. Création de prototypes à l’aide de la lecture et des commandes vocales
    6. Création de transitions temporisées
    7. Ajouter des incrustations
    8. Conception de prototypes de voix
    9. Création de liens d’ancrage
    10. Création d’hyperliens
    11. Aperçu de designs et de prototypes
  5. Partage, exportation et révision
    1. Partage des plans de travail sélectionnés
    2. Partage de conceptions et de prototypes
    3. Définition des autorisations d’accès pour les liens
    4. Utilisation de prototypes
    5. Révision de prototypes
    6. Utilisation des spécifications techniques
    7. Partage de spécifications techniques
    8. Inspection de spécifications techniques
    9. Navigation dans les spécifications techniques
    10. Révision des spécifications techniques et commentaires
    11. Exportation d’actifs de conception
    12. Exportation et téléchargement de fichiers à partir de spécifications techniques
    13. Partage de groupe pour les entreprises
  6. Chartes graphiques
    1. Chartes graphiques et bibliothèques Creative Cloud
    2. Utilisation d’actifs de document dans Adobe XD
    3. Utilisation des bibliothèques Creative Cloud dans Adobe XD
    4. Migration d’actifs liés vers les bibliothèques Creative Cloud
    5. Utilisation des jetons de conception 
    6. Utilisation d’actifs provenant de bibliothèques Creative Cloud
  7. Documents en ligne
    1. Documents en ligne dans Adobe XD
    2. Collaboration et cocréation de conceptions
    3. Cocréation de documents partagés
  8. Intégrations et plug-ins
    1. Utilisation d’actifs externes
    2. Utilisation d’actifs de création provenant de Photoshop
    3. Copier-coller d’actifs depuis Photoshop
    4. Importation ou ouverture de conceptions Photoshop
    5. Utilisation des fichiers Illustrator dans Adobe XD
    6. Ouverture et importation de conceptions Illustrator
    7. Copie de vecteurs d’Illustrator vers XD
    8. Plug-ins pour Adobe XD
    9. Création et gestion des plug-ins
    10. Intégration Jira pour XD
    11. Plug-in Slack pour XD
    12. Plug-in Zoom pour XD
    13. Publication de designs depuis XD vers Behance
  9. XD pour iOS et Android
    1. Aperçu sur appareils mobiles
    2. FAQ concernant Adobe XD pour mobile
  10. Résolution des problèmes
    1. Problèmes connus et résolus
      1. Problèmes connus
      2. Problèmes résolus
    2. Installation et mises à jour
      1. XD semble incompatible avec Windows
      2. Code d’erreur 191
      3. Code d’erreur 183
      4. Problèmes d’installation des modules externes XD
      5.  Invitation à désinstaller et réinstaller Adobe XD sur Windows 10
      6. Problèmes liés à la migration des préférences
    3. Lancement et blocage
      1.  XD se bloque au lancement sur Windows 10
      2.  XD se ferme lorsque vous vous déconnectez de Creative Cloud
      3. Problème lié à l’état d’un abonnement sur Windows
      4. Avertissement d’application bloquée lors du lancement de XD sur Windows
      5. Génération du fichier de vidage sur Windows
      6. Collecte et partage de journaux d’incidents
    4. Documents en ligne et bibliothèques Creative Cloud
      1. Problèmes liés aux documents en ligne XD
      2. Problèmes relatifs aux composants liés
      3. Problèmes relatifs aux bibliothèques et aux liens
    5. Prototype, publication et révision
      1. Impossible d’enregistrer les interactions de prototypes sur macOS Catalina
      2. Problèmes liés aux workflows de publication
      3. Les liens publiés n’apparaissent pas dans les navigateurs
      4. Les prototypes ne s’affichent pas correctement dans les navigateurs
      5. Le panneau de commentaires s’affiche soudainement sur les liens partagés
      6. Impossible de publier des bibliothèques
    6. Importation, exportation et utilisation d’autres applications
      1. Importation et exportation dans XD
      2. Fichiers Photoshop dans XD
      3. Fichiers Illustrator dans XD
      4. Exportation dans After Effects à partir de XD
      5. Fichiers Sketch dans XD
      6. ++Applications tierces non visibles lors de l’exportation

Découvrez comment créer des liens d’ancrage pour améliorer l’expérience de navigation dans un plan de travail.

Adobe XD permet de créer des liens d’ancrage lors du prototypage et de faire défiler l’affichage pour accéder à des sections spécifiques d’un plan de travail. Les liens d’ancrage accélèrent la navigation et augmentent la convivialité lors de la conception de longs formulaires ou articles.

Liens d’ancrage
Amélioration de l’expérience de navigation dans un plan de travail

Vous voulez simuler votre expérience de défilement en accédant rapidement à des sections spécifiques d’un plan de travail ? Pour commencer, procédez comme suit :

  1. Passez en mode Prototype. Sur le plan de travail, sélectionnez l’objet auquel vous souhaitez ajouter un lien d’ancrage.

  2. Faites glisser le fil de prototypage vers le bas sur votre plan de travail jusqu’à ce que vous atteigniez le point vers lequel vous souhaitez créer un lien.

  3. Cliquez sur le fil de prototypage pour afficher le panneau Interaction qui figure dans l’Inspecteur Propriétés et définissez les options suivantes :

    • Déclencheur : définissez la valeur sur Appui.
    • Type d’action : définissez la valeur sur Défilement. Vous souhaitez affecter plusieurs actions à un seul déclencheur ? Pour plus d’informations, lisez cet article.
    • Destination : sélectionnez le calque de destination.
    • Décalage Y : entrez la valeur de décalage Y par rapport au haut de l’objet lié. Faites glisser la poignée de décalage Y vers la gauche du plan de travail et observez le changement de la valeur de décalage Y. Toute valeur au-dessus de l’objet lié est un décalage négatif et toute valeur en dessous de l’objet est un décalage positif.
    • 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 pour que vos animations disparaissent de votre prototype au ralenti.
    • Durée : saisissez une durée. La durée maximale que vous pouvez définir pour la transition entre deux plans de travail est de cinq secondes.
    ancrage-liens

    A. Sélectionnez le type de déclencheur. B. Sélectionnez le type d’action Défilement C. Sélectionnez le plan de travail de destination. D. Saisissez la valeur de décalage Y E. Sélectionnez des effets de rythme F. Saisissez la durée 

  4. Pour prévisualiser l’effet de défilement sur votre plan de travail, cliquez sur. 

En savoir plus

« Utilisez des liens d’ancrage pour créer une adorable page d’entrée pour un livre animalier avec une interaction de type Retour au début ». Howard Pinksy, expert spécialiste XD chez Adobe.

Regardez cette vidéo pour en savoir plus. 

Temps de visionnage : 3 minutes

Maintenant que vous savez comment créer des liens d’ancrage, téléchargez l’exemple de kit d’interface utilisateur contenant plusieurs exemples de conceptions Web d’une seule page et essayez-les par vous-même.

Télécharger votre fichier

Et après ?

Vous avez commencé à ajouter des liens de navigation dans votre conception. Continuez et découvrez comment ajouter plusieurs interactions à votre conception à l’aide de lectures et de commandes vocales.

Vous avez une question ou une idée ?

Questions à la communauté

Si vous avez une question à poser ou une idée à partager, rejoignez la communauté Adobe XD. Nous aimerions connaître vos commentaires et découvrir vos créations.

Logo Adobe

Accéder à votre compte

Liens rapides

Voir toutes vos formules Gérer vos formules

Mentions légales    |    Politique de confidentialité en ligne

[Feedback V2 Badge]