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 maus- und toucheingaben unterschiedlich sind, ist die Möglichkeit, die direkte Manipulation von UI-Elementen durch physische Gesten, die direkt auf diesen Objekten ausgeführt werden , genauer zu emulieren (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 Beschreibung

Zeigen Sie mit der Maus, um zu lernen

Zeigen Sie mit der Maus auf ein Element, um detailliertere Informationen anzuzeigen oder visuelle Elemente anzuzeigen (z. B. eine QuickInfo), ohne eine Aktion zu verwenden.

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 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 den Befehl auszuwählen und zu befehlen.

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.

Note Right-click to display a context menu if selection or app bar commands are not appropriate UI behaviors. 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 zum 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.

Beispiele: Weitere Informationen finden Sie in unserem BasicInput-Beispiel.

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 übersichtlich.
  • Verwenden Sie den Cursor nicht zum Daraufzeigen von Feedback, das vom Element bereitgestellte Feedback reicht aus (siehe Cursor unten).
  • 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 Tastatur-Interaktionen.
  • Zeigen Sie visuelles Feedback gleichzeitig für alle Elemente an, die das gleiche 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 Standard-Cursor ist ein entsprechendes Standard-Bild zugeordnet. Der Benutzer oder eine App kann das Standard-Bild, das jedem Standard-Cursor zugeordnet ist, jederzeit ersetzen. Geben Sie ein Cursorbild über die PointerCursor-Funktion an.

Wenn Sie den Mauszeiger anpassen müssen:

  • Verwenden Sie immer den Arrow-Cursor (Pfeilcursor) für klickbare Elemente. Verwenden Sie den Cursor der Zeigehand (Zeigercursor) nicht für Links oder andere interaktive Elemente. Verwenden Sie stattdessen Hover-Effekte (weiter oben beschrieben).
  • Verwenden Sie den Text-Cursor (Textcursor) für auswählbaren Text.
  • Verwenden Sie den Bewegungs-Cursor (Cursor verschieben) wenn die primäre Aktion das Verschieben ist (z.B. Ziehen oder Zuschneiden). Verwenden Sie nicht den Bewegungs-Cursor für Elemente, bei denen die primäre Aktion die Navigation ist (z.B. Startkacheln).
  • Verwenden Sie die horizontalen, vertikalen und diagonalen Größenänderungs-Cursor (Cursor für vertikale Größenänderung, Cursor für horizontale Größenänderung, Diagonale Größenänderungscursor (unten links, oben rechts), Diagonale Größenänderungscursor (oben links, unten rechts)), wenn ein Objekt in der Größe verändert werden kann.
  • Verwenden Sie den Cursor für die Greifhand (Handcursor (geöffnet), Handcursor (geschlossen)), wenn Sie den Inhalt innerhalb eines festen Kollaborationsbereichs (z.B. einer Karte) schwenken.

Beispiele