Zentraler App-Hub mit Bereichsabschnitten (Hubsteuerelement) (Windows Phone Store-Apps)

Das in diesem Thema präsentierte Modell ähnelt dem unter Zentraler App-Hub mit Startseitenmenü (Hub- oder Pivotsteuerelement) für Windows Phone beschriebenen Modell. Genau wie im vorherigen Fall auch werden verschiedene Funktionalitätsbereiche für den Benutzer bereitgestellt. Der Unterschied hier besteht darin, dass Sie die gesamte Hauptbenutzeroberfläche auf oberster Ebene anzeigen können, ohne dass dazu ein Startseitenmenü erforderlich ist.

Zentrale App-Hub-UI für Fußballmanschaftsmanagement

Wenn Ihre App keine Unterbereiche aufweist, in die navigiert werden soll, kann sich die gesamte Benutzeroberfläche in einer Reihe von Abschnitten mit horizontaler Zugriffsmöglichkeit befinden. Sie können das Hubsteuerelement zwar dennoch verwenden, aber in diesem Fall ist kein Startbereich erforderlich. Dies ist beim Kontakte-Hub auf dem Windows Phone der Fall. Anhand der folgenden Abbildung wird deutlich, dass das grundlegende Layout des Hubs immer noch dasselbe ist.

Der Kontakte-Hub

Im Kontakte-Hub enthält jeder Bereich eine eigene eindeutige UI, und er repräsentiert einen Funktionalitätsbereich. Der Unterschied zwischen diesem Designmodell und dem unter Zentraler App-Hub mit Startseitenmenü (Hub- oder Pivotsteuerelement) für Windows Phone beschriebenen Modell besteht darin, dass im Hub nicht einfach niedrigere App-Bereiche erneut an die Oberfläche gelangen. Im vorherigen Modell liefern die Abschnitte rechts neben dem Startbereich einen schnellen Überblick über die Inhalte, auf die Sie über die Navigation mit dem Menü zugreifen können. Bei dem hier beschriebenen Modell bringen die Abschnitte keine Bereiche an die Oberfläche, die sich an einer anderen Stelle befinden.

Ein Abschnitt für jeden Bereich

Sie bestimmen für Ihr Design, welcher Abschnitt beim Starten der App ausgewählt werden soll. Eine Option besteht darin, den Abschnitt auszuwählen, in dem sich der Benutzer beim letzten Verlassen der App befand. Sie können auch festlegen, dass immer der erste Abschnitt ausgewählt wird. Der erste Abschnitt ist der Abschnitt, in dem das Hintergrundbild bündig mit der linken Seite und in dem der äußerste linke Rand des Hubtitels darüber sichtbar ist.

Sie können festlegen, wie viele Abschnitte sich rechts befinden. Es wird jedoch empfohlen, dass insgesamt maximal vier Abschnitte vorhanden sind. Wenn Sie mehr als vier Abschnitte verwenden, können die Benutzer nur schwer nachvollziehen, wo sich gerade befinden.

Sie können in den einzelnen Abschnitten beliebige UI-Elemente platzieren. Wenn Sie vier Hauptfunktionsbereiche verwenden, können Sie in jedem der vier Abschnitte einen Bereich einfügen. Der erste Abschnitt kann mit den Inhalten entworfen werden, die die Benutzer Ihrer Meinung nach beim Starten der App sehen möchten. In der vorherigen Abbildung wird diese Hubverwendung als zentraler Anwendungshub gezeigt.

Dabei können Sie in jedem Abschnitt des Hubs auf Elemente klicken und so die Details zu dem jeweiligen Element aufrufen. Der Kontakte-Hub enthält beispielsweise den Abschnitt Neuigkeiten mit Elementen, auf die der Benutzer tippen kann. Die Elemente werden in einer Liste mit vertikalem Bildlauf dargestellt und können Beiträge in Facebook verkörpern. Beim Klicken auf ein Element navigiert der Benutzer vom Hub weg und zu den Details des jeweiligen Beitrags. Es existieren mehrere Zielbereiche für die einzelnen Einträge im Abschnitt Neuigkeiten. Ein Zielbereich führt zu dem Beitrag, sodass Sie die Antworten auf den Beitrag anzeigen können. Der andere Zielbereich ist der Name der Person. Beim Tippen darauf navigieren Sie zu einem Pivotsteuerelement für die jeweilige Person, wobei darüber mehrere Pivotelemente mit Informationen angezeigt werden.

Ein weiteres Beispiel

Jeder Abschnitt kann ein eigener Bereich sein und muss nicht zwingend mit den anderen Abschnitten verknüpft sein. Wenn der Benutzer in den einzelnen Abschnitten auf Inhalte tippt, navigiert er dennoch vom Haupt-Hub weg. Die Navigation erfolgt zu den Details des Elements, auf das der Benutzer getippt hat, und nicht zu einem vollständig neuen Unterbereich, wie dies beim Navigieren von einem Menü im Startabschnitt der Fall ist.

Die App Samsung Now verfügt bei der Verwendung des Hubsteuerelements als zentraler App-Hub über drei Abschnitte. Das Design dieser App ist so konzipiert, dass den Benutzern Infos angezeigt werden, auf die sie möglicherweise morgens und im Laufe des Tages schnell zugreifen möchten – Wetter, Nachrichten und Börseninfos.

App Samsung Now

Der Benutzer kann dennoch vom Hub weg navigieren. Wenn er beispielsweise im Aktienabschnitt auf ein Aktiensymbol klickt, gelangt er zu einer einzelnen Seite mit Details zu dem jeweiligen Unternehmen.

Empfehlung

Dieses Hubsteuerelement wird sowohl im Thema Zentraler App-Hub mit Startseitenmenü (Hub- oder Pivotsteuerelement) für Windows Phone als auch in diesem Thema verwendet, und zahlreiche dort gelieferten Empfehlungen und Hinweise gelten auch hier.

Verwandte Themen

Hub

Pivot