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

Von Windows Store-Apps unterstützte Eingabegeräte

Nutzen Sie das integrierte Interaktionsverhalten der Plattformsteuerelemente für Windows Store-Apps, um intuitive und ansprechende Benutzerumgebungen zu schaffen, die zugleich effizient und für alle Eingabegeräte einheitlich sind. Orientieren Sie sich beim Definieren dieser Benutzerumgebungen für Ihre Windows Store-App an den hier beschriebenen Richtlinien, bewährten Methoden und Beispielen.

Die Plattformsteuerelemente eignen sich für unterschiedliche Eingabequellen wie Toucheingabe, Touchpad, Maus, Eingabe-/Zeichenstift und Tastatur. Zudem können Sie Eingaben verschiedener Eingabegerätemodi wie Bildschirmtastatur, Mausrad oder Radiergummi des Zeichenstifts verarbeiten.

Während sich andere Betriebssysteme in erster Linie auf die Toucheingabe konzentrieren, können Sie mit Windows die Art von App erstellen, die Sie erstellen möchten, ohne sich Gedanken zum Eingabegerät zu machen: Verbraucher-Apps, Produktivitäts-Apps, innovative Hybrid-Apps für PC, Laptop, Tablet und so ziemlich jeden verfügbaren (und noch nicht verfügbaren) Formfaktor.

Mithilfe der Plattformsteuerelemente können Sie die größtmögliche Vielfalt an Funktionen und Vorlieben unterstützen, Ihre App so benutzerfreundlich, portabel und barrierefrei wie möglich gestalten und die größtmögliche Zielgruppe im Windows Store ansprechen.

Weitere Informationen zu benutzerdefiniertem Interaktionsverhalten finden Sie unter Anpassung der Benutzerinteraktion von A bis Z (HTML).

Voraussetzungen

Dieser Artikel enthält spezifische Richtlinien, Aufgaben und spezifischen Beispielcode für die Entwicklung von Windows Store-Apps mit JavaScript. Die Version für Windows Store-Apps mit C++, C# oder Visual Basic finden Sie unter Benutzerinteraktion von A bis Z (XAML).

Wenn Sie noch keine Erfahrung mit der Entwicklung von Windows Store-Apps mit JavaScript haben, sollten Sie sich in den folgenden Themen zunächst mit den hier besprochenen Technologien vertraut machen.

Entwickeln von Windows Store-Apps mit JavaScript

Machen Sie sich mit sämtlichen Aspekten von Windows Store-Apps mit JavaScript vertraut – von der Startseite bis hin zu UI-Layout und Steuerelementen.
Erstellen Ihrer ersten Windows Store-App mit JavaScript

Erstellen Sie eine einfache Windows Store-App unter Verwendung von JavaScript mit HTML5 und Cascading Stylesheets (CSS).

Beispiel für die Benutzerinteraktion

Neben den Beispielen und Codeausschnitten in den unten angegebenen Themen verwenden wir auch das Beispiel für die Benutzerinteraktion. Dieses Beispiel zeigt, wie Sie die verschiedenen Interaktionsfeatures und -konzepte in Ihrer Windows Store-App verwenden und anpassen können. Das Beispiel umfasst Prinzipien, Empfehlungen und Implementierungsdetails für Verschiebung und Bildlauf sowie für Formularlayouts, Bildschirmtastaturverhalten, UI-Barrierefreiheit und angepasste Interaktionen. Hier sehen Sie die praktische Umsetzung unserer Richtlinien.

Kurze Beispielbeschreibung

In diesem Beispiel erstellen wir einen Farbmixer. Dieser hat die Form eines quadratischen Objekts, das indirekt Eingaben über das Formular akzeptiert und anhand dieser Daten eine RGB-Farbe und einen Drehwinkel erhält, die dann zu einem entsprechenden Rot-, Grün- oder Blauwert umgerechnet werden.

Das Beispiel veranschaulicht folgende Features:

Formulardurchlauf
Eingebettetes Verschiebungs-/Bildlaufverhalten
Verhalten der Bildschirmtastatur
Plattformsteuerelemente und integrierte Unterstützung von Benutzerinteraktionen

Hier sehen Sie ein Drahtmodell, das einen Eindruck von der Funktionsweise dieses Beispiels sowie von den implementierten Benutzerinteraktionsfunktionen vermittelt.

Das Beispiel enthält zwei Seiten (von oben nach unten): eine Startseite und eine zweite Seite, auf der sich ein Formular mit verschiedenen Plattformsteuerelementen und dem Farbmixer befindet.

Im Anschluss folgt ein grober Aufgabenüberblick für die Erstellung einer App unter Berücksichtigung der bewährten Methoden für die Benutzerinteraktion in Windows Store-Apps. Jede Aufgabe ist mit entsprechenden Informationen im Windows Dev Center für Windows Store-Apps verlinkt.

Sehen Sie sich die einzelnen Schritte an, wenn Sie noch keine Erfahrung mit der Entwicklung von Windows Store-Apps haben oder nicht mit Benutzerinteraktion, Benutzerfreundlichkeit und Barrierefreiheit vertraut sind. Zusammengehörige Aspekte der Benutzerinteraktionsentwicklung wurden in Gruppen zusammengefasst.

Planen Ihrer App

Planen Sie Ihre App, bevor Sie mit der Gestaltung und Entwicklung beginnen. Machen Sie sich Gedanken zu Ihrer Zielgruppe sowie zu den Features und Aktivitäten, die Ihre App unterstützen soll.

Wir empfehlen, die UI Ihrer Windows 8.1-Apps in erster Linie auf Touchinteraktionen auszurichten. Im Gegensatz zu anderen (üblicherweise pixelgenauen) Eingabetypen ist die Toucheingabe von Natur aus ungenau und erfordert einen Eingabebereich. Die Kombination aus für die Toucheingabe optimierten Steuerelementen und einigen Plattforminteraktions-APIs für die Verarbeitung zeigerbasierter Ereignisse bietet geräteübergreifend äquivalente Funktionen und benötigt nur sehr wenig zusätzlichen Code.

	Wählen Sie das Navigationsmuster, das am besten für Ihre App und deren Inhalte geeignet ist. Weitere Informationen finden Sie unter Navigationsmuster. Im Interaktionsbeispiel zu diesem Lernprogramm beginnen wir mit der Vorlage für eine einfache flache Navigation. Laden Sie die Vorlage herunter, und experimentieren Sie mit ihr, indem Sie die hier angegebenen Schritte ausführen, oder stürzen Sie sich gleich in die Entwicklung, und verwenden Sie die Vorlage als Ausgangspunkt für die Gestaltung und Entwicklung Ihrer eigenen App.
	Windows Store-App-UI von A bis Z (HTML). Entwerfen und gestalten Sie die UI-Elemente und Inhalte wie App-Fenster, Flyouts, Dialogfelder und App-Leisten. Wir verwenden Richtlinien, bewährte Methoden und Beispiele, um Sie bei der bestmöglichen Nutzung der UI-Funktionen von Windows 8.1 sowie bei der Erstellung einer intuitiven UI zu unterstützen, die mit anderen Windows Store-Apps in Einklang steht.
	Reaktion auf Benutzerinteraktionen. Hier erfahren Sie mehr über die Benutzerinteraktionsplattform, Eingabequellen (Toucheingabe, Touchpad, Maus, Zeichen-/Eingabestift und Tastatur), Modi (Bildschirmtastatur, Mausrad, Radiergummi des Zeichenstifts usw.) und die von Windows Store-Apps und Windows 8 unterstützten Interaktionen.
	Benutzerinteraktion mit Eingabegeräten. Vergleichen Sie allgemeine Interaktionen und die zugehörigen Gesten für Toucheingabe, Touchpad, Maus und Tastatur.

Eingabegeräte

Die Plattform ist zwar für die Toucheingabe optimiert, unterstützt aber auch uneingeschränkt die anderen hier aufgeführten Eingabegeräte.

	Reaktion auf Mausinteraktionen. Mausinteraktionen eignen sich am besten für Anwendungen, die präzises Zeigen und Klicken erfordern.
	Reaktion auf Tastaturinteraktionen. Die Tastatur ist unentbehrlich für Personen mit bestimmten körperlichen Beeinträchtigungen oder für Benutzer, die die Tastatur als effizienteste Methode ansehen, um mit einer App zu interagieren.
	Reaktion auf Zeichen- und Eingabestiftinteraktionen. Ein Zeichen- oder Eingabestift kann sowohl als Zeigegerät als auch als Zeichengerät verwendet werden. Er wird üblicherweise in Verbindung mit Freihandfunktionen verwendet.
	Reaktion auf Touchpadinteraktionen. Ein Touchpad vereint die Multitoucheingabe mit der Präzisionseingabe eines Zeigergeräts (beispielsweise eine Maus). Dadurch ist das Touchpad sowohl für die touchoptimierte UI von Windows 8.1 als auch für die kleineren Ziele von Produktivitäts-Apps und Desktopumgebung geeignet.

Entwerfen der Interaktionen

In diesem Abschnitt gehen wir auf einige Details für die UI und die Funktionen aus dem Beispiel für die Benutzerinteraktion ein.

Einige dieser Angaben betreffen Ihre App unter Umständen nicht. Suchen Sie sich die Angaben heraus, die für Sie relevant sind.

	Richtlinien für Formularlayouts. Entwerfen Sie Formulare mit komfortabler Interaktion und möglichst wenig Bildlauf. Berücksichtigen Sie, wie der Benutzer das Formular ausfüllt, wo unter Umständen ein Bildlauf erforderlich ist und wie die Darstellung von Bildschirmtastatur und Inlinefehlerbenachrichtigungen gehandhabt werden soll.
	Richtlinien für die Texteingabe Wählen Sie das passende Steuerelement, und fragen Sie sich, ob besser ein einzeiliges oder ein mehrzeiliges Steuerelement verwendet werden sollte.
	Richtlinien für Bildschirmtastatur und Handschriftbereich. Unterstützen Sie die Texteingabe für Formfaktoren, die nicht über eine Hardwaretastatur oder andere Tastaturperipheriegeräte verfügen. Die Bildschirmtastatur wird aufgerufen, wenn der Benutzer auf ein bearbeitbares Eingabefeld tippt, und geschlossen, wenn das Eingabefeld nicht mehr den Fokus hat.
	Richtlinien für Verschiebung Überlegen Sie sich, wie Verschiebung und Bildlauf den Benutzern die Navigation in einer einzelnen Ansicht (wie etwa die Ordnerstruktur eines Computers, eine Dokumentbibliothek oder ein Fotoalbum) erleichtern. Erfahren Sie außerdem, wie Benutzer Inhalte anzeigen können, die entweder horizontal oder vertikal nicht in den Anzeigebereich passen.
	Testen der Barrierefreiheit Ihrer App. Verwenden Sie die Testtools für Barrierefreiheit aus dem Windows Software Development Kit (SDK) für Windows 8 (Inspect und AccChecker), um die Barrierefreiheit Ihrer App zu überprüfen. Wenn Sie Ihre App im Windows Store als barrierefrei deklarieren möchten, müssen Sie alle Fehler der Priorität 1 beheben, die von AccChecker mit aktivierten Webprüfungen für ARIA (Accessible Rich Internet Applications) gemeldet werden. Nicht vergessen: Die Sprachausgabe unterstützt eine Reihe von benutzerdefinierten (in diesem Thema beschriebenen) Touchgesten für die Navigation und das Lesen der Inhalte Ihrer App.

Behandeln von Benutzerinteraktionen

Hier beschäftigen wir uns mit den verfügbaren Optionen für die Verarbeitung von Benutzerinteraktionen in Ihrer App und der Reaktion darauf. Außerdem gehen wir auf einige Details der UI und Funktionen aus dem Beispiel für die Benutzerinteraktion ein.

	Schnellstart: Hinzufügen von HTML-Steuerelementen und Behandeln von Ereignissen Die meisten Apps benötigt Steuerelemente wie etwa Schaltflächen, Kontrollkästchen und Dropdownlisten. Dieses Beispiel enthält ein Formular mit verschiedenen Steuerelementen zum Festlegen von Eigenschaften für den statischen Farbmixer.
	Anzeigen und Bearbeiten von Text Fügen Sie Ihrer Windows Store-App Steuerelemente für die Texteingabe hinzu.
	Die Bildschirmtastatur Hier finden Sie Informationen zum Ein- und Ausblenden der Bildschirmtastatur.
	Implementieren von Barrierefreiheit für den Tastaturzugriff. Viele Benutzer, die blind oder in ihrer Beweglichkeit eingeschränkt sind, sind bei der Navigation in Ihrer App sowie beim Zugriff auf deren Funktionen auf eine Tastatur angewiesen. Wenn Ihre App über keine gute Tastaturbedienung verfügt, haben diese Benutzer Schwierigkeiten bei der Verwendung Ihrer App oder können Ihre App überhaupt nicht nutzen.

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.

Das war's! Ihre Implementierung sollte in etwa so aussehen wie das Beispiel für die Benutzerinteraktion.

Lehnen Sie sich zurück, und seien Sie stolz auf Ihren Erfolg.

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.