Windows Dev Center

Language: HTML | XAML

Flache Navigation von A bis Z (HTML)

[Einige Informationen beziehen sich auf die Vorabversion, die vor der kommerziellen Freigabe grundlegend geändert werden kann. Microsoft übernimmt keine Garantie, weder ausdrücklich noch stillschweigend, für die hier bereitgestellten Informationen.]

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 Folgendes:

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

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.

Implementierung der flachen Navigation

Schrittsymbol

Ö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:

Schrittsymbol

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

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.

Schrittsymbol

Hinzufügen von Datei- oder Bildressourcen

Orientieren Sie sich beim Benennen und Organisieren Ihrer Dateiressourcen in Ordnern an diesen Anweisungen.

Schrittsymbol

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.

Schrittsymbol

Hinzufügen von App-Leisten

Blenden Sie Navigationsfunktionen, Befehle und Tools bei Bedarf ein. 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.

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 aus den Screenshots hervorgeht, dass Sie Ihre App lokalisiert haben. 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 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 Ihre 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 finden Sie eine umfassende Liste mit Richtlinien für die Gestaltung der Benutzeroberfläche.

Beispiele

 

 

Anzeigen:
© 2015 Microsoft