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

Verwenden Sie für Ihre Windows Store-App ein hierarchisches Navigationsmuster, wenn sich deren Inhalte in unterschiedliche, aber dennoch zusammenhängende Abschnitte oder Kategorien mit unterschiedlichem Detailgrad unterteilen lassen. Hierbei handelt es sich um ein verbreitetes und beliebtes Muster, das sich gut für eine relationale Informationsarchitektur eignet, die in einer bevorzugten Sequenz oder Reihenfolge durchlaufen wird.

Die Entscheidung für ein Navigationsmuster hängt von den Szenarien ab, die Ihre App unterstützt. Wenn Ihre App verschiedene Umgebungen und Inhalte mit Organisation und Struktur bereitstellt, empfiehlt sich wahrscheinlich die Verwendung eines hierarchischen Musters. Falls Ihre App dagegen lediglich eine geringe Informationsdichte oder keine umfangreiche Organisationshierarchie besitzt, lesen Sie unter Flache Navigation von A bis Z weiter. Eine flache Navigation ermöglicht dem Benutzer die schnelle Navigation zwischen einer kleinen Gruppe verwandter Seiten.

In diesem Artikel beschäftigen wir uns umfassend mit der Erstellung einer Windows Store-App mit JavaScript, die das hierarchische 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 hierarchische Struktur sowie ein Drahtmodell des hierarchischen Navigationsmusters in einer Windows Store-App.

 

Das Hub-Steuerelement der Windows-Bibliothek für JavaScript ist speziell für diese Art von App konzipiert. Dieses Steuerelement verwendet Hub-, Bereichs- und Element-/Detailseiten (von allgemein zu spezifisch), mit deren Hilfe Sie unterschiedlichste Informationen in einer intuitiven und einheitlichen Struktur zusammenfassen können.

Seite	Beschreibung
Hub	Der Hub ist die Startseite Ihrer App. Hier können Sie eine Vorschau des Gesamtumfangs Ihrer App anzeigen. Die Seite zeigt mindestens einen Inhaltsabschnitt, der wiederum beispielhaft einige wenige Elemente zeigt, die dem jeweiligen Abschnitt zugeordnet sind. Durch Anwenden verschiedener Kriterien (je nach App oder Benutzereinstellungen) kann gesteuert werden, welche Abschnitte und Elemente angezeigt werden. Üblicherweise zeigt jedes Element eine Vorschau, eine Zusammenfassung oder einen Auszug des Inhalts. Von dieser Seite aus kann der Benutzer zu einer Abschnitts- oder Elementdetailseite navigieren. Es empfiehlt sich, den Hub optisch möglichst abwechslungsreich zu gestalten, um den Benutzer anzusprechen und sein Interesse für die verschiedenen Bereiche Ihrer App zu wecken.
Abschnitt	Abschnittsseiten bilden die zweite Ebene einer App. Hier wird eine Vorschau, eine Zusammenfassung oder ein Auszug für Elemente angezeigt, die dem Abschnitt zugeordnet sind. Die Elemente auf dieser Seite können in einem Format dargestellt werden, das am besten zum Szenario und Inhalt des Abschnitts passt. Auf dieser Seite werden üblicherweise mehr Elemente angezeigt als auf der Hubseite. Jedes Element ist mit einer Detailseite verknüpft.
Element-/Detailseite	Detailseiten bilden die dritte Ebene einer App. Hier werden die meisten (wenn nicht gar alle) Inhalte oder Funktionen für das Element angezeigt, das auf der Hub- oder Abschnittsseite ausgewählt wurde. Bestimmte Apps (wie etwa Feedreader) enthalten unter Umständen Links zu Quellartikeln und -websites, falls der Inhalt für eine App-interne Darstellung zu umfangreich sein sollte. Detailseiten können umfangreiche Infos, ein einzelnes Objekt (beispielsweise ein Bild oder Video) oder andere App-Funktionen enthalten.

 

Die Navigationsleiste kommt zwar üblicherweise in Apps mit flacher Navigation zum Einsatz, kann aber auch beim Durchlaufen des Inhalts einer hierarchischen App hilfreich sein. 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).

Gestalten Sie Ihre App möglichst so, dass der Benutzer aufgrund der Inhaltsstruktur intuitiv durch die App geführt wird und die Navigationsleiste gar nicht benötigt. Sollte dies nicht möglich sein, verwenden Sie die Navigationsleiste anstelle der Abschnittsüberschriften auf der Hubseite sowie zur Bereitstellung globaler Navigationssteuerelemente. Sie sollte auf jeder Seite und Ebene der App angezeigt werden.

Hinweis  Stellen Sie sicher, dass der Benutzer dem Navigationspfad zur aktuellen Seite auch in umgekehrter Richtung folgen kann. WinJS stellt hierzu BackButton (in Kombination mit PageControl) zur Verfügung.

 

Durch die Verwendung des korrekten Navigationsmusters und eines geeigneten UI-Layouts 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 hierarchische Navigation

Das grundlegende Beispiel für die hierarchische 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 eine Hub-Seite mit verschiedenen Abschnitten, eine datengesteuerte Abschnittsseite (Abschnitt 3) und Elementdetailseiten für diesen Abschnitt. Erweitern Sie die App je nach Bedarf um weitere Seiten. 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.

Implementieren der Navigation

Öffnen Sie das Beispiel für die hierarchische Navigation, oder beginnen Sie mit der Projektvorlage für eine Hub-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.

Verwenden 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 Anwendungsdaten

	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