Freigeben über

Mausinteraktionen

Optimieren Sie Ihr Windows-App-Design für die Toucheingabe, und erhalten Sie standardmäßig grundlegende Mausunterstützung. 

Maus

Die Mauseingabe eignet sich am besten für Benutzerinteraktionen, die beim Zeigen und Klicken Präzision erfordern. Diese inhärente Präzision wird natürlich von der Benutzeroberfläche von Windows unterstützt, die für die ungenaue Art der Toucheingabe optimiert ist.

Wenn sich Maus- und Touch-Eingaben unterscheiden, liegt der Unterschied in der Fähigkeit von Touch, die direkte Manipulation von UI-Elementen durch direkt auf diesen Objekten ausgeführte physische Gesten genauer nachzuahmen (z. B. Wischen, Ziehen, Drehen usw.). Manipulationen mit einer Maus erfordern in der Regel ein anderes UI-Angebot, z. B. die Verwendung von Ziehpunkten zum Ändern der Größe oder Drehung eines Objekts.

In diesem Thema werden Entwurfsüberlegungen für Mausinteraktionen beschrieben.

Die Sprache der UWP-App-Maus

Ein präziser Satz von Mausinteraktionen wird im gesamten System konsistent verwendet.

Begriff Description

Zeigen Sie mit der Maus, um zu lernen

Zeigen Sie mit der Maus auf ein Element, um detailliertere Informationen oder Lehrvisualisierungen (wie z. B. eine QuickInfo) anzuzeigen, ohne eine Aktion auszulösen.

Linksklick für primäre Aktion

Klicken Sie mit der linken Maustaste auf ein Element, um die primäre Aktion aufzurufen (z. B. das Starten einer App oder das Ausführen eines Befehls).

Scrollen, um die Ansicht zu ändern

Zeigen Sie Bildlaufleisten an, um innerhalb eines Inhaltsbereichs nach oben, unten, links und rechts zu navigieren. Benutzer können scrollen, indem sie auf die Bildlaufleisten klicken oder das Mausrad drehen. Bildlaufleisten können die Position der aktuellen Ansicht innerhalb des Inhaltsbereichs angeben (durch Verschieben mit Toucheingabe wird eine ähnliche Benutzeroberfläche angezeigt).

Klicken Sie mit der rechten Maustaste, um auszuwählen und auszuführen.

Klicken Sie mit der rechten Maustaste, um die Navigationsleiste (sofern verfügbar) und die App-Leiste 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.

Anmerkung Klicken Sie mit der rechten Maustaste, um ein Kontextmenü anzuzeigen, wenn Auswahl- oder App-Leistenbefehle keine geeigneten Benutzeroberflächenverhalten aufweisen. Es wird jedoch dringend empfohlen, die App-Leiste für alle Befehlsverhaltensweisen zu verwenden.
 

Benutzeroberflächenbefehle zum Zoomen

Zeigen Sie UI-Befehle in der App-Leiste an (z. B. +und -), oder drücken Sie STRG, und drehen Sie das Mausrad, um Zusammendrücken und Gesten zum Zoomen zu emulieren.

Benutzeroberflächenbefehle zum Drehen

Zeigen Sie UI-Befehle in der App-Leiste an, oder drücken Sie Strg+Umschalt und drehen Sie das Mausrad, um die Drehbewegung beim Drehen zu emulieren. Drehen Sie das Gerät selbst, um den gesamten Bildschirm zu drehen.

Klicken Sie mit der linken Maustaste, und ziehen Sie, um die Anordnung neu anzuordnen.

Klicken Sie mit der linken Maustaste, und ziehen Sie ein Element, um es zu verschieben.

Klicken Sie mit der linken Maustaste, und ziehen Sie, um Text auszuwählen.

Klicken Sie mit der linken Maustaste in auswählbarem Text, und ziehen Sie, um ihn auszuwählen. Doppelklicken Sie, um ein Wort auszuwählen.

Mauseingabeereignisse

Die meisten Mauseingaben können über die gängigen Routingeingabeereignisse verarbeitet werden, die von allen UIElement-Objekten unterstützt werden. Dazu gehören:

Sie können jedoch die spezifischen Funktionen jedes Geräts (z. B. Mausradereignisse) mithilfe der Zeiger-, Gestik- und Manipulationsereignisse in Windows.UI.Input nutzen.

Proben: Weitere Informationen finden Sie in unserem BasicInput-Beispiel für .

Richtlinien für visuelles Feedback

  • Wenn eine Maus erkannt wird (durch Bewegungs- oder Hoverereignisse), zeigen Sie mausspezifische UI an, um die funktionalität anzuzeigen, die vom Element verfügbar gemacht wird. Wenn sich die Maus nicht für eine bestimmte Zeit bewegt oder der Benutzer eine Touchinteraktion initiiert, blenden Sie die Maus-UI schrittweise aus. Dadurch bleibt die Benutzeroberfläche sauber und aufgeräumt.
  • Verwenden Sie den Cursor nicht für Hover-Effekte. Das vom Element bereitgestellte Feedback reicht aus (siehe unten unter "Cursor").
  • Zeigen Sie kein visuelles Feedback an, wenn ein Element keine Interaktion unterstützt (z. B. statischer Text).
  • Verwenden Sie keine Fokusrechtecke mit Mausinteraktionen. Reservieren Sie diese für Tastaturinteraktionen.
  • Gleichzeitiges visuelles Feedback für alle Elemente anzeigen, die dasselbe Eingabeziel darstellen.
  • Stellen Sie Schaltflächen (z. B. +und -) bereit, um touchbasierte Manipulationen wie Verschieben, Drehen, Zoomen usw. zu emulieren.

Allgemeine Anleitungen zu visuellem Feedback finden Sie in den Richtlinien für visuelles Feedback.

Cursor

Für einen Mauszeiger steht ein Satz von Standardcursorn zur Verfügung. Diese werden verwendet, um die primäre Aktion eines Elements anzugeben.

Jedem Standardcursor ist ein entsprechendes Standardbild zugeordnet. Der Benutzer oder eine App kann das Standardbild, das jedem Standardcursor zugeordnet ist, jederzeit ersetzen. Geben Sie ein Cursorbild über die PointerCursor-Funktion an.

Wenn Sie den Mauszeiger anpassen müssen:

  • Verwenden Sie immer den Pfeilcursor (Pfeilcursor) für klickbare Elemente. Verwenden Sie den Zeigercursor (Zeigehandcursor) nicht für Verknüpfungen oder andere interaktive Elemente. Verwenden Sie stattdessen Hovereffekte (weiter oben beschrieben).
  • Verwenden Sie den Textcursor (Textcursor) für auswählbaren Text.
  • Verwenden Sie den Bewegungscursor (Bewegungscursor), wenn Verschieben die primäre Aktion ist (z. B. Ziehen oder Zuschneiden). Verwenden Sie nicht den Verschiebecursor für Elemente, bei denen die primäre Aktion die Navigation ist (z. B. Startkacheln).
  • Verwenden Sie die horizontalen, vertikalen und diagonalen Größenänderungscursor (vertikaler Größenänderungscursor, horizontaler Größenänderungscursor, diagonaler Größenänderungscursor (unten links, oben rechts), diagonaler Größenänderungscursor (oben links, unten rechts)), wenn die Größe eines Objekts geändert werden kann.
  • Verwenden Sie beim Verschieben von Inhalten innerhalb eines festen Zeichenbereichs (z. B. einer Karte) die Greifhand-Cursor (Greifhand-Cursor (geöffnet) und Greifhand-Cursor (geschlossen)).

Beispiele

  • Last updated on