Aller au guide d’utilisation
Navigation Patternspar Owl-Listener

Navigation Patterns Skill.

Transformez une hiérarchie de l'information en commandes de navigation reconnaissables et en parcours clairs entre les destinations.

  • Design d'interaction
  • Navigation
Revue de la source · Navigation PatternsSKILL.md
Tâche Design d'interaction Produit • Un modèle de navigation recommandé, avec une justification fondée sur les tâches. • Une répartition de la navigation globale, locale, utilitaire et contextuelle. • Des exigences pour les états actif, survol, focus, désactivé et badge. Avant de commencer Il faut une hiérarchie de l'information et des priorités de tâches ; aucun package de composants de navigation n'est fourni.
Résumé éditorial · source examinée 2026-10-07 · pas un exemple généré

01 Fonctionnement

Choisir comment les utilisateurs se déplacent dans un produit

Un guide de choix de navigation couvrant les modèles globaux et locaux, les repères d'orientation, les conventions de plateforme et la conception des états.

Flux de travail fondé sur la sourcePas un benchmark d'exécution

La méthode de travail

Navigation Patterns sélectionne l'interface qui expose la structure d'un produit : onglets mobiles, barres latérales de bureau, navigation supérieure, fils d'Ariane, liens contextuels ou tiroir. Il distingue la navigation globale, locale et utilitaire afin que des destinations de niveaux différents ne se concurrencent pas dans une même commande.

La source insiste autant sur l'orientation que sur le déplacement. L'utilisateur doit savoir où il se trouve, prévoir où mène un libellé et trouver le chemin du retour. Les états actifs doivent rester reconnaissables sans reposer uniquement sur la couleur, et le modèle doit correspondre à la plateforme et à la fréquence d'usage, pas seulement économiser de l'espace d'écran.

Livrables attendus

  • Un modèle de navigation recommandé, avec une justification fondée sur les tâches.
  • Une répartition de la navigation globale, locale, utilitaire et contextuelle.
  • Des exigences pour les états actif, survol, focus, désactivé et badge.
Voir l'exemple de brief

Du brief à la revue

  1. 01
    Lire la structure

    Identifiez les destinations principales, les sections imbriquées et les utilitaires occasionnels à partir de l'architecture de l'information existante.

  2. 02
    Adapter le modèle au contexte

    Tenez compte de la plateforme, du nombre de destinations, de la profondeur de la hiérarchie et de l'accessibilité au pouce sur mobile avant de choisir les commandes.

  3. 03
    Vérifier l'orientation

    Précisez les repères de position actuelle et testez les libellés et les tâches entre sections avec des utilisateurs représentatifs.

02 Cas d’usage

Quand l'utiliser

Il faut une hiérarchie de l'information et des priorités de tâches ; aucun package de composants de navigation n'est fourni.

Un bon choix

  • Choisir entre onglets et tiroirsUtile lorsque les options de navigation présentent des compromis différents de visibilité et d'accessibilité.
  • Structures de produit profondesAide à combiner fils d'Ariane et navigation locale sans mélanger les niveaux de hiérarchie.

Limites à vérifier

  • Ne remplace pas l'architecture de l'informationDes catégories et des libellés peu clairs peuvent nécessiter une restructuration avant qu'une commande puisse bien fonctionner.
  • Aucune preuve d'utilisabilité automatiqueLes recommandations de modèles doivent être validées par des tests de premier clic ou de tâches.

Éléments à fournir

  • Hiérarchie des destinationsFournissez les sections établies et leurs relations parent-enfant.
  • Priorités d'usageIdentifiez les tâches fréquentes, les déplacements entre sections et les destinations utilitaires.
  • PlateformesDécrivez les contraintes de bureau et de mobile, les conventions et les exigences d'accessibilité.

03 Décisions importantes

Décisions importantes

  1. La visibilité a un coût

    Masquer la navigation peut simplifier la mise en page, mais rendre les destinations importantes plus difficiles à découvrir.

  2. Un état au-delà de la couleur

    Le poids de la police, les soulignements ou des indicateurs peuvent rendre la position actuelle perceptible sans s'appuyer uniquement sur la teinte.

04 Exemple de brief

Essayer un brief ciblé

L'exemple de brief ci-dessous n'a pas été testé. Vérifiez la configuration du skill avant de l'utiliser.

Examiner la configuration

Utilisez la méthode d'installation documentée du dépôt et conservez les fichiers complémentaires référencés. Cette fiche décrit une méthode de design ciblée, et non une application exécutable.

Fichier source amont
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/interaction-design/skills/navigation-patterns/SKILL.md

Il faut une hiérarchie de l'information et des priorités de tâches ; aucun package de composants de navigation n'est fourni.

Commencer par un seul livrable

Adaptez le périmètre, les documents sources et les contraintes de ce brief avant d'exécuter le skill.

Exemple de brief
Utilisez navigation-patterns pour une application d'analyse de bureau avec six sections principales, des dossiers de rapports imbriqués et un accès mobile. Comparez une barre latérale et une navigation supérieure, séparez les utilitaires, et précisez les fils d'Ariane et les états actif/focus. Expliquez quelles questions d'architecture de l'information doivent être résolues avant l'implémentation.

Examiner le résultat

Comparez le résultat obtenu à ces critères observables.

  • Les niveaux global et local ne sont pas mélangés par accident.
  • La destination actuelle est indiquée par plus que la couleur.
  • Les tâches entre sections disposent d'un chemin découvrable et d'un chemin de retour.

OpenDesign fournit un espace de travail de design local pour les agents de code. Cette fiche ne signifie pas que le skill est inclus ni que ses outils externes, identifiants et dépendances logicielles sont fournis.

05 Source et licence

Source et licence

Cette page décrit la révision source figée liée ci-dessous. Le comportement et les exigences en amont peuvent changer.

Propriétaire de la source
Owl-Listener
Licence
MIT
Version examinée
2026-10-07 · 9a6930cf84a8
Résumé éditorial de la source
Un guide de choix de navigation couvrant les modèles globaux et locaux, les repères d'orientation, les conventions de plateforme et la conception des états.

Résumé original rédigé par OpenDesign, d'après la source liée. Les étoiles du dépôt sont un signal de popularité daté, pas une mesure d'usage du skill ni une note de qualité.

06 Questions avant de commencer

Questions avant de commencer

La navigation mobile doit-elle toujours utiliser un tiroir ?

Non. La source privilégie des onglets visibles pour un petit nombre de destinations principales et considère les tiroirs comme un compromis en matière de découvrabilité.

Quand les fils d'Ariane sont-ils utiles ?

Ils aident à expliquer la position et l'ascendance dans des hiérarchies de contenu plus profondes, souvent avec une navigation locale.

Peut-il corriger des noms de sections peu familiers ?

Il peut les signaler et recommander de tester les libellés, mais les catégories sous-jacentes peuvent nécessiter un travail sur l'architecture de l'information.

OpenDesign

Faites de la place pour la prochaine itération de design.

Gardez votre brief, vos documents sources et votre travail de design ensemble dans un espace de travail local. Vérifiez la configuration propre au skill avant de l'ajouter à votre flux de travail.

Fichier source amont
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/interaction-design/skills/navigation-patterns/SKILL.md