Richtlijnen voor visuele feedback

Gebruik visuele feedback om gebruikers weer te geven wanneer hun interacties worden gedetecteerd, geïnterpreteerd en verwerkt. Visuele feedback kan gebruikers helpen door interactie aan te moedigen. Het geeft het succes van een interactie aan, waardoor het gevoel van controle van de gebruiker wordt verbeterd. Het geeft ook de systeemstatus door en vermindert fouten.

Belangrijke API's: Windows.Devices.Input, Windows.UI.Input, Windows.UI.Core

Aanbevelingen

• Probeer wijzigingen van een besturingssjabloon te beperken tot de wijzigingen die rechtstreeks zijn gerelateerd aan uw ontwerpintentie, omdat uitgebreide wijzigingen van invloed kunnen zijn op de prestaties en toegankelijkheid van zowel het besturingselement als uw toepassing.
  • Zie XAML-stijlen voor meer informatie over het aanpassen van de eigenschappen van een besturingselement, inclusief eigenschappen van visuele status.
  • Zie de Klasse UserControl voor meer informatie over het aanbrengen van wijzigingen in een besturingselementsjabloon
  • Overweeg om uw eigen aangepaste, gesjabloneerde besturingselement te maken als u aanzienlijke wijzigingen moet aanbrengen in een besturingselementsjabloon. Zie het voorbeeld van aangepast besturingselement bewerken voor een voorbeeld van een aangepast sjabloonbesturingselement.
• Gebruik geen aanraakvisualisaties in situaties waarin ze het gebruik van de app kunnen verstoren. Zie ShowGestureFeedback voor meer informatie.
• Geef geen feedback weer, tenzij dit absoluut noodzakelijk is. Houd de gebruikersinterface schoon en overzichtelijk door geen visuele feedback weer te geven, tenzij u waarde toevoegt die elders niet beschikbaar is.
• Probeer het visuele feedbackgedrag van de ingebouwde Windows-gebaren niet drastisch aan te passen, omdat dit een inconsistente en verwarrende gebruikerservaring kan creëren.

Aanvullende gebruiksrichtlijnen

Contactvisualisaties zijn met name essentieel voor interactie met aanrakingen die nauwkeurigheid en precisie vereisen. Uw app moet bijvoorbeeld duidelijk de locatie van een tik aangeven om een gebruiker te laten weten of ze hun doel hebben gemist, hoeveel ze het hebben gemist en welke aanpassingen ze moeten aanbrengen.

Als u de standaardbesturingselementen voor het XAML-platform gebruikt, zorgt u ervoor dat uw app correct werkt op alle apparaten en in alle invoersituaties. Als uw app aangepaste interacties bevat waarvoor aangepaste feedback is vereist, moet u ervoor zorgen dat de feedback geschikt is, invoerapparaten omvat en een gebruiker niet afleidt van zijn of haar taak. Dit kan een specifiek probleem zijn in game- of teken-apps, waarbij de visuele feedback mogelijk conflicteert met of kritieke gebruikersinterfaces onzichtbaar maakt.

Belangrijk

Het is niet raadzaam om het interactiegedrag van de ingebouwde gebaren te wijzigen.

Feedback op verschillende apparaten

Visuele feedback is over het algemeen afhankelijk van het invoerapparaat (aanraakscherm, touchpad, muis, pen/stylus, toetsenbord, enzovoort). De ingebouwde feedback voor een muis omvat bijvoorbeeld meestal het verplaatsen en wijzigen van de cursor, terwijl voor aanraking en pen contactvisualisaties zijn vereist, en toetsenbordinvoer en navigatie wordt gebruikgemaakt van focusrechthoeken en markeringen.

Gebruik ShowGestureFeedback om feedbackgedrag in te stellen voor de platformbewegingen.

Als u de gebruikersinterface van feedback wilt aanpassen, moet u feedback geven die ondersteuning biedt en geschikt is voor alle invoermodi.

Hier volgen enkele voorbeelden van ingebouwde visualisaties van contactpersonen in Windows.

Aanraakvisualisatie	Visualisatie van muis/touchpad	Penvisualisatie	Toetsenbordvisualisatie

Visuals met een focus op hoge zichtbaarheid

Alle Windows-apps hebben een meer gedefinieerde focusvisual rond interactieve bedieningselementen in de toepassing. Deze nieuwe focusvisuals zijn volledig aanpasbaar en kunnen indien nodig worden uitgeschakeld.

Voor de 10-voetervaring die typisch is voor Xbox- en tv-gebruik, ondersteunt Windows Reveal focus, een verlichtingseffect dat de rand van focusbare elementen, zoals een knop, animeert wanneer ze door gamepad of toetsenbordinvoer de focus krijgen.

Kleurenbranding & op maat maken

Randeigenschappen

De focusvisuals met hoge zichtbaarheid bestaan uit twee delen: de primaire rand en de secundaire rand. De primaire rand is 2px dik en loopt rond de buitenkant van de secundaire rand. De secundaire rand is 1 pixels dik en loopt rond de binnenkant van de primaire rand.

Als u de dikte van het randtype (primair of secundair) wilt wijzigen, gebruikt u respectievelijk FocusVisualPrimaryThickness of FocusVisualSecondaryThickness:

<Slider Width="200" FocusVisualPrimaryThickness="5" FocusVisualSecondaryThickness="2"/>

De marge is een eigenschap van het type Dikte en daarom kan de marge worden aangepast om alleen aan bepaalde zijden van het besturingselement weer te geven. Zie hieronder:

De marge is de ruimte tussen de visuele grenzen van het besturingselement en het begin van de secundaire rand van de focusvisuals. De standaardmarge is 1 pixel verwijderd van de controlegrenzen. U kunt deze marge per controle bewerken door de eigenschap FocusVisualMargin te wijzigen:

<Slider Width="200" FocusVisualMargin="-5"/>

Een negatieve marge duwt de rand weg van het midden van het besturingselement en een positieve marge verplaatst de rand dichter bij het midden van het besturingselement.

Als u de focusvisuals op het besturingselement volledig wilt uitschakelen, schakelt u eenvoudig UseSystemFocusVisuals uit.

<Slider Width="200" UseSystemFocusVisuals="False"/>

De dikte, marge of of de app-ontwikkelaar de focusvisuals helemaal wil hebben, wordt per controle bepaald.

Kleureigenschappen

Er zijn slechts twee kleureigenschappen voor de focusvisuals: de primaire randkleur en de secundaire randkleur. Deze visuele focusrandkleuren kunnen per controle worden gewijzigd op pagina-niveau en globaal op app-breed niveau.

Als u visuals voor de hele app wilt benadrukken, overschrijdt u de systeempenselen:

<SolidColorBrush x:Key="SystemControlFocusVisualPrimaryBrush" Color="DarkRed"/>
<SolidColorBrush x:Key="SystemControlFocusVisualSecondaryBrush" Color="Pink"/>

Als u de kleuren per controle wilt wijzigen, bewerkt u de eigenschappen van de focusvisual op het gewenste besturingselement:

<Slider Width="200" FocusVisualPrimaryBrush="DarkRed" FocusVisualSecondaryBrush="Pink"/>

Verwante artikelen

Voor ontwerpers

• Richtlijnen voor panning

Voor ontwikkelaars

• Aangepaste gebruikersinteracties

Samples

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

Archiefvoorbeelden

• Invoer: voorbeeld van XAML-gebruikersinvoergebeurtenissen
• Invoer: Voorbeeld van apparaatmogelijkheden
• Invoer: Voorbeeld van aanraakdetectietest
• Voorbeeld van XAML-scrollen, -pannen en -zoomen
• Invoer: Vereenvoudigd inktvoorbeeld
• Invoer: Voorbeeld van Windows 8-bewegingen
• Invoer: Voorbeeld van manipulaties en gebaren
• Voorbeeld van DirectX-aanraakinvoer