Flache Navigation von A bis Z (HTML)

[ 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]

Ein flaches Navigationsmuster eignet sich für Windows Store-Apps mit einer geringen Anzahl von Seiten und ohne hierarchische Organisation der Informationen. 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 Ihre App dagegen verschiedene Umgebungen und Inhalte mit Organisation und Struktur bereitstellt, die in einer bevorzugten Sequenz oder Reihenfolge durchlaufen werden sollten, lesen Sie unter Hierarchische Navigation von A bis Z weiter.

In diesem Artikel beschäftigen wir uns umfassend mit der Erstellung einer Windows Store-App mit JavaScript, die das flache Navigationsmuster verwendet und alle grundlegenden Anforderungen für die Windows Store-Zertifizierung erfüllt. Dazu zählt:

• Bildressourcen, um Ihre App im gesamten Betriebssystem bereitzustellen
• App-Leisten für die Navigations- und Befehlsunterstützung
• Einstellungen für Datenschutz, Hilfe und andere App-Infos
• Datenroaming für die sitzungs- und geräteübergreifende Synchronisierung Ihrer App
• Globalisierung, um Kunden auf der ganzen Welt zu erreichen
• Barrierefreiheit, damit die Benutzer Aufgaben unabhängig von physischer Befähigung und Eingabegerät ausführen können

Hier sehen Sie eine einfache flache Struktur sowie ein Drahtmodell des flachen Navigationsmusters in einer Windows Store-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.

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.

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.

Implementierung der flachen Navigation

Öffnen Sie das Beispiel für die flache Navigation, oder beginnen Sie mit der Projektvorlage für eine Navigations-App in Visual Studio. Sie können diesen Überblick über Vorlagen ansehen: JavaScript-Projektvorlagen für Windows-Runtime-Apps: Zusammenfassung der Implementierungsdetails zum Navigationsmodell, zum Datenmodell, zur Behandlung des Anzeigemodus usw. JavaScript-Elementvorlagen für Windows Store-Apps: Enthält häufig verwendeten Code, um die Entwicklungszeit zu verkürzen.

Hinzufügen der Einzelseitennavigation Enthält ausführliche Informationen zur Unterstützung der Einzelseitennavigation durch das PageControl-Objekt. Unter Hinzufügen von Seitensteuerelementen werden verschiedene Implementierungsmethoden erläutert. Zur entsprechenden Stelle im Beispiel: Das PageControl-Objekt wird in der Datei \js\navigator.js definiert und kommt in \pages\home\home.js und in \pages\page2\page2.js zum Einsatz.

Hinzufügen von UI-Elementen und Bildern

Geben Sie auf der Registerkarte Anwendungsbenutzeroberfläche des Anwendungsmanifests Bildressourcen (visuelle Ressourcen wie Begrüßungsbildschirm- und Kachelbilder) für Ihre App 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 in mehreren Auflösungen bereitgestellt.

	Auswählen von Bildern für Ihre App Geben Sie Bilder an, die eine bestmögliche Darstellung ermöglichen. 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 in der quadratischen Kachel für die App auf der Startseite angezeigt. Weitere Informationen finden Sie unter Erstellen von Kacheln und Signalen sowie unter 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 sowie unter Begrüßungsbildschirmbeispiel.
	Hinzufügen von Datei- oder Bildressourcen Orientieren Sie sich beim Benennen und Organisieren Ihrer Dateiressourcen in Ordnern an diesen Anweisungen.
	Optimieren von Bildern für verschiedene Bildschirmauflösungen Erstellen Sie Bildressourcen für Ihre App, fügen Sie sie dem Projekt hinzu, und geben Sie sie im Anwendungsmanifest an.
	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 (also beispielsweise für die aktuelle Seite oder Auswahl) angezeigt. Diese können Sie gemäß Ihren Anforderungen anpassen. Ein ausführlicheres Beispiel finden Sie unter HTML-Beispiel für ein AppBar-Steuerelement.
	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

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

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

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

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.

Sie sind mit den Entwicklungsaufgaben fertig und können Ihre App an den Store übermitteln! Richten Sie die App vor der Übermittlung auf die richtige Zielgruppe aus. Formulieren Sie die Beschreibung Ihrer App so detailliert wie möglich, um den Funktionsumfang Ihrer App genau darzustellen. 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.

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 finden Sie eine umfassende Liste mit Richtlinien für die Gestaltung der Benutzeroberfläche.

Beispiele

• HTML-Beispiel für ein AppBar-Steuerelement
• Beispiel für Navigation und Navigationsverlauf
• Beispiel für App-Kacheln und Signale
• Begrüßungsbildschirmbeispiel
• Beispiel für App-Einstellungen
• Anwendungsressourcen und Lokalisierung – Beispiel