Share via

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

  • Artikel

Bestandteile des Hub-Steuerelements (Hub-Kopfzeile, Hub-Abschnitt usw.)

Beschreibung

Das Hub-Steuerelement auf dem Smartphone, das nur für die Verwendung in Hochformatausrichtung gedacht ist, zeigt eine Reihe von Abschnitten an, die seitlich verschoben werden können. Es handelt sich um einen Vollbildcontainer und ein Navigationsmodell für Apps.

Der Hub-Stil (zuvor Panorama-Stil) ist Bestandteil des systemeigenen Erscheinungsbilds von Windows Phone. Anders als Apps, die entworfen wurden, um auf den Bildschirm eines Smartphones zu passen, bieten Hub-Apps die einzigartige Möglichkeit, Steuerelemente, Daten und Dienste auf einer großen, virtuellen Leinwand anzuzeigen, die horizontal über die Grenzen des Bildschirms hinausreicht. Unter Windows Phone verwenden diese standardmäßig dynamischen Ansichten mehrschichtige Animationen und Inhalte. So können die verschiedenen Ebenen, ähnlich wie bei Parallaxeneffekten, nahtlos mit unterschiedlichen Geschwindigkeiten geschwenkt werden.

Die Abschnitte einer Hub-Seite dienen als Startpunkt für den Zugriff auf detaillierte Inhalte. Das Ziel liegt darin, Benutzern eine visuell ansprechende Darstellung Ihrer Inhalte zu bieten.

Beispiele

Windows Phone-App: Hub-Steuerelement

Die Benutzeroberfläche besteht aus verschiedenen Ebenen, die sich unabhängig voneinander bewegen: eine Hintergrundfarbe oder ein Hintergrundbild, eine Hub-Kopfzeile, Kopfzeilen für Hub-Abschnitte und Hub-Abschnitte.

Das Hintergrundbild, falls festgelegt, ist die unterste Ebene und soll dem Hub ein ansprechendes, ein mit Zeitschriften vergleichbares Erscheinungsbild geben. Das Hintergrundbild ist üblicherweise ein randloses Bild und der Teil der App mit der höchsten visuellen Aussagekraft.

Die Hub-Kopfzeile identifiziert die App und sollte sichtbar sein, unabhängig davon, wie Benutzer die App aufrufen.

Hub-Abschnitte sind die Komponenten der Hub-App, die andere Steuerelemente und Inhalte enthalten. Die Hub-Abschnitte bewegen sich mit derselben Geschwindigkeit wie beim Schwenken durch Toucheingabe oder bei Streichbewegungen. Die Kopfzeile des Hub-Abschnitts ist für alle Hub-Abschnitte optional.

Miniaturansichten sind nützliche Elemente, um auf Inhalte oder Medien auf anderen Seiten zu verweisen.

Hub-Steuerelement mit Miniaturansichten

Informationen zur Verwendung

Je nach App-Anforderungen können Sie mehrere Hub-Abschnitte zu einem Hub-Steuerelement hinzufügen, wobei jedes Steuerelement eine bestimmte Funktion erfüllt. Ein Abschnitt kann beispielsweise eine Reihe von Links und Steuerelementen enthalten, während ein anderer Abschnitt als Repository für Miniaturansichten dient. Benutzer können in diesen Abschnitten mit der Geste vor- und zurückschwenken, die von dem Hub-Steuerelement unterstützt wird.

Entwurfsrichtlinien

  • Das Verhalten und Rendering des Hub-Steuerelements wird nur in der Hochformatausrichtung unterstützt.
  • Sie können einem Hub-Steuerelement u. an. ein Thema zuweisen und die Standardfarben überschreiben.
  • Nutzen Sie den einschließenden Effekt des Hub-Steuerelements für Windows Phone, um alle Abschnitte vom letzten bis zum ersten Abschnitt und umgekehrt einzuschließen. Ein Hub mit einem oder zwei Abschnitten wird nicht umgebrochen. Ein Hub mit mindestens drei Abschnitten wird umgebrochen.
  • Wenn Sie unter Windows Phone ein App-Leiste im Hub verwenden, legen Sie für die App-Leiste den minimierten Modus fest. Dieser Modus wurde speziell entwickelt, um den Bildschirmplatz auf einer Hub-Seite zu maximieren. Weitere Informationen finden Sie unter App-Leiste für Windows Phone.
  • Zeigen Sie beim Start des Hub-Steuerelements eine Statusleiste in der Taskleiste an oder blenden Sie einen Vollbild-Statusladeindikator ein.
  • Zeigen Sie eine Statusleiste in der Taskleiste an, wenn ein Abschnitt des Hub-Steuerelements aktualisiert wird, ohne die Benutzerinteraktion zu blockieren.
  • Beim ersten Besuch sollte der erste angezeigte Abschnitt die Hub-Kopfzeile enthalten, wobei die Kopfzeile korrekt links ausgerichtet sein sollte. Es gibt keine Standardrichtlinie, welcher Abschnitt standardmäßig angezeigt werden sollte, da dies vom dargestellten Inhalt abhängt.
  • Für nachfolgende Besuche desselben Hub-Steuerelements sollten Sie Benutzer zurück zu dem Abschnitt leiten, der zuletzt angezeigt wurde.
  • Erstellen Sie nicht mehr als fünf Abschnitte in einem Hub-Steuerelement. Die Anzahl der Abschnitte ist aus Leistungsgründen beschränkt. Außerdem wird so die Anzahl der Bereiche beschränkt, durch den Benutzer navigieren müssen. Verwenden Sie für komplexere Inhalte weniger Abschnitte. Überfordern Sie den Benutzer nicht durch zu viele Abschnitte. Mit vier oder fünf Abschnitten kann sich der Benutzer gut orientieren und weiß, an welcher Position er sich befindet und welche Inhalte sich rechts und links von seiner aktuellen Position befinden.
  • Verwenden Sie kein Pivot-Steuerelement in einem Hub-Steuerelement und umgekehrt. Sie können jedoch Elemente in einem Hub-Abschnitt mit einer anderen Seite verknüpfen, die ein Pivot-Steuerelement enthält.
  • Verwenden Sie keine Steuerelemente zum Schwenken oder Scrollen in einem Hub-Steuerelement. Wenn Sie beispielsweise ein Kartensteuerelement in einem Hub-Steuerelement integrieren, ist das Hub-Steuerelement unter Umständen nur noch schwer zu verwenden. In diesem Fall wäre die Gestenerkennung nicht mehr eindeutig. Wenn Sie beispielsweise einen Schieberegler nach links schieben möchten und sich dabei in einem Bereich eines Hub-Steuerelements befinden, ist nicht klar, ob Sie einen Bildlauf in dem Abschnitt durchführen oder den Schieberegler bewegen möchten. Wenn eine Geste für ein Steuerelement erforderlich ist, platzieren Sie das Steuerelement auf einer eigenen Seite und ermöglichen Sie die Navigation zu dieser Seite. Sie können jedoch ein Steuerelement ohne Gesteneingabe in einem Hub-Abschnitt integrieren, z. B. eine Karte. Sie können beispielsweise eine Schaltfläche einblenden, mit der die Karte aktiviert werden kann. Durch Drücken auf die Schaltfläche kann der Benutzer auf eine andere Seite gelangen, die nur die Karte enthält. Anschließend kann der Benutzer auf die Zurück-Schaltfläche klicken, um zurück zum Hub-Abschnitt zu gelangen.
  • Weitere Richtlinien für die richtige Verwendung von Hub- und Pivot-Steuerelemente finden Sie in folgenden Themen:

Hub-Kopfzeilen:

  • Verwenden Sie entweder Nur-Text-Inhalte oder Bilder, z. B. ein Logo. Sie können auch mehrere Elemente verwenden, z. B. ein Logo und Text (oder andere UI-Elemente).
  • Stellen Sie sicher, dass die Schriftart bzw. Bildfarbe in der Kopfzeile über das gesamte Hintergrundbild gut sichtbar ist (diese bewegen sich unabhängig voneinander). Verwenden Sie Systemschriftarten und -stile, es sei denn, sie benötigen eine spezielle Schriftart, Größe oder Farbe für das Branding.
  • Animieren Sie die Kopfzeile nicht und ändern Sie nicht dynamisch ihre Größe.
  • Passen Sie die Hub-Kopfzeile an die Startkachel im Startmenü an, um Konsistenz zu gewährleisten.
  • Achten Sie beim Gestalten des Hub-Steuerelements und dem Entwerfen der Kopfzeilen darauf, dass sie die Taskleiste oder andere Elemente nicht überdecken.

Kopfzeilen für Hub-Abschnitte:

  • Verwenden Sie entweder Nur-Text-Inhalte oder Bilder, z. B. ein Logo. Sie können auch mehrere Elemente verwenden, z. B. ein Logo und Text (oder andere UI-Elemente).
  • Stellen Sie sicher, dass die Schriftart bzw. Bildfarbe in der Kopfzeile über das gesamte Hintergrundbild gut sichtbar ist (diese bewegen sich unabhängig voneinander). Verwenden Sie Systemschriftarten und -stile, es sei denn, sie benötigen eine spezielle Schriftart, Größe oder Farbe für das Branding.
  • Animieren Sie die Kopfzeile nicht und ändern Sie nicht dynamisch ihre Größe.

Hub-Abschnitte:

  • Werden Sie dem ansprechenden Aspekt des Hub-Steuerelements gerecht, indem Sie die in den Abschnitten enthaltenen Texte und Bilder sorgfältig aussuchen. Das Hub-Steuerelement sollte nicht überladen werden oder erdrückend wirken.
  • Berücksichtigen Sie die Ausrichtung, wenn Sie einen vertikalen Bildlauf verwenden. Ein vertikaler Bildlauf in einem Hub-Abschnitt ist akzeptabel, solange der Abschnitt breiter ist als der Bildschirm.
  • Erwägen Sie, Hub-Abschnitt solange auszublenden, bis sie über Inhalt für die Anzeige verfügen.

Die Kunst des optimalen Hintergrunds

  • Ein dunkler, weicher und kontrastarmer Hintergrund eignet sich am besten. Verwenden Sie nur eine Farbe oder einen Farbverlauf.
  • Ein unauffälliges und unaufdringliches Foto im Hintergrund trägt zu einem optisch ansprechenden Hub-Steuerelement bei. Fotos mit vielen hellen Farben sollten vermieden werden, da sie das Lesen der Abschnitte erschweren. Eine gute Methode besteht darin, oben im Foto einen halbdurchsichtigen Schwarz- oder Weißfilter (ein Rechteck) zu verwenden. Sie können hierzu ein Tool zum Bearbeiten von Bitmaps verwenden und anschließend die Transparenz des Bilds reduzieren.
  • Das Hintergrundbild sollte sich über das gesamte Hub-Steuerelement erstrecken. Das heißt, das Seitenverhältnis des Hintergrundbilds und des Hub-Steuerelements sollten identisch sein. Für die Größe sollte die gängigste Geräteauflösung, die höchste Geräteauflösung und die Leistung berücksichtigt werden. Um die Dateigröße gering zu halten, wird das JPEG-Format empfohlen.
  • Sie können von einem Hintergrundbild zu einem anderen wechseln, auch während die App ausgeführt wird, es kann jedoch immer nur ein Bild angezeigt werden.

Miniaturansichten

  • Verwenden Sie zugeschnittene Bilder, die ein erkennbares Motiv zeigen, anstatt ein ganzes Bild zu verkleinern. Wenn das Bild ohne Text nicht zu unterscheiden ist, können bis zu zwei Zeilen für die Bezeichnung des Inhalts verwendet werden.

Verwandte Themen

Für Designer

Befehlsmuster

Navigationsmuster

Layout

Richtlinien für Zurück-Schaltflächen

Richtlinien für App-Leisten

Für Entwickler (XAML)

Windows.UI.Xaml.Controls Hub class

Windows.UI.Xaml.Controls HubSection class

Panorama-Steuerelement für Windows Phone

So wird's gemacht: Erstellen einer Panorama-App für Windows Phone