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

Reagieren Sie in Windows Store-Apps mit C++, C# oder Visual Basic auf Mauseingaben, indem Sie die gleichen einfachen Zeigerereignisse behandeln, die Sie für Finger- und Stifteingaben verwenden.

Mithilfe dieser üblichen Ereignisse können Sie grundlegende Eingabefunktionen implementieren, ohne separaten Code für jedes Eingabegerät schreiben zu müssen. Bei Bedarf können Sie jedoch trotzdem die besonderen Funktionen der einzelnen Geräte nutzen (beispielsweise Mausradereignisse).

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 Mausinteraktionen (XAML).

Informationen zu Windows Store-Apps mit DirectX mit C++ finden Sie unter Entwickeln von Maussteuerelementen (DirectX und C++).

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 instanziierbare Gesten

Eingabe: Gesten und Manipulationen mit GestureRecognizer

Übersicht

Die Mauseingabe eignet sich am besten für Benutzerinteraktionen, die exaktes Zeigen und Klicken erfordern. Die Benutzeroberfläche von Windows 8 unterstützt selbstverständlich diese Genauigkeit, ist aber zugleich für die ungenauere Toucheingabe optimiert. Optimieren Sie das Design Ihrer Windows Store-Apps für die Toucheingabe, und freuen Sie sich über die standardmäßige allgemeine Unterstützung von Mausgeräten.

Die Maus- und die Toucheingabe unterscheiden sich dahingehend, dass bei der Toucheingabe die direkte Manipulation von UI-Elementen auf dem Bildschirm durch physische Gesten für diese Objekte (z. B. Streifen, Ziehen, Drehen usw.) emuliert werden kann.

Wenn Sie Mausinteraktionen in Szenarien unterstützen möchten, in denen der Schwerpunkt auf der direkten Manipulation liegt, verwenden Sie eine Maus-spezifische Benutzeroberfläche, um den Benutzern Ihrer App unabhängig vom verwendeten Gerät die äquivalente Funktionalität bereitzustellen. Wenn eine Maus erkannt wird, verwenden Sie beispielsweise eine Bildlaufleiste, um das Verschieben zu emulieren, oder die Schaltflächen "Zurück" und "Vorwärts", um durch Seiten mit Inhalt zu blättern.

Empfehlungen zur Unterstützung von Mausinteraktionen

Hier finden Sie einige Richtlinien für die Unterstützung von Mausinteraktionen.

Die Windows 8-Sprache für Mauseingaben

Windows 8 bietet einen präzisen Satz von Mausinteraktionen, die durchgängig im ganzen System verwendet werden. Die konsequente Anwendung dieser Sprache hilft Ihnen, Apps zu entwickeln, in denen sich die Benutzer leicht zurechtfinden. Hierdurch erleichtern Sie den Benutzern den Einstieg, da diese sich schneller in Ihrer App zurechtfinden.

Benennung	Beschreibung
Lernen durch Zeigen	Zeigen Sie auf ein Element, um weitere Informationen oder visuelle Hinweise (wie etwa QuickInfos) anzuzeigen, ohne eine Aktion auszuführen. Weitere Informationen zu QuickInfos finden Sie unter Hinzufügen von QuickInfos.
Linksklick, um primäre Aktion auszuführen	Klicken Sie mit der linken Maustaste auf ein Element, um dessen primäre Aktion aufzurufen (z. B. das Starten einer App oder das Ausführen eines Befehls).
Bildlauf, um Ansicht zu ändern	Zeigen Sie Bildlaufleisten an, damit Benutzer in einem Inhaltsbereich nach oben, unten, links und rechts navigieren können. Benutzer können durch Klicken auf Bildlaufleisten oder Drehen des Mausrads einen Bildlauf durchführen. Auf Bildlaufleisten kann die Position der aktuellen Ansicht innerhalb des Inhaltsbereichs angezeigt werden (durch das Schwenken bei der Fingereingabe wird eine ähnliche Benutzeroberfläche angezeigt).
Rechtsklick, um Auswahl zu treffen und Befehl auszuwählen	Klicken Sie mit der rechten Maustaste, um die App-Leisten mit globalen Befehlen anzuzeigen. Klicken Sie mit der rechten Maustaste auf ein Element, um es auszuwählen und die App-Leiste mit Kontextbefehlen für das ausgewählte Element anzuzeigen. Hinweis Klicken Sie mit der rechten Maustaste, um ein Kontextmenü anzuzeigen, wenn die in der Auswahl oder der App-Leiste verfügbaren Befehl nicht das gewünschte Benutzeroberflächenverhalten ermöglichen. Wir empfehlen jedoch ausdrücklich, die App-Leiste für alle Befehlsverhalten zu verwenden.
Benutzeroberflächenbefehle zum Zoomen	Zeigen Sie Benutzeroberflächenbefehle auf der App-Leiste an (z. B. "+" und "-"), oder drücken Sie STRG und drehen Sie das Mausrad, um Zusammendrück- und Aufziehbewegungen zum Zoomen zu emulieren.
Benutzeroberflächenbefehle zum Drehen	Zeigen Sie Benutzeroberflächenbefehle auf der App-Leiste an, oder drücken Sie STRG+UMSCHALTTASTE, und drehen Sie das Mausrad, um die Drehbewegung zum Drehen zu emulieren. Drehen Sie das Gerät selbst, um den ganzen Bildschirm zu drehen.
Linksklick und ziehen, um neu anzuordnen	Klicken Sie mit der linken Maustaste auf ein Element, und ziehen Sie, um es zu bewegen.
Linksklick und ziehen, um Text auszuwählen	Klicken Sie mit der linken Maustaste auf auswählbaren Text, und ziehen Sie, um Text auszuwählen. Doppelklicken Sie, um ein Wort auszuwählen.
Maus in Ecken und an Rändern für Systembefehle	Bewegen Sie in Links-nach-rechts-Layouts die Maus in die obere oder untere rechte Ecke auf dem Bildschirm (bzw. an den linken Bildschirmrand in Rechts-nach-links-Layouts), um die Charms mit den Systembefehlen anzuzeigen. Bewegen Sie die Maus in Links-nach-rechts-Layouts in die obere linke Ecke (bzw. in die obere rechte Ecke in Rechts-nach-links-Layouts), um eine Miniaturansicht der zuletzt verwendeten App anzuzeigen. Klicken Sie mit der linken Maustaste, oder klicken und ziehen Sie, um zwischen aktiven Apps umzuschalten, oder ziehen Sie, um die App anzudocken (wenn die Bildschirmauflösung dies unterstützt). Bewegen Sie die Maus in Links-nach-rechts-Layouts in die untere linke Ecke (bzw. in die untere rechte Ecke in Rechts-nach-links-Layouts), um eine Miniaturansicht des Startbildschirms anzuzeigen. Klicken mit der linken Maustaste auf den oberen Bildschirmrand, und führen Sie eine Ziehbewegung zum unteren Bildschirmrand aus, um die aktuelle App zu schließen. Klicken Sie mit der linken Maustaste auf den oberen Bildschirmrand, und führen Sie eine Ziehbewegung nach unten zum linken oder rechten Rand aus, um die aktuelle App auf der jeweiligen Seite des Bildschirms anzudocken.

Hardware

Überprüfen Sie die Funktionen des Mausgeräts (MouseCapabilities), um festzustellen, auf welche Elemente der Benutzeroberfläche Ihrer App die Maushardware direkt zugreifen kann. Weitere Informationen zum Überprüfen von Gerätefunktionen finden Sie unter Schnellstart: Erkennen von Zeigergeräten.

Einige Mausgeräte verfügen über fünf Tasten. Die vierte und fünfte Taste, gewöhnlich als X-Tasten bezeichnet, dienen gewöhnlich dazu, in Webbrowsern wie beispielsweise Windows Internet Explorer zurück und vorwärts zu navigieren. Weisen Sie diesen Schaltflächen in der Benutzeroberfläche Ihrer App entsprechende Funktionen zu (Zurück- und Vorwärts-Schaltflächen).

Verfügt die Maus über eine Radtaste, weisen Sie dem Drehen nach vorne und nach hinten den vertikalen Bildlauf (nach oben und nach unten) im Inhaltsbereich zu. Aktivieren Sie horizontalen Bildlauf (nach links und nach rechts), wenn im Inhaltsbereich kein vertikaler Bildlauf möglich ist. Handelt es sich bei der Radtaste um eine 4-Wege-Radtaste, sollte nur der horizontale Bildlauf aktiviert werden.

Durch Drehen des Mausrads sollte bei gedrückter STRG-Taste die Zoomfunktion aktiviert werden (falls verfügbar gemacht).

Visuelles Feedback

Wenn eine Maus erkannt wird (durch Bewegungs- oder Daraufzeigen-Ereignisse), zeigen Sie eine für Mausinteraktionen spezifische Benutzeroberfläche an, um auf vom Element verfügbar gemachte Funktionen hinzuweisen. Wenn die Maus für eine bestimmte Zeit nicht bewegt wird oder der Benutzer eine Fingereingabeinteraktion auslöst, blenden Sie die für Mausinteraktionen 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).
Zeigen Sie kein visuelles Feedback an, wenn ein Element keine Interaktionen unterstützt (z. B. statischer Text).
Verwenden Sie keine Fokusrechtecke für Mausinteraktionen. Diese sind ausschließlich für Tastaturinteraktionen vorgesehen.
Zeigen Sie für alle Elemente, die das gleiche Eingabeziel darstellen, das gleiche visuelle Feedback an.
Stellen Sie Schaltflächen (z. B. "+" und "-") zur Verfügung, um fingereingabebasierte Manipulationen wie etwa Schwenken, Drehen, Zoomen usw. zu emulieren.

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

Cursor

Für einen Mauszeiger ist eine Reihe von Standardcursorn verfügbar. Diese geben die primäre Aktion eines Elements an.

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 Mauszeiger 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).

Steuerung

Durch einen Rechtsklick sollte die App-Leiste der App aktiviert werden. Vermeiden Sie inaktive Bereiche auf der Benutzeroberfläche Ihrer App, in denen keine Rechtsklicks akzeptiert werden. Weitere Informationen zu App-Leisten finden Sie unter Hinzufügen von App-Leisten.