Anpassung der 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

Sie können intuitive und ansprechende benutzerdefinierte Benutzerinteraktionen erstellen, 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.

Hinweis Wir empfehlen, nach Möglichkeit die Plattformsteuerelementbibliotheken (HTML und XAML) zu verwenden. Die Steuerelemente in diesen Bibliotheken bieten umfassende Funktionen für Windows 8.1-Benutzerinteraktionen wie Standardinteraktionen, animierte Physikeffekte, visuelles Feedback und Barrierefreiheit. Wenn Sie keine Unterstützung für angepasste Interaktionen benötigen, sollten Sie diese integrierten Steuerelemente verwenden.

Windows Store-Apps können unterschiedliche Eingabequellen wie Toucheingabe, Touchpad, Maus, Eingabe-/Zeichenstift und Tastatur verarbeiten. Zudem können Sie Eingaben verschiedener Eingabegerätemodi wie Bildschirmtastatur, Mausrad oder Radiergummi des Zeichenstifts verarbeiten. Während sich andere Plattformen in erster Linie auf die Toucheingabe konzentrieren, können Sie hier ganz flexibel die Art von Windows Store-App erstellen, die Sie erstellen möchten: 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.

Weitere Informationen zu Plattformsteuerelementen und ihrem Interaktionsverhalten finden Sie unter 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 Anpassung der Benutzerinteraktion (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 angepasste Benutzerinteraktion. Dieses Beispiel zeigt, wie Sie verschiedene Interaktionsfeatures und -konzepte in Ihrer Windows Store-App verwenden und anpassen können. Das Beispiel umfasst Prinzipien, Empfehlungen und Implementierungsdetails für benutzerdefinierte Steuerelemente, UI-Barrierefreiheit und angepasste Interaktionen. Hier sehen Sie die praktische Umsetzung unserer Richtlinien.

Kurze Beispielbeschreibung

In diesem Beispiel erstellen wir einen Farbmischer. Dieser hat die Form eines quadratischen Objekts, das direkte Eingaben über einen Touchscreen, ein Touchpad, eine Maus, einen Zeichen-/Eingabestift oder über eine Tastatur akzeptiert. Anhand dieser Daten werden eine RGB-Farbe und ein Drehwinkel ermittelt, die dann zu einem entsprechenden Rot-, Grün- oder Blauwert umgerechnet werden.

Das Beispiel veranschaulicht folgende Features:

Benutzerdefiniertes Steuerelement
Unterstützung einfacher Anpassungen (HTML und XAML) des Benutzerinteraktionsverhaltens
Ermittlung, Erkennung und Verarbeitung angepasster Gesten

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

Das Beispiel enthält drei Seiten (von links nach rechts): eine Startseite, eine zweite Seite mit einem benutzerdefinierten Steuerelement mit Unterstützung für DOM-basierte Drehungen und eine dritte Seite mit einem benutzerdefinierten Steuerelement, das zusätzliche Funktionen über die Windows.UI.Input-GestureRecognizer-APIs implementiert.

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.

Richten Sie die UI Ihrer Windows Store-App in erster Linie auf Touchinteraktionen aus. 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 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 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. Verwenden Sie Mausinteraktionen für Apps, in denen präzises Zeigen und Klicken gefragt ist.
	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

Halten Sie die Richtlinien für die Gestaltung der Benutzeroberfläche für Benutzerinteraktionen ein, aber seien Sie dabei kreativ. Entscheiden Sie, welche Eingabegeräte Ihre App unterstützt und wie sie reagiert. Erstellen Sie eine geräteübergreifende Benutzerumgebung, bieten Sie Unterstützung für möglichst viele Funktionen und Einstellungen, und sprechen Sie eine größtmögliche Zielgruppe im Windows Store an. Dadurch wird Ihre App so benutzerfreundlich, portabel und barrierefrei wie möglich.

Die folgenden Richtlinien für Benutzerinteraktionen können Ihnen dabei helfen, eine ansprechende, immersive und für alle Eingabemodi einheitliche Interaktionsumgebung bereitzustellen.

Richtlinien für häufige Benutzerinteraktionen

Erstellen Sie Benutzerinteraktionen mit einheitlicher Funktion für alle Geräte.
Richtlinien für Querziehen

Unterstützen Sie Auswählen mit der Wischgeste und Ziehinteraktionen (Verschieben) mit der Ziehgeste.
Richtlinien für optischen Zoom und Größenanpassung

Mithilfe des optischen Zooms können Benutzer die Ansicht des Inhalts in einem Inhaltsbereich vergrößern (wird auf den Inhaltsbereich angewendet). Bei der Größenänderung können Benutzer hingegen die relative Größe von Objekten ändern, ohne die Ansicht im Inhaltsbereich zu ändern (wird auf die Objekte im Inhaltsbereich angewendet).
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.
Richtlinien für Drehung

Drehen Sie Objekte mithilfe einer Drehbewegung (im oder gegen den Uhrzeigersinn) per Toucheingabe oder mithilfe anderer UI-Steuerelemente für Maus, Eingabe-/Zeichenstift oder Tastatur.
Richtlinien für semantischen Zoom

Stellen Sie große Mengen verwandter Daten oder Inhalte in einer einzelnen Ansicht (beispielsweise ein Fotoalbum, eine App-Liste oder ein Adressbuch) dar, und navigieren Sie in dieser Ansicht.
Richtlinien für die Text- und Bildauswahl

Stellen Sie UI und Funktionen für die Inhaltsauswahl bereit.
Richtlinien für Ziele

Verbessern Sie die Touchgenauigkeit und -sicherheit, und erhöhen Sie so die Benutzerzufriedenheit für Ihre App.
Richtlinien für visuelles Feedback

Unterstützen Sie die Benutzer dabei, Ihre App, das System und das Eingabegerät zu verstehen, deren Verwendung zu erlernen und sich auf deren Verhalten einzustellen. Hierzu können Sie die erfolgreiche Ausführung einer Interaktion deutlich machen, das Kontrollempfinden des Benutzers steigern, den Benutzer zur Interaktion animieren, über den Systemstatus informieren und Fehler verringern. Visuelles Feedback (auch Berührungsvisualisierungen oder Feedbackbenutzeroberfläche genannt) gibt Aufschluss darüber, ob eine Interaktionen erkannt, interpretiert und wie gewünscht behandelt wurde.

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: Zeiger Passen Sie Benutzerinteraktionen über Zeigerereignisse an.
	Schnellstart: DOM-Gesten und -Manipulationen Passen Sie Benutzerinteraktionen über Dokumentobjektmodell-Ereignisse (DOM-Ereignisse) an.
	Schnellstart: Statische Gesten Schnellstart: Manipulationsgesten Passen Sie Benutzerinteraktionen über GestureRecognizer an.
	Animieren der UI Integrieren Sie das Erscheinungsbild von Windows 8 in Ihre Windows Store-App. Verwenden Sie hierzu die Animationssuite aus der Plattform-Animationsbibliothek (für Zeigerereignisse oder Wischgesten), oder passen Sie Animationen mithilfe von Übergängen, Animationen und Transformationen für CSS3 (Cascading Style Sheets, Level 3) an.
	Implementieren von Barrierefreiheit für den Tastaturzugriff. Viele Benutzer mit einer Sehschwäche oder eingeschränkter Beweglichkeit 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.
	Erstellen barrierefreier Toucheingabeereignisse. Machen Sie die Toucheingabe barrierefrei, indem Sie Zeigerereignisse mit Mausklickereignissen verknüpfen.
	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.

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.