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
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.
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.
Colore principale
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
L'app Raccolta WinUI 3 include esempi interattivi della maggior parte dei controlli e delle funzionalità di WinUI 3. Scaricare l'app da Microsoft Store od ottenere il codice sorgente su GitHub
Colore nelle app di Windows
Il colore fornisce un modo intuitivo per comunicare informazioni agli utenti nella tua app: può essere usato per indicare la possibilità di interazione, offrire un feedback alle azioni dell'utente e conferire all'interfaccia un senso di continuità ottica.
Nelle app di Windows, i colori dipendono principalmente dal colore principale e dal tema. In questo articolo vedremo come usare il colore nella tua app e come puoi servirti del colore principale e del tema per consentire l'usabilità dell'app di Windows in qualsiasi contesto.
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.
Temi
Le app di Windows possono usare un tema chiaro o scuro. Il tema influisce sui colori di sfondo dell'app, su testo, icone e controlli comuni.
Tema Chiaro
Tema scuro
Per impostazione predefinita, il tema dell'app di Windows è quello prescelto dall'utente nelle impostazioni di Windows o il tema predefinito del dispositivo. Puoi tuttavia impostare anche un tema specifico per l'app di Windows.
Modifica del tema
Puoi cambiare i temi modificando la proprietà RequestedTheme nel file App.xaml.
<Application
x:Class="App9.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App9"
RequestedTheme="Dark">
</Application>
Se rimuovi la proprietà RequestedTheme, l'applicazione userà le impostazioni di sistema dell'utente.
Gli utenti possono anche selezionare il tema a contrasto elevato, che usa una tavolozza ridotta di colori contrastanti che migliorano la visibilità dell'interfaccia. In tal caso, il sistema eseguirà l'override del RequestedTheme.
Testare i temi
Se non hai bisogno di un tema specifico dell'app, ricordati di testare l'app con entrambi i temi, chiaro e scuro, per assicurarti che l'app sia sempre leggibile.
Pennelli del tema
I controlli comuni usano automaticamente i pennelli del tema per regolare il contrasto per i temi chiari e scuri.
Ecco un esempio di come il controllo AutoSuggestBox usa i pennelli del tema:
Uso dei pennelli del tema
Quando crei modelli per i controlli personalizzati, usa i pennelli del tema anziché valori di colore hardcoded. In questo modo, l'app può adattarsi facilmente a qualsiasi tema.
Ad esempio, questi modelli di elementi per ListView dimostrano come usare i pennelli del tema in un modello personalizzato.
<ListView ItemsSource="{x:Bind ViewModel.Recordings}">
<ListView.ItemTemplate>
<DataTemplate x:Name="DoubleLineDataTemplate" x:DataType="local:Recording">
<StackPanel Orientation="Horizontal" Height="64" AutomationProperties.Name="{x:Bind CompositionName}">
<Ellipse Height="48" Width="48" VerticalAlignment="Center">
<Ellipse.Fill>
<ImageBrush ImageSource="Placeholder.png"/>
</Ellipse.Fill>
</Ellipse>
<StackPanel Orientation="Vertical" VerticalAlignment="Center" Margin="12,0,0,0">
<TextBlock Text="{x:Bind CompositionName}" Style="{ThemeResource BodyStrongTextBlockStyle}" Foreground="{ThemeResource TextFillColorPrimaryBrush}" />
<TextBlock Text="{x:Bind ArtistName}" Style="{ThemeResource BodyTextBlockStyle}" Foreground="{ThemeResource TextFillColorTertiaryBrush}"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Per altre informazioni sull'uso dei pennelli del tema nell'app, vedi Risorse del tema.
Colori accentato
I controlli comuni usano un colore principale per trasmettere le informazioni sullo stato. Per impostazione predefinita, il colore principale è il SystemAccentColor che gli utenti selezionano in Impostazioni. Tuttavia puoi anche personalizzare il colore principale dell'app per richiamare il tuo marchio.
Sostituzione del colore principale
Per cambiare il colore principale dell'app, inserisci il codice seguente in app.xaml.
<Application.Resources>
<ResourceDictionary>
<Color x:Key="SystemAccentColor">#107C10</Color>
</ResourceDictionary>
</Application.Resources>
Scelta di un colore principale
Se selezioni un colore principale personalizzato per l'app, assicurati che il contrasto tra il testo e gli sfondi che usano il colore principale sia sufficiente per una leggibilità ottimale. Per provare il contrasto, puoi usare lo strumento selezione colori nelle impostazioni di Windows oppure questi strumenti online per il contrasto.
Tavolozza dei colori principali
Un algoritmo di colore principale della shell di Windows genera sfumature chiare e scure del colore principale.
Queste sfumature sono accessibili come risorse del tema:
SystemAccentColorLight3SystemAccentColorLight2SystemAccentColorLight1SystemAccentColorDark1SystemAccentColorDark2SystemAccentColorDark3
Puoi anche accedere alla tavolozza dei colori principali a livello di codice con il metodo UISettings.GetColorValue e l'enumerazione UIColorType.
Puoi usare la tavolozza dei colori principali per i temi dell'app. Ecco un esempio di uso della tavolozza dei colori principali su un pulsante.
<Page.Resources>
<ResourceDictionary>
<ResourceDictionary.ThemeDictionaries>
<ResourceDictionary x:Key="Light">
<SolidColorBrush x:Key="ButtonBackground" Color="{ThemeResource SystemAccentColor}"/>
<SolidColorBrush x:Key="ButtonBackgroundPointerOver" Color="{ThemeResource SystemAccentColorLight1}"/>
<SolidColorBrush x:Key="ButtonBackgroundPressed" Color="{ThemeResource SystemAccentColorDark1}"/>
</ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>
</ResourceDictionary>
</Page.Resources>
<Button Content="Button"></Button>
Quando usi testo colorato su uno sfondo colorato, assicurati che il contrasto tra il testo e lo sfondo sia sufficiente. Per impostazione predefinita, per i collegamenti ipertestuali o gli ipertesti verrà usato il colore principale. Se applichi varianti del colore principale allo sfondo, devi usare una variante del colore principale originale per ottimizzare il contrasto del testo colorato su uno sfondo colorato.
Il grafico seguente mostra un esempio delle varie sfumature chiare/scure del colore principale e come applicare un tipo colorato su una superficie colorata.
Per altre informazioni sui controlli di stile, vedi Stili XAML.
API per il colore
Esistono diverse API che possono essere usate per aggiungere colore all'applicazione. Innanzitutto, la classe Colors, che implementa un lungo elenco di colori predefiniti. Questi sono accessibili automaticamente con le proprietà XAML. Nell'esempio seguente viene creato un pulsante e vengono impostate le proprietà per il colore di sfondo e di primo piano per i membri della classe Colors.
<Button Background="MediumSlateBlue" Foreground="White">Button text</Button>
Puoi creare colori personalizzati con valori RGB o esadecimali usando lo struct Color XAML.
<Color x:Key="LightBlue">#FF36C0FF</Color>
Puoi anche creare lo stesso colore nel codice usando il metodo FromArgb.
Color LightBlue = Color.FromArgb(255,54,192,255);
Windows::UI::Color LightBlue = Windows::UI::ColorHelper::FromArgb(255,54,192,255);
Le lettere "Argb" stanno per Alfa (opacità), Red, Green e Blue, che sono le quattro componenti di un colore. Ogni argomento può variare da 0 a 255. Puoi scegliere di omettere il primo valore, così otterrai un'opacità predefinita di 255, ossia del 100%.
Nota
Se usi C++, devi creare i colori tramite la classe ColorHelper.
L'uso più comune di Color è come argomento di un SolidColorBrush, che può essere usato per colorare gli elementi dell'interfaccia utente in tinta unita. Questi pennelli sono generalmente definiti in un ResourceDictionary, in modo da poterli riutilizzare per più elementi.
<ResourceDictionary>
<SolidColorBrush x:Key="ButtonBackgroundBrush" Color="#FFFF4F67"/>
<SolidColorBrush x:Key="ButtonForegroundBrush" Color="White"/>
</ResourceDictionary>
Per altre informazioni su come usare i pennelli, vedi Pennelli XAML.
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.
