Colore in Windows

Windows usa il colore per aiutare gli utenti a concentrarsi sulle attività indicando una gerarchia visiva e una struttura tra gli elementi dell'interfaccia utente. Il colore è appropriato al contesto e viene utilizzato per fornire una base calmante, migliorando sottilmente le interazioni con l'utente ed enfatizzando gli elementi significativi solo quando necessario.

Suggerimento

Questo articolo descrive come viene applicato il linguaggio Fluent Design alle app di Windows. Per altre informazioni, vedere Fluent Design - Color.

Modalità colore e temi

Windows supporta due modalità di colore o temi: chiaro e scuro. Ogni modalità è costituita da un set di valori di colore neutro regolati automaticamente per garantire un contrasto ottimale. Le app di Windows possono usare un tema dell'applicazione chiaro o scuro, che influisce sui colori dello sfondo, del testo, delle icone e dei controlli comuni dell'app.

Nelle modalità colore chiaro e scuro, i colori più scuri indicano le superfici di sfondo meno importanti. Le superfici importanti sono evidenziate con colori più chiari e luminosi. Per altre informazioni, vedere Livelli e elevazione dei livelli.

Per impostazione predefinita, il tema dell'app di Windows è la preferenza del tema dell'utente da Impostazioni di Windows o dal tema predefinito del dispositivo. Tuttavia, puoi impostare il tema in modo specifico per la tua app. Per informazioni su come modificare i temi, usare i pennelli del tema e personalizzare i colori principali nel codice, vedi Tema nelle app di Windows.

Colore d'accento

Il colore principale viene usato per evidenziare elementi importanti nell'interfaccia utente e per indicare lo stato di un oggetto interattivo o di un controllo. I valori di colore accento vengono generati automaticamente e ottimizzati per il contrasto in modalità chiaro e scuro. I colori accento vengono usati con moderazione per evidenziare elementi importanti e trasmettere informazioni sullo stato di un elemento interattivo.

Esempi

Apri l'app WinUI Gallery e vedi i principi di colore in azione

La Raccolta WinUI 3 ti consente di esplorare e sfogliare esempi interattivi di controlli, caratteristiche e funzionalità di WinUI 3. Ottenere l'app da Microsoft Store o ottenere il codice sorgente in GitHub.

Indicazioni generali per il colore

Dai un senso all'uso del colore. L'uso moderato del colore per evidenziare gli elementi importanti aiuta a creare un'interfaccia utente fluida e intuitiva.

Usa il colore per indicare interattività. È consigliabile scegliere un unico colore per indicare gli elementi interattivi dell'applicazione. In molte pagine Web, ad esempio, un testo blu indica un collegamento ipertestuale.

Il colore è personale. In Windows gli utenti possono scegliere un colore principale e un tema chiaro o scuro, che influiscono su tutta la loro esperienza. Puoi scegliere come incorporare il colore principale e il tema dell'utente nell'applicazione, personalizzando la sua esperienza.

Il colore è culturale. Tieni conto di come verranno interpretati i colori che usi da persone di culture diverse. Ad esempio, in alcune culture il colore blu è associato alla virtù e a un senso di protezione, mentre in altre rappresenta il lutto.

Usabilità

Contrasto

Assicurati che il contrasto tra elementi e immagini sia sufficiente per distinguerli, indipendentemente dal colore principale o dal tema.

Quando decidi quali colori usare nell'applicazione, il primo aspetto da valutare dovrebbe essere l'accessibilità. Usa le linee guida seguenti per assicurarti che l'applicazione sia accessibile per il maggior numero di utenti possibile.

Illuminazione

Tieni presente che la variazione dell'illuminazione ambientale può influire sull'usabilità dell'app. Ad esempio, una pagina con uno sfondo nero potrebbe non essere leggibile all'esterno a causa del riflesso dello schermo, mentre una pagina con uno sfondo bianco potrebbe essere difficile da guardare in una stanza scura.

Daltonismo

Tieni presente il modo in cui daltonismo può influire sull'usabilità dell'applicazione. Ad esempio, un utente con daltonismo rosso-verde avrà difficoltà a distinguere gli elementi rossi da quelli verdi. Circa l'8% degli uomini e lo 0,5% delle donne sono daltonici per rosso e verde, quindi evita di usare queste combinazioni di colori come unico fattore di differenziazione tra gli elementi dell'applicazione.

Elementi correlati

• Tema nelle app di Windows
• Stili XAML
• Risorse del tema XAML
• Raccolta WinUI - Colori