Windows Store-App-UI von A bis Z (HTML)

Artikel
12/12/2015

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

Wie erstellen Sie eine tolle Benutzeroberfläche? Welches Layout eignet sich am besten für Ihre App? Wie wird die Navigation in einer App einfach und intuitiv gestaltet?

Stellen Sie diese Fragen, um die Designphase der Entwicklung Ihrer App in die Wege zu leiten. Erfahren Sie dann, wie Sie Ihr Design implementieren.

Wir unterstützen Sie mit Richtlinien, bewährten Methoden und Beispielen bei der optimalen Nutzung der UI-Funktionen von Windows 8.1. Sie können die UI Ihrer App so gestalten, dass sie intuitiv, visuell ansprechend und mit anderen Windows Store-Apps konsistent ist.

Hauptseite der StumbleUpon-App

Die folgenden Abschnitte stellen eine Gliederung von Aufgaben dar, die Sie beim Entwerfen der UI für Ihre App unterstützen. Sie basieren auf den in den Richtlinien für die Gestaltung der Benutzeroberfläche beschriebenen bewährten Methoden.

Wenn Sie noch nicht mit der Windows Store-App-Entwicklung bzw. mit dem App-Layout, der Navigation, den Steuerelementen und Befehlen vertraut sind, ist es sinnvoll, jeden Schritt durchzugehen. Andernfalls können Sie sich einfach umsehen. Wir haben zusammenhängende Aspekte der Entwicklung von UI für Apps in Gruppen zusammengefasst. Diese Richtlinien, Aufgaben und der Beispielcode beziehen sich auf die Entwicklung von Windows Store-Apps mit JavaScript und HTML. Informationen zur C#/VB/C++- und XAML-Version finden Sie unter Windows Store-App-UI von A bis Z (XAML).

Das Beispiel

Das Steuerelement- und Layoutgaleriebeispiel umfasst alle hier behandelten UI-Elemente. Auf dieses Begleitbeispiel werden wir häufig Bezug nehmen und darauf verweisen, wo bestimmte Features implementiert werden.

Das Steuerelement- und Layoutgaleriebeispiel

Bei der Beispiel-App handelt es sich um eine Galerie von Windows Store-App-Steuerelementen. Mit diesem Beispiel können Sie in den Steuerelementen und dem Code für die Implementierung der einzelnen Steuerelemente navigieren. In den folgenden Abschnitten sehen Sie außerdem, wie wir die einzelnen Schritte implementiert haben.

Schritt : Vorbereiten und erfahren, was wohin gehört

Machen Sie zunächst einen Plan, bevor Sie mit dem Entwurf und der Entwicklung Ihrer App beginnen. Überlegen Sie, was die besonderen Stärken Ihrer App sind, was Ihre Zielgruppe ist, welche Szenarien Sie implementieren möchten und welche Features Sie unterstützen werden. Weitere Informationen zur Planung Ihrer App finden Sie unter Definieren der Zielsetzung.

Beginnen Sie mit der Entscheidung, welche Navigationsstrategie für Ihre App verwendet werden soll. In diesem Lernprogramm beginnen wir mit der Hub-Vorlage. Für das Entwerfen und Entwickeln der UI Ihrer App können Sie die Vorlage herunterladen und Verschiedenes ausprobieren, während Sie den Richtlinien folgen.

Weitere Informationen finden Sie unter Navigationsmuster und Hierarchische Navigation (HTML).

Wenn Sie stattdessen sofort mit dem Code arbeiten möchten, fahren Sie direkt mit dem Steuerelement- und Layoutgaleriebeispiel fort.

Gestalten der UI

Was gehört wohin in einer Windows Store-App? Machen Sie sich mit den Richtlinien für die Gestaltung der UI vertraut.

Im Beispiel zeigen wir, wie wir die Richtlinien für den Entwurf unserer App genutzt haben.

Auf der Hauptseite haben wir folgende Elemente auf der Canvas platziert:
- Liste der Steuerelementgruppen Diese sind nach Funktion gruppiert, damit die Suchen nach bestimmten Typen von Steuerelementen schnell geht.
- Liste aller Steuerelementen Diese sind alphabetisch nach Namen geordnet, um die Suche nach einem bestimmten Steuerelement einfach zu gestalten.
Wir haben der oberen App-Leiste auf jeder Seite ein Navigationselement hinzugefügt, damit Sie schnell zur Startseite zurückwechseln können.
Jede Bereichsseite folgt dem standardmäßigen hierarchischen Navigationsmuster. Sie enthält eine Liste der Steuerelementbestandteile und Links zu den jeweiligen Detailseiten.
Alle Bereichsseiten und Detailseiten enthalten eine Zurück-Schaltfläche, mit der Sie zur vorhergehenden Seite zurückwechseln können.
Wir haben auf jeder Detailseite den wichtigen Inhalt auf dem Hauptbildschirm der App platziert:
- Beschreibung des Steuerelements
- Beispiele für das Steuerelement, wenn es auf der Canvas angezeigt werden kann
- Codeausschnitte für die Implementierung des Steuerelements

Schritt 2: Auswahl hinzuzufügender Steuerelemente

Das Hinzufügen von Steuerelemente und die Gestaltung Ihrer App gehen Hand in Hand. Sie müssen wissen, welche Steuerelemente hinzugefügt werden sollen, und Sie müssen Ihr Layout entwerfen, bevor Sie Steuerelemente wählen. Wenn Sie die Funktionsweise von Steuerelementen verstehen, können Sie bessere Layoutentscheidungen treffen.

In diesem Lernprogramm befassen wir uns zunächst mit einzelnen Steuerelementen. In Schritt 3 erfahren Sie, wie diese Steuerelemente in einem Layout angeordnet werden. Wenn Sie zuerst etwas über das Entwerfen des Layout erfahren möchten, können Sie mit dem nächsten Abschnitt fortfahren und später zu den Steuerelementen zurückkehren.

Im Beispielcode sehen Sie, wie wir die einzelnen Steuerelemente in der Galerie hinzugefügt haben.

	Steuerelemente nach Funktion Liste der Steuerelemente Machen Sie sich mit der vollständigen Liste der verfügbaren Steuerelemente und dem jeweiligen Zweck vertraut, und wählen Sie dann die für Ihre App benötigten Steuerelemente.
	Schnellstart: Hinzufügen von HTML-Steuerelementen und Behandeln von Ereignissen Verwenden Sie HTML-Steuerelemente, beispielsweise Schaltflächen, Kontrollkästchen und Dropdownlisten.
	Schnellstart: Anzeigen von Text Verwenden Sie HTML-Steuerelemente, beispielsweise Beschriftungen, div-Elemente, Absätze und Textbereiche zum Anzeigen von Text.
	Schnellstart: Texteingabe und -bearbeitung Verwenden Sie HTML-Steuerelemente, beispielsweise Textfelder, Textbereiche, Kennworteingabefeld und Rich-Edit-Felder/Rich-Text-Felder für die Eingabe und Bearbeitung von Text.
	Schnellstart: Hinzufügen von WinJS-Steuerelementen und -Stilen Verwenden Sie Steuerelemente in der Windows-Bibliothek für JavaScript, z. B. ListView-, Bewertungs- und Flyout-Steuerelemente.

Schritt 3: Erstellen des Layouts

	Gestalten einer App-Seite Erfahren Sie mehr über das Rastersystem, Header, Ränder und Abstände und wie mit diesen Funktionen ein konsistentes Benutzererlebnis gestaltet wird.
	UX-Richtlinien für Layout und Skalierung Benutzer können die App von der Mindestbreite auf den gesamten Bildschirm vergrößern und sie auf Bildschirmen verschiedener Größen mit unterschiedlichen Auflösungen und Ausrichtungen anzeigen. Sie können mit Ihrer App bei jeder Größe eine ansprechende Optik erzielen. Im Beispiel haben wir die standardmäßige Mindestbreite von 500 Pixel verwendet.
	Schnellstart: Definieren von App-Layouts Erstellen Sie eine dynamische Benutzeroberfläche, die für jede Größe geeignet ist.
	Schnellstart: Entwerfen von Apps für verschiedene Fenstergrößen Erfahren Sie, wie Sie die Mindestbreite einer App von 500 Pixel in 320 Pixel ändern und das Design so anpassen, dass die App auch bei geringer Breite gut aussieht und funktioniert. Erfahren Sie, wie Sie eine horizontal schwenkbare App entwerfen, um immer dann zu einem vertikalen Layout zu wechseln, wenn die Höhe der App ihre Breite übersteigt.
	UX-Richtlinien für Layout und Skalierung Objekte auf dem Bildschirm werden kleiner dargestellt, wenn das Anzeigegerät eine höhere Pixeldichte hat. Wenn UI-Elemente sonst zu klein wären, um sie zu berühren, und Text zu klein wäre, um ihn zu lesen, skaliert Windows die UI des Systems und der App um einen bestimmten Prozentsatz. Erfahren Sie, wie Sie sicherstellen, dass Ihre App auch im skalierten Zustand hervorragend aussieht.

Schritt 4: Platzierung von Befehlen und Verwendung von Charms

	Befehlsmuster Hier erfahren Sie, wo Befehle platziert werden können – auf dem Bildschirm, in Popups, in Dialogfeldern oder in App-Leisten – und legen fest, wo sich die Befehle in Ihrer App befinden sollen.
	Richtlinien und Prüfliste für App-Leisten Schnellstart: Hinzufügen von App-Leisten mit Befehlen Richtlinien für Navigationsleisten Schnellstart: Hinzufügen von Navigationsleisten Erfahren Sie mehr über das Gruppieren von Befehlen, eine einheitliche Platzierung, Stile und Symbole und weitere wichtige Richtlinien für Befehl- und Navigations-App-Leisten. Im Beispiel haben wir in der oberen App-Leiste eine Startseite-Schaltfläche implementiert, um die Navigation zu unterstützen.
	Richtlinien und Prüfliste für das Hinzufügen von Kontextmenüs Verwenden Sie Kontextmenüs für den direkten Zugriff auf Aktionen wir z. B. Ausschneiden und Einfügen. Achten Sie darauf, dass Kontextmenüs kurz und für die Auswahl relevant sind.
	Richtlinien und Prüfliste für Suchfunktionen Schnellstart:Hinzufügen von Suchfunktionen zu einer App Erfahren Sie, wann das Steuerelement für die In-App-Suche und wann der Vertrag für "Suche" verwendet wird.
	Richtlinien für das Teilen von Inhalten Schnellstart: Teilen von Inhalt Wenn Ihre App über Inhalte verfügt, die geteilt werden können, ist sie eine Teilungsquelle. Wenn Ihre App Inhalte von anderen Apps empfangen kann, handelt es sich um ein Teilungsziel.
	Richtlinien für App-Einstellungen Schnellstart: Hinzufügen von App-Einstellungen Setzen Sie den Charm " Einstellungen" klug ein. Verwenden Sie wenige einfache Einstellungen. Legen Sie die richtigen Einstellungen für den Einstellungsbereich fest.
	Richtlinien für die App-Hilfe Richtlinien für Anweisungen auf Benutzeroberflächen Schnellstart: Hinzufügen einer App-Hilfe Erfahren Sie, wann und wie eine App-Hilfe im Einstellungsbereich implementiert wird, und wann andere Methoden zur Bereitstellung von Hilfe wie z. B. Tipps, Demos oder neu gestaltete UI verwendet werden.

Schritt 5: Fertigstellung

Führen Sie das Zertifizierungskit für Windows-Apps aus.

Dieser Schritt wird empfohlen. Durch das Ausführen des Zertifizierungskits stellen Sie sicher, dass Ihre App die Windows Store-Anforderungen erfüllt, daher sollten sie diesen Schritt immer durchführen, wenn Sie Ihrer App eine wichtige Funktion hinzufügt haben.

Sie haben es geschafft! Nachdem Sie sich an den Richtlinien für die Gestaltung der Benutzeroberfläche orientiert und die UI entworfen haben, sollten die bewährten Methoden dafür sorgen, dass Ihre App eine großartige Benutzererfahrung bietet.

Weitere Schritte

Nachdem Sie sich jetzt mit den Grundlagen vertraut gemacht haben, können Sie sich einige der anderen Beispiele der Reihe App-Features von A bis Z ansehen.