Navigation Patternsvon Owl-Listener

Navigation Patterns Skill.

Verwandeln Sie eine Informationshierarchie in erkennbare Navigationselemente und klare Wege zwischen Zielen.

Interaktionsdesign
Navigation

OpenDesign herunterladen Anleitung ansehen

Quellenprüfung · Navigation PatternsSKILL.md

Aufgabe Interaktionsdesign Liefert • Ein empfohlenes Navigationsmuster mit aufgabenbezogener Begründung. • Zuordnungen für globale, lokale, Utility- und kontextuelle Navigation. • Anforderungen an aktive, Hover-, Fokus-, deaktivierte und Badge-Zustände. Vor dem Start Benötigt eine Informationshierarchie und Aufgabenprioritäten; es wird kein Navigationskomponenten-Paket mitgeliefert.

Redaktionelle Zusammenfassung · Quelle geprüft 2026-10-07 · kein generiertes Beispiel

01 Funktionen

Wählen Sie, wie Nutzer sich durch ein Produkt bewegen

Ein Leitfaden zur Auswahl von Navigation, der globale und lokale Muster, Orientierungshinweise, Plattformkonventionen und Zustandsdesign abdeckt.

Quellenbasierter AblaufKein Ausführungs-Benchmark

Die Arbeitsweise

Navigation Patterns wählt die Oberfläche, die die Struktur eines Produkts sichtbar macht: mobile Tabs, Desktop-Seitenleisten, Top-Navigation, Breadcrumbs, kontextuelle Links oder ein Drawer. Globale, lokale und Utility-Navigation bleiben getrennt, damit Ziele auf unterschiedlichen Ebenen nicht im selben Element konkurrieren.

Die Quelle betont Orientierung ebenso wie Bewegung. Nutzer müssen wissen, wo sie sich befinden, vorhersehen, wohin ein Label führt, und einen Weg zurück finden. Aktive Zustände müssen auch ohne Farbe erkennbar bleiben, und das Muster sollte zu Plattform und Nutzungshäufigkeit passen, statt nur Platz zu sparen.

Erwartete Ergebnisse

Ein empfohlenes Navigationsmuster mit aufgabenbezogener Begründung.
Zuordnungen für globale, lokale, Utility- und kontextuelle Navigation.
Anforderungen an aktive, Hover-, Fokus-, deaktivierte und Badge-Zustände.

Beispiel-Briefing ansehen

Vom Briefing zur Prüfung

01
Struktur lesen
Primäre Ziele, verschachtelte Bereiche und gelegentliche Utilities aus der bestehenden Informationsarchitektur ermitteln.
02
Muster zum Kontext passend wählen
Plattform, Anzahl der Ziele, Hierarchietiefe und Erreichbarkeit auf Mobilgeräten berücksichtigen, bevor Elemente gewählt werden.
03
Orientierung prüfen
Hinweise auf den aktuellen Standort festlegen und Labels sowie bereichsübergreifende Aufgaben mit repräsentativen Nutzern testen.

02 Einsatzbereiche

Wann es passt

Benötigt eine Informationshierarchie und Aufgabenprioritäten; es wird kein Navigationskomponenten-Paket mitgeliefert.

Gut geeignet

Wahl zwischen Tabs und DrawersNützlich, wenn Navigationsoptionen unterschiedliche Kompromisse bei Sichtbarkeit und Erreichbarkeit haben.
Tiefe ProduktstrukturenHilft, Breadcrumbs und lokale Navigation zu kombinieren, ohne Hierarchieebenen zu vermischen.

Grenzen, die zu prüfen sind

Kein Ersatz für IAUnklare Kategorien und Labels erfordern eventuell eine Neustrukturierung, bevor irgendein Element gut funktionieren kann.
Kein automatischer Usability-NachweisMusterempfehlungen müssen durch First-Click- oder aufgabenbasierte Tests validiert werden.

Diese Eingaben mitbringen

ZielhierarchieGeben Sie die etablierten Bereiche und ihre Eltern-Kind-Beziehungen an.
NutzungsprioritätenBenennen Sie häufige Aufgaben, bereichsübergreifende Wechsel und Utility-Ziele.
PlattformenBeschreiben Sie Einschränkungen, Konventionen und Barrierefreiheitsanforderungen für Desktop und Mobilgeräte.

03 Wichtige Entscheidungen

Entscheidungen, auf die es ankommt

Sichtbarkeit hat ihren Preis
Verborgene Navigation kann das Layout vereinfachen, macht wichtige Ziele aber schwerer auffindbar.
Zustand jenseits von Farbe
Schriftstärke, Unterstreichungen oder Indikatoren können den aktuellen Standort wahrnehmbar machen, ohne sich allein auf den Farbton zu verlassen.

04 Beispielbriefing

Ein fokussiertes Briefing ausprobieren

Das folgende Beispiel-Briefing wurde nicht getestet. Prüfen Sie die Einrichtung des Skills, bevor Sie es verwenden.

Einrichtung prüfen

Nutzen Sie den dokumentierten Installationsweg des Repositorys und behalten Sie alle referenzierten Begleitdateien. Dieser Eintrag beschreibt eine fokussierte Designmethode, keine ausführbare Anwendung.

Upstream-Quelldatei

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

Benötigt eine Informationshierarchie und Aufgabenprioritäten; es wird kein Navigationskomponenten-Paket mitgeliefert.

Mit einem Ergebnis beginnen

Passen Sie Umfang, Quellmaterial und Rahmenbedingungen dieses Briefings an, bevor Sie den Skill ausführen.

Beispiel-Briefing

Verwende navigation-patterns für eine Desktop-Analytics-App mit sechs Hauptbereichen, verschachtelten Berichtsordnern und mobilem Zugriff. Vergleiche eine Seitenleiste mit Top-Navigation, trenne Utilities und spezifiziere Breadcrumbs sowie aktive Zustände und Fokuszustände. Erkläre, welche IA-Fragen vor der Implementierung geklärt werden müssen.

Ergebnis prüfen

Prüfen Sie die tatsächliche Ausgabe anhand dieser beobachtbaren Kriterien.

Globale und lokale Ebenen werden nicht versehentlich vermischt.
Das aktuelle Ziel wird durch mehr als Farbe angezeigt.
Bereichsübergreifende Aufgaben haben einen auffindbaren Weg und einen Rückweg.

OpenDesign bietet einen lokalen Designarbeitsbereich für Coding-Agenten. Dieser Eintrag bedeutet nicht, dass der Skill gebündelt ist oder dass externe Tools, Zugangsdaten und Software-Abhängigkeiten enthalten sind.

OpenDesign herunterladen Quickstart lesen

05 Quelle und Lizenz

Quelle und Lizenz

Diese Seite beschreibt die unten verlinkte, festgelegte Quellrevision. Verhalten und Anforderungen im Upstream können sich ändern.

Quellen-Eigentümer: Owl-Listener
Repository: Owl-Listener/designer-skills
Skill-Datei: interaction-design/skills/navigation-patterns/SKILL.md
Lizenz: MIT
Geprüfter Stand: 2026-10-07 · 9a6930cf84a8

Redaktionelle Quellenzusammenfassung

Ein Leitfaden zur Auswahl von Navigation, der globale und lokale Muster, Orientierungshinweise, Plattformkonventionen und Zustandsdesign abdeckt.

Eigene Zusammenfassung von OpenDesign auf Basis der verlinkten Quelle. Repository-Sterne sind ein datiertes Popularitätssignal, weder Skill-Nutzung noch Qualitätswert.

06 Fragen vor dem Start

Fragen vor dem Start

Sollte mobile Navigation immer einen Drawer nutzen?

Nein. Die Quelle bevorzugt sichtbare Tabs für eine kleine Menge primärer Ziele und sieht Drawers als Kompromiss bei der Auffindbarkeit.

Wann sind Breadcrumbs nützlich?

Sie helfen, Standort und Herkunft in tieferen Inhaltshierarchien zu erklären, oft zusammen mit lokaler Navigation.

Kann es unvertraute Bereichsnamen beheben?

Es kann sie markieren und Label-Tests empfehlen, doch die zugrunde liegenden Kategorien erfordern möglicherweise Arbeit an der Informationsarchitektur.

OpenDesign

Schaffen Sie Raum für die nächste Design-Iteration.

Halten Sie Briefing, Quellmaterial und Designarbeit in einem lokalen Arbeitsbereich zusammen. Prüfen Sie die Einrichtung des Skills, bevor Sie ihn in Ihren Workflow aufnehmen.

OpenDesign herunterladen Design-Skills durchsuchen