Language: HTML | XAML

Flache Navigation von A bis Z (XAML)

Applies to Windows only

Verwenden Sie ein flaches Navigationsmuster für Ihre Windows Store-App, wenn diese über eine geringe Anzahl von Seiten verfügt und die Informationen nicht hierarchisch angeordnet sind. Anders ausgedrückt: Wenn es sich bei den Seiten, Registerkarten und Modi um logische Peers handelt.

Benutzer sollten sich in der App auf den Inhalt konzentrieren können und sich nicht mit anderen Dingen herumschlagen müssen. Wenn die Informationsdichte Ihrer App eher gering ist und sie nur wenige Seiten oder Szenarien aufweist, die eine Hierarchie und Struktur erfordern, sollten Sie eine flache Struktur in Erwägung ziehen, damit Benutzer schnell zwischen den Seiten navigieren können. Falls die App jedoch unterschiedliche Oberflächen und Inhalte mit spezieller Anordnung und Struktur bietet, die gemäß einer vorgegebenen Reihenfolge durchlaufen werden sollten, helfen Ihnen die Informationen unter Hierarchische Navigation von A bis Z weiter.

Hier wird die Erstellung einer Windows Store-App mit C++, C# oder Visual Basic von A bis Z erläutert, bei der das flache Navigationsmuster verwendet wird und die alle grundlegenden Anforderungen der Windows Store-Zertifizierung erfüllt. Dazu zählt Folgendes:

  • Bildressourcen zur Darstellung der App im Betriebssystem
  • App-Leisten zur Unterstützung der Navigation und Befehle
  • Datenroaming zur Synchronisierung der App für Sitzungen und Geräte
  • Einstellungen für Datenschutz, Hilfe und andere App-Informationen
  • Globalisierung zur Erreichung von Kunden in Ländern und Regionen weltweit
  • Barrierefreiheit zur benutzerfreundlichen Bedienung unabhängig von den physischen Fähigkeiten und vom Eingabegerät

Die hier angegebenen Richtlinien, Aufgaben und der Beispielcode gelten speziell für die Entwicklung von Windows Store-Apps mit C++, C# oder Visual Basic. Die Version für Windows Store-Apps mit JavaScript finden Sie unter Flache Navigation von A bis Z.

Hier ist eine grundlegende flache Struktur neben einem Drahtmodell des flachen Navigationsmusters in einer Windows Store-App angegeben.

Grundlegende Implementierung des flachen Navigationsmusters

Drahtmodell der Beispiel-App

 

In diesen Abbildungen ist zu sehen, dass es für die von diesem Muster definierte flache Inhaltsstruktur erforderlich ist, dass von einer Seite der App aus auf jede andere Seite zugegriffen werden kann. Benutzer können sich ohne Verzweigungen vorwärts und rückwärts durch die Seiten bewegen.

Verwenden Sie die App-Leiste für die Navigation (wie oben im Drahtmodell dargestellt) zum schnellen Wechseln zwischen Seiten in Apps mit flacher Navigation. Bei dieser Leiste handelt es sich um ein nicht immer sichtbares Element, das am oberen Rand des Bildschirms eingeblendet werden kann, wenn Benutzer vom oberen oder unteren Rand aus wischen (Rechtsklick mit der Maus, Windows-Logo-Taste+Z oder Menütaste auf der Tastatur).

Hier ist dargestellt, wie das flache Navigationsmuster in der Rechner-App umgesetzt wurde. Beachten Sie, wie anstelle der standardmäßigen temporären Navigationsleiste eine dauerhaft sichtbare Navigationsleiste verwendet wird. Dies ist ein Beispiel dafür, wie mit der Windows Store-App-Plattform für Apps eine Anpassung an spezielle Szenarien erzielt werden kann.

Beispiel für flache Navigation: Standardseite des RechnersBeispiel für flache Navigation: Wissenschaftliche Seite des RechnersBeispiel für flache Navigation: Konverterseite des Rechners
Standardseite des RechnersWissenschaftliche Seite des RechnersKonverterseite des Rechners

 

Durch die Verwendung des korrekten Navigationsmusters und eines geeigneten UI-Layouts (siehe Windows Store-App-Benutzeroberfläche von A bis Z (XAML)) können Sie einer Überfrachtung mit dauerhaft sichtbaren Steuerelementen vorbeugen und es dem Benutzer ermöglichen, sich auf die wichtigen Inhalte Ihrer App zu konzentrieren.

Voraussetzungen

Falls Sie noch nicht über viel Erfahrung in Bezug auf die Entwicklung von Windows Store-Apps mit C++, C# oder Visual Basic verfügen, sollten Sie sich die folgenden Themen ansehen und sich mit der erwähnten Technologie vertraut machen.

Beispiel für flache Navigation

Zusätzlich zu den Beispielen und Codeausschnitten in den unten angegebenen Themen haben wir ein einfaches Beispiel für flache Navigation entwickelt. Mit diesem Beispiel für eine Windows Store-App werden die hier beschriebenen Prinzipien, Empfehlungen und Implementierungsdetails in einer App veranschaulicht, die alle grundlegenden Anforderungen der Windows Store-Zertifizierung erfüllt.

Sehen Sie sich an, wie dies in die Praxis umgesetzt wird. So können Sie Zeit sparen und dieses Beispiel als Grundlage für Ihre Ideen verwenden.

Kurze Beschreibung des Beispiels

In diesem Beispiel geben wir Ihnen eine "Shell" bzw. Vorlage vor, die die Anforderungen der Windows Store-Zertifizierung erfüllt und die Sie wie gewünscht anpassen können. Sie dient als Fundament, auf das Sie Ihre Inhalte und Oberflächenelemente aufbauen können.

Unten sind Screenshots der Beispiel-App angegeben, mit denen die Grundfunktionen des Beispiels verdeutlicht werden. Die App hat zwei Seiten: eine Startseite, auf der die App vorgestellt wird, und eine zweite Seite, auf der Sie Ihre Angebote präsentieren können. Erweitern Sie die App je nach Bedarf um weitere Seiten.

Seite 1 der Beispiel-App

Seite 1 der Beispiel-App mit App-Leiste für die Navigation

Seite 2 der Beispiel-App

Hier ist erst einmal eine grobe Gliederung der Aufgaben angegeben, damit Sie eine grundlegende App erstellen können. Dabei werden die bewährten Methoden der Erstellung von Windows Store-Apps mit flachem Navigationsmodell befolgt. Es werden die Navigationsdetails und die erforderlichen Mindestfunktionen zur Erreichung der Store-Kompatibilität beschrieben. Jede Aufgabe ist mit einem Link zu einem zugehörigen Thema mit weiteren Details versehen. Falls zutreffend, wird auch auf den relevanten Code im Begleitbeispiel hingewiesen.

Wir empfehlen Ihnen, alle Schritte durchzuarbeiten, falls Sie noch nicht viel Erfahrung mit der Entwicklung von Windows Store-Apps haben oder falls Sie mit den unterschiedlichen Aspekten der Store-Kompatibilität noch nicht vertraut sind. Die zugehörigen Details sind jeweils zu Gruppen zusammengefasst.

Windows Store-Kompatibilität

Der Windows Store ist das vorrangige Mittel zum Verteilen von Windows Store-Apps an Kunden und Gewähren des Zugriffs für diese Kunden auf so viele interessante Apps wie möglich. Der Windows Store wird verwaltet, und Apps müssen in Bezug auf ihre Kompatibilität und ihren Inhalt zertifiziert werden.

Im Begleitbeispiel sind die hier erwähnten Funktionen implementiert, und es erfüllt die grundlegenden Anforderungen, die von allen Windows Store-Apps zur Erreichung der Zertifizierung erfüllt werden müssen, z. B.:

  • Begrüßungsbildschirm und Kachelbilder
  • Vollständige Unterstützung der Eingabe per Touch, Maus und Tastatur
  • Unterstützung verschiedener Fenstergrößen, Geräteausrichtungen und Anzeigegrößen
  • Roaming- und Sitzungszustand
  • Datenschutzbestimmungen auf der Beschreibungsseite und im Windows-Charm "Einstellungen"
  • Optimierung für Globalisierung, Lokalisierung und Barrierefreiheit

Unten sind einige allgemeine Hinweise angegeben, die Ihnen als Hilfe dienen und Sie beim Vermarkten Ihrer kleinen (oder auch nicht so kleinen) App unterstützen sollen.

Startsymbol

Anmelden

Legen Sie sich ein Microsoft-Konto und ein Windows Store-Entwicklerkonto zu, falls Sie dies noch nicht getan haben. Sie benötigen beide Konten, um Apps an den Windows Store übermitteln zu können.

Beachten Sie beim Entwickeln der App die App-Zertifizierungsanforderungen für den Windows Store, und versuchen Sie, häufige Zertifizierungsfehler zu vermeiden.

Schrittsymbol

Erstellen der App

Führen Sie die hier angegebenen Schritte aus, um Ihre eigene App mit flacher Navigation zu erstellen. Sie können mit der bereitgestellten Vorlage Flaches Navigationsmuster beginnen oder in Microsoft Visual Studio ein Windows Store-Projekt vom Typ Leere App erstellen.

Schrittsymbol

Anbieten Ihrer App

Nachdem Sie Ihr Konto eingerichtet und die App erstellt haben, bieten Sie die App im Windows Store an.

Richten Sie die App vor der Übermittlung auf die richtige Zielgruppe aus.

Beginnen Sie mit dem Verteilungsvorgang.

Nutzen Sie die Werbetools im Windows Store, damit Kunden Ihre App entdecken können.

Verwenden Sie Telemetriedaten, um Verwendungsdaten zu analysieren und die Qualität und Leistung der App zu verbessern.

 

Als Nächstes geht es um die Details der Implementierung der UI und Funktionen für das flache Navigationsmuster in einer Windows Store-App.

Im Begleitbeispiel sind alle folgenden Elemente implementiert, aber um den Ablauf nicht zu stören, gehen wir hier noch nicht näher auf den Code ein. Jeder Schritt verfügt über den Hinweis "Code im Beispiel", damit Sie den Code schnell finden.

Einige dieser Details gelten für Ihre App möglicherweise nicht. Wählen Sie die Details aus, die für Ihren Fall zutreffen.

Navigationsbegriffe

Nachdem die Grundlagen der Vermarktung Ihrer App beschrieben wurden, werden nun die unterschiedlichen Navigationsmuster vorgestellt, die für Windows Store-Apps häufig genutzt werden und in Microsoft Visual Studio als Vorlagen verfügbar sind. Dies sind:

Schrittsymbol

Navigationsmuster

Wählen Sie für die App und ihren Inhalt das am besten geeignete Navigationsmuster.

Die hier erläuterten Begriffe werden anhand des Begleitbeispiels Flaches Navigationsmuster veranschaulicht. Es ist also ratsam, das Beispiel herunterzuladen und einige Dinge auszuprobieren.

Nachdem Sie ermittelt haben, dass das flache Navigationsmuster die am besten geeignete Struktur für die App ist, können Sie mit diesen Schritten fortfahren oder aber sofort beginnen und das Beispiel als Vorlage beim Entwerfen und Entwickeln Ihrer eigenen App verwenden.

Schrittsymbol

Inspiration

Lassen Sie sich von den Navigationsbeispielen in diesen Fallstudien und Ideensammlungen inspirieren.

 

Implementierung der Navigation

Schrittsymbol

Das Begleitbeispiel für dieses Thema wurde von der Visual Studio-Projektvorlage Leere App abgeleitet. Es ist also hilfreich, die unten angegebenen Themen durchzuarbeiten.

  • C#-, VB- und C++-Projektvorlagen für Windows Store-Apps

    Hier sind die Windows Store-Apps zusammengefasst, für die C++-, C#- oder Visual Basic-Vorlagen verwendet werden. Dazu gehören auch Implementierungsdetails in Bezug auf Navigationsmodell, Datenmodell, Behandlung des Ansichtszustands usw.

    Bei den hier beschriebenen Navigationsmodellen werden XAML-Seiten in einen einzelnen App-weiten Kontext geladen, und zwar meist als Reaktion auf Benutzeraktionen. Dies wird häufig als Einzelseitennavigation bezeichnet.

  • C#-, VB- und C++-Elementvorlagen für Windows Store-Apps

    App-Dateien mit häufig verwendetem Code, die einer Projektvorlage hinzugefügt werden können, um die Entwicklungszeit zu verkürzen.

Schrittsymbol

Schnellstart: Navigation zwischen Seiten

Hier wird ausführlich erläutert, wie die Objekte Frame und Page die Einzelseitennavigation unterstützen. (Mithilfe der Frame-Klasse wird die Navigation zwischen den Seiten angezeigt und verwaltet.)

 

Bildressourcen

Geben Sie Bildressourcen (visuelle Ressourcen wie Begrüßungsbildschirm und Kachelbilder) für die App auf der Registerkarte Anwendungsbenutzeroberfläche des Anwendungsmanifests an. Öffnen Sie dazu im Projektmappen-Explorer die Datei package.appxmanifest. Weitere Informationen finden Sie unter Verwenden des Manifest-Designers.

Hinweis  Die Begleit-App enthält Platzhalterbilder, die die Anforderungen des Windows Store erfüllen. Zu Veranschaulichungszwecken wurden in die Vorlage zusätzliche Bilder eingefügt, die aufgrund verschiedener Kontrasteinstellungen die Barrierefreiheit sowie die Lokalisierung in die französische Sprache (fr-FR) unterstützen. Die meisten Bilder werden mit mehreren Auflösungen bereitgestellt.

Schrittsymbol

Optimieren von Bildern für verschiedene Bildschirmauflösungen

Erstellen Sie Bildressourcen für die App, fügen Sie diese dem Projekt hinzu, und identifizieren Sie sie im Anwendungsmanifest.

Schrittsymbol

Auswählen der App-Bilder

Geben Sie Bilder an, mit denen für die Oberfläche das bestmögliche Ergebnis erzielt wird. Fügen Sie skalierte Versionen für unterschiedliche Bildschirmauflösungen ein.

Die App erfordert einen grundlegenden Satz von Bildern, um die Zertifizierungsprüfung für den Store zu bestehen.

  • Store-Logo

    Wird zusammen mit dem App-Eintrag in Suchergebnissen und mit der Beschreibung der App auf der Eintragsseite angezeigt.

  • Logo

    Wird auf der Startseite in der quadratischen Kachel der App angezeigt. Weitere Informationen finden Sie unter Erstellen von Kacheln und Beispiel für App-Kacheln und Signale.

  • Kleines Logo

    Das kleine Logo wird zusammen mit dem Anzeigenamen Ihrer App in den Suchergebnissen auf der Startseite angezeigt. Es wird auch in der Liste der durchsuchbaren Apps und im verkleinerten Zustand der Startseite angezeigt.

  • Begrüßungsbildschirm

    Wird beim Starten der App eingeblendet und dann ausgeblendet, sobald die App bereit zur Interaktion ist. Der Begrüßungsbildschirm besteht aus einem Bild und einer Hintergrundfarbe. Beides können Sie anpassen. Weitere Informationen finden Sie unter Hinzufügen eines Begrüßungsbildschirms und Begrüßungsbildschirmbeispiel.

Schrittsymbol

Schnellstart: Verwenden von Datei- oder Bildressourcen

Befolgen Sie diese Anleitung zum Benennen und Organisieren der Dateiressourcen in Ordnern. Ein ausführlicheres Beispiel finden Sie im Beispiel für App-Kacheln und Signale.

 

App-Leisten

Die Begleit-App enthält Navigationsbefehle, auf die über die Navigationsleiste zugegriffen werden kann. Andere Befehle sind in der Standardleiste der App angeordnet.

Schrittsymbol

Schnellstart: Hinzufügen von App-Leisten

Zeigen Sie Navigationselemente, Befehle und Tools Benutzern je nach Bedarf an. Auf der App-Leiste werden Befehle für den jeweiligen Kontext des Benutzers angezeigt, also beispielsweise die aktuelle Seite oder Auswahl. Passen Sie dies wie gewünscht an. Ein ausführlicheres Beispiel finden Sie unter Beispiel für XAML-App-Leisten-Steuerelement.

 

Roaminganwendungsdaten

Schrittsymbol

Zugreifen auf App-Daten

Verwalten Sie Anwendungsdaten, z. B. Laufzeitstatus, Benutzereinstellungen und weitere Einstellungen. Diese Daten werden erstellt, gelesen, aktualisiert und gelöscht, wenn die betreffende App ausgeführt wird.

Schrittsymbol

Schnellstart: Roaming von Anwendungsdaten

Stellen Sie die Synchronisierung der App-Daten und des App-Zustands über mehrere Geräte hinweg sicher, und reduzieren Sie die Einrichtungsaufgaben und die Wiederholung der gleichen Schritte für Benutzer auf anderen Geräten. Von Windows werden Daten beim Aktualisieren in die Cloud repliziert und mit den anderen Geräten synchronisiert, auf denen die App installiert ist.

 

Einstellungen

Je nach den Funktionen und Deklarationen in Ihrem App-Manifest kann es für die App ggf. erforderlich sein, über den Charm "Einstellungen" Datenschutzbestimmungen bereitzustellen.

In der Begleit-App ist die Funktion "Private Netzwerke (Client und Server)" festgelegt, und deswegen müssen Datenschutzbestimmungen angegeben werden. Weitere Informationen finden Sie unter Zertifizierungsanforderung 4.1.

Die Begleit-App enthält sowohl Datenschutzbestimmungen als auch Hilfeinhalte, auf die über den Charm "Einstellungen" zugegriffen werden kann. Die Datenschutzbestimmungen müssen auch auf der Beschreibungsseite der App angezeigt werden.

Schrittsymbol

Hinzufügen von App-Einstellungen

Gewähren Sie Zugriff auf alle Einstellungen, die für den aktuellen Kontext des Benutzers jeweils relevant sind. Passen Sie dies wie gewünscht an. Weitere Informationen finden Sie unter Beispiel für App-Einstellungen.

Schrittsymbol

Beschreibung der App

Formulieren Sie die Beschreibung der App so detailliert wie möglich, um den Funktionsumfang Ihrer App genau darzustellen.

 

Globalisierung

Sorgen Sie für eine einheitliche Globalisierung, und stellen Sie sicher, dass die Lokalisierung der App aus den Screenshots hervorgeht. Bedenken Sie, dass zwischen Sprachen und Märkten ein Unterschied besteht.

Schrittsymbol

App-Ressourcen und Lokalisierung

Entwerfen Sie Windows Store-Apps, deren Ressourcen unabhängig verwaltet und lokalisiert sowie an unterschiedliche Skalierungsfaktoren, Optionen für Barrierefreiheit und andere Benutzer- und Computerkontexte angepasst werden können. Weitere Informationen finden Sie unter Anwendungsressourcen und Lokalisierung – Beispiel.

Schrittsymbol

Lokalisieren des Paketmanifests

Lokalisieren Sie für die App den Anzeigenamen, die Beschreibung und andere Erkennungsmerkmale, die im Anwendungsmanifest beschrieben sind.

Schrittsymbol

Globalisieren Ihrer App

Passen Sie die Software für zusätzliche Sprachen, Märkte, Kulturen und Regionen an.

 

Barrierefreiheit

Deklarieren Sie die App nur dann als barrierefrei, wenn Sie sie ausdrücklich für Barrierefreiheitsszenarien entwickelt und getestet haben.

Schrittsymbol

Testen der App auf Barrierefreiheit

Entdecken Sie die Testtools für Barrierefreiheit aus dem Software Development Kit (SDK) für Windows 8, mit denen Sie die Barrierefreiheit Ihrer App überprüfen können.

Schrittsymbol

Deklarieren Ihrer App im Windows Store als barrierefrei

Wenn Sie Ihre App auf Barrierefreiheit getestet haben, können Sie dies angeben, indem Sie auf der Seite Verkaufsdetails das Kontrollkästchen Barrierefreiheit aktivieren.

 

Abschluss

Symbol "Store-Anforderungen"

Zertifizieren Sie die App mit dem Zertifizierungskit für Windows-Apps.

Führen Sie das Zertifizierungskit für Windows-Apps aus, um sicherzustellen, dass Ihre App die Anforderungen des Windows Store erfüllt. Die Ausführung ist jeweils ratsam, wenn Sie der App umfangreichere Funktionen hinzufügen.

Stoppsymbol

Sie sind fertig! Ihre App sollte kompakt und nicht überladen sein und über eine benutzerfreundliche Navigation verfügen.

Lehnen Sie sich zurück, und genießen Sie Ihren Erfolg.

 

Möchten Sie weitere Informationen erhalten?

Planen von Windows Store-Apps

Hier erhalten Sie weitere Informationen zur Art der Benutzeroberfläche, die Sie Ihren Benutzern präsentieren möchten.

Entwerfen für Barrierefreiheit

Hier erhalten Sie weitere Informationen zu den umfassenden Fähigkeiten, möglichen Beeinträchtigungen und Vorlieben Ihrer Benutzer.

Designen für verschiedene Formfaktoren

Hier erhalten Sie weitere Informationen zur Behandlung unterschiedlicher Geräte, Eingabemethoden und Bildschirmausrichtungen.

Index der Richtlinien für die Gestaltung der Benutzeroberfläche

Hier können Sie die gesamte Liste der Richtlinien für die Gestaltung der Benutzeroberfläche durchsuchen.

Beispiele

 

 

Anzeigen:
© 2014 Microsoft