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.
 |
 |
 |
 |
|---|---|---|---|
| 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.
Per modificare lo spessore del tipo di bordo (primario o secondario), usare rispettivamente FocusVisualPrimaryThickness o FocusVisualSecondaryThickness:
<Slider Width="200" FocusVisualPrimaryThickness="5" FocusVisualSecondaryThickness="2"/>
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: 
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"/>
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"/>
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"/>
Articoli correlati
Per progettisti
Per sviluppatori
Esempi
- Esempio di input di base
- Esempio di input a bassa latenza
- Esempio di modalità di interazione utente
- Esempio di indicatori visivi di stato attivo
Esempi di archivio
- Input: esempio di eventi di input utente XAML
- Input: esempio di funzionalità del dispositivo
- Input: esempio di hit test tocco
- Esempio di scorrimento, panoramica e zoom XAML
- Input: esempio di input penna semplificato
- Input: esempio di gesti di Windows 8
- Input: esempio di manipolazioni e movimenti
- Esempio di input tocco DirectX
