Navigationsmuster (Windows Store-Apps)

Artikel
04/07/2015

Organisieren Sie den Inhalt Ihrer Windows Store-App so, dass Benutzer mühelos und intuitiv navigieren können. Mit den richtigen Navigationsmustern können Sie die permanent auf dem Bildschirm angezeigten Steuerelemente einschränken, sodass sich die Benutzer auf den aktuellen Inhalt konzentrieren können.

Die Navigation in Windows Store-Apps basiert auf zwei Mustern: dem hierarchischen Muster und dem flachen Muster. Eine App kann eines dieser Muster oder eine Kombination aus beiden Mustern verwenden.

Hierarchisches Muster

Dieses Muster erzeugt schnelle und flüssige Windows Store-Apps. Es eignet sich insbesondere für Apps mit großen Inhaltssammlungen oder vielen unterschiedlichen Inhaltsabschnitten, die vom Benutzer durchsucht werden können. Die meisten Windows Store-Apps verwenden ein hierarchisches Navigationssystem.

In unserer Reihe App-Features von A bis Z können Sie sich genauer über diese Funktion informieren.: Hierarchische Navigation von A bis Z (HTML und XAML)

Hub-, Bereichs- und Detailseiten in einer Windows Store-App

Hub-Seiten sind der Einstiegspunkt des Benutzers in die App. Hier wird der Inhalt in einer horizontal schwenkbaren Ansicht dargestellt, in der Benutzer einen schnellen Blick auf Neuigkeiten und verfügbare Elemente erhalten.

Der Hub besteht aus verschiedenen Inhaltskategorien, die den einzelnen Bereichsseiten der App zugeordnet sind.

Bereichsseiten sind die zweite Ebene einer App. Hier können Inhalte in jeder beliebigen Form dargestellt werden, die dem jeweiligen Szenario und den Inhalten des Bereichs am besten entspricht.

Die Bereichsseite enthält einzelne Elemente, die jeweils eine eigene Detailseite besitzen. Bereichsseiten bieten auch die Vorteile eines Panoramalayouts und von Gruppierungen.

Detailseiten sind die dritte Ebene einer App. Hier werden die Details der einzelnen Elemente angezeigt. Das jeweilige Format kann je nach Art des Inhalts stark von anderen abweichen.

Die Detailseite enthält Details oder Funktionen zu Elementen. Detailseiten können umfassende Infos enthalten, aber auch ein einzelnes Objekt, z. B. ein Bild oder Video.

Flaches Muster

Viele Windows Store-Apps verwenden ein flaches Navigationsmuster. Apps wie Spiele, Browser oder Dokumenterstellungs-Apps verwenden dieses Muster, um dem Benutzer das Wechseln zwischen Seiten, Registerkarten oder Modi auf der gleichen hierarchischen Ebene zu ermöglichen. Im Gegensatz zum hierarchischen Muster gibt es beim flachen Muster meist weder eine beständige Zurück-Schaltfläche noch einen beständigen Navigationsstapel. Der Wechsel zwischen Seiten erfolgt entweder über Direktlinks im Inhalt (wie unten im ersten Beispiel) oder über die Navigationsleiste (wie unten im zweiten Beispiel).

In unserer Reihe App-Features von A bis Z können Sie sich genauer über diese Funktion informieren.: Flache Navigation von A bis Z (HTML und XAML)

Beispiele für flache Navigation

Dieses Muster eignet sich am besten, wenn das Hauptszenario einen schnellen Wechsel zwischen einer kleinen Anzahl von Seiten oder Registerkarten beinhaltet, wie z. B. bei Webbrowser-Apps wie Internet Explorer, E-Books und Spielen.

Kopfzeile, Zurück-Schaltfläche, Abschnittskopfzeilen und Kacheln als Navigationselemente

Kopfzeile und Zurück-Schaltfläche

Die Kopfzeile gibt der aktuellen Seite eine Bezeichnung und ist nützlich, um sich zurechtzufinden. Die Zurück-Schaltfläche ist eine schnelle Möglichkeit, zum Ausgangspunkt zurückzukehren.
Abschnitts- oder Kategoriebezeichnungen

Über diese Bezeichnungen kann der Benutzer zu verschiedenen Inhaltsabschnitten oder -kategorien springen.
Sonstige Ziele

Sie können Kacheln, Pfeile, Schaltflächen, Suchergebnisse oder andere benutzerdefinierte Ziele als Navigationselemente einsetzen. In manchen Spielen sind Navigationselemente mit interessanten Formen zu finden.

Bing News-App mit Kopfzeile, Abschnittsbezeichnung und Link zu weiteren Details

Die obere App-Leiste

Durch Wischen vom oberen zum unteren Rand des Bildschirms kann der Benutzer die App-Leisten einblenden. Die obere App-Leiste wird auch als Navigationsleiste bezeichnet. Sie können Navigationselemente in der oberen App-Leiste platzieren, damit mehr Bildschirmfläche für die Inhalte Ihrer App zur Verfügung steht. Alternativ können Sie Navigationselemente in die Canvas verschieben, wenn Benutzer sie bei der Verwendung der App häufig benötigen, und wenn dies die Funktionalität der App nicht beeinträchtigt. Sie entscheiden, ob Navigationselemente in die obere Leiste oder auf die Canvas gehören.

Zugriff auf die Navigationsleiste

Abschnitts- oder Kategoriebezeichnungen sind häufig in der Navigationsleiste zu finden, wie z. B. in Hulu Plus.

Hulu Plus-App-Navigationsleiste

Viele Apps verwenden die obere App-Leiste für Verknüpfungen. In der ESPN-App kann der Benutzer z. B. zu einer Gamecast-Seite navigieren, indem er auf eine Anzeigetafel über den Abschnittsbezeichnungen in der oberen App-Leiste klickt.

ESPN-App-Navigationsleiste

Über die obere App-Leiste können Benutzer außerdem eine Vorschau der Inhalte der Zielseite anzeigen. Im folgenden Beispiel einer Shopping-App können Sie auf der App-Leiste eine Vorschau der Produktbilder anzeigen, bevor Sie zur Produktdetailseite navigieren.

Vevo-App-Navigationsleiste

Wir empfehlen Ihnen, Ihr Design durch die kreative Verwendung der App-Leisten zu optimieren. In Fresh Paint dient die obere App-Leiste über ihre dedizierte Navigationsfunktion hinaus als Mal-Toolbox.

Fresh Paint-Navigationsleiste

Semantischer Zoom

Mit dem semantischen Zoom verläuft das Suchen und Navigieren schnell und flüssig, insbesondere wenn die Ansicht eine lange, schwenkbare Liste ist.

Beispiel-App mit vergrößerter Ansicht und verkleinerter Ansicht

In der Great British Chefs-App enthält die Hubseite z. B. einen Spotlightabschnitt und fünf visuell ansprechende Abschnitte, die horizontal verschoben werden können. Die App verwendet den semantischen Zoom, um das Wechseln zwischen den fünf Abschnitten zu vereinfachen.

Semantischer Zoom in Great British Chefs

Weitere Informationen finden Sie unter Richtlinien für semantischen Zoom.

Navigationsmuster (Windows Store-Apps)

Hierarchisches Muster

On-Canvas-Navigation

Die obere App-Leiste

Semantischer Zoom

Verwandte Themen

Zusätzliche Ressourcen