Navigationsmuster (Windows Store-Apps)

Applies to Windows only

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.

On-Canvas-Navigation

 

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

 

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

  2. Abschnitts- oder Kategoriebezeichnungen

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

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

Verwandte Themen

Für Designer
Befehlsmuster
Layout
Zurück-Schaltfläche
Richtlinien für Hub-Steuerelemente für Windows-Apps
Richtlinien für Hub-Steuerelemente für Windows Phone-Apps
Richtlinien für App-Leisten
Barrierefreie App-Leiste
Für Entwickler (Windows-Runtime-Apps mit JavaScript und HTML)
WinJS.UI.Hub object
WinJS.UI.AppBar object
WinJS.UI.NavBar object
WinJS.UI.BackButton object
HTML-Beispiel für ein Hub-Steuerelement
HTML-Beispiel für ein AppBar-Steuerelement
HTML-Beispiel für ein NavBar-Steuerelement
Beispiel für Navigation und Navigationsverlauf
Ihre erste App – Teil 3: PageControl-Objekte und Navigation
Hinzufügen von App-Leisten
Hinzufügen von Navigationsleisten
Navigieren zwischen Seiten (HTML)
Für Entwickler (Windows-Runtime-Apps mit C#/VB/C++ und XAML)
Windows.UI.Xaml.Controls Hub class
Windows.UI.Xaml.Controls AppBar class
Windows.UI.Xaml.Controls CommandBar class
XAML-Beispiel für ein Hub-Steuerelement
XAML-Beispiel für ein AppBar-Steuerelement
XAML-Beispiel für die Navigation
Ihre erste App – Teil 3: Navigation, Layout und Ansichten
Ihre erste App – Hinzufügen der Navigation und von Ansichten in einer C++-Windows Store-App mit (Lernprogramm 3 von 4)
Hinzufügen von App-Leisten (XAML)
Navigieren zwischen Seiten (XAML)
Für Entwickler (Windows-Runtime-Apps mit DirectX mit C++)
Erstellen einer App-Leiste oder Einstellung

 

 

Anzeigen:
© 2014 Microsoft