Gesten, Manipulationen und Interaktionen (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]

Mit Touchinteraktionen kann Ihre App physische Gesten zum Emulieren der direkten Manipulation von UI-Elementen weitergeben und verwenden.

Touchinteraktionen lassen die Interaktion der Benutzer mit den Elementen auf dem Bildschirm natürlich und realistisch wirken. Die Interaktion mit einem Objekt über das zugehörige Eigenschaftenfenster oder ein anderes Dialogfeld gilt dagegen als indirekte Manipulation. Windows unterstützt Touchinteraktionen für verschiedene Eingabemethoden und Geräte, u. a. für Toucheingabe, Maus und Zeichenstift.

Die APIs für die Windows-Runtime-Plattform unterstützen Benutzerinteraktionen über die folgenden drei Arten von Interaktionsereignissen: Zeiger, Geste und Manipulation.

  • Zeigerereignisse werden verwendet, um allgemeine Kontaktinformationen wie Position und Gerätetyp sowie erweiterte Informationen wie Druck und Kontaktgeometrie zu erfassen und um komplexere Interaktionen zu unterstützen.
  • Gestikereignisse werden verwendet, um statische Einfingereingabe-Interaktionen wie Tippen und Gedrückthalten (Doppeltippen und Rechtstippen sind von diesen Basisgesten abgeleitet) zu behandeln.
  • Manipulationsereignisse werden für dynamische Interaktionen durch Mehrfingereingabe wie Zusammendrücken und Aufziehen sowie für Interaktionen verwendet, die Trägheits- und Geschwindigkeitsdaten nutzen wie etwa Schwenken/Bildlauf, Zoomen und Drehen. Hinweis  Die Informationen der Manipulationsereignisse ermöglichen keine Identifikation der Interaktion. Diese Informationen geben Daten wie Position, Übersetzungsdelta und Geschwindigkeit an. Diese Daten werden dann verwendet, um die Manipulation zu bestimmen und die Interaktion auszuführen.  

Weitere Informationen erhalten Sie in den folgenden Schnellstartanleitungen:

Im Folgenden wird der Zusammenhang zwischen Gesten, Manipulationen und Interaktionen erläutert.

Gesten

Eine Geste ist eine physische Bewegung, die mit dem Eingabegerät (Finger, Zeichenstift/Eingabestift, Maus usw.) ausgeführt wird. Beispiel: Zum Starten, Aktivieren oder Aufrufen eines Befehls würden Sie mit einem Finger tippen (bei einem Gerät mit Touchscreen oder Touchpad). Dies entspricht dem Klicken mit der linken Maustaste, dem Tippen mit einem Stift oder dem Drücken der EINGABETASTE auf einer Tastatur.

Dies sind die grundsätzlichen Touchgesten, mit denen die UI manipuliert wird und mit denen Interaktionen vorgenommen werden können.

Name Typ Beschreibung
Tippen Statische Geste Der Bildschirm wird mit einem Finger berührt, und der Finger wird wieder angehoben.
Gedrückt halten Statische Geste Ein Finger berührt den Bildschirm und bleibt auf dem Bildschirm.
Ziehen Manipulationsgeste Mindestens ein Finger berührt den Bildschirm und bewegt sich in die gleiche Richtung.
Streifen Manipulationsgeste Mindestens ein Finger berührt den Bildschirm und bewegt sich um eine kurze Distanz in die gleiche Richtung.
Drehen Manipulationsgeste Mindestens zwei Finger berühren den Bildschirm und führen eine Kreisbewegung im oder gegen den Uhrzeigersinn aus.
Zusammendrücken Manipulationsgeste Mindestens zwei Finger berühren den Bildschirm und bewegen sich dichter zusammen.
Aufziehen Manipulationsgeste Mindestens zwei Finger berühren den Bildschirm und bewegen sich weiter auseinander.

 

Manipulationen

Eine Manipulation ist die unmittelbare, andauernde Reaktion eines Objekts oder einer Benutzeroberfläche auf eine Geste. Die Zieh- und Streifbewegungen führen z. B. in der Regel dazu, dass sich ein Element oder die Benutzeroberfläche in irgendeiner Weise bewegt.

Das Ergebnis einer Manipulation – wie sie vom Objekt auf dem Bildschirm und durch die Benutzeroberfläche sichtbar umgesetzt wird – ist die Interaktion.

Interaktionen

Interaktionen beruhen auf der Interpretation einer Manipulation und dem Befehl oder der Aktion, der bzw. die aus der Manipulation resultiert. Objekte können beispielsweise sowohl mit der Ziehbewegung als auch mit der Streifbewegung bewegt werden, das Ergebnis hängt jedoch davon ab, ob ein Entfernungsschwellenwert überschritten wird. Eine Ziehbewegung kann verwendet werden, um ein Objekt zu ziehen oder eine Ansicht zu verschieben, während eine Streifbewegung zum Auswählen eines Elements oder Anzeigen der AppBar dient.

In diesem Abschnitt werden einige gebräuchliche Interaktionen beschrieben.

Lernen

Die Gedrückthaltebewegung wird verwendet, um detaillierte Informationen oder informative Steuerelemente (z. B. eine QuickInfo oder ein Kontextmenü) anzuzeigen, ohne eine Aktion oder einen Befehl auszuführen. Das Schwenken ist weiterhin möglich, wenn eine Ziehbewegung gestartet wird, während das Steuerelement angezeigt wird. Weitere Informationen finden Sie unter Richtlinien für visuelles Feedback.

Lernen (Interaktion)

Steuerung

Die Tippbewegung wird verwendet, um eine primäre Aktion auszulösen, z. B. das Starten einer App oder Ausführen eines Befehls.

Befehlsinteraktion

Verschiebung

Die Ziehbewegung wird in erster Linie für Verschiebeinteraktionen verwendet, kann aber auch zum Schieben, Zeichnen oder Schreiben benutzt werden. Die Verschiebung ist eine für Fingereingabe optimierte Technik für kurze Navigationsdistanzen über kleine Inhaltsgruppen in nur einer Ansicht (z. B. die Ordnerstruktur eines PCs, eine Dokumentbibliothek oder ein Fotoalbum). Wie beim Bildlauf mithilfe einer Maus oder Tastatur ist Schwenken nur erforderlich, wenn die Inhaltsmenge in der Ansicht den sichtbaren Bereich überläuft. Weitere Informationen finden Sie unter Richtlinien für Verschiebung.

Verschiebung (Interaktion)

Zoomen

Die Zusammendrück- und Aufziehbewegungen werden für drei Interaktionstypen verwendet: optischer Zoom, Größenänderung und semantischer Zoom.

Optischer Zoom und Größenänderung

Der optische Zoom passt den Vergrößerungsgrad des gesamten Inhaltsbereichs an, um den Inhalt detaillierter darzustellen. Die Größenänderung dient dagegen dazu, die relative Größe eines oder mehrerer Objekte in einem Inhaltsbereich anzupassen, ohne die Ansicht des Inhaltsbereichs zu verändern. Die oberen beiden Bilder zeigen einen optischen Zoom und die unteren beiden Bilder zeigen die Größenänderung eines Rechtecks auf dem Bildschirm, ohne die Größe anderer Objekte zu ändern. Weitere Informationen finden Sie unter Richtlinien für optischen Zoom und Größenänderung.

Optischer Zoom (Interaktion)

Größenänderung (Interaktion)

Semantischer Zoom

Der semantische Zoom ist eine für Fingereingabe optimierte Technik für die Darstellung und Navigation von bzw. in strukturierten Daten oder Inhalten in nur einer Ansicht (z. B. die Ordnerstruktur eines PC, eine Dokumentbibliothek oder ein Fotoalbum) ohne Verschiebungs-, Bildlauf- oder Strukturansicht-Steuerelemente. Der semantische Zoom stellt zwei unterschiedliche Ansichten des gleichen Inhalts bereit, sodass Sie beim Vergrößern mehr Details und beim Verkleinern weniger Details anzeigen können. Weitere Informationen finden Sie unter Richtlinien für semantischen Zoom.

Semantischer Zoom (Interaktion)

Drehen

Die Drehbewegung simuliert die Drehung eines Papiers auf einer ebenen Oberfläche. Die Interaktion wird ausgeführt, indem das Objekt mit zwei Fingern berührt und ein Finger um den anderen oder beide Finger um einen Mittelpunkt gedreht werden und die Hand in die gewünschte Richtung geschwenkt wird. Sie können zwei Finger der gleichen Hand oder einen Finger von jeder Hand verwenden. Weitere Informationen finden Sie unter Richtlinien für Drehung.

Drehung (Interaktion)

Auswählen und Verschieben

Die Zieh- und Streifbewegungen werden in einer Querziehmanipulation verwendet, einer Bewegung senkrecht zur Verschiebungsrichtung des Inhaltsbereichs. Diese Bewegung wird entweder als Auswahl oder – wenn ein Entfernungsschwellenwert überschritten wird – als Interaktion zum Verschieben (Ziehen) interpretiert. Diese Vorgänge werden im folgenden Diagramm veranschaulicht. Weitere Informationen finden Sie unter Richtlinien für Querziehen.

Auswählen und Drag & Drop (Interaktionen)

Anzeigen von Befehlsleisten

Die Streifbewegung wird verwendet, um verschiedene Befehlsleisten oder den Anmeldebildschirm einzublenden.

App-Befehle werden durch Streifen vom unteren oder oberen Rand des Bildschirms aus aufgerufen. Verwenden Sie die AppBar, um App-Befehle anzuzeigen.

Anzeigen von App-Befehlen

Systembefehle werden durch eine Streifbewegung vom rechten Bildschirmrand, zuletzt verwendete Apps durch eine Streifbewegung vom linken Bildschirmrand und Befehle zum Andocken oder Schließen durch eine Streifbewegung vom oberen zum unteren Bildschirmrand eingeblendet.

Anzeigen von Systembefehlen

Verwandte Themen

Konzept

Reaktion auf Benutzerinteraktionen

Entwicklung von Fingereingabeinteraktionen

Referenz

Windows.UI.Core

Windows.UI.Input

Windows.UI.Xaml.Input

Beispiele (DOM)

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

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

Eingabe: Beispiel für instanziierbare Gesten

Beispiele (Windows Store-App-APIs)

Eingabe: Gesten und Manipulationen mit GestureRecognizer

Eingabe: Beispiel XAML-Benutzereingabeereignisse

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

Beispiele (DirectX)

Beispiel für die DirectX-Fingereingabe

Eingabe: Beispiel für Manipulationen und Gesten (C++)