Condividi tramite


Linee guida per il feedback visivo

Usare il feedback visivo per mostrare agli utenti quando le loro interazioni vengono rilevate, interpretate e gestite. Il feedback visivo può aiutare gli utenti a favorire l'interazione. Indica il successo di un'interazione, il che migliora il senso di controllo dell'utente. Inoltra anche lo stato del sistema e riduce gli errori.

API importanti: Windows.Devices.Input, Windows.UI.Input, Windows.UI.Core

Consigli

  • Provare a limitare le modifiche di un modello di controllo a quelle direttamente correlate allo scopo della progettazione, poiché troppe modifiche possono influire sulle prestazioni e sull'accessibilità del controllo e dell'applicazione.
    • Per altre informazioni sulla personalizzazione delle proprietà di un controllo, incluse le proprietà dello stato visivo, vedere Stili XAML.
    • Per informazioni dettagliate sulle modifiche a un modello di controllo, vedere la calsse UserControl
    • È consigliabile creare un controllo personalizzato basato su modello se è necessario apportare modifiche significative a un modello di controllo. Per un esempio di controllo personalizzato basato su modello, vedere l'esempio di Controllo di modifica personalizzato.
  • Non usare le visualizzazioni tocco in situazioni in cui potrebbero interferire con l'uso dell'app. Per altre informazioni, vedere ShowGestureFeedback.
  • Non visualizzare feedback a meno che non sia assolutamente necessario. Mantenere pulita e ordinata l'interfaccia utente non visualizzando il feedback visivo, a meno che non aggiunga valore non disponibile altrove.
  • Provare a non personalizzare in modo eccessivo i comportamenti di feedback visivo dei gesti Windows predefiniti, per non creare un'esperienza utente incoerente e confusa.

Indicazioni aggiuntive sull'uso

Le visualizzazioni di contatto sono particolarmente critiche per le interazioni tramite tocco che richiedono precisione e accuratezza. Ad esempio, l'app dovrebbe indicare chiaramente la posizione di un tocco per informare l'utente se non ha trovato la destinazione, di quanto l'ha persa e quali modifiche deve apportare.

L'uso dei controlli della piattaforma XAML predefiniti disponibili garantisce il funzionamento corretto dell'app su tutti i dispositivi e in tutte le situazioni di input. Se l'app include interazioni personalizzate che richiedono feedback personalizzato, assicurarsi che il feedback sia appropriato, si estenda su dispositivi di input e non distragga l'utente dalle proprie attività. Questo potrebbe essere un problema per le app di gioco o disegno, in cui il feedback visivo potrebbe entrare in conflitto con l'interfaccia utente critica o oscurarla.

Importante

Non è consigliabile modificare il comportamento di interazione dei gesti predefiniti.

Feedback tra dispositivi

Il feedback visivo dipende in genere dal dispositivo di input (tocco, touchpad, mouse, penna/stilo, tastiera e così via). Ad esempio, il feedback predefinito per un mouse comporta in genere lo spostamento e la modifica del cursore, mentre il tocco e la penna richiedono visualizzazioni dei contatti e l'input da tastiera e lo spostamento usano rettangoli di stato attivo e l'evidenziazione.

Usare ShowGestureFeedback per impostare il comportamento di feedback per i gesti della piattaforma.

Se si personalizza l'interfaccia utente feedback, assicurarsi di fornire feedback che supporta ed è adatto a tutte le modalità di input.

Ecco alcuni esempi di visualizzazioni dei contatti predefinite in Windows.

Commenti e suggerimenti tocco Commenti e suggerimenti del mouse Commenti e suggerimenti sulla penna Feedback della tastiera
Visualizzazione tocco Visualizzazione mouse/touchpad Visualizzazione penna Visualizzazione tastiera

Oggetti visivi dello stato attivo a visibilità elevata

Tutte le app Windows mostrano un oggetto visivo dello stato attivo più definito intorno ai controlli interagibili all'interno dell'applicazione. Questi nuovi oggetti visivi dello stato attivo possono essere completamente personalizzati e disabilitati se necessario.

Per la 10-foot experience tipica di Xbox e delle TV, Windows supporta Reveal stato attivo, un effetto di illuminazione che anima il bordo degli elementi con stato attivabile, ad esempio un pulsante, quando ottengono lo stato attivo tramite l'input da tastiera o game pad.

Personalizzazione & dei colori

Proprietà dei bordi

Esistono due parti per gli oggetti visivi dello stato attivo ad alta visibilità: il bordo primario e il bordo secondario. Il bordo primario ha uno spessore di 2 px ed è tracciato all'esterno del bordo secondario. Il bordo secondario ha uno spessore di 1 px ed è tracciato all'interno del bordo primario. Redline visive con stato attivo ad alta visibilità

Per modificare lo spessore del tipo di bordo (primario o secondario), usare rispettivamente FocusVisualPrimaryThickness o FocusVisualSecondaryThickness:

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

Spessori del margine visivo dello stato attivo con visibilità elevata

Il margine è una proprietà di tipo Thickness, pertanto il margine può essere personalizzato in modo che compaia solo su determinati lati del controllo. Vedere di seguito: Spessore del margine visivo dello stato attivo con visibilità elevata solo in basso

Il margine è lo spazio tra i limiti visivi del controllo e l'inizio del bordo secondario dell'oggetto visivo dello stato attivo. Il margine predefinito si trova a 1px dai limiti del controllo. È possiible modificare questo margine per ogni controllo, cambiando la proprietà FocusVisualMargin:

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

Differenze di margine visivo dello stato attivo con visibilità elevata

Un margine negativo allontana il bordo dal centro del controllo e un margine positivo lo sposta più vicino al centro del controllo.

Per disattivare completamente gli oggetti visivi dello stato attivo sul controllo, è sufficiente disabilitare UseSystemFocusVisuals:

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

Lo spessore, il margine o il fatto che lo sviluppatore dell'app desideri o meno inserire oggetti visivi dello stato attivo vengono determinati in base al controllo.

Proprietà del colore

Esistono solo due proprietà del colore per gli oggetti visivi dello stato attivo: il colore del bordo primario e il colore del bordo secondario. Questi colori del bordo visivo dello stato attivo possono essere modificati per ogni controllo a livello di pagina e a livello globale a livello di app:

Per personalizzare gli oggetti visivi dello stato attivo a livello di app, eseguire l'override dei pennelli di sistema:

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

Modifiche al colore visivo dello stato attivo ad alta visibilità

Per modificare i colori in base al controllo, è sufficiente modificare le proprietà dell'oggetto visivo dello stato attivo sul controllo desiderato:

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

Per progettisti

Per sviluppatori

Esempi

Esempi di archivio