Il sistema di colori espressivi di Wear Material 3 utilizza tre livelli di accento (principale, secondario, terziario) per i componenti chiave e due livelli di superficie neutri. Ogni ruolo offre una gamma di valori con un contrasto coerente, consentendo combinazioni di colori espressive ma accessibili per un'esperienza unificata in qualsiasi tema.
Che cosa sono i ruoli di colore?
I ruoli di colore sono come i "numeri" in una tela da colorare. Sono il tessuto connettivo tra gli elementi dell'interfaccia utente e il colore da utilizzare.
- I ruoli di colore sono mappati ai componenti di Material:li utilizzerai indipendentemente dall'utilizzo dello schema di riferimento statico o del colore dinamico. Se il tuo prodotto contiene componenti personalizzati, questi dovranno essere mappati correttamente a questo insieme di ruoli di colore.
- I ruoli di colore supportano l'accessibilità: il sistema di colori si basa su abbinamenti di colori più accessibili. Queste coppie di colori forniscono un minimo di 3:1 di contrasto di colore.
- I ruoli dei colori sono tokenizzati: i ruoli vengono implementati nel design e nel codice tramite token. Un token di design rappresenta una piccola decisione di design riutilizzabile che fa parte dello stile visivo di un sistema di design.
Termini essenziali
Di seguito sono riportati i termini chiave che vedrai nei nomi dei ruoli di colore:
- Superficie:un ruolo utilizzato per gli sfondi e le aree ampie e poco accentuate dello schermo.
- Principale, secondario, terziario:i ruoli dei colori di contrasto utilizzati per enfatizzare o attenuare gli elementi in primo piano.
- Contenitore:i ruoli utilizzati come colore di riempimento per gli elementi in primo piano, come i pulsanti. Non devono essere utilizzati per testo o icone.
- On:i ruoli che iniziano con questo termine indicano un colore per il testo o le icone sopra il colore principale accoppiato. Ad esempio, su principale viene utilizzato per il testo e le icone rispetto al colore di riempimento principale.
- Variante: i ruoli che terminano con questo termine offrono un'alternativa meno enfatizzata rispetto alla coppia non variante. Ad esempio, la variante del contorno è una versione meno accentuata del colore del contorno.
Ruoli principali
I ruoli principali vengono utilizzati per i componenti chiave dell'interfaccia utente, ad esempio i pulsanti con bordi arrotondati, i pulsanti in evidenza, gli stati attivi e le icone negli stili dei pulsanti tonali.
Principale
- Principale
- Su principale
Utilizza il ruolo Principale per le azioni più importanti nell'interfaccia utente, come i pulsanti o gli inviti all'azione principali. Questo colore deve risaltare ed essere immediatamente riconoscibile per indirizzare l'utente verso le interazioni chiave.
Primary-Dim
- Primary-Dim
- Su principale
I ruoli di attenuazione vengono in genere utilizzati per gli elementi che devono essere visivamente distinti dall'azione principale, ma che non richiedono l'attenzione o l'interazione immediata dell'utente.
Primary-Container
- Primary-Container
- On-Primary-Container
Applica il contenitore principale per gli elementi di sfondo, come schede o finestre modali, per evidenziare sezioni o stati selezionati. Aiutano a attirare l'attenzione su contenuti importanti o attività in corso all'interno dell'interfaccia utente.
Ruoli secondari
I ruoli secondari vengono utilizzati per i componenti chiave dell'interfaccia utente, che non sono importanti quanto il ruolo principale, ma devono comunque risaltare. I colori principali e secondari possono essere utilizzati insieme nei layout per creare differenziazione e mettere in evidenza gli elementi.
Secondario
- Secondario
- On-Secondary
Utilizza il ruolo Secondario per supportare le azioni in aree con un'interfaccia utente complessa, ad esempio pulsanti secondari o azioni complementari. Mantiene la visibilità senza mettere in ombra gli elementi principali in layout complessi.
Secondario-Dim
- Secondaria-Dim
- Secondario
Il ruolo Secondario-Sbiadito offre un contrasto attenuato per gli elementi passivi nelle aree con elevata densità. Completa il colore secondario aggiungendo una sottile profondità, mantenendo l'UI pulita e aiutando gli utenti a navigare.
Secondary-Container
- Secondary-Container
- On-Secondary-Container
Applica Contenitore secondario per organizzare gli elementi secondari in layout fitti. Crea struttura e separazione, garantendo che i contenuti secondari siano distinguibili, ma non dominanti.
Ruoli terziari
I ruoli terziari vengono utilizzati per gli accenti a contrasto per bilanciare i colori primari e secondari o attirare l'attenzione su un elemento, ad esempio un campo di immissione. I ruoli terziari possono anche essere utili per indicare quando i contenuti cambiano o devono essere messi in evidenza, ad esempio quando viene raggiunto un obiettivo.
Terziario
- Terziario
- Terziario
Il ruolo Terziario viene utilizzato per attirare l'attenzione sugli elementi chiave. I ruoli terziari sono particolarmente efficaci per i componenti che devono risaltare, come badge, adesivi o elementi di azioni speciali.
Tertiary-Dim
- Tertiary-Dim
- Terziario
Utilizza il ruolo Dim terziario per i pulsanti o le azioni correlate alle azioni terziarie, ma che non richiedono l'attenzione immediata.
Contenitore terziario
- Contenitore terziario
- On-Tertiary-Container
Applica Contenitore terziario per gli sfondi che raggruppano contenuti correlati terziari, come collezioni di badge o adesivi. Mette in evidenza gli elementi terziari, mantenendo al contempo l'equilibrio e la struttura dell'interfaccia utente.
Ruoli semantici
Errore-Rosso viene utilizzato per indicare problemi critici come errori, eliminazioni e qualsiasi elemento correlato a situazioni di emergenza. È progettato per attirare immediatamente l'attenzione su problemi o avvertimenti, in modo che gli utenti possano identificare rapidamente le aree che richiedono un intervento correttivo. Il tono di Rosso-errore deve mantenere un contrasto sufficiente con gli sfondi per soddisfare gli standard di accessibilità, assicurandosi che sia chiaramente visibile e distinguibile da altri colori di stato come avvisi o messaggi di successo.
Errore
- Errore
- On-Error
Un rosso semantico, ma leggermente tinto dal tema, che indica azioni di rimozione, eliminazione, chiusura o dismissione, come Scorri per visualizzare. È stato aggiunto come alternativa al contenitore che è leggermente meno allarmante e urgente del colore di attenuazione degli errori.
Error-Dim
- Error-Dim
- On-Error
Un rosso semantico, ma leggermente tinto dal tema, che indica errori di alta priorità o azioni di emergenza, come avvisi di sicurezza, overlay di finestre di dialogo non riusciti o pulsanti di interruzione.
Error-Container
- Error-Container
- On-Error-Container
Colore del contenitore meno in evidenza, per i componenti che utilizzano lo stato di errore. Può anche indicare uno stato di errore attivo che sembra meno interattivo di uno stato compilato, ad esempio un pulsante o una scheda di condivisione di emergenza attivi o una finestra di dialogo in overlay non riuscita.
Contenitori di superficie ed elevazione
I contenitori di superficie sono fondamentali per definire la profondità e l'elevazione all'interno dell'interfaccia utente, fornendo struttura e gerarchia tramite il colore e contribuendo a differenziare i componenti in base alla loro importanza e interazione.
Surface-Container-Low
- Surface-Container-Low
- Sulla superficie
- On-Surface-Variant
Ottimo per un contenitore espanso che deve trovarsi sotto Surface-Container, ad esempio una scheda espansa nella notifica. Può essere utilizzato anche per le schede non interattive, in cui i contenuti beneficiano comunque del contenimento.
Surface-Container
- Surface-Container
- Sulla superficie
- On-Surface-Variant
Il colore del contenitore predefinito per la maggior parte degli elementi. Fornisce un'elevazione neutra e moderata, il che la rende adatta per i componenti dell'interfaccia utente generale.
Superficie-Contenitore-Alto
- Surface-Container-High
- Su una superficie
- On-Surface-Variant
Ideale per componenti ad alta enfasi che devono essere posizionati sopra o in combinazione con Surface-Container. Questo colore aiuta a mettere in evidenza e a creare gerarchia nelle aree critiche dell'interfaccia utente.