Reaktion auf Touchpadinteraktionen (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]

Gestalten und erstellen Sie Windows Store-Apps, mit denen Benutzer über ein Touchpad interagieren können.

Tipp Dieses Thema enthält spezifische Informationen zum Entwickeln von Windows Store-Apps mit JavaScript.

Informationen zu Windows Store-Apps mit C++, C# oder Visual Basic finden Sie unter Reaktion auf Touchpadeingaben (XAML).

Voraussetzungen: 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.

Erstellen Ihrer ersten Windows Store-App mit JavaScript

Roadmap für Windows Store-Apps mit JavaScript

Informieren Sie sich über Ereignisse unter Schnellstart: Hinzufügen von HTML-Steuerelementen und Behandeln von Ereignissen

App-Features von A bis Z: In unserer Reihe App-Features von A bis Z können Sie sich genauer über diese Funktion informieren.

Benutzerinteraktion von A bis Z (HTML)

Anpassung der Benutzerinteraktion von A bis Z (HTML)

Richtlinien für die Benutzeroberfläche:

Die Plattform-Steuerelementbibliotheken (HTML und XAML) bieten umfassende Funktionalität für Windows-Benutzerinteraktionen, u. a. für Standardinteraktionen, animierte Physikeffekte und visuelles Feedback. Wenn Sie keine Unterstützung für angepasste Interaktionen benötigen, sollten Sie diese integrierten Steuerelemente verwenden.

Falls die Funktionalität der Plattformsteuerelemente nicht ausreicht, können Ihnen die folgenden Richtlinien für Benutzerinteraktionen dabei helfen, eine ansprechende, immersive und für alle Eingabemodi einheitliche Interaktionsumgebung bereitzustellen. Diese Richtlinien betreffen in erster Linie Fingereingaben, sie sind jedoch auch für Touchpad-, Maus-, Tastatur- und Stifteingaben relevant.

Beispiele: Sehen Sie sich unter Beispiele für Windows Store-Apps diese Funktionalität in Aktion an.

Anpassung der Benutzerinteraktion von A bis Z

Eingabe: Beispiel für Gerätefunktionen

Eingabe: Beispiel für die Behandlung von DOM-Zeigerereignissen

Beispiel für HTML-Bildlauf, -Verschiebung und -Zoomen

Eingabe: Beispiel Manipulationen und Gesten (JavaScript)

Eingabe: Beispiel für instanziierbare Gesten

Übersicht

Ein Touchpad vereint die indirekte Multitoucheingabe mit der Präzisionseingabe eines Zeigergeräts, z. B einer Maus. Dadurch ist das Touchpad sowohl für die berührungsoptimierte Benutzeroberfläche als auch die kleineren Ziele der Produktivitäts-Apps und der Desktopumgebung geeignet. Optimieren Sie das Design Ihrer Windows Store-Apps für die Toucheingabe, und freuen Sie sich über die standardmäßige Unterstützung von Touchpads.

Aufgrund der Konvergenz der verschiedenen von Touchpads unterstützten Interaktionsmöglichkeiten wird empfohlen, zusätzlich zur integrierten Unterstützung der Toucheingabe der Mauseingabe ähnelnde UI-Befehle bereitzustellen. Verwenden Sie beispielsweise Zurück- und Weiter-Schaltflächen, mit denen Benutzer sowohl Inhaltsseiten durchblättern als auch Inhalte durch Schwenken fokussieren können.

Die in diesem Thema beschriebenen Gesten und Richtlinien können dabei helfen, die Unterstützung der Touchpad-Eingabe nahtlos und mit minimalem Programmieraufwand in Ihre App zu integrieren.

Richtlinien für die Benutzeroberfläche zur Unterstützung von Touchpad-Interaktionen

Windows unterstützt eine Reihe bekannter Gesten, die für die Eingabe per Touchpad optimiert sind. Hier finden Sie einige Richtlinien für die Unterstützung von Touchpad-Interaktionen.

Die Windows 8.1-Sprache für Eingaben per Touchpad

Ein kompakter Satz von Touchpad-Interaktionen wird durchgängig im ganzen System verwendet. Indem Sie Ihre App für die Touch- und Mauseingabe optimieren, sorgen Sie dafür, dass sich Benutzer sofort in Ihrer App zurechtfinden. So erleichtern Sie Benutzern den Einstieg und die Verwendung Ihrer App.

Benennung	Beschreibung
Lernen durch Zeigen	Zeigen Sie auf ein Element, um weitere Informationen oder visuelle Hinweise (wie etwa QuickInfos) aufzurufen, ohne eine Aktion auszuführen. Weitere Informationen zu QuickInfos finden Sie unter Hinzufügen von QuickInfos.
Tippen mit einem Finger: Aufrufen der primären Aktion	Durch Tippen mit einem Finger auf ein Element wird dessen primäre Aktion aufgerufen (z. B. das Starten einer App oder das Ausführen eines Befehls).
Tippen mit zwei Fingern: Ausführen eines Rechtsklicks	Durch gleichzeitiges Tippen mit zwei Fingern wird die App-Leiste mit Standardbefehlen angezeigt. Durch gleichzeitiges Tippen mit zwei Fingern auf ein Element wird das Element ausgewählt und die App-Leiste mit Kontextbefehlen angezeigt. Hinweis Wenn die in der Auswahl oder der App-Leiste verfügbaren Befehle nicht das gewünschte Benutzeroberflächenverhalten ermöglichen, wird durch Tippen mit zwei Finger ein Kontextmenü angezeigt. Wir empfehlen jedoch ausdrücklich, die App-Leiste für alle Befehlsverhalten zu verwenden.
Ziehen mit zwei Fingern: Verschieben	Das Ziehen wird in erster Linie für Verschiebungen verwendet, kann jedoch auch zum Schieben, Zeichnen oder Schreiben genutzt werden.
Zusammendrücken/Aufziehen: Zoom	Die Zusammendrück- und Aufziehbewegungen werden üblicherweise für Größenänderungen und zum Ausführen des semantischen Zooms verwendet.
Drücken und Ziehen mit einem Finger: Neuanordnen	Ziehen eines Elements.
Drücken und Ziehen mit einem Finger: Textauswahl	Durch Drücken und Ziehen in auswählbarem Text wird Text ausgewählt. Durch Doppeltippen wird ein einzelnes Wort ausgewählt.
Zonen für Links- und Rechtsklick	Mit diesen Zonen emulieren Sie die Links- und Rechtsklickfunktionalität einer Maus.
Ränder für Systembefehle (systemabhängig)	Durch eine Streifbewegung vom rechten Bildschirmrand (bzw. vom linken Bildschirmrand in Layouts von rechts nach links) werden die Charms mit den Systembefehlen eingeblendet. Durch eine Streifbewegung vom linken Bildschirmrand (bzw. vom rechten Bildschirmrand in Layouts von rechts nach links) wird eine Liste der ausgeführten Apps eingeblendet.

Hardware

Überprüfen Sie die Funktionen des Mausgeräts (MouseCapabilities), um festzustellen, auf welche Elemente der Benutzeroberfläche Ihrer App die Touchpad-Hardware direkt zugreifen kann. Wir empfehlen die Bereitstellung einer Benutzeroberfläche, die sowohl Finger- als auch Mauseingabe ermöglicht.

Weitere Informationen zum Überprüfen von Gerätefunktionen finden Sie unter Schnellstart: Erkennen von Zeigergeräten.

Visuelles Feedback

Blenden Sie die für Touchpad-Interaktionen spezifische Benutzeroberfläche ein, sobald ein Touchpad-Cursor erkannt wird (durch Bewegungs- oder Zeigeereignisse), um die Funktionalität des Elements verfügbar zu machen. Wenn der Touchpad-Cursor für eine bestimmte Zeit nicht bewegt wird oder der Benutzer eine Toucheingabeinteraktion auslöst, blenden Sie die für Touchpad-Interaktionen spezifische Benutzeroberfläche schrittweise aus. Somit bleibt die Benutzeroberfläche sauber und aufgeräumt.
Verwenden Sie nicht den Cursor für Zeigefeedback, das Feedback des Elements reicht aus (siehe Cursor unten).
Lassen Sie kein visuelles Feedback anzeigen, wenn ein Element keine Interaktionen unterstützt (z. B. statischer Text).
Verwenden Sie keine Fokusrechtecke für Interaktionen per Touchpad. Diese sind ausschließlich für Tastaturinteraktionen vorgesehen.
Zeigen Sie für alle Elemente, die das gleiche Eingabeziel darstellen, das gleiche visuelle Feedback an.

Allgemeine Informationen zum visuellen Feedback finden Sie unter Richtlinien für visuelles Feedback.

Cursor

In Windows Store-Apps sind einige Standardcursor verfügbar, die als Touchpad-Zeiger verwendet werden können. Diese Cursor werden verwendet, um die primäre Aktion eines Elements anzugeben.

Jedem Standardcursor ist ein entsprechendes Standardbild zugewiesen. Benutzer einer App können das Standardbild, das einem Standardcursor zugewiesen ist, jederzeit ändern. In Windows Store-Apps werden Cursorbilder durch die PointerCursor-Funktion angegeben.

Wenn Sie den Touchpad-Cursor anpassen müssen:

Verwenden Sie immer den Pfeilcursor () für klickbare Elemente. Verwenden Sie den Zeigefingercursor () nicht für Links oder andere interaktive Elemente. Verwenden Sie stattdessen Zeigeeffekte (wie bereits beschrieben).
Verwenden Sie den Textcursor () für auswählbaren Text.
Verwenden Sie den Bewegungscursor (), wenn die primäre Aktion eine Bewegung ist (wie etwa beim Ziehen oder Zuschneiden). Verwenden Sie den Bewegungscursor nicht, wenn die primäre Aktion eine Navigation ist (wie etwa bei Start-Kacheln).
Verwenden Sie die Cursor für horizontale, vertikale und diagonale Größenänderung (, , , ), wenn die Größe eines Objekts geändert werden kann.
Verwenden Sie das Hand-Werkzeug (, ) beim Schwenken von Inhalt innerhalb einer Canvas (wie etwa einer Karte).