Reaktion auf Benutzerinteraktionen (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]
Hier erfahren Sie mehr über die Benutzerinteraktionsplattform, Eingabequellen (Fingereingabe, Touchpad, Maus, Zeichen-/Eingabestift und Tastatur), Modi (Bildschirmtastatur, Mausrad, Radiergummi des Zeichenstifts usw.) und die von Windows, Windows Store-Apps und Windows Phone Store-Apps unterstützten Benutzerinteraktionen.
Updates für Windows 8.1: Windows 8.1 führt eine Reihe von Updates und Verbesserungen an den Zeigereingabe-APIs ein. Weitere Informationen finden Sie in API-Änderungen für Windows 8.1.
In diesem Thema wird erläutert, wie mit den integrierten Steuerelementen der verschiedenen Sprachframeworks (Apps mit JavaScript, Apps mit C++, C# oder Visual Basic und Apps mit DirectX mit C++) grundlegende Eingabe- und Interaktionsfunktionen kostenfrei bereitgestellt werden, wie die Interaktionsmuster in den verschiedenen Sprachframeworks gemeinsam verwendet werden und wie die Benutzerinteraktion angepasst wird.
Anhand von Richtlinien, bewährten Methoden und Beispielen wird gezeigt, wie Sie die Interaktionsmöglichkeiten von Windows ausschöpfen können, um Apps zu erstellen, die interessant und intuitiv zu bedienen sind und den Benutzer begeistern.
Tipp Dieses Thema enthält spezifische Informationen zum Entwickeln von Apps mit JavaScript.
Informationen zu Apps mit C++, C# oder Visual Basic finden Sie unter Reaktion auf Benutzerinteraktionen (XAML).
Informationen zu Apps mit DirectX mit C++ finden Sie unter Reaktion auf Benutzerinteraktionen (DirectX und C++).
Voraussetzungen: Wenn Sie noch keine Erfahrung mit der Entwicklung von 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 und Ereigniserfassung und Eventbubbling bei DOM-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.
- Richtlinien für häufige Benutzerinteraktionen
- Richtlinien für Streifen
- Richtlinien für optischen Zoom und Änderung der Fenstergröße
- Richtlinien für Schwenkung
- Richtlinien für Drehung
- Richtlinien für semantischen Zoom
- Richtlinien für die Text- und Bildauswahl
- Richtlinien für Zielgruppenadressierung
- Richtlinien für visuelles Feedback
Beispiele: Sehen Sie sich unter Beispiele für Apps diese Funktionalität in Aktion an.
Anpassung der Benutzerinteraktion von A bis Z
Eingabe: Beispiel für Gerätefunktionen
Beispiel für HTML-Bildlauf, -Verschiebung und -Zoomen
Eingabe: Beispiel für die Behandlung von DOM-Zeigerereignissen
Eingabe: Beispiel für instanziierbare Gesten
Eingabe: Gesten und Manipulationen mit GestureRecognizer
Eingabe: vereinfachtes Freihandbeispiel
Übersicht über die Windows 8-Benutzerinteraktionsplattform
Berücksichtigen Sie bei der Gestaltung der Apps auch Fingereingabeinteraktionen. Toucheingaben werden von immer mehr und immer unterschiedlicheren Geräten unterstützt. Interaktionen per Toucheingabe stellen einen entscheidenden Aspekt in der Windows-Benutzerumgebung dar.
Da die Toucheingabe einen vorrangigen Interaktionsmodus für Benutzer von Windows und Windows Phone darstellt, wurden die Plattformen für Toucheingaben optimiert, sodass die App sensibel, präzise und benutzerfreundlich ist. Machen Sie sich keine Sorgen: Auch bewährte Eingabemethoden (wie etwa Maus, Zeichenstift und Tastatur) werden in vollem Umfang unterstützt, und die funktionelle Konsistenz zur Toucheingabe ist gegeben (siehe Gesten, Manipulationen und Interaktionen). Viele Benutzer schätzen die vertraute Geschwindigkeit, Präzision und das klare Feedback traditioneller Eingabemethoden. Die Funktionalität dieser einzigartigen und charakteristischen Eingabemethoden wurde nicht beeinträchtigt.
Lassen Sie Ihrer Phantasie beim Entwerfen der Interaktionsmöglichkeiten freien Lauf. Unterstützen Sie eine breite Palette an Funktionen und Einstellungen, und wenden Sie sich an eine möglichst breite Zielgruppe. Auf diese Weise gewinnen Sie mehr Kunden für Ihre App.
Von integrierten Steuerelementen bis hin zur vollständigen Anpassung – die Benutzerinteraktionsplattform basiert auf Funktionsebenen, die progressive Flexibilität und Leistungsfähigkeit bieten.
Integrierte Steuerelemente
Profitieren Sie von den integrierten Steuerelementen, um eine gemeinsame Benutzerinteraktionserfahrung bereitzustellen, die für die meisten Windows- und Windows Phone-Apps gut funktioniert.
Die integrierten Steuerelemente wurden von Grund auf für eine optimale Nutzung per Toucheingabe zugelassen, und es wurde sichergestellt, dass alle Eingabemodi einheitliche und interessante Interaktionsmöglichkeiten bieten. Sie unterstützen eine umfassende Reihe von Gesten: Gedrückthalten, Tippen, Ziehen, Streifen, Zusammendrücken, Aufziehen, Drehen usw. In Verbindung mit direkten Manipulationen (Verschieben, Zoomen, Drehen und Ziehen) und realistischem Trägheitsverhalten ermöglichen sie faszinierende und umfassende Interaktionen, die auf bewährten Methoden basieren und über die gesamte Windows-Plattform hinweg einheitlich sind.
Weitere Informationen zu den Steuerelementbibliotheken finden Sie unter Hinzufügen von Steuerelementen und Inhalten.
Ansichten
Mithilfe der Einstellungen für Bewegungen/Bildläufe und Zoomstufen können Sie die Interaktionsmöglichkeiten für Benutzer Ihrer App-Ansichten optimieren. Die App-Ansicht bestimmt, wie ein Benutzer auf Ihre App und deren Inhalte zugreift und diese manipuliert. Ansichten stellen außerdem bestimmte Verhaltensweisen bereit, beispielsweise das Trägheitsverhalten, das „Springen“ an Inhaltsgrenzen und die Andockpunkte.
Die Einstellungen für Verschieben und Scrollen legen fest, wie Benutzer in einer Ansicht navigieren können, wenn der Inhalt der Ansicht über den Viewport hinausgeht. Eine Einzelansicht kann beispielsweise eine Seite in einem Magazin oder Buch, die Ordnerstruktur eines Computers, eine Dokumentbibliothek oder ein Fotoalbum sein.
Zoomeinstellungen gelten sowohl für den optischen Zoom als auch für das SemanticZoom-Steuerelement. Der semantische Zoom ist eine für Toucheingaben optimierte Technik, um große Bestände verwandter Daten oder Inhalte in einer einzelnen Ansicht darzustellen und in diesen zu navigieren. Dabei werden zwei unterschiedliche Klassifizierungsmodi (oder Zoomstufen) verwendet. Dies ist mit dem Verschieben und dem Durchführen von Bildläufen innerhalb einer einzelnen Ansicht vergleichbar. Verschieben und Bildläufe können in Verbindung mit dem semantischen Zoom verwendet werden.
Verwenden Sie App-Ansichten und die folgenden CSS-Eigenschaften (Cascading Stylesheets), DOM-Attribute (Dokumentobjektmodell) und DOM-Ereignisse, um das Verhalten für Verschieben, Bildlauf und Zoom anzupassen. Dies kann für eine flüssigere Interaktion sorgen, als dies mit der Behandlung von Zeiger- und Gestikereignissen möglich ist.
| API-Oberfläche | CSS-Eigenschaften | DOM-Attribute | DOM-Ereignisse |
|---|---|---|---|
| touch-action gibt an, ob ein bestimmter Bereich durch Verschieben oder Zoomen manipuliert werden kann. | |||
| Verschiebung/Bildlauf | |||
| Zoomen | msContentZoomFactor | onmscontentzoom | |
| Beide | onmsmanipulationstatechanged | ||
Weitere Informationen zu App-Ansichten finden Sie unter Definieren von Layouts und Ansichten.
Weitere Informationen zum Zoomen finden Sie unter Richtlinien für optischen Zoom und Änderung der Fenstergröße oder Richtlinien für semantischen Zoom.
Weitere Informationen zum Schwenken/Bildlauf finden Sie unter Richtlinien für Schwenkung.
DOM-Zeiger- und Gestikereignisse
Bei einem Zeiger handelt es sich um eine generische Eingabeart mit einem vereinheitlichten Ereignismechanismus. Er stellt grundlegende Informationen (wie die Bildschirmposition) für die aktive Eingabequelle (Touch, Touchpad, Maus oder Stift) zur Verfügung. Gesten können von einfachen statischen Interaktionen wie Tippen bis hin zu komplexeren Manipulationen wie Zoomen, Verschieben und Drehen reichen. Weitere Informationen finden Sie unter Gesten, Manipulationen und Interaktionen.
Hinweis
Statische Gestikereignisse werden werden ausgelöst, wenn eine Interaktion abgeschlossen ist. Manipulationsgestenereignisse weisen auf eine fortlaufende Interaktion hin. Manipulationsgestenereignisse werden ausgelöst, wenn der Benutzer das Element berührt, und bleiben so lange aktiv, bis der Benutzer den Finger vom Element hebt oder die Manipulation abgebrochen wird.
Der Zugriff auf die Zeiger- und Gestikereignisse ermöglicht es Ihnen, die Windows 8-Sprache für das Design für Interaktionen per Toucheingabe Folgendes zu verwenden:
- Spiele
- Benutzerdefinierte Steuerelemente und visuelles Feedback
- Benutzerdefinierte Interaktionen
Nutzen Sie die integrierte Gestikerkennung, die durch die folgenden DOM-Gestikereignisse bereitgestellt wird:
| Typ | DOM-Gestikereignisse |
|---|---|
| Allgemeine Ereignisse | MSManipulationStateChanged |
| Zeigerereignisse | |
| Statische Gestikereignisse | |
| Manipulationsbewegungsereignisse |
Weitere Informationen zum Behandeln von Zeiger- und Gestikereignissen finden Sie unter Schnellstart: Behandeln von Zeigern und Schnellstart: Behandeln von einfachen DOM-Gesten.
Anpassen der Benutzeroberfläche
Mithilfe der Windows-Runtime- APIs können Sie die Interaktionsmöglichkeiten Ihrer App vollständig anpassen und steuern. Mit diesen APIs können Sie benutzerdefinierte Benutzerinteraktionen aktivieren und zusätzliche Konfigurationsoptionen und Hardwarefunktionen implementieren wie etwa Mausgeräte mit einer rechten Taste, Radtaste, 4-Wege-Radtaste oder X-Tasten und Zeichenstiftgeräte mit Drucktasten und Radiergummispitzen.
Die meisten Interaktions-APIs werden durch die Windows.UI.Core-, Windows.UI.Input- und Windows.UI.Input.Inking-Typen bereitgestellt, wobei die Daten von Eingabegeräten über Windows.Devices.Input verfügbar gemacht werden.
Sie werden feststellen, dass für die Arbeit mit Gesten und Manipulationen die GestureRecognizer-, PointerPoint- und die PointerPointProperties-Klasse hilfreich sind.
Bedenken Sie Folgendes, bevor Sie mithilfe neuer oder geänderter Gesten und Manipulationen angepasste Interaktionsfunktionen bereitstellen:
- Bietet eine vorhandene Geste die für Ihre App erforderliche Funktion? Verwenden Sie keine benutzerdefinierte Geste zum Zoomen oder Verschieben, wenn Sie Ihre App einfach zur Unterstützung bzw. Interpretation einer vorhandenen Geste anpassen können.
- Rechtfertigt die benutzerdefinierte Geste die mögliche Inkonsistenz mit anderen Apps?
- Erfordert die Geste spezifische Hardwareunterstützung (z. B. eine Anzahl von Kontakten)?
- Gibt es ein Steuerelement (z. B. SemanticZoom), das die benötigte Interaktionsfunktion bereitstellt? Ist überhaupt eine Geste oder Manipulation nötig, wenn Benutzereingaben eigentlich von einem Steuerelement behandelt werden können?
- Führt die benutzerdefinierte Geste oder Manipulation zu einer flüssigen und natürlichen Interaktion?
- Macht die Interaktionsfunktion Sinn? Wenn die Interaktion von Dingen wie der Anzahl von Kontakten, Geschwindigkeit, Zeit (nicht empfohlen) und Trägheit abhängig ist, müssen Sie sicherstellen, dass diese Einschränkungen und Abhängigkeiten konsistent und erkennbar sind. Wie Benutzer "schnell" und "langsam" interpretieren, kann sich z. B. direkt auf die Funktionalität Ihrer App und die Zufriedenheit der Benutzer auswirken.
- Ist die Geste oder Manipulation von den körperlichen Fähigkeiten des Benutzers abhängig? Ist sie barrierefrei?
- Genügt ein App-Leistenbefehl oder ein anderer UI-Befehl?
Kurz gesagt: Erstellen Sie benutzerdefinierte Gesten und Manipulationen nur dann, wenn eine eindeutige, klar definierte Notwendigkeit besteht und es keine einfache Geste gibt, die Ihr Szenario unterstützt.
Weitere Informationen zu benutzerdefinierten Interaktionen finden Sie unter Schnellstart: Statische Gesten und Schnellstart: Manipulationsgesten.
Verwandte Themen
Konzept