Flache Navigation
Inhaltsverzeichnis reduzieren
Inhaltsverzeichnis erweitern
Language: HTML | XAML

Flache Navigation von A bis Z (XAML)

[ Dieser Artikel richtet sich an Windows 8.x- und Windows Phone 8.x-Entwickler, die Windows-Runtime-Apps schreiben. Wenn Sie für Windows 10 entwickeln, finden Sie weitere Informationen unter neueste Dokumentation]

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. Oder anders ausgedrückt: Wenn die Seiten, Registerkarten und Modi logische Gruppen bilden.

Ihre App muss es dem Benutzer ermöglichen, sich auf den Inhalt der App zu konzentrieren (und nicht auf das Wo oder Warum). Wenn Ihre App lediglich eine geringe Informationsdichte, nur wenige Seiten und keine Szenarien besitzt, die eine Hierarchie und eine Struktur erfordern, empfiehlt es sich, eine flache Struktur zu verwenden, die Benutzern die schnelle Navigation zwischen Seiten ermöglicht. 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:

  • 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.

Einfache Implementierung des flachen Navigationsmusters

Drahtmodell der Beispiel-App

 

Wie auf diesen Bildern zu sehen, muss bei der durch dieses Muster definierten flachen Inhaltsstruktur jede Seite der App von jeder anderen Seite aus erreichbar sein. Der Benutzer kann nach Belieben vorwärts und rückwärts durch die Seiten navigieren, und es gibt keine Verzweigungen.

Nutzen Sie in Apps mit flacher Navigation die (im Drahtmodell weiter oben gezeigte) App-Navigationsleiste, um schnell zwischen Seiten zu wechseln. Diese Leiste ist ein vorübergehend sichtbares Element, das am oberen Bildschirmrand eingeblendet wird, wenn der Benutzer vom oberen oder unteren Rand nach innen wischt (oder mit der rechten Maustaste klickt oder Windows-Logo-Taste+Z oder die Menütaste auf einer Tastatur drückt).

Hier sehen Sie die Implementierung des flachen Navigationsmusters in unserer Rechner-App. Wie Sie sehen kommt hier anstatt der standardmäßig nur vorübergehend sichtbaren Navigationsleiste eine dauerhaft sichtbare Navigationsleiste zum Einsatz Dies ist ein Beispiel dafür, wie die Windows Store-App-Plattform an spezielle Szenarien für Ihre Apps angepasst werden kann.

Beispiel für eine flache Navigation: Rechnerseite "Standard"Beispiel für eine flache Navigation: Rechnerseite "Wissenschaftlich"Beispiel für eine flache Navigation: Rechnerseite "Konverter"
Rechnerseite "Standard"Rechnerseite "Wissenschaftlich"Rechnerseite "Konverter"

 

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

Beispiel für flache Navigation

Das grundlegende Beispiel für die flache Navigation dient als Fundament, auf das Sie Ihre Inhalte und Oberflächenelemente aufbauen können. Damit werden die hier beschriebenen Prinzipien, Empfehlungen und Implementierungsdetails in einer App veranschaulicht, die alle grundlegenden Anforderungen der Windows Store-Zertifizierung erfüllt. Wie Sie unten sehen, enthält das Beispiel zwei Seiten: eine Startseite, auf der die App vorgestellt wird, und eine zweite Seite, auf der Sie Ihre Angebote präsentieren können. 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.

Beispiel-App: Seite 1

Beispiel-App: Seite 1 mit App-Navigationsleiste

Beispiel-App: Seite 2

Windows Store-Compliance

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. Apps im Store müssen den -Richtlinien für Windows und Windows Phone Store entsprechen.

Das Begleitbeispiel implementiert die hier besprochenen Funktionen sowie die grundlegenden Anforderungen an alle Windows Store-Apps, die für eine erfolgreiche Zertifizierung erforderlich sind. Hierzu zählen:

  • Begrüßungsbildschirm und Kachelbilder
  • Umfassende Unterstützung von Touch-, Maus- und Tastatureingabe
  • Unterstützung unterschiedlicher Fenstergrößen, Geräteausrichtungen und Displaygrößen
  • Roaming und Sitzungszustand
  • Optimierung für Globalisierung, Lokalisierung und Barrierefreiheit

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

Implementieren der Navigation

Schrittsymbol

Öffnen Sie das Beispiel für die flache Navigation, oder beginnen Sie mit der Projektvorlage Leere App in Visual Studio. In den folgenden Themen finden Sie weitere Informationen zu Vorlagen:

Schrittsymbol

Navigieren 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.)

 

Hinzufügen von UI-Elementen und Bildern

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

Hinweis  Die Begleit-App enthält Platzhalterbilder, die die Windows Store-Anforderungen erfüllen. Zu Demonstrationszwecken wurden der Vorlage zusätzliche Bilder mit unterschiedlichen Kontrasteinstellungen für die Barrierefreiheit sowie eine Lokalisierung in die französische Sprache (fr-FR) hinzugefügt. Die meisten Bilder werden mit mehreren Auflösungen bereitgestellt.
 
Schrittsymbol

Auswählen der App-Bilder

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

Ihre App muss über einige grundlegende Bilder verfügen, um für den Windows Store zertifiziert werden zu können.

  • Store-Logo

    Wird zusammen mit Ihrem App-Eintrag in Suchergebnissen und mit der App-Beschreibung 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. Außerdem erscheint es in der Liste mit den durchsuchbaren Apps und im verkleinerten Zustand der Startseite.

  • Begrüßungsbildschirm

    Wird beim Start einer App angezeigt und ausgeblendet, sobald die App interaktionsbereit ist. Der Begrüßungsbildschirm besteht aus einem (anpassbaren) Bild und einer (anpassbaren) Hintergrundfarbe. Weitere Informationen finden Sie unter Hinzufügen eines Begrüßungsbildschirms und Begrüßungsbildschirmbeispiel.

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

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.

Schrittsymbol

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.

Schrittsymbol

Hinzufügen von App-Einstellungen

Gewähren Sie Zugriff auf alle Einstellungen, die für den aktuellen Kontext des Benutzers relevant sind. Passen Sie diese wie gewünscht an. Weitere Informationen finden Sie unter Beispiel für App-Einstellungen. Die Begleit-App enthält sowohl eine Datenschutzrichtlinie als auch Hilfeinhalte, auf die Sie über den Charm „Einstellungen“ zugreifen können.

 

Roaming von App-Daten

Schrittsymbol

Verwalten von App-Daten

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

Schrittsymbol

Roaming von Anwendungsdaten

Synchronisieren Sie die Daten und den Zustand Ihrer App mit mehreren Geräten, und verringern Sie die Anzahl von Einrichtungsaufgaben und repetitive Prozessen des Benutzers auf anderen Geräten. Windows repliziert aktualisierte Daten in die Cloud und synchronisiert die Daten mit den anderen Geräten, auf denen die App installiert ist.

 

Globalisieren

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

Weitere Informationen zu App-Ressourcen und zur Lokalisierung

Entwickeln 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 den Anzeigenamen, die Beschreibung und andere Identifizierungsmerkmale Ihrer App, die im Anwendungsmanifest beschrieben werden.

Schrittsymbol

Globalisieren Ihrer App

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

 

Unterstützung für 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 Windows 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

Aktivieren Sie auf der Seite Verkaufsdetails das Kontrollkästchen Barrierefreiheit, um anzugeben, dass die Barrierefreiheit Ihrer App getestet wurde.

 

Fertigstellen

Symbol für die Windows Store-Anforderungen

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

Führen Sie das Zertifizierungskit für Windows-Apps aus, um sich zu vergewissern, dass Ihre App die Anforderungen des Windows Store erfüllt. Diesen Schritt sollten Sie ausführen, sobald Sie Ihrer App wichtige Funktionen hinzufügen.

Stopp-Symbol

Sie sind mit den Entwicklungsaufgaben fertig und können Ihre App an den Store übermitteln!

 

Interesse an weiteren Informationen?

Planen von Windows Store-Apps

Hier finden Sie weitere Informationen dazu, welche Erfahrung Sie den Benutzern bieten sollten.

Designen für die Barrierefreiheit

Hier finden Sie weitere Informationen zur breiten Palette an Fähigkeiten, Behinderungen und Vorlieben der Benutzer.

Designen für verschiedene Formfaktoren

Hier finden Sie weitere Informationen zur Behandlung verschiedener 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:
© 2017 Microsoft