Richtlinien für Zielbestimmung
In diesem Thema wird die Verwendung von Kontaktgeometrie für die Bestimmung von Fingereingabezielen auf der neuen Windows-UI beschrieben. Außerdem erhalten Sie Richtlinien für die Gestaltung der Benutzeroberfläche, die Sie berücksichtigen sollten, wenn Sie diese neuen Zielbestimmungsmechanismen in Windows Store-Apps verwenden.
Sehen Sie dieses Feature in unserer Reihe App-Features von A bis Z in Aktion.: Benutzerinteraktion: Toucheingabe... und vieles mehr
Übersicht über die Zielbestimmung durch Kontaktgeometrie
Die Zielbestimmung für Fingereingaben in Windows 8 verwendet den vollständigen Kontaktbereich eines jeden Fingers, der durch einen Fingereingabedigitzer erkannt wird. Die größere und komplexere Menge an Eingabedaten, die vom Digitizer gemeldet wird, wird verwendet, um die Genauigkeit bei der Ermittlung des durch den Benutzer (höchstwahrscheinlich) beabsichtigten Ziels zu erhöhen. Dadurch wird die Benutzerfreundlichkeit erheblich erhöht, da die Genauigkeit verbessert wird und der Benutzer Zuversicht bei seinen Fingerinteraktionen gewinnt.
In den folgenden Empfehlungen wird beschrieben, wie Sie eine Anwendung für die Zielbestimmung bei der Fingereingabe optimieren.
Maße und Skalierung
Um die Konsistenz bei unterschiedlichen Bildschirmgrößen und Pixeldichten zu wahren, sind alle Zielgrößen in physischen Einheiten (Millimeter) angegeben. Physische Einheiten können mit der folgenden Gleichung in Pixel konvertiert werden:
Pixel = Pixeldichte × Maße
Die folgenden Beispiele verwenden diese Formel, um eine Zielgröße von 9 mm auf einem Display mit 135 PPI (Pixel Per Inch, Pixel pro Zoll) und einem einfachen Skalierungsplateau in die Pixelgröße umrechnen:
Pixel: 135 PPI × 9 mm
Pixel = 135 PPI × (0,03937 Zoll pro mm × 9 mm)
Pixel = 135 PPI × 0,35433 Zoll
Pixel = 48 Pixel
Dieses Ergebnis muss an jedes der im System definierten Skalierungsplateaus angepasst werden.
Schwellenwerte
Entfernungs- und Zeitschwellenwerte können verwendet werden, um das Ergebnis einer Interaktion zu ermitteln.
Wenn zum Beispiel ein Aufsetzen erkannt wird, wird ein Tippen registriert, wenn das Objekt in weniger als 2,7 mm Entfernung vom Aufsetzpunkt gezogen wird und die Berührung innerhalb von 0,1 Sekunden oder kürzer vom Aufsetzen aufgehoben wird. Wenn der Finger über den Schwellenwert von 2,7 mm hinaus bewegt wird, wird das Objekt gezogen und entweder ausgewählt oder verschoben (weitere Informationen finden Sie unter Richtlinien für Querziehen). Wenn Sie abhängig von Ihrer App den Finger länger als 0,1 Sekunde gedrückt halten, kann dadurch die Ausführung einer Interaktion mit automatischem Einblenden durch das System ausgelöst werden (weitere Informationen finden Sie unter Richtlinien für visuelles Feedback).
Zielgrößen
Es gibt keine definitiven Empfehlungen für die Größe eines Ziels oder für die Platzierung innerhalb Ihrer App. Die Größe und der Zielbereich eines Objekts hängen von verschiedenen Faktoren ab, beispielsweise von den Benutzeroberflächenszenarien und vom Kontext der Interaktion.
Im folgenden Diagramm wird gezeigt, dass die Größe eines Ziels in der Regel eine Kombination aus visuellem Ziel, tatsächlicher Zielgröße und dem Abstand zwischen dem tatsächlichen Ziel und den anderen potenziellen Zielen ist.
In der folgenden Tabelle werden die Mindestgrößen und die empfohlenen Größen für alle Komponenten eines Fingereingabeziels aufgeführt.
Zielkomponente | Mindestgröße | Empfohlene Größe |
---|---|---|
Abstand | 2 mm | Nicht zutreffend |
Visuelle Zielgröße | < 60 % der tatsächlichen Größe | 90 -100 % der tatsächlichen Größe |
Tatsächliche Zielgröße | 9 x 9 mm (48 x 48 px @ 1x)
Für Elemente, die kleiner sind als in den Richtlinien für die Gestaltung der Benutzeroberfläche empfohlen, sollte der Abstand zwischen dem Mittelpunkt eines Elements und dem Mittelpunkt des anderen Elements mindestens 9 mm betragen. |
Nicht zutreffend |
Gesamtzielgröße | 11 x 11 mm (ca. 60 px: drei 20-px-Rastereinheiten @ 1x) | 13,5 x 13,5 mm (72 x 72 px @ 1x)
Dies impliziert, dass die Größe des tatsächlichen Ziels und des Abstands zusammen größer sein muss als die jeweiligen Mindestgrößen. |
Sie können diese Empfehlungen für die Zielgröße an die Anforderungen des jeweiligen Szenarios anpassen. In die Empfehlungen sind unter anderem die folgenden Überlegungen eingeflossen:
- Häufigkeit der Fingereingaben: Erwägen Sie, Ziele, die wiederholt bzw. häufig berührt werden, größer als die Mindestgröße auszulegen.
- Folgen von Fehlern: Ziele, bei denen die versehentliche Berührung schwerwiegende Folgen hat, sollten einen größeren Abstand haben und weiter vom Rand des Inhaltsbereichs entfernt platziert werden. Dies gilt insbesondere für Ziele, die häufig berührt werden.
- Position im Inhaltsbereich
- Formfaktor und Bildschirmgröße
- Fingerhaltung
- Fingereingabevisualisierungen
- Hardware und Fingereingabe-Digitalisierungsgeräte
Unterstützung bei der Zielbestimmung
Windows unterstützt die Zielbestimmung für Szenarien, in denen die hier genannten Empfehlungen für Mindestgröße und Abstand nicht anwendbar sind. Dies gilt beispielsweise für Hyperlinks auf einer Webseite, Kalendersteuerelemente, Dropdownlisten und Kombinationsfelder oder für eine Textauswahl.
Diese Verbesserungen der Zielbestimmungsplattform und des Verhaltens der Benutzeroberfläche bewirken in Kombination mit visuellem Feedback (Mehrdeutigkeitsvermeidungs-UI) mehr Genauigkeit und Sicherheit für die Benutzer. Weitere Informationen finden Sie unter Richtlinien für visuelles Feedback.
Wenn ein berührbares Element kleiner als die empfohlene Mindestzielgröße sein muss, können Sie mit den folgenden Techniken die dadurch entstehenden Probleme bei der Zielbestimmung minimieren.
Anzeigen einer Verbindungslinie
Durch Anzeigen einer Verbindungslinie (zwischen einem Kontaktpunkt und dem Begrenzungsrechteck eines Objekts) können Sie Benutzer visuell darauf hinweisen, dass sie mit einem Objekt verbunden sind und mit diesem interagieren, obwohl kein direkter Kontakt zwischen Eingabekontakt und Objekt besteht. Dies ist in folgenden Situationen möglich:
- Ein Berührungskontakt wurde zuerst innerhalb eines Näherungsschwellenwerts für ein Objekt erkannt, und das Objekt wurde als wahrscheinlichstes Ziel des Kontakts identifiziert.
- Ein Berührungskontakt wurde von einem Objekt wegbewegt, aber der Kontakt befindet sich noch innerhalb eines Näherungsschwellenwerts.
Dieses Feature wird für Entwickler von Windows Store-Apps, die JavaScript verwenden, nicht verfügbar gemacht.
Scrubbing
Beim Scrubbing wird eine beliebige Stelle in einem Feld mit Zielen berührt, und das gewünschte Ziel wird durch Ziehen ausgewählt. Der Finger wird dabei erst gehoben, wenn er sich auf dem gewünschten Ziel befindet. Dies wird auch als "Loslassaktivierung" bezeichnet, bei der das Objekt aktiviert wird, das zuletzt berührt wurde, als der Finger vom Bildschirm gehoben wurde.
Halten Sie sich an die folgenden Richtlinien, wenn Sie Scrubbinginteraktionen designen:
- Scrubbing wird in Verbindung mit der Mehrdeutigkeitsvermeidungs-UI verwendet. Weitere Informationen finden Sie unter Richtlinien für visuelles Feedback.
- Die empfohlene Mindestgröße für ein Scrubbing-Fingereingabeziel beträgt 20 px (3,75 mm @ 1x Größe).
- Scrubbing hat Vorrang, wenn es auf einer Oberfläche ausgeführt wird, die Verschieben unterstützt (beispielsweise eine Webseite).
- Scrubbingziele sollten nah beieinander liegen.
- Eine Aktion wird abgebrochen, wenn Benutzer einen Finger vom Scrubbingziel wegziehen.
- Das Anzeigen einer Verbindungslinie zu einem Scrubbingziel wird angegeben, wenn die vom Ziel ausgeführten Aktionen nicht destruktiv sind (beispielsweise das Wechseln zwischen Daten in einem Kalender).
- Das Anzeigen von Verbindungslinien wird in einer einzigen Richtung angegeben: horizontal oder vertikal.
Verwandte Themen
Konzept
Richtlinien für häufige Benutzerinteraktionen
Design für Interaktion per Fingereingabe
Lernprogramm (Windows Store-Apps mit JavaScript)
Schnellstart: DOM-Gesten und -Manipulationen
Schnellstart: Statische Gesten
Schnellstart: Manipulationsgesten
Lernprogramm (Windows Store-Apps mit C#/VB/C++ und XAML)
Lernprogramm (Windows Store-Apps mit C++ und DirectX)
Reagieren auf Fingereingaben (DirectX und C++)
Beispiele (DOM)
Beispiel für HTML-Bildlauf, -Verschiebung und -Zoomen
Eingabe: Beispiel für instanziierbare Gesten
Beispiele (Windows Store-App-APIs)
Eingabe: Beispiel Manipulationen und Gesten (JavaScript)
Eingabe: Beispiel für Windows 8-Bewegungen
Eingabe: Beispiel XAML-Benutzereingabeereignisse
Beispiel für XAML-Bildlauf, -Verschiebung und -Zoomen
Beispiele (DirectX)
Beispiel für die DirectX-Fingereingabe
Eingabe: Beispiel Manipulationen und Gesten (C++)
Eingabe: Beispiel Fingereingabe-Treffertest
Referenz