Freigeben über


Windows Store-App-UI 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]

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.

Startsymbol

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.

Schrittsymbol

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.

Schrittsymbol

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.

Schrittsymbol

Schnellstart: Hinzufügen von HTML-Steuerelementen und Behandeln von Ereignissen

Verwenden Sie HTML-Steuerelemente, beispielsweise Schaltflächen, Kontrollkästchen und Dropdownlisten.

Schrittsymbol

Schnellstart: Anzeigen von Text

Verwenden Sie HTML-Steuerelemente, beispielsweise Beschriftungen, div-Elemente, Absätze und Textbereiche zum Anzeigen von Text.

Schrittsymbol

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.

Schrittsymbol

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

Schrittsymbol

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.

Schrittsymbol

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.

Schrittsymbol

Schnellstart: Definieren von App-Layouts

Erstellen Sie eine dynamische Benutzeroberfläche, die für jede Größe geeignet ist.

Schrittsymbol

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.

Schrittsymbol

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

Schrittsymbol

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.

Schrittsymbol

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.

Schrittsymbol

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.

Schrittsymbol

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.

Schrittsymbol

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.

Schrittsymbol

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.

Schrittsymbol

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

Store-Anforderungen-Symbol

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.

Stoppsymbol

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.

Möchten Sie mehr erfahren?

Index der Richtlinien für die Gestaltung der Benutzeroberfläche

Durchsuchen Sie die gesamte Liste mit Richtlinien für die Benutzeroberfläche.

Benutzerinteraktion: Toucheingabe... und vieles mehr

Lesen Sie den gesamten Inhalt zum Entwurf der Interaktionsmöglichkeiten für Benutzer Ihrer App.

Erstellen Ihrer ersten Windows Store-App

Lesen Sie dieses Lernprogramm, wenn Sie noch nicht mit der Entwicklung von Windows Store-Apps vertraut sind, und Ihre erste App erstellen möchten.