Guide d'utilisation Annuler

Création de liens d’ancrage dans Adobe XD

  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. Gestion des couleurs
    5. Configuration requise
      1. Configuration matérielle et logicielle requise
      2. Adobe XD, Big Sur et Apple Silicon | macOS 11
    6. Notions de base concernant l’espace de travail
    7. Changement de langue dans l’application Adobe XD
    8. Accès aux kits de conception d’interface utilisateur
    9. Accessibilité dans Adobe XD
    10. Raccourcis clavier
    11. Conseils et astuces
  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 de ressources de design
    12. Exportation et téléchargement de fichiers à partir de spécifications techniques
    13. Partage de groupe pour les entreprises
    14. Sauvegarde et transfert de ressources XD
  6. Chartes graphiques
    1. Chartes graphiques et bibliothèques Creative Cloud
    2. Utilisation de ressources de document dans Adobe XD
    3. Utilisation des bibliothèques Creative Cloud dans Adobe XD
    4. Migration de ressources liées vers les bibliothèques Creative Cloud
    5. Utilisation des jetons de conception 
    6. Utilisation de ressources 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 de ressources externes
    2. Utilisation de ressources de design provenant de Photoshop
    3. Copier-coller de ressources 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.
    Création de liens d’ancrage

    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.

Fichier d’exemple


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

 Adobe

Recevez de l’aide plus rapidement et plus facilement

Nouvel utilisateur ?

Adobe MAX 2024

Adobe MAX
La conférence sur la créativité

Du 14 au 16 octobre à Miami Beach et en ligne

Adobe MAX

La conférence sur la créativité

Du 14 au 16 octobre à Miami Beach et en ligne

Adobe MAX 2024

Adobe MAX
La conférence sur la créativité

Du 14 au 16 octobre à Miami Beach et en ligne

Adobe MAX

La conférence sur la créativité

Du 14 au 16 octobre à Miami Beach et en ligne