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:
- Schnellstart: Zeiger
- Schnellstart: DOM-Gesten und -Manipulationen
- Schnellstart: statische Gesten
- Schnellstart: Manipulationsgesten
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.
Steuerung
Die Tippbewegung wird verwendet, um eine primäre Aktion auszulösen, z. B. das Starten einer App oder Ausführen eines Befehls.
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.
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.
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.
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.
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.
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.
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.
Verwandte Themen
Konzept
Reaktion auf Benutzerinteraktionen
Entwicklung von Fingereingabeinteraktionen
Referenz
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)