Ontwerprichtlijnen voor touchpad

Ontwerp uw app zodat gebruikers ermee kunnen communiceren via een touchpad. Een touchpad combineert zowel indirecte multi-touch-invoer met de precisie-invoer van een aanwijsapparaat, zoals een muis. Deze combinatie maakt de touchpad geschikt voor zowel een gebruikersinterface die is geoptimaliseerd voor aanraakbediening als de kleinere doelen van productiviteits-apps.

 

Touchpad-interacties vereisen drie dingen:

• Een standaard touchpad of een Windows Precision Touchpad.

  Precisie-touchpads zijn geoptimaliseerd voor Windows-app-apparaten. Ze stellen het systeem in staat om bepaalde aspecten van de touchpad-ervaring systeemeigen af te handelen, zoals vingertracking en palmdetectie, voor een consistentere ervaring op verschillende apparaten.

• Het directe contact van een of meer vingers op de touchpad.

• Beweging van de contactcontacten (of gebrek daarvan, op basis van een tijdsdrempel).

De invoergegevens van de touchpad-sensor kunnen het volgende zijn:

• Geïnterpreteerd als een fysiek gebaar voor directe manipulatie van een of meer UI-elementen (zoals pannen, draaien, vergroten/verkleinen, verplaatsen). Interactie met een element daarentegen via het eigenschappenvenster of een ander dialoogvenster wordt beschouwd als indirecte manipulatie.
• Wordt erkend als een alternatief invoermiddel, zoals muis of pen.
• Wordt gebruikt om aspecten van andere invoermethoden aan te vullen of te wijzigen, zoals het smuden van een pennenstreek die met een pen is getekend.

Een touchpad combineert indirecte multi-touch-invoer met de precisieinvoer van een aanwijsapparaat, zoals een muis. Deze combinatie maakt de touchpad geschikt voor zowel de gebruikersinterface die geschikt is voor aanraakbediening als de doorgaans kleinere doelen van productiviteits-apps en de bureaubladomgeving. Optimaliseer uw Windows-app-ontwerp voor aanraakinvoer en ontvang standaard ondersteuning voor touchpads.

Vanwege de convergentie van interactie-ervaringen die worden ondersteund door touchpads, raden we u aan om de pointerEntered-gebeurtenis te gebruiken om ui-opdrachten in de muisstijl te bieden, naast de ingebouwde ondersteuning voor aanraakinvoer. Gebruik bijvoorbeeld vorige en volgende knoppen om gebruikers door pagina's met inhoud te laten bladeren en door de inhoud te pannen.

De bewegingen en richtlijnen die in dit onderwerp worden besproken, kunnen helpen ervoor te zorgen dat uw app naadloos en met minimale code ondersteuning biedt voor touchpad-invoer.

De touchpad-taal

Een beknopte set touchpad-interacties wordt consistent gebruikt in het hele systeem. Optimaliseer uw app voor aanraak- en muisinvoer en deze taal maakt uw app onmiddellijk vertrouwd voor uw gebruikers, waardoor uw app gemakkelijker te leren en te gebruiken is.

Gebruikers kunnen veel meer Precision Touchpad-bewegingen en interactiegedrag instellen dan voor een standaard touchpad. Deze twee afbeeldingen tonen de verschillende pagina's met touchpad-instellingen van Instellingen > Apparaten > Muis & touchpad voor een standaard touchpad, en een Precision Touchpad, respectievelijk.

^{Standaard\ touchpad\ instellingen}

^{Windows\ Precision\ Touchpad\-instellingen}

Hier volgen enkele voorbeelden van bewegingen die zijn geoptimaliseerd voor touchpads voor het uitvoeren van algemene taken.

Termijn	Description
Tikken met drie vingers	Gebruikersvoorkeur om te zoeken met Cortana of actiecentrum weer te geven.
Drie-vingerbeweging	Gebruikersvoorkeur om de taakweergave van het virtuele bureaublad te openen, bureaublad weer te geven of te schakelen tussen geopende apps.
Eén vinger tikken voor primaire actie	Gebruik één vinger om op een element te tikken en de primaire actie aan te roepen (zoals het starten van een app of het uitvoeren van een opdracht).
Tik met twee vingers om met de rechtermuisknop te klikken	Tik met twee vingers tegelijk op een element om het te selecteren en contextuele opdrachten weer te geven.
Schuif met twee vingers om het beeld te verplaatsen	Dia wordt voornamelijk gebruikt voor panninginteracties, maar kan ook worden gebruikt voor het verplaatsen, tekenen of schrijven.
Knijpen en uitrekken om te zoomen	De knijp- en stretchbewegingen worden vaak gebruikt voor het wijzigen van de grootte en voor semantisch zoomen.
Eén vinger drukken en schuiven om de volgorde te herschiknen	Sleep een element.
Druk en veeg met één vinger om tekst te selecteren	Druk binnen selecteerbare tekst en schuif om het te selecteren. Dubbeltik om een woord te selecteren.
Klikgebied links en rechts	De functionaliteit van de linker- en rechterknop van een muisapparaat emuleren.

 

Apparatuur

Voer een query uit op de mogelijkheden van het muisapparaat (MouseCapabilities) om te bepalen welke aspecten van de gebruikersinterface van uw app de touchpad-hardware rechtstreeks kunnen openen. We raden u aan de gebruikersinterface te bieden voor zowel aanraak- als muisinvoer.

Zie Invoerapparaten identificeren voor meer informatie over het uitvoeren van query's op apparaatmogelijkheden.

Visuele feedback

• Wanneer een touchpad-cursor wordt gedetecteerd (door verplaatsings- of aanwijsgebeurtenissen), geeft u de muisspecifieke gebruikersinterface weer om de functionaliteit aan te geven die door het element wordt weergegeven. Als de cursor van de touchpad gedurende een bepaalde tijd niet wordt verplaatst of als de gebruiker een aanraakinteractie start, laat u de touchpad-gebruikersinterface geleidelijk vervagen. Hierdoor blijft de gebruikersinterface schoon en overzichtelijk.
• Gebruik de cursor niet voor hover-feedback, de feedback van het element is voldoende (zie het gedeelte Cursors hieronder).
• Geen visuele feedback weergeven als een element geen ondersteuning biedt voor interactie (zoals statische tekst).
• Gebruik geen focusrechthoeken met touchpad-interacties. Houd deze gereserveerd voor interacties met het toetsenbord.
• Visuele feedback gelijktijdig weergeven voor alle elementen die hetzelfde invoerdoel vertegenwoordigen.

Zie Richtlijnen voor visuele feedback voor meer algemene richtlijnen over visuele feedback.

Cursors

Er is een set standaardcursors beschikbaar voor een touchpad-aanwijzer. Deze worden gebruikt om de primaire actie van een element aan te geven.

Aan elke standaardcursor is een bijbehorende standaardafbeelding gekoppeld. De gebruiker of een app kan de standaardafbeelding die is gekoppeld aan elke standaardcursor op elk gewenst moment vervangen. UWP-apps geven een cursorafbeelding op via de functie PointerCursor .

Als u de muiscursor wilt aanpassen:

• Gebruik altijd de pijlcursor () voor klikbare elementen. gebruik de wijzende hand cursor () niet voor koppelingen of andere interactieve elementen. Gebruik in plaats daarvan hover-effecten (eerder beschreven).
• Gebruik de tekstcursor () voor selecteerbare tekst.
• Gebruik de verplaatscursor () wanneer verplaatsen de primaire actie is (zoals bij slepen of croppen). Gebruik de verplaatsingscursor niet voor elementen waarbij navigatie de primaire actie is (zoals Starttegels).
• Gebruik de horizontale, verticale en diagonale cursorgrootte (, , , ), wanneer een object kan worden aangepast.
• Gebruik de grijpende handcursors (, ) bij het verschuiven van inhoud binnen een vast canvas (zoals een kaart).

Verwante artikelen

• Invoer van handlepointer
• Invoerapparaten identificeren

Samples

• Voorbeeld van basisinvoer
• Voorbeeld van invoer met lage latentie
• Voorbeeld van gebruikersinteractiemodus
• voorbeeldvoorbeeld van Focusvisuals

Archiefvoorbeelden

• Invoer: Voorbeeld van apparaatmogelijkheden
• Invoer: voorbeeld van XAML-gebruikersinvoergebeurtenissen
• Voorbeeld van XAML-scrollen, -pannen en -zoomen
• Invoer: Bewegingen en manipulaties met GestureRecognizer