App-Registerkarten (Pivot-Steuerelement) (Windows Phone Store-Apps)

Das App-Registerkartenmuster wird für Benutzeroberflächen mit mehreren Seiten verwendet, zwischen denen ein Benutzer oft wechselt. Dieses Muster ist besonders hilfreich, wenn Ihre App auf einem einzigen Design basiert (z. B. Filme, Baseball usw.). Auf jeder Seite würde dem Benutzer etwas in Verbindung mit den gesamten Daten angezeigt werden, die in der gesamten App dargestellt sind. Das App-Registerkartenmuster könnte sich auf Ihre gesamte App erstrecken oder nur in einem Teilbereich Ihrer App verwendet werden. Beispielsweise stellt das Hub-Steuerelement die erste Hauptebene Ihrer App dar (wie in vorherigen Themen erläutert), und von dort navigiert der Benutzer zu einem Unterabschnitt Ihrer App, in dem das App-Registerkartenmuster verwendet wird (mithilfe des Pivot-Steuerelements).

Stellen Sie sich vor, Sie möchten eine App haben, die Filme in Ihrer Sammlung zu Hause katalogisiert. Sie könnten mit dem App-Registerkartenmuster einige unterschiedlich gefilterte Ansichten Ihrer Filme bereitstellen. Möglicherweise möchten Sie in einer gefilterten Ansicht alle Filme anzeigen, die Sie als Ihre Favoriten markiert haben. Eine andere gefilterte Ansicht könnte einfach nur Action-Filme enthalten. Und eine weitere gefilterte Ansicht könnte Filme enthalten, für die Sie die Reihenfolge festgelegt haben, in der Sie die Filme ansehen möchten, wenn Sie Zeit dazu haben. Sie möchten natürlich auch eine Seite haben, auf der Sie die komplette Liste der Filme ohne Filterung anzeigen können.

Die folgende Abbildung hilft Ihnen beim Visualisieren dieser App-Struktur. Wenn die App gestartet wird, gelangen Sie zu einer der gefilterten Seiten. Von dort aus können Sie horizontal durch alle Seiten blättern, die auf Ihrer Benutzeroberfläche als Registerkarten fungieren.

App-Registerkarten für den Outlook-Posteingang

Im Grunde könnten die Daten, die Sie dem Benutzer präsentieren möchten, auf jeder Registerkarte anders gefiltert und angezeigt werden. Wenn die Taste Zurück der Hardware gedrückt wird, während Sie sich auf einer dieser gefilterten Ansichtsseiten befinden, verlassen Sie die App.

Verwenden Sie das App-Registerkartenmuster für Apps mit einem zentralen Datentyp, für den Sie verschiedene gefilterte Ansichten bereitstellen.

Verwenden des Pivot-Steuerelements als App-Registerkartenimplementierung

Sie können das Pivot-Steuerelement zum Implementieren des App-Registerkartenmusters verwenden. Dieses Steuerelement ermöglicht es dem Benutzer, nach rechts und links durch alle Seiten (als Pivot-Element bezeichnet) zu navigieren.

Die Outlook-Client-App von Microsoft verwendet das App-Registerkartenmuster, da in ihr ein einziger Datentyp angezeigt wird: E-Mail-Listen mit unterschiedlicher Filterung für die einzelnen Pivot-Elemente. Wenn Sie Ihren E-Mail-Posteingang über die Outlook-App aufrufen, werden drei Pivot-Elemente angezeigt: alle, ungelesen und dringend. Dadurch können Sie einfach die dringenden E-Mails anzeigen, wenn Sie dies möchten. Auf diese Weise müssen Sie nicht mehr durch die E-Mails im Pivot-Element alle blättern, um die als dringend gekennzeichneten E-Mails zu finden.

Outlook-Client-App

Eine weitere App, die das App-Registermuster verwendet, ist die Netflix-App. Mit jedem Pivot-Element werden Filmlisten angezeigt. Die Listen in den einzelnen Pivot-Elementen unterscheiden sich aufgrund der angewendeten Filterung. Sie können vergleichen und ausprobieren, wie spezifisch und hilfreich jedes einzelne Element ist. Im Pivot-Element instant (Sofort) werden Filme angezeigt, die Sie in diese Warteschlange gestellt haben, um sie jederzeit auf Ihrem Streaminggerät anzusehen. Im Pivot-Element home (Start) werden Filme angezeigt, für die Sie sich laut Netflix möglicherweise interessieren. Im Pivot-Element search (Suche) werden Filme angezeigt, die Ihren Suchbegriffen entsprechen.

Pivot-Elemente sind fokussiert und effizient. Ihr Hauptschwerpunkt liegt auf aufgabenbasierten Aktionen wie dem Filtern, Sortieren und Anzeigen verwandter Elemente. Hubs sind erweiterbar, lassen sich aggregieren und sind explorativ. Sie eignen sich hervorragend, um aktuell relevanten Inhalt anzuzeigen. Es gibt Fälle, in denen sich ein Steuerelement besser eignet als das andere.

Netflix-App

Registerkartenähnliche Funktionalität

Jedes Pivot-Element ist wirklich eine Registerkarte, und die Registerkarten werden oben angezeigt. Wie Sie in der Abbildung mit der Netflix-App sehen können, wurde das Pivot-Element home (Start) aufgerufen, und das Pivot-Element genres (Genres) ist oben rechts verfügbar. Zum Öffnen des Pivot-Elements genres (Genres) tippen Sie einfach darauf oder wechseln zu ihm.

Apps sollten eine minimale Anzahl von Pivot-Elementen aufweisen. Benutzer können die Orientierung verlieren, wenn sie von Pivot-Element zu Pivot-Element springen. Versuchen Sie, die Anzahl der Pivot-Elemente auf maximal fünf zu beschränken. Wenn Sie mehr Pivot-Elemente benötigen, fügen Sie in eines der Pivot-Elemente ein Listensteuerelement mit Links ein, auf die getippt werden kann, um zu anderen Seiten oder zu einer anderen Navigationsebene zu wechseln, bei der es sich selbst um ein Pivot-Steuerelement handelt. Wenn Sie nachvollziehen möchten, ob es sich um das handelt, was Sie benötigen, sehen Sie in der Liste mit Detaildrilldown für Windows Phone nach.

Hinweis  Mit dem Pivot-Steuerelement können Sie durch die Elemente navigieren, indem Sie auf die Kopfzeilen der Elemente tippen. Dies ist beim Hub-Steuerelement nicht möglich.

Überlegungen zur Datenfilterung

Am Anfang dieses Themas wurde erläutert, dass die beste Verwendung des Pivot-Steuerelement darin besteht, dass jedes Pivot -Element denselben Datentyp enthält, aber lediglich eine anderen Filterung dieser Daten darstellt. Es wurde auch erwähnt, dass das Hub-Steuerelement zum Anzeigen von Abschnitten verwendet werden könnte, die nicht zu diesen gehörende Daten enthalten. Sie könnten das Pivot-Steuerelement auch auf diese Weise verwenden, wenn sich die Daten wesentlich unterscheiden würden, aber dennoch alle einem Thementyp zugeordnet wären. Falls Sie beispielsweise einige Informationen zu New York City in einer App für Touristen bereitstellen müssen, könnten Sie ein Pivot-Steuerelement mit einem Pivot-Element haben, das interessante statistische Daten wie Standort, Bevölkerung und jährliche Steuereinnahmen enthält. Dann könnten Sie weitere Pivot-Elemente für Informationen wie sehenswerte Attraktionen und und ein anderes Pivot-Element für Hotels als Unterkunft verwenden.

Die ESPN ScoreCenter-App ist ein Beispiel für das App-Registerkartennavigationsmuster, bei dem jedes Pivot-Element heterogene und auf einem zentralen Thema basierende Daten enthält.

ESPN ScoreCenter-App

Kombinieren des Pivot-Steuerelements mit einem Hub-Steuerelement

Auf der Startseite eines Hub-Steuerelements (wie der der Facebook-App) können Sie auf ein Navigationselement in der Liste tippen und in ein anderes Pivot-Steuerelement navigieren. Dies geschieht beispielsweise bei der Profilauswahl im Start-Hub-Abschnitt von Facebook. Wenn der Benutzer auf die Profilauswahl tippt, wird er zu einem Pivot-Steuerelement mit Pivot-Elementen wie Chronik, Info, Meine Fotos usw. weitergeleitet. Auf diese Weise können Sie von einem Steuerelement zum nächsten navigieren.

Wechsel vom Haupt-Hub-Steuerelement zu einem Pivot-Steuerelement innerhalb der Facebook-App

Möglicherweise haben Sie vor, von einer Hub-Start-Abschnittsauswahl zu einem anderen Hub zu navigieren. Dies ist keine gute Idee. Sie könnten die Benutzer verwirren, da sie schnell vergessen, in welcher App sie sich gerade befinden. Der Hub enthält manchmal ein großes gestrecktes Bild im Hintergrund, um einen Benutzer an der entsprechenden Position fixiert zu lassen, wenn er sich am oberen Rand befindet. Und wenn der Benutzer zu einem Unterbereich navigiert, bei dem es sich selbst um einen Hub mit einem anderen Hintergrund handelt, ist der Benutzer möglicherweise verwirrt.

App-Leiste in einem Pivot-Steuerelement

Da alle Daten demselben Typ angehören, können Sie in vielen Fällen eine App-Leiste unten mit Schaltflächen bereitstellen, die sich auf den anschließend angezeigten Inhalt beziehen. Die in der folgenden Abbildung dargestellte Outlook-App verfügt über eine App-Leiste, die immer sichtbar ist, da sie vom Benutzer benötigte Aktionen enthält, die sich darauf auswirken, was angezeigt wird.

Outlook-Client-App

In der Outlook-App kann die App-Leiste dieselben Aktionen zulassen, egal auf welchem Pivot-Element Sie sich befinden. In der vorherigen Abbildung können Sie sehen, dass es Schaltfläche zum Erstellen einer neuen E-Mail, Einblenden der Auswahlfelder, Wechseln zwischen Ordnern und erneuten Synchronisieren Ihrer E-Mails gibt. Dies ist ein weiterer Unterschied zwischen dem Pivot-Steuerelement und dem Hub-Steuerelement, da Sie dort vermutlich niemals eine App-Leiste am unteren Rand platzieren würden.

Gehen Sie nicht davon aus, dass Sie die ganze Zeit dieselben Schaltflächen am unteren Rand beibehalten können, es sei denn, Sie überlegen sorgfältig, was sich auf den einzelnen Pivot-Elementen befindet, und dies macht Sinn. Bei einigen Anwendungsfällen des Pivot-Steuerelements wird möglicherweise nicht exakt derselbe Datentyp auf jedem Pivot-Element beibehalten.

Pivot-Element „Start“

Sie können mit dem ersten Pivot-Element eine Liste aller restlichen Pivot-Elemente bereitstellen. Auf diese Weise kann der Benutzer auf ein Element tippen und direkt zu diesem Pivot-Element wechseln, ohne Streifbewegungen zu diesem machen zu müssen. Diese Liste könnte auch Einträge enthalten, mit denen andere Apps gestartet werden.

Sie müssen den Benutzer nicht zuerst zum Start-Pivot-Element führen, wenn Sie dies nicht möchten. In einer Filmlisten-App müssten Sie den Benutzer beispielsweise nicht zuerst zum Start-Pivot-Element führen, sondern könnten ihn direkt zu einem Pivot-Element leiten, in dem Grafiken der aktuellsten und beliebtesten Filme angezeigt werden. Somit öffnet der Benutzer ein Element, das etwas stärker ins Auge springt.

Verwandte Themen

Hub

Pivot