Linee guida per il feedback visivoGuidelines for visual feedback

Usa il feedback visivo per mostrare agli utenti quando vengono rilevate, interpretate e gestite le loro interazioni.Use visual feedback to show users when their interactions are detected, interpreted, and handled. Il feedback visivo può aiutare gli utenti incoraggiando l'interazione.Visual feedback can help users by encouraging interaction. Indica il livello di riuscita di un'interazione, migliorando la sensazione di controllo da parte dell'utente.It indicates the success of an interaction, which improves the user's sense of control. Consente anche di inoltrare lo stato del sistema e di ridurre gli errori.It also relays system status and reduces errors.

API importanti : Windows. Devices. input, Windows. UI. input, Windows. UI. CoreImportant APIs : Windows.Devices.Input, Windows.UI.Input, Windows.UI.Core

ConsigliRecommendations

  • Provare a limitare modifcations di un modello di controllo a quelli direttamente correlati alla finalità di progettazione, in quanto le modifiche estese possono influisca sulle prestazioni e sull'accessibilità sia del controllo che dell'applicazione.Try to limit modifcations of a control template to those directly related to your design intent, as extensive changes can impact the performance and accessibility of both the control and your application.
    • Vedere stili XAML per ulteriori informazioni sulla personalizzazione delle proprietà di un controllo, incluse le proprietà dello stato di visualizzazione.See XAML styles for more info on customizing the properties of a control, including visual state properties.
    • Per informazioni dettagliate su come apportare modifiche a un modello di controllo, vedere la classe UserControlSee the UserControl Class for details on making changes to a control template
    • Prendere in considerazione la creazione di un controllo basato su modelli personalizzato se è necessario apportare modifiche significative a un modello di controllo.Consider creating your own custom templated control if you need to make significant changes to a control template. Per un esempio di controllo basato su modelli personalizzato, vedere l' esempio di controllo personalizzato di modifica.For an example of a custom templated control, see the Custom Edit Control sample.
  • Non usare le visualizzazioni nelle situazioni in cui potrebbero interferire con l'uso dell'app.Don't use touch visualizations in situations where they might interfere with the use of the app. Per altre info, vedi ShowGestureFeedback.For more info, see ShowGestureFeedback.
  • Visualizzare il feedback solo se assolutamente necessario.Don't display feedback unless it is absolutely necessary. Mantieni pulita e ordinata l'interfaccia utente mostrando il feedback visivo solo se effettivamente necessario.Keep the UI clean and uncluttered by not showing visual feedback unless you are adding value that is not available elsewhere.
  • Cerca di non personalizzare in modo eccessivo il comportamento del feedback visivo dei gesti predefiniti di Windows per evitare di creare un'esperienza utente incoerente e confusionaria.Try not to dramatically customize the visual feedback behaviors of the built-in Windows gestures, as this can create an inconsistent and confusing user experience.

Istruzioni aggiuntive per l'usoAdditional usage guidance

Le visualizzazioni di contatto sono essenziali per le interazioni tramite tocco che richiedono accuratezza e precisione.Contact visualizations are especially critical for touch interactions that require accuracy and precision. L'app, ad esempio, dovrebbe chiaramente indicare la posizione di un tocco per indicare all'utente se ha mancato l'obiettivo, se sì di quanto e quali modifiche deve apportare.For example, your app should clearly indicate the location of a tap to let a user know if they missed their target, how much they missed it by, and what adjustments they must make.

L'uso dei controlli della piattaforma XAML predefiniti disponibili garantisce il corretto funzionamento della tua app su tutti i dispositivi e in tutte le situazioni di input.Using the default XAML platform controls available ensures that your app works correctly on all devices and in all input situations. Se l'app offre interazioni personalizzate che richiedono una risposta personalizzata, assicurati che la risposta sia appropriata, si estenda ai vari dispositivi di input e non distragga l'utente dalle attività in corso.If your app features custom interactions that require customized feedback, you should ensure the feedback is appropriate, spans input devices, and doesn't distract a user from their task. Questo potrebbe essere un problema nelle app di gioco o di disegno in cui la risposta visiva potrebbe entrare in conflitto o nascondere elementi fondamentali dell'interfaccia utente.This can be a particular issue in game or drawing apps, where the visual feedback might conflict with or obscure critical UI.

Importante

Non consigliamo di modificare il comportamento dell'interazione dei gesti predefiniti.We don't recommend changing the interaction behavior of the built-in gestures.

Risposta nei dispositiviFeedback Across Devices

La risposta visiva in genere dipende dal dispositivo di input (tocco, touchpad, mouse, penna/stilo, tastiera e così via).Visual feedback is generally dependent on the input device (touch, touchpad, mouse, pen/stylus, keyboard, and so on). La risposta predefinita per il mouse, ad esempio, implica lo spostamento e la modifica del cursore, mentre il tocco e la penna richiedono visualizzazioni di contatto e l'input da tastiera e l'esplorazione richiedono l'uso di rettangoli dello stato attivo e dell'evidenziazione.For example, the built-in feedback for a mouse usually involves moving and changing the cursor, while touch and pen require contact visualizations, and keyboard input and navigation uses focus rectangles and highlighting.

Usare ShowGestureFeedback per impostare il comportamento del feedback per i movimenti della piattaforma.Use ShowGestureFeedback to set feedback behavior for the platform gestures.

Se vuoi personalizzare l'interfaccia utente di feedback, assicurati che il feedback fornito supporti tutte le modalità di input.If customizing feedback UI, ensure you provide feedback that supports, and is suitable for, all input modes.

Ecco alcuni esempi di visualizzazioni di contatto predefinite disponibili in Windows.Here are some examples of built-in contact visualizations in Windows.

Feedback sul tocco Feedback sul mouse Feedback sulla penna Feedback sulla tastiera
Visualizzazione del toccoTouch visualization Visualizzazione del mouse/touchpadMouse/touchpad visualization Visualizzazione della pennaPen visualization Visualizzazione della tastieraKeyboard visualization

Indicatori visivi dello stato attivo con visibilità elevataHigh Visibility Focus Visuals

Tutte le app di Windows supportano un indicatore visivo dello stato attivo più definito attorno ai controlli con cui puoi interagire nell'applicazione.All Windows apps sport a more defined focus visual around interactable controls within the application. Questi nuovi indicatori visivi dello stato attivo sono completamente personalizzabili e possono essere disabilitati, se necessario.These new focus visuals are fully customizable as well as disableable when needed.

Per l' esperienza a 10 bit tipica dell'utilizzo di Xbox e TV, Windows supporta la divulgazione dello stato attivo , un effetto di illuminazione che aggiunge un'animazione al bordo di elementi attivabili, ad esempio un pulsante, quando ottengono lo stato attivo tramite il gamepad o l'input da tastiera.For the 10-foot experience typical of Xbox and TV usage, Windows supports Reveal focus , a lighting effect that animates the border of focusable elements, such as a button, when they get focus through gamepad or keyboard input.

Personalizzazione dei coloriColor Branding & Customizing

Proprietà dei bordiBorder Properties

Gli indicatori visivi dello stato attivo con visibilità elevata sono composti da due parti: il bordo primario e il bordo secondario.There are two parts to the high visibility focus visuals: the primary border and the secondary border. Il bordo primario ha uno spessore di 2 px ed è tracciato all' esterno del bordo secondario.The primary border is 2px thick, and runs around the outside of the secondary border. Il bordo secondario ha uno spessore di 1 px ed è tracciato all' interno del bordo primario.The secondary border is 1px thick and runs around the inside of the primary border. Righe rosse degli indicatori visivi dello stato attivo con visibilità elevataHigh visibility focus visual redlines

Per modificare lo spessore di uno dei due tipi di bordo (primario o secondario), usa rispettivamente FocusVisualPrimaryThickness o FocusVisualSecondaryThickness :To change the thickness of either border type (primary or secondary) use the FocusVisualPrimaryThickness or FocusVisualSecondaryThickness , respectively:

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

Spessori dei margini degli indicatori visivi dello stato attivo con visibilità elevata

Il margine è una proprietà di tipo Thicknesse pertanto il margine può essere personalizzato in modo che venga visualizzato solo su determinati lati del controllo.The margin is a property of type Thickness, and therefore the margin can be customized to appear only on certain sides of the control. Vedere di seguito:  solo spessore del margine visivo dello stato attivo di visibilità elevataSee below: High visibility focus visual margin thickness bottom only

Il margine è lo spazio tra i limiti visivi del controllo e l'inizio del bordo secondario degli oggetti visivi dello stato attivo.The margin is the space between the control's visual bounds and the start of the focus visuals secondary border . Il margine predefinito è 1px dai limiti del controllo.The default margin is 1px away from the control bounds. È possibile modificare questo margine in base al controllo, modificando la proprietà FocusVisualMargin :You can edit this margin on a per-control basis, by changing the FocusVisualMargin property:

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

Differenza dei margini degli indicatori visivi dello stato attivo con visibilità elevata

Un margine negativo allontanerà il bordo dal centro del controllo e un margine positivo sposterà il bordo più vicino al centro del controllo.A negative margin will push the border away from the center of the control, and a positive margin will move the border closer to the center of the control.

Per disattivare completamente gli indicatori visivi dello stato attivo sul controllo, devi solo disabilitare UseSystemFocusVisuals :To turn off focus visuals on the control entirely, simply disabled UseSystemFocusVisuals :

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

Per ogni controllo lo sviluppatore dell'app può determinare lo spessore e il margine degli indicatori visivi dello stato attivo e anche se usarli o meno del tutto.The thickness, margin, or whether or not the app-developer wishes to have the focus visuals at all, is determined on a per-control basis.

Proprietà dei coloriColor Properties

Esistono solo due proprietà dei colori per gli indicatori visivi dello stato attivo: il colore del bordo primario e il colore del bordo secondario.There are only two color properties for the focus visuals: the primary border color, and the secondary border color. Questi colori dei bordi degli indicatori visivi dello stato attivo possono essere modificati per ogni controllo a livello di pagina e in modo globale e livello di app:These focus visual border colors can be changed per-control on an page level, and globally on an app-wide level:

Per personalizzare gli indicatori visivi dello stato attivo a livello di app, esegui l'override dei pennelli di sistema:To brand focus visuals app-wide, override the system brushes:

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

Modifiche dei colori degli indicatori visivi dello stato attivo con visibilità elevata

Per cambiare i colori per ogni controllo, modifica solo le proprietà degli indicatori visivi dello stato attivo nel controllo desiderato:To change the colors on a per-control basis, just edit the focus visual properties on the desired control:

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

Per progettistiFor designers

Per sviluppatoriFor developers

EsempiSamples

Esempi di archivioArchive samples