Richtlinien für Hub-Steuerelemente in Windows Store-Apps

Applies to Windows only

Drahtmodell der hierarchischen App "Essen mit Freunden"

Beschreibung

Das Hub-Steuerelement verwendet ein hierarchisches Navigationsmuster, um Windows Store-Apps zu unterstützen, die eine relationale Informationsarchitektur erfordern.

Dieses Navigationsmuster eignet sich besonders, wenn sich App-Inhalte in verschiedene, aber doch zusammenhängende Abschnitte oder Kategorien mit unterschiedlichen Detailebenen unterteilen lassen, die in einer bevorzugten Reihenfolge durchlaufen werden sollen.

Dieses Steuerelement ist ein Ausgangspunkt für den Entwurf einer visuell ansprechenden App. Es bietet Ihnen einen Rahmen und die Flexibilität, Ihre App an Ihr Markenimage anzupassen. Die Hub-Seite sollte optisch vielseitig sein und Benutzer für die App begeistern, von der Startseite über die Auswahlseiten bis zu den Detailseiten.

Für die erste Seite können Sie ein Favoritenbild oder einen Inhaltsabschnitt verwenden.

horizontal verschobene Hubvorlage mit Favoritentitelvertikal verschobene Hubvorlage mit Favoritentitel

Verwenden Sie ein großes Bild für den Helden, das sowohl vertikal als auch horizontal zugeschnitten werden kann, ohne Interessenschwerpunkt zu verlieren.

Hier sehen Sie ein Beispiel eines einzelnen Favoritenbilds und für dessen Zuschnitt in das Quer- und Hochformat und auf eine schmale Breite.

zugeschnittenes Favoritenbild für unterschiedliche Fenstergrößen

Beispiele

Der Hub bietet eine hohe Flexibilität beim Entwerfen. Dadurch können Sie Apps mit einer großen Auswahl an attraktiven und visuell komplexen Benutzeroberflächenelementen entwerfen. In den folgenden Abschnitten wird eine Natur-App gezeigt, die eine Reihe von Design- und Stilmöglichkeiten in Form von Farbe, Typografie, Bildern, Grafiken und Kompositionen aufzeigt.

Bing News-App mit standardmäßigem Hub-Steuerelement

Die Hubvorlage

Die Hubvorlage bildet den Ausgangspunkt. Es folgt ein Beispiel einer Natur-App, für die die Hubvorlage von Microsoft Visual Studio verwendet wird.

Startseite:

Natur-Beispiel-App mit einfacher Hubvorlage

Detailseite:

Natur-Beispiel-App mit einfacher Hubvorlage, Detailseite

Der Inhalt ist klar und organisiert, aber die App hebt sich nicht von all den anderen Apps ab, für die dieselbe Vorlage verwendet wurde. Sie sollten die Vorlage nur als Grundlage Ihrer App verwenden und erweitern, um eine wirklich einmalige Benutzeroberfläche zu erstellen.

Variante 1 – Modular

Dieses Design zeichnet sich durch ein modulares Layout mit satten Farben und mit einem grafischen Zuschnitt der Bilder aus.

Variante 1 der Natur-Beispiel-App

Startseite:

Variante 1 der Natur-Beispiel-App, Startseite

Detailseite:

Variante 1 der Natur-Beispiel-App, Detailseite
Farbpalette für Variante 1 der Natur-Beispiel-AppFarbe   Der grafische Effekt der Farbe erweitert den Inhalt und erzeugt eine visuelle Struktur für ein Gesamtlayout. In diesem Beispiel besteht die Farbpalette aus kühlen Grautönen mit satten und lebendigen Farbakzenten. Für die Startseite wird in einem Abschnitt ein hellroter Hintergrund als Komplementierung eines ähnlichen Rotschattens in einem Bild verwendet. Die kräftigen Farben wirken durch die neutrale Verwendung von Grautönen ausgeglichen. Sie dienen der Komplementierung des Inhalts sollen sich nicht von ihm ablenken.
Bilder für Variante 1 der Natur-Beispiel-AppBilder   Fotos bilden einen bedeutenden Schwerpunkt dieses Designs. Die Bilder wurden sorgfältig für kräftige Farben und grafische Zuschnitte ausgewählt. Sie sind randlos oder wurden an den Rändern der App positioniert, um für eine sehr immersive Benutzeroberfläche zu sorgen. Bilder tragen dazu bei, dass Inhalt auf sichtbare Art und Weise präsentiert und der Kontext und die Bedeutung klar werden. Wenn ein Favoritenbild primäre Wirkung hat, können umgebende Bilder diesen Effekt unterstützen. Sie sollten jedoch nicht mit ihm konkurrieren.
Komposition für Variante 1 der Natur-Beispiel-AppKomposition   Aufgrund ihrer Größe und starken grafischen Wirkung tendieren Favoritenbilder dazu, im Vordergrund zu stehen. Alle Gruppen rechts neben dem Favoritenbild umfassen eine eigene Komposition aus Text und Bildern. Bei der Komposition und visuellen Richtung wird ein Layout berücksichtigt, das die verschiedenen Anforderungen der einzelnen Gruppen repräsentiert. Die Reihenfolge der Gruppen unterstützt die Inhaltsgesamthierarchie und die horizontale Struktur der App.
Typografie für Variante 1 der Natur-Beispiel-AppTypografie   In diesem Beispiel unterstützen der verwendete Schriftgrad und die Farbe die Inhaltshierarchie und Struktur der Benutzeroberfläche. Größe, Position und Abstand sind für die Hierarchie der präsentierten Informationen logisch ausgewählt. Genauso wie das Favoritenbild in seiner Größe und Darstellung eine Ausnahme darstellt, kann der Schriftgrad für den Favoriten je nach Sprachanforderungen ebenfalls eine Ausnahme sein. Die datengesteuerten Modelle, die in den drei Gruppen rechts neben dem Favoriten wiedergegeben werden, sind durch eine konsistente Behandlung des Titels und Ausrichtung am zugrunde liegenden Raster miteinander verbunden.

 

Variante 2 – Vertikale Bereiche von Rand zu Rand

In diesem Design stehen sich eine Rand-zu-Rand-Komposition vertikaler Bereiche und organische Elemente gegenüber, um eine natürliche und dennoch moderne Ästhetik zu erzeugen.

Variante 2, vertikale Bereiche von Rand zu Rand, Natur-Beispiel-App

Startseite:

Variante 2, vertikale Bereiche von Rand zu Rand, Natur-Beispiel-App, Startseite

Detailseite:

Variante 2, vertikale Bereiche von Rand zu Rand, Natur-Beispiel-App, Detailseite
Farbpalette für Variante 2 der Natur-Beispiel-AppFarbe   Eine erdige Farbpalette bestehend aus grün, schwarz und braun komplementiert die Naturbilder.
Typografie für Variante 2 der Natur-Beispiel-AppTypografie   Bei diesem Design wird Segoe UI in Light und Standardbreite und in einer Vielzahl von Größen verwendet. Die Skalierung und Transparenz dieses Schriftgrads wird verwendet, um das Interesse im Favoritenbereich, in Gruppentiteln und für interessante Orte auf der Karte auf die Grafik zu ziehen.
Grafiken für Variante 2 der Natur-Beispiel-AppGrafiken   Eine Konturkartengrafik im Favoritenbereich des Hubs stärkt das Naturdesign und sorgt für einen visuellen Kontrast zur Rasterorganisation der App.
Komposition für Variante 2 der Natur-Beispiel-AppKomposition   Die App setzt sich aus farbigen vertikalen Bereichen mit Text und Bildern zusammen. Elemente wie runde Akzentbilder, Gruppenköpfe und Textzitate verbinden die vertikalen Bereiche, um die Komposition interessanter wirken zu lassen und den Blick auf die Hauptinhaltsbereiche zu lenken.

 

Variante 3 – Strukturierte Spalten

In diesem Design wird ein strukturiertes Spaltenlayout mit einem sanften Farbschema und mit Bildern verwendet, um für ein beruhigendes Gefühl zu sorgen.

Variante 3, strukturierte Spalten, Natur-Beispiel-App

Startseite:

Variante 3, strukturierte Spalte, Natur-Beispiel-App, Startseite

Detailseite:

Variante 3, strukturierte Spalte, Natur-Beispiel-App, Detailseite
Farbpalette für Variante 3 der Natur-Beispiel-AppFarbe   Eine sanfte Farbpalette mit hellen neutralen Farben sorgt für ein beruhigendes Gefühl.
Bilder für Variante 3 der Natur-Beispiel-AppBilder   Bilder im neutralen oder Sepia-Farbton komplementieren das sanfte Farbschema. Bilder mit ähnlichem Farbton erzeugen Kohäsion im Layout, und visuelle Störungen werden minimiert.
Grafiken für Variante 3 der Natur-Beispiel-AppGrafiken   Runde, transparente Grafiken lockern die ansonsten lineare Komposition auf spielerische Art und Weise auf.
Komposition für Variante 3 der Natur-Beispiel-AppKomposition   Filigrane graue Linien mit 1 px trennen die verschiedenen Gruppen im Hub. Die ruhige Ästhetik dieser App wird durch eine kleine Typografie vor großzügigen Leerräumen verstärkt.
Abbildung für Variante 3 der Natur-Beispiel-AppAbbildung   Mithilfe von Zeichnungen oder interessanten Medientypen können große Textblöcke aufgelockert werden. Die Skizze in diesem Beispiel verleiht dem Artikel Textur und personalisiert ihn.

 

Variante 4 – Winkel

Diese Variante bietet ein Winkelmotiv, um die Bilder einzurahmen und Interesse am Hintergrund zu erzeugen.

Variante 4, Winkel, Natur-Beispiel-App

Startseite:

Variante 4, Winkel, Natur-Beispiel-App, Startseite

Detailseite:

Variante 4, Winkel, Natur-Beispiel-App, Detailseite
Farbpalette für Variante 4 der Natur-Beispiel-AppFarbe   Für die App wird eine helle Farbpalette mit kräftigen Farben für die akzentuierten Winkelformen verwendet.
Typografie für Variante 4 der Natur-Beispiel-AppTypografie   Das Design verwendet Segoe UI für den Textkörper. Den Kontrast dazu bildet Bebas Neue für den Titel- und den Gruppenkopftext. Die Verwendung einer anderen Schriftart ist eine schnelle und effektive Methode, um für Ihre App ein eindeutiges Erscheinungsbild zu erzeugen.
Grafiken für Variante 4 der Natur-Beispiel-AppGrafiken   Für diese App wird eine Standard-Hubkomposition eines Favoritenbilds gefolgt von separaten Gruppen mit Listen verwendet. Durch das Hinzufügen winkliger Grafikelemente in den Favoriten- und Hintergrundbildern wirkt dieses Design jedoch dynamisch und einzigartig.

 

Empfohlene und nicht empfohlene Vorgehensweisen

  • Verwenden Sie interaktive Überschriften, und positionieren Sie die Chevronglyphe (>) am Ende des Überschriftentexts, um anzugeben, dass weitere Inhalte vorhanden sind. Weitere Informationen finden Sie im Abschnitt Hub unter Steuerelemente (XAML mit C#/C++/VB) und im Abschnitt Hub unter Steuerelemente (HTML mit JavaScript).
  • Erstellen Sie keinen Hub innerhalb eines Hubs. Verwenden Sie stattdessen interaktive Überschriften für die Navigation zu einem anderen Abschnitt oder zu einer anderen Seite.
  • Lassen Sie den Inhalt dynamisch in Gruppen umbrechen, um verschiedene Fenstergrößen einzuschließen. Weitere Informationen finden Sie unter Richtlinien für Fenstergrößen.
  • Wenn Sie viele Abschnitte haben, sollten Sie das Hinzufügen des semantischen Zooms zum Hub in Erwägung ziehen. Dadurch können die Abschnitte auch leichter gefunden werden, wenn die App-Größe in eine schmale Breite geändert wird.
  • Wählen Sie die Bilder für die App-Hauptinhalte sorgfältig aus, damit sie gut zu dem überlagerten Text passen.
  • Verwenden Sie die Hubvorlage als Ausgangspunkt, und passen Sie das Layout an, sodass es die Vorzüge Ihrer App optimal widerspiegelt. Sie können die folgenden Aspekte des Hub-Steuerelements anpassen:
    • Anzahl Abschnitte
    • Inhaltstyp in den einzelnen Abschnitten
    • Positionierung und Reihenfolge von Abschnitten
    • Größe von Abschnitten
    • Abstand zwischen Abschnitten
    • Abstand zwischen einem Abschnitt und dem oberen oder unteren Rand des Hubs
    • Textstil und -größe in Überschriften und Inhalt
    • Farbe des Hintergrunds, der Abschnitte, Abschnittsüberschriften und Abschnittsinhalte
  • Vermeiden Sie die Verwendung vertikal verschobener Abschnitte in einem horizontal verschobenen Hub. Die Auswahl per Wischbewegung und der Bildlauf per Maus funktionieren dann nicht erwartungsgemäß. Weitere Informationen finden Sie unter Richtlinien für Verschiebung.

Verwandte Themen

Für Designer
Befehlsmuster
Navigationsmuster
Layout
Richtlinien für Zurück-Schaltflächen
Richtlinien für App-Leisten
Barrierefreie App-Leiste
Hub-Steuerelement für Windows Phone-Apps
Für Entwickler (HTML)
Hierarchisches Navigationsmuster von A bis Z
WinJS.UI.Hub object
WinJS.UI.AppBar object
WinJS.UI.NavBar object
WinJS.UI.BackButton object
Beispiel für ein HTML-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 (HTML)
Hinzufügen von Navigationsleisten (HTML)
Navigieren zwischen Seiten (HTML)
Verwenden von Hub-Steuerelementen für Layout und Navigation
Navigation zwischen Seiten
Für Entwickler (XAML)
Hierarchisches Navigationsmuster von A bis Z
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)
Verwenden von Hubs
Für Entwickler (Windows-Runtime-Apps mit DirectX mit C++)
Erstellen einer App-Leiste oder Einstellung (DirectX)

 

 

Anzeigen:
© 2014 Microsoft