Language: HTML | XAML

Reaktion auf Touchpadinteraktionen (HTML)

Applies to Windows only

Gestalten und erstellen Sie Windows Store-Apps, mit denen Benutzer über ein Touchpad interagieren können.

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

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 die Behandlung von DOM-Zeigerereignissen

Beispiel für HTML-Bildlauf, -Verschiebung und -Zoomen

Eingabe: Beispiel Manipulationen und Gesten (JavaScript)

Eingabe: Beispiel für instanziierbare Gesten

Übersicht

Ein Touchpad vereint die indirekte Multitoucheingabe mit der Präzisionseingabe eines Zeigergeräts, z. B einer Maus. Dadurch ist das Touchpad sowohl für die berührungsoptimierte Windows 8.1-Benutzeroberfläche als auch die kleineren Ziele der Produktivitäts-Apps und der Desktopumgebung geeignet. Optimieren Sie das Design Ihrer Windows Store-Apps für die Toucheingabe, und freuen Sie sich über die standardmäßige Unterstützung von Touchpads.

Aufgrund der Konvergenz der verschiedenen von Touchpads unterstützten Interaktionsmöglichkeiten wird empfohlen, zusätzlich zur integrierten Unterstützung der Toucheingabe der Mauseingabe ähnelnde UI-Befehle bereitzustellen. Verwenden Sie beispielsweise Zurück- und Weiter-Schaltflächen, mit denen Benutzer sowohl Inhaltsseiten durchblättern als auch Inhalte durch Schwenken fokussieren können.

Windows 8.1 unterstützt eine Reihe bekannter Gesten, die für die Eingabe per Touchpad optimiert sind. Die in diesem Thema beschriebenen Gesten und Richtlinien helfen Ihnen dabei, die Unterstützung der Touchpad-Eingabe nahtlos und mit minimalem Programmieraufwand in Ihre App zu integrieren.

Richtlinien für die Benutzeroberfläche zur Unterstützung von Touchpad-Interaktionen

Hier finden Sie einige Richtlinien für die Unterstützung von Touchpad-Interaktionen.

Die Windows 8.1-Sprache für Eingaben per Touchpad

Windows 8.1 bietet einen präzisen Satz von Touchpad-Interaktionen, die durchgängig im ganzen System verwendet werden. Indem Sie Ihre App für die Finger- und Mauseingabe optimieren, sorgen Sie dafür, dass sich Benutzer sofort in Ihrer App zurechtfinden. So erleichtern Sie Benutzern den Einstieg und die Verwendung Ihrer App.

BenennungBeschreibung

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.

Tippen mit einem Finger für primäre Aktionen

Tippen Sie mit einem Finger auf ein Element, um dessen primäre Aktion aufzurufen (z. B. das Starten einer App oder das Ausführen eines Befehls).

Tippen mit zwei Fingern für einen Rechtsklick

Tippen Sie mit zwei Fingern gleichzeitig, um die App-Leiste mit globalen Befehlen anzuzeigen. Oder tippen Sie mit zwei Fingern auf ein Element, um es auszuwählen und die App-Leiste mit Kontextbefehlen anzuzeigen.

Hinweis  Tippen Sie mit zwei Fingern, um ein Kontextmenü anzuzeigen, wenn die in der Auswahl oder der App-Leiste verfügbaren Befehle nicht das gewünschte Benutzeroberflächenverhalten ermöglichen. Wir empfehlen jedoch ausdrücklich, die App-Leiste für alle Befehlsverhalten zu verwenden.

Ziehen mit zwei Fingern zum Verschieben

Das Ziehen wird in erster Linie für Verschiebungen verwendet, kann jedoch auch zum Schieben, Zeichnen oder Schreiben genutzt werden.

Zusammendrücken und Aufziehen zum Zoomen

Die Zusammendrück- und Aufziehbewegungen werden häufig zum Anpassen der Größe und für den semantischen Zoom verwendet.

Drücken mit einem Finger und Ziehen zum Neuanordnen

Ziehen eines Elements.

Drücken mit einem Finger und Ziehen zum Auswählen von Text

Drücken Sie in auswählbarem Text, und ziehen Sie, um ihn auszuwählen. Doppeltippen Sie, um ein Wort auszuwählen.

Ränder für Systembefehle

Durch eine Streifbewegung vom rechten Bildschirmrand (bzw. vom linken Bildschirmrand bei Rechts-nach-links-Layouts) werden die Charms mit den Systembefehlen eingeblendet.

Durch eine Streifbewegung vom linken Bildschirmrand (bzw. vom rechten Bildschirmrand bei Rechts-nach-links-Layouts) wird eine Liste der ausgeführten Apps angezeigt.

Bereich für Links- und Rechtsklicks

Emulieren Sie die Funktionalität der linken und rechten Maustaste.

 

Hardware

Überprüfen Sie die Funktionen des Mausgeräts (MouseCapabilities), um festzustellen, auf welche Elemente der Benutzeroberfläche Ihrer App die Touchpad-Hardware direkt zugreifen kann. Es wird empfohlen, UI für die Touch- und die Mauseingabe zur Verfügung zu stellen.

Weitere Informationen zum Überprüfen von Gerätefunktionen finden Sie unter Schnellstart: Erkennen von Zeigergeräten.

Visuelles Feedback

  • Wenn ein Touchpad-Cursor 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 der Touchpad-Cursor für eine bestimmte Zeit nicht bewegt wird oder der Benutzer eine Toucheingabeinteraktion auslöst, blenden Sie die für Touchpad-Interaktionen 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 Interaktionen per Touchpad. Diese sind ausschließlich für Tastaturinteraktionen vorgesehen.
  • Zeigen Sie für alle Elemente, die das gleiche Eingabeziel darstellen, das gleiche visuelle Feedback an.

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

Cursor

Für einen Touchpad-Zeiger 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 Touchpad-Cursor anpassen müssen:

  • Verwenden Sie immer den Pfeilcursor (Pfeilcursor) für klickbare Elemente. Verwenden Sie den Zeigefingercursor (Zeigefingercursor) nicht für Links oder andere interaktive Elemente. Verwenden Sie stattdessen Zeigeeffekte (wie bereits beschrieben).
  • Verwenden Sie den Textcursor (Textcursor) für auswählbaren Text.
  • Verwenden Sie den Bewegungscursor (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 (Cursor für vertikale Größenänderung, Cursor für horizontale Größenänderung, Cursor für diagonale Größenänderung (unten links, oben rechts), Cursor für diagonale Größenänderung (oben links, unten rechts)), wenn die Größe eines Objekts geändert werden kann.
  • Verwenden Sie das Hand-Werkzeug (Hand-Werkzeug (offen), Hand-Werkzeug (geschlossen)) beim Schwenken von Inhalt innerhalb einer Canvas (wie etwa einer Karte).

Verwandte Themen

Konzept
Reaktion auf Benutzerinteraktionen

 

 

Anzeigen:
© 2014 Microsoft