Touch-Interaktionen

Dieses Thema enthält Entwurfsrichtlinien zum Erstellen von benutzerdefinierten, touchoptimierten Oberflächen in Windows-Apps.

Überblick

Toucheingabe ist eine primäre Form der Eingabe in Windows- und Windows-Apps, die die Verwendung eines oder mehrerer Finger (oder Touchkontakte) umfasst. Diese Touchkontakte und ihre Bewegung werden als Berührungsgesten und -manipulationen interpretiert, die eine Vielzahl von Benutzerinteraktionen unterstützen.

Sowohl das Windows SDK als auch das Windows App SDK umfassen umfassende Sammlungen von touchoptimierten Steuerelementen, die robuste und konsistente Erfahrungen in Windows-Apps bieten.

Verwenden Sie diese Richtlinien beim Erstellen von benutzerdefinierten Steuerelementen, Umgebungen und Frameworks für Ihre Windows-Apps.

Entwurfsprinzipien

Beachten Sie Folgendes, wenn Sie die Toucheingabe in Ihrer Windows-App entwerfen.

Touch-optimiert

Windows-App-Oberflächen sollten sich einladend anfühlen, die Toucheingabe ermöglichen, direkte Manipulationen ermöglichen und weniger präzise Interaktionen berücksichtigen. Erwägen Sie Beschleuniger für die Toucheingabe, einschließlich Gesten und Stift- und Sprachintegration.

Konsistent über Positionen hinweg

Ihre App sollte unabhängig von der Eingabemethode oder -position, in der sich der Benutzer befindet, über eine konsistente Benutzeroberfläche verfügen. Änderungen von herkömmlicher Desktop-Haltung zu Tablet-Haltung (siehe Empfohlene Einstellungen für bessere Tablet-Umgebungen) sowie Änderungen der Ausrichtung sollten nicht verwirrend, sondern eher subtil und nur bei Bedarf sein. Ihre App sollte die Benutzeroberfläche auf subtile Weise umbrechen, um eine vertraute, zusammenhängende Erfahrung zu schaffen, die den Benutzern entspricht, wo sie sich befinden.

Dynamisch

Apps und Interaktionen sollten Benutzern mit Feedback in jeder Phase (Touchdown, Aktion, Touchup) einer Interaktion mit Animationen bereitstellen, die auf den vorhandenen Zustand eines Benutzers reagieren, während mögliche Aktionen angegeben werden. Animationen sollten auch mindestens 60 fps Standard enthalten, um sich reibungslos und modern zu fühlen.

Berücksichtigen von Touch-Konventionen

Reaktionsschnelles Feedback

Angemessenes visuelles Feedback während der Interaktionen mit Ihrer App hilft Benutzern zu erkennen, zu lernen und sich darauf einzustellen, wie ihre Interaktionen sowohl von der App als auch von der Windows-Plattform interpretiert werden. Geben Sie sofortiges und kontinuierliches Feedback als Reaktion auf die Toucheingabe des Benutzers, das spürbar, verständlich und nicht durch Ablenkungen verloren geht. Dieses sofortige Feedback ist, wie Benutzer die interaktiven Elemente Ihrer App lernen und erkunden.

• Das Feedback sollte beim Touchdown sofort erfolgen und sich bewegende Objekte sollten am Finger des Benutzers haften bleiben.​
• Die Benutzeroberfläche sollte auf Gesten reagieren, indem sie die Geschwindigkeit und Bewegungen des Benutzers anpasst. Vermeiden Sie die Verwendung von Keyframe-Animationen.
• Visuelles Feedback sollte mögliche Ergebnisse vermitteln, bevor der Benutzer sich zu einer Aktion verpflichtet.

Tun

Tue nicht

Weitere Informationen finden Sie unter Richtlinien für visuelles Feedback und Bewegung in Windows 11

Touch-Interaktionsmuster

Berücksichtigen Sie diese gängigen Interaktions- und Gestenmuster, um Konsistenz und Vorhersehbarkeit für Ihre Erfahrung zu erzielen.

Häufige Interaktionen

Es gibt eine Reihe gängiger Berührungsverhaltensweisen und Gesten, mit denen Benutzer vertraut sind und erwarten, dass sie für alle Windows-Umgebungen konsistent funktionieren.

• Tippen, um ein Element zu aktivieren oder auszuwählen
• Kurzes Drücken und Ziehen zum Verschieben eines Objekts
• Drücken und halten, um auf ein Menü mit sekundären kontextbezogenen Befehlen zuzugreifen.
• Wischen (oder Ziehen und Loslassen) für Kontextbefehle
• Drehen im oder gegen den Uhrzeigersinn zum schwenken

Aktivitäten

Tippen

Wischen (oder Ziehen und Loslassen)

Kurzes Drücken und Ziehen

Drehen

Drücken und Halten

Weitere Informationen finden Sie unter Richtlinien für visuelles Feedback und Bewegung in Windows 11

Gesten

Gesten verringern den Aufwand, der von Benutzern benötigt wird, um zu navigieren und auf allgemeine Interaktionen zu reagieren. Unterstützen Sie nach Möglichkeit die Benutzeroberfläche mit Touchgesten, um Benutzern das Navigieren und Handeln in einer App zu erleichtern.

Wenn Sie zwischen Ansichten navigieren, verwenden Sie verbundene Animationen, sodass vorhandene und neue Zustände beide sichtbar sind. Wenn Sie mit der Benutzeroberfläche interagieren, sollten Elemente der Benutzerbewegung folgen, Feedback geben und beim Loslassen mit zusätzlichen Aktionen basierend auf Ziehpositionsschwellenwerten reagieren.

Gesten sollten auch mit Streichungen und Wischbewegungen auf Der Grundlage der Unträgheit und innerhalb eines komfortablen Bewegungsbereichs ausgeführt werden.

• Ziehen oder Streichen, um hin und her zu wechseln
• Ziehen zum Verwerfen
• Ziehen zum Aktualisieren

Gesten

Ziehen oder Streichen, um hin und her zu wechseln

Ziehen zum Aktualisieren

Ziehen zum Verwerfen

Weitere Informationen finden Sie unter Seitenübergänge und Ziehen zum Aktualisieren.

Benutzerdefinierte Gesten

Verwenden Sie benutzerdefinierte Gesten, um Tastenkombinationen mit hoher Frequenz und Trackpadgesten in eine Touchinteraktion zu bringen. Unterstützen Sie die Auffindbarkeit und Reaktion durch dedizierte Angebote mit Animationen und visuellen Zuständen (z. B. das Platzieren von drei Fingern auf dem Bildschirm bewirkt, das Fenster für visuelles Feedback zu verkleinern).

• Überschreiben Sie allgemeine Gesten nicht, da dies zu Verwirrung für Benutzer führen kann.
• Erwägen Sie die Verwendung von Multifingergesten für benutzerdefinierte Aktionen, beachten Sie jedoch, dass das System einige Multifingergesten für den schnellen Wechsel zwischen Apps und Desktops reserviert hat.
• Achten Sie darauf, dass benutzerdefinierte Gesten, die nahe den Rändern eines Bildschirms stammen, als Randgesten für Verhalten auf Betriebssystemebene reserviert sind, die versehentlich aufgerufen werden können.

Vermeiden der versehentlichen Navigation

Wenn Ihre App oder Ihr Spiel häufig Interaktionen an den Rändern des Bildschirms umfasst, sollten Sie ihre Erfahrung im Vollbildmodus Exklusiv (Fullscreen Exclusive, FSE) präsentieren, um versehentliche Aktivierungen von System-Flyouts zu vermeiden (Benutzer müssen direkt auf der temporären Registerkarte wischen, um das zugeordnete System-Flyout zu ziehen).

Hinweis

Vermeiden Sie diese Verwendung, es sei denn, es ist unbedingt erforderlich, da es Benutzern schwieriger wird, von Ihrer App zu navigieren oder sie in Verbindung mit anderen zu verwenden.

Bildschirmtastaturfunktionen

Die Bildschirmtastatur ermöglicht die Texteingabe für Geräte, die Toucheingabe unterstützen. Windows-App-Texteingabesteuerelemente rufen standardmäßig die Bildschirmtastatur auf, wenn ein Benutzer auf ein bearbeitbares Eingabefeld tippt.

Beim Tippen auf Textfeld aufrufen

Die Bildschirmtastatur sollte angezeigt werden, wenn ein Benutzer auf ein Texteingabefeld tippt – dies funktioniert automatisch mithilfe unserer System-APIs, um die Tastatur ein- und auszublenden. Siehe Reagieren auf das Vorhandensein der Bildschirmtastatur

Verwenden von standardmäßigen Texteingabesteuerelementen

Die Verwendung allgemeiner Steuerelemente bietet ein erwartetes Verhalten und minimiert Überraschungen für Benutzer.

Textsteuerelemente, die das Text Services Framework (TSF) unterstützen, bieten Shape-Writing-Funktionen (Wischtastaturen).

Signale der Bildschirmtastatur

Berücksichtigen Sie Eingabe-, Haltungs-, Hardwaresignale, die die Bildschirmtastatur zum Standard-Eingabemodus machen (Hardwaretastatur wird getrennt, Einstiegspunkte werden mit Toucheingabe aufgerufen, klare Benutzerabsicht eingeben).

Reflow entsprechend durchführen

• Beachten Sie, dass die Tastatur 50 % des Bildschirms auf kleineren Geräten belegen kann.
• Verdecken Sie das aktive Textfeld nicht mit der Bildschirmtastatur.
• Wenn die Bildschirmtastatur das aktive Textfeld verschleiert, scrollen Sie den App-Inhalt nach oben (mit Animation), bis das Feld sichtbar ist.
• Wenn die Bildschirmtastatur das aktive Textfeld übergibt, der App-Inhalt jedoch nicht nach oben scrollen kann, versuchen Sie, den App-Container (mit Animation) zu verschieben.

Trefferziele

Stellen Sie sicher, dass Trefferziele komfortabel und einladend sind. Wenn Trefferziele zu klein oder überfüllt sind, müssen die Benutzer präziser sein, was mit der Berührung schwierig ist und zu einer schlechten Erfahrung führen kann.

Touchable

Wir definieren Touchable als mindestens 40 x 40 epx, auch wenn das Visuelle kleiner ist oder 32 epx hoch ist, wenn die Breite mindestens 120 epx beträgt.

Unsere gängigen Steuerelemente entsprechen diesem Standard (sie sind sowohl für Maus- als auch für Touchbenutzer optimiert).

Touch-optimiert

Bei einer Touch-optimierten Benutzeroberfläche sollten Sie die Zielgröße auf 44 x 44 epx mit mindestens 4 epx sichtbarer Fläche zwischen Zielen erhöhen.

Es wird empfohlen, zwei Standardverhaltensweisen zu verwenden: Immer Touch-optimiert oder übergangsweise basierend auf Gerätesignalen.

Wenn eine App für die Toucheingabe optimiert werden kann, ohne die Mausbenutzer zu beeinträchtigen, insbesondere, wenn die App hauptsächlich mit Toucheingabe verwendet wird, optimieren Sie immer die Fingereingabe.

Wenn Sie die Benutzeroberfläche basierend auf Gerätesignalen für den Gerätestatus übertragen, bieten Sie immer konsistente Erfahrungen über die verschiedenen Haltungen hinweg.

Visuelle Elemente mit Toucheingabezielen abgleichen

Erwägen Sie, visuelle Elemente zu aktualisieren, wenn sich die Dimensionen für das Ziel der Toucheingabe ändern. Wenn beispielsweise Trefferziele steigen, wenn Benutzer die Tablet-Haltung betreten, sollte die Benutzeroberfläche, die die Trefferziele darstellt, ebenfalls aktualisiert werden, damit Benutzer die Zustandsänderung und das aktualisierte Angebot verstehen können. Weitere Informationen finden Sie unter Inhaltsdesigngrundlagen für Windows-Apps, Richtlinien für Ziele zur Toucheinabe, Steuerelementgröße und Dichte.

Hochformatoptimierung

Unterstützen Sie reaktionsfähige Layouts, die sowohl hohe als auch breite Fenster berücksichtigen, um sicherzustellen, dass eine App sowohl für Quer- als auch für Hochformatausrichtungen optimiert ist.

Dadurch wird auch sichergestellt, dass App-Fenster grundlegende UI-Elemente in Multitaskingszenarien ordnungsgemäß anzeigen (Apps, die nebeneinander mit Hochformat-Seitenverhältnissen angedockt sind) unabhängig von Ausrichtung und Bildschirmgrößen.