Hinweis
Für den Zugriff auf diese Seite ist eine Autorisierung erforderlich. Sie können versuchen, sich anzumelden oder das Verzeichnis zu wechseln.
Für den Zugriff auf diese Seite ist eine Autorisierung erforderlich. Sie können versuchen, das Verzeichnis zu wechseln.
Wenn Sie sich eine App als Eine Sammlung von Seiten vorstellen, beschreibt die Navigation das Verschieben zwischen Seiten und innerhalb einer Seite. Dies ist der Ausgangspunkt der Benutzererfahrung und die Art und Weise, wie Benutzer die Inhalte und Features finden, an der sie interessiert sind. Es ist sehr wichtig, und es kann schwierig sein, es richtig zu machen.
Sie haben eine große Anzahl von Auswahlmöglichkeiten für die Navigation. Sie könnten:
Benutzer müssen eine Reihe von Seiten in der Reihenfolge durchlaufen.
Stellen Sie ein Menü bereit, mit dem Benutzer direkt zu einer beliebigen Seite springen können.
Platzieren Sie alles auf einer einzelnen Seite, und stellen Sie Filtermechanismen zum Anzeigen von Inhalten bereit.
Es gibt zwar kein einzelnes Navigationsdesign, das für jede App geeignet ist, es gibt jedoch Prinzipien und Richtlinien, mit denen Sie das richtige Design für Ihre App bestimmen können.
Prinzipien einer guten Navigation
Beginnen wir mit den Grundprinzipien eines guten Navigationsdesigns:
- Konsistenz: Erfüllen Sie die Erwartungen der Benutzer.
- Einfachheit: Tun Sie nicht mehr, als Sie müssen.
- Klarheit: Stellen Sie klare Pfade und Optionen bereit.
Konsistenz
Die Navigation sollte den Erwartungen der Benutzer entsprechen. Die Verwendung von Standardsteuerelementen , mit denen Benutzer vertraut sind und standardkonventionen für Symbole, Speicherorte und Formatierungen folgen, machen die Navigation für Benutzer vorhersehbar und intuitiv.
Benutzer erwarten, bestimmte UI-Elemente an Standardpositionen zu finden.
Einfachheit
Weniger Navigationselemente vereinfachen die Entscheidungsfindung für Benutzer. Die Bereitstellung eines einfachen Zugriffs auf wichtige Ziele und das Ausblenden weniger wichtiger Elemente hilft Benutzern, schneller an die gewünschte Stelle zu gelangen.
Präsentieren von Navigationselementen in einem vertrauten Navigationsmenü.
Überfordern Sie Benutzer nicht mit vielen Navigationsoptionen.
Klarheit
Klare Pfade ermöglichen die logische Navigation für Benutzer. Um zu verhindern, dass Benutzer sich verirren, sollten Navigationsoptionen deutlich sein und die Beziehungen zwischen den Seiten klargestellt werden.
Ziele sind eindeutig gekennzeichnet, damit die Benutzer wissen, wo sie sich befinden.
Allgemeine Empfehlungen
Jetzt nehmen wir unsere Designprinzipien – Konsistenz, Einfachheit und Klarheit – und verwenden sie, um einige allgemeine Empfehlungen zu erstellen.
- Denken Sie an Ihre Benutzer. Verfolgen Sie typische Pfade, die sie möglicherweise durch Ihre App durchlaufen, und überlegen Sie für jede Seite, warum der Benutzer dort ist und wo er gehen möchte.
- Vermeiden Sie tiefe Navigationshierarchien. Wenn Sie über zwei Navigationsebenen hinausgehen, stellen Sie eine Breadcrumb-Leiste bereit, die dem Benutzer zeigt, wo er sich gerade befindet, und ermöglicht es ihnen, schnell wieder herauszukommen. Andernfalls riskieren Sie, dass Der Benutzer in einer tiefen Hierarchie gestrandet wird, dass er Schwierigkeiten hat, zu verlassen.
- Vermeiden Sie "Pogo-Sticking". Pogo-Sticking tritt auf, wenn verwandte Inhalte vorhanden sind, aber die Navigation dazu erfordert, dass der Benutzer eine Ebene nach oben und dann erneut nach unten wechselt.
Verwenden der richtigen Struktur
Nachdem Sie nun mit allgemeinen Navigationsprinzipien vertraut sind, wie sollten Sie Ihre App strukturieren? Es gibt zwei allgemeine Strukturen: flach und hierarchal.
Flach/Lateral
In einer flachen/lateralen Struktur sind Seiten nebeneinander vorhanden. Sie können in beliebiger Reihenfolge von einer Seite zu einer anderen wechseln.
Es wird empfohlen, eine flache Struktur zu verwenden, wenn:
- Die Seiten können in beliebiger Reihenfolge angezeigt werden.
- Die Seiten unterscheiden sich deutlich voneinander und weisen keine offensichtliche Beziehung zwischen übergeordneten und untergeordneten Elementen auf.
- Es gibt weniger als 8 Seiten in der Gruppe.
(Wenn es mehr Seiten gibt, kann es für Benutzer schwierig sein zu verstehen, wie die Seiten einzigartig sind oder ihre aktuelle Position innerhalb der Gruppe zu erkennen. Falls Sie glauben, dass dies für Ihre App kein Problem darstellt, fahren Sie fort und machen Sie die Seiten gleichwertig. Andernfalls sollten Sie eine hierarchische Struktur in Betracht ziehen, um die Seiten in zwei oder mehr kleinere Gruppen aufzuteilen.)
Hierarchisch
In einer hierarchischen Struktur werden Seiten in einer baumartigen Struktur organisiert. Jede untergeordnete Seite hat eine übergeordnete Seite, aber eine übergeordnete Seite kann eine oder mehrere untergeordnete Seiten haben. Um eine untergeordnete Seite zu erreichen, durchlaufen Sie die übergeordnete Seite.
Hierarchische Strukturen eignen sich gut zum Organisieren komplexer Inhalte, die sich über viele Seiten erstrecken. Der Nachteil besteht im Navigationsaufwand: Je tiefer die Struktur, desto mehr Klicks dauert es, um von Seite zu Seite zu gelangen.
Es wird eine hierarchische Struktur empfohlen, wenn:
- Seiten sollten in einer bestimmten Reihenfolge durchlaufen werden.
- Es gibt eine klare übergeordnete und untergeordnete Beziehung zwischen Seiten.
- Es gibt mehr als 7 Seiten in der Gruppe.
Kombinieren von Strukturen
Sie müssen nicht eine Struktur oder die andere Struktur auswählen; viele gut gestaltete Apps verwenden beide. Eine App kann flache Strukturen für Seiten auf oberster Ebene verwenden, die in beliebiger Reihenfolge angezeigt werden können, und hierarchische Strukturen für Seiten mit komplexeren Beziehungen.
Wenn Ihre Navigationsstruktur mehrere Ebenen aufweist, empfehlen wir, dass Peer-to-Peer-Navigationselemente nur mit den Peers innerhalb ihrer aktuellen Unterstruktur verknüpft sind. Betrachten Sie die angrenzende Abbildung, die eine Navigationsstruktur mit zwei Ebenen zeigt:
- Auf Ebene 1 sollte das Peer-to-Peer-Navigationselement Zugriff auf die Seiten A, B und C bieten.
- Auf Ebene 2 sollten die Peer-to-Peer-Navigationselemente für die A2-Seiten nur mit den anderen A2-Seiten verknüpft werden. Sie sollten keine Verknüpfung mit Seiten der Ebene 2 in der C-Unterstruktur herstellen.
Verwenden der richtigen Steuerelemente
Nachdem Sie sich für eine Seitenstruktur entschieden haben, müssen Sie entscheiden, wie Benutzer durch diese Seiten navigieren. XAML bietet eine Vielzahl von Navigationssteuerelementen, um eine konsistente, zuverlässige Navigationserfahrung in Ihrer App sicherzustellen.
Mit wenigen Ausnahmen verwendet jede App mit mehreren Seiten einen Frame. In der Regel verfügt eine App über eine Hauptseite, die den Frame und ein primäres Navigationselement enthält, z. B. ein Navigationsansichtssteuerelement. Wenn der Benutzer eine Seite auswählt, wird der Frame geladen und angezeigt.
Zeigt eine horizontale Liste von Links zu Seiten auf derselben Ebene an. Das NavigationView-Steuerelement implementiert das obere Navigationsmuster.
Verwenden Sie die obere Navigation, wenn:
- Sie möchten alle Navigationsoptionen auf dem Bildschirm anzeigen.
- Sie wünschen mehr Platz für den Inhalt Ihrer App.
- Symbole können Ihre Navigationskategorien nicht eindeutig beschreiben.
Zeigt eine horizontale Anordnung von Registerkarten und deren jeweiligen Inhalte an. Das TabView-Steuerelement ist nützlich, um mehrere Seiten (oder Dokumente) anzuzeigen und dem Benutzer die Möglichkeit zu geben, Registerkarten neu anzuordnen, zu öffnen oder zu schließen.
Verwenden Sie Registerkarten in folgenden Fällen:
- Sie möchten, dass Benutzer Registerkarten dynamisch öffnen, schließen oder neu anordnen können.
- Sie erwarten, dass möglicherweise eine große Anzahl von Registerkarten gleichzeitig geöffnet ist.
- Sie erwarten, dass Benutzer Registerkarten zwischen Fenstern in Ihrer Anwendung, die Registerkarten verwenden, ganz einfach verschieben können, ähnlich wie Webbrowser wie Microsoft Edge.
Zeigt eine horizontale Liste von Links zu Seiten auf jeder höheren Ebene an. Das BreadcrumbBar-Steuerelement implementiert das Breadcrumb-Navigationsmuster.
Verwenden Sie ein Breadcrumb, wenn:
- Sie möchten den Pfad zur aktuellen Position anzeigen
- Sie haben viele Navigationsebenen
- Sie erwarten, dass Benutzer zu jeder vorherigen Ebene zurückkehren können.
Zeigt eine vertikale Liste von Links zu Seiten der obersten Ebene an. Zu verwenden in folgenden Fällen:
- Die Seiten befinden sich auf der obersten Ebene.
- Es gibt viele Navigationselemente (mehr als 5)
- Sie erwarten nicht, dass Benutzer häufig zwischen Seiten wechseln.
Zeigt eine Liste von Elementen an. Wenn Sie ein Element auswählen, wird die entsprechende Seite im Detailabschnitt angezeigt. Zu verwenden in folgenden Fällen:
- Sie erwarten, dass Benutzer häufig zwischen untergeordneten Elementen wechseln.
- Sie möchten es dem Benutzer ermöglichen, vorgänge auf hoher Ebene auszuführen, z. B. löschen oder sortieren, nach einzelnen Elementen oder Gruppen von Elementen, und sie möchten es dem Benutzer ermöglichen, die Details für jedes Element anzuzeigen oder zu aktualisieren.
Listen/Details eignen sich gut für E-Mail-Posteingänge, Kontaktlisten und Dateneingaben.
Eingebettete Navigationselemente können im Inhalt einer Seite angezeigt werden. Im Gegensatz zu anderen Navigationselementen, die auf den Seiten konsistent sein sollten, sind eingebettete Inhaltsnavigationselemente von Seite zu Seite eindeutig.
Richtlinien für benutzerdefiniertes Rückwärtsnavigationsverhalten
Wenn Sie Ihre eigene Back-Stack-Navigation bereitstellen, sollte die Benutzeroberfläche mit anderen Apps konsistent sein. Es wird empfohlen, die folgenden Muster für Navigationsaktionen zu befolgen:
| Navigationstätigkeit | Zum Navigationsverlauf hinzufügen? |
|---|---|
| Seite für Seite, unterschiedliche Peergruppen |
Ja
In dieser Abbildung navigiert der Benutzer von Ebene 1 der App zu Ebene 2, über Peergruppen, sodass die Navigation dem Navigationsverlauf hinzugefügt wird.
In der nächsten Abbildung navigiert der Benutzer zwischen zwei Peergruppen auf derselben Ebene und durchquert wieder Peergruppen, sodass die Navigation dem Navigationsverlauf hinzugefügt wird.
|
|
Seite zu Seite, gleiche Peergruppe, kein Navigationselement auf dem Bildschirm
Der Benutzer navigiert von einer Seite zu einer anderen mit derselben Peergruppe. Es gibt kein On-Screen-Navigationselement (z. B. NavigationView), das eine direkte Navigation zu beiden Seiten ermöglicht. |
Ja
In der folgenden Abbildung navigiert der Benutzer zwischen zwei Seiten in derselben Peergruppe, und die Navigation sollte dem Navigationsverlauf hinzugefügt werden.
|
|
Seite zu Seite, gleiche Peergruppe, mit einem Navigationselement auf dem Bildschirm
Der Benutzer navigiert von einer Seite zu einer anderen in derselben Peergruppe. Beide Seiten werden im gleichen Navigationselement angezeigt, z. B. NavigationView. |
Es hängt von
Ja, fügen Sie den Navigationsverlauf hinzu, mit zwei wichtigen Ausnahmen. Wenn Sie erwarten, dass Benutzer Ihrer App häufig zwischen Seiten in der Peergruppe wechseln oder die Navigationshierarchie beibehalten möchten, fügen Sie den Navigationsverlauf nicht hinzu. Wenn der Benutzer in diesem Fall zurück drückt, wechseln Sie zurück zur letzten Seite, bevor der Benutzer zur aktuellen Peergruppe navigiert hat.
|
|
Anzeigen einer vorübergehenden Benutzeroberfläche
Die App zeigt ein Popup- oder ein untergeordnetes Fenster an, z. B. ein Dialogfeld, einen Begrüßungsbildschirm oder eine Bildschirmtastatur, oder die App wechselt in einen speziellen Modus, z. B. Mehrfachauswahlmodus. |
No
Wenn der Benutzer die Zurück-Schaltfläche drückt, schließen Sie die vorübergehende Benutzeroberfläche (blenden Sie die Bildschirmtastatur aus, brechen Sie das Dialogfeld ab usw.), und kehren Sie zur Seite zurück, auf der die vorübergehende Benutzeroberfläche angezeigt wurde.
|
|
Aufzählen von Elementen
Die App zeigt Inhalt für ein Bildschirmelement an, z. B. die Details für das ausgewählte Element in der Listen-/Detailliste. |
No
Das Aufzählen von Elementen ähnelt der Navigation innerhalb einer Peergruppe. Wenn der Benutzer zurück drückt, navigieren Sie zu der Seite, die der aktuellen Seite vorausging, auf der die Elementenumeration vorhanden ist.
|
Nächstes: Hinzufügen von Navigationscode zu Ihrer App
Der nächste Artikel, Implementieren der grundlegenden Navigation, zeigt den Code, der zum Verwenden eines Frame Steuerelements erforderlich ist, um die grundlegende Navigation zwischen zwei Seiten in Ihrer App zu ermöglichen.
Zusammenarbeit auf GitHub
Die Quelle für diesen Inhalt finden Sie auf GitHub, wo Sie auch Issues und Pull Requests erstellen und überprüfen können. Weitere Informationen finden Sie in unserem Leitfaden für Mitwirkende.
Windows developer