Usa i colori per esprimere lo stile e comunicare il significato. Impostare i colori dell'app può essere fondamentale per la personalizzazione, lo scopo semantico e, ovviamente, l'identità del brand.
Possessi guadagnati
- Per garantire l'accessibilità:
- Controlla il contrasto dei colori ed evita di abbinare colori con tonalità simili.
- Considera che il rosso e il verde sono pattern comuni, ma anche che non sono accessibili agli utenti con alcuni tipi di daltonismo.
- Esercitati a usare i colori in modo significativo: le app possono essere vivaci ed espressive, ma rispettano una tavolozza di colori. Estendere lo schema con troppi colori semantici può creare confusione, mentre avere troppi colori decorativi può essere difficoltoso.
- I colori possono avere motivi, quindi ripeti i motivi di colore stabiliti. Se utilizzi colori semantici nella tua app, usa colori coerenti.
- Per fare in modo che la tua app funzioni correttamente in contesti diversi, crea una combinazione di colori chiara e scura (e, idealmente, contrasta i temi).
- Assegna i colori con token per indicare il ruolo del colore dell'elemento, anziché utilizzare un valore hardcoded.
- I colori possono provenire da varie origini dinamiche e statiche, ma evita di mescolarne troppe all'interno della stessa visualizzazione.
- Quando utilizzi il colore dei contenuti dinamici, cerca di evitare di estrarre i colori da più contenuti.
Spazio colore su Android
Per capire correttamente in che modo Android applica il colore alla tua UI, è importante prima riconoscere come viene visualizzato su un dispositivo.
Come viene visualizzato il colore su un dispositivo
L'app viene visualizzata su uno schermo retroilluminato, che usa colori digitali e ottempera a determinati modelli e regole che aiutano i nostri occhi a percepire quel colore. Il colore digitale è un colore additivo, che viene creato "aggiungendo" o mescolando diverse luci per creare uno spettro di colori completo. Il modo in cui gli esseri umani percepiscono i colori da uno schermo all'altro può variare notevolmente a seconda della calibrazione del colore, del tipo di schermo, delle impostazioni e dello spazio dei colori del dispositivo.
Quando progetti un'app, tieni presente che i colori utilizzati potrebbero non essere identici a causa di questi fattori, per non parlare delle percezioni uniche dei singoli utenti in termini di colori.
Informazioni sugli spazi colore
Uno spazio colore è un'organizzazione di colori che utilizza un modello di colore. RGB è un modello cromatico aggiuntivo che crea lo spettro di colori attraverso il rosso, il verde e il blu, mentre il CMYK, utilizzato per la stampa, è sottraente. Per questo motivo, i designer interattivi in genere utilizzano modelli RGB o simili per scegliere i colori.
Material 3 (M3) ha introdotto HCT, un nuovo spazio colore che utilizza tonalità, crominanza e tono per definire colori percettivamente accurati rispetto ad altri modelli come HSL
Per scoprire di più sulla scienza del colore e sullo sviluppo dell'HCT, leggi l'articolo La scienza del colore e del design.
Tonalità, crominanza e tono
HCT consente un utilizzo più personalizzato e flessibile del colore che rientra nei parametri di sistema. HCT modella i colori utilizzando tonalità, crominanza e tonalità:
- Tonalità: è simile all'aggettivo che un singolo utente potrebbe usare per descrivere il colore, ad esempio "rosso" o "viola elettrico". Il valore HCT della tonalità va da 0 a 360.
- Croma: la crominanza rappresenta la coloratità del colore, che va dal grigio neutro alla brillantezza totale. Nello spazio colore HCT, la crominanza ha un valore massimo di circa 120.
- Tono: il tono è la luminanza o luminosità di un colore. L'HCT usa il tono per creare il contrasto. I colori impostati sullo stesso valore del tono non sono accessibili per determinati contesti di accessibilità. I toni dei valori più bassi sono più scuri e quelli dei valori più alti sono più chiari.
Procedura del sistema di colori
Il colore M3 è basato sul modello HCT per ricavare schemi di colori armoniosi e accessibili e aiuta le caratteristiche di colore dinamiche. Il sistema di colori M3 inizia da un colore di origine. Questo colore di origine viene tradotto in cinque colori chiave: la variante principale, secondaria, terziaria, neutra e neutra. Questi cinque colori chiave creano tavolozze tonali composte da incrementi di tonalità per ciascun colore chiave.
Se assegni manualmente un colore dei tasti, tieni presente la crominanza e il tono dell'input, poiché la tonalità del colore potrebbe non essere il valore tonale del ruolo colore.
Il sistema di colori M3 si basa sulla MCU (Material Color Utilities), un insieme di librerie di colori contenenti algoritmi e utilità che semplificano lo sviluppo di temi e schemi di colore nella tua app.
Il seguente video descrive come vengono derivate le combinazioni di colori.
Limiti relativi ai colori
Le limitazioni cromatiche sono i limiti fisici del colore, che si tratti della fisica effettiva, delle nostre limitazioni visive biologiche o dei limiti del rendering dei colori sullo schermo. Ad esempio, alcune tonalità non possono esistere con determinati crominanza o toni. I limiti cromatici sono il motivo per cui colori come l'azzurro o il rosso chiaro non sono del tutto possibili. La mappatura dei colori dei toni deve essere coerente tra tutti i valori di tonalità.
La figura precedente mostra tre diversi grafici di mappatura tonale per i valori di tonalità H105, H25 e H285.
Grafico 1: tonalità 105 (giallo). Indica la disponibilità del colore. Crominanza e Tono funzionano come un grafico. La tonalità del giallo ha una crominanza limitata con alcuni toni lungo il grafico, mentre il giallo non presenta una grande varietà di vivacità con i toni più bassi.
Grafico 2 – tonalità 25 (rosso). Mostra più opzioni cromatiche rispetto alla tonalità 105 (giallo). In questa mappa tonale, il punto di colorazione più alta si trova a un livello tono più basso.
Grafico 3: tonalità 285 (blu). Mostra che la colorazione più alta viene trovata con un tono ancora più scuro. In compenso, la capacità cromatica si perde con un tono più leggero.
Combinazione di colori
Una combinazione di colori è l'insieme di accenti e superfici derivati da tonalità specifiche e assegnati a ruoli di colore, che vengono poi mappati agli elementi e ai componenti dell'interfaccia utente. I ruoli relativi ai colori si riferiscono all'utilizzo del colore piuttosto che alla tonalità del colore. Ad esempio, su principale anziché su blu.
Le combinazioni di colori sono progettate per essere armoniose, garantire testo accessibile e distinguere gli elementi dell'interfaccia utente e le superfici l'uno dall'altro. Le coppie di ruoli di colore (composte da ruoli container e nel container) hanno valori tonali che forniscono un contrasto accessibile.
Gli schemi chiari e scuri vengono creati e hanno i loro toni specifici.
Il sistema di colori del materiale e gli schemi personalizzati forniscono valori predefiniti per il colore come punto di partenza per la personalizzazione.
Scopri di più sul sistema di colori M3.
Per una combinazione di colori personalizzabile, scopri il Kit UI di Android.
Applica il colore all'interfaccia utente
Il colore dell'interfaccia utente è composto da colori intensi, semantici e superficiali.
- I colori intensi si riferiscono ai colori principali che in genere fanno parte della tavolozza dei colori del brand Android.
- I colori semantici (o colori personalizzati in Material 3) sono colori con un significato specifico.
- I colori della superficie si riferiscono a tutti i colori derivati neutri utilizzati per i colori di sfondo.
Colore di contrasto
I colori intensi di solito mostrano l'essenza più espressiva di una UI, che si tratti di branding, evidenziazione di azioni, espressione personale o espressione utente.
Ogni colore di contrasto (primario, secondario e terziario) è fornito in un gruppo di quattro-otto colori compatibili di diverse tonalità per l'accoppiamento, l'enfasi e l'espressione visiva.
Colore dinamico
I colori intensi possono essere definiti da origini dinamiche.
A partire da Android 12 (livello API 31), il colore dinamico consente al sistema di estrarre un colore di origine dallo sfondo o dai contenuti in-app di un utente, ad esempio un asset keyart. Il colore dinamico utilizza algoritmi e processi di MCU per creare schemi e implementarli con il minimo sforzo. Per applicare un colore dinamico alla tua app, leggi Consentire agli utenti di personalizzare la propria esperienza con i colori nella tua app.
Prova il lab di codice Visualizzazione del colore dinamico per un'analisi pratica dei colori dinamici.
Statico
Uno schema statico è uno schema con valori invariati (o relativi). Un modo comune per creare uno schema statico è utilizzare i colori del brand, allineando i colori primari, secondari e terziari alla tavolozza dei colori principale del brand.
Anche se utilizzi un colore dinamico, ti consigliamo vivamente di creare uno schema statico come riserva se il colore dinamico non è disponibile per il dispositivo dell'utente. In caso contrario, il sistema utilizza la combinazione di colori viola di base.
Utilizzando il generatore di temi di materiali, puoi applicare l'algoritmo dei colori della MCU per generare un tema statico e personalizzato. In questo modo, i colori scelti da te sono in linea con i token del sistema di colori M3 e i principi di accessibilità armoniosi.
È comunque possibile creare uno schema statico completamente personalizzato. Per farlo, assegna valori diversi agli stili di colore (color.kt o color.xml) oppure esporta il file del tema da Material Theme Builder per Figma dopo aver aggiornato le proprietà dello stile Figma.
Utilizzo
I componenti del materiale hanno ruoli colore preassegnati, ma puoi utilizzare token colore nell'interfaccia utente e negli elementi personalizzati. Usa consapevolmente tutti i colori intensi, tenendo presente che l'occhio umano è particolarmente attratto dai colori vivaci.
Come nel caso dei tipi, il sistema applica il colore in una gerarchia, con il colore principale e i rispettivi ruoli assegnati a inviti all'azione cruciali. Consigliamo componenti come i pulsanti di azione mobili (FAB) da assumere nei ruoli principali.
Quando scegli un colore principale, è consigliabile assegnare il colore principale del brand. In alternativa, puoi selezionare un colore per rappresentare i componenti interattivi, consentendo di usare i colori del brand con meno parsimonia. I colori secondari e terziari proseguono nella gerarchia di importanza dell'evidenziazione.
Un look troppo saturo può comportare l'utilizzo solo dei ruoli del colore di base di primario, secondario o terziario. Per migliorare la gerarchia dei colori, applica combinazioni di colori in modo da includere colori dei contenitori e ruoli dei contorni meno vivaci.
Per garantire un'esperienza utente migliore, utilizza colori primari più vivaci per indicare le azioni di maggiore rilievo nella gerarchia visiva della tua app. Nella figura che segue, il FAB nella prima immagine ha un colore tenue con lo stesso tono e la stessa crominanza della navigazione, il che lo rende in armonia con l'ambiente. La seconda immagine mostra un FAB che attira maggiore attenzione su se stesso con un colore principale vivace.
Per una panoramica pratica sui colori dinamici, prova il lab del codice Personalizzazione del colore del materiale.
Colore semantico
Il colore semantico è un colore che ha un significato specifico. Ad esempio, Errore è un colore semantico.
Sii coerente con il significato del colore: se stabilisci un pattern, ripetilo in tutta l'app. Ad esempio, se hai impostato il viola per indicare una funzionalità di appartenenza, utilizzalo per tutte le istanze di questa funzionalità di appartenenza.
Nell'esempio seguente, un'app utilizza il rosso per indicare un errore in un campo di testo, mentre il viola nell'altro viene utilizzato per creare confusione quando scorri un modulo.
Sebbene la combinazione di colori Materiale fornisca il colore dell'errore semantico, i colori semantici aggiuntivi vengono creati tramite colori personalizzati per estendere la combinazione di colori. Scopri di più sui colori personalizzati.
L'armonizzazione consente di allineare i colori dinamici generati dagli utenti con i colori personalizzati all'interno dell'app per creare tavolozze dei colori più armoniose.
Colori superficie
I colori delle superfici sono progettati per gli elementi di sfondo come contenitori, fogli e riquadri di componenti e rappresentano la maggior parte dei colori dell'app. Non essere timido a utilizzare molto spazio sulla superficie: l'occhio umano ha bisogno di spazio per rilassarsi. Le piattaforme aiutano anche a inserire contenuti e a indirizzare il lettore.
M3 ha introdotto il concetto di superfici tonali, nel senso che tutti i colori derivano dalle tavolozze dei toni. I toni creano profondità e più contrasto per favorire l'accessibilità. Per ulteriori informazioni sui ruoli delle piattaforme, consulta le linee guida sui ruoli delle piattaforme M3.
Accessibilità e colore
Le persone vedono il colore in vari modi, a seconda dell'acuità visiva. Poiché alcuni lettori sono daltonici, devi controllare le combinazioni di colori per assicurarti che gli elementi dell'interfaccia utente non si confondano. Sebbene opacità e peso possano non essere la tonalità letterale di un colore, hanno un forte effetto visivo sulla percezione del colore da parte degli utenti.
Il contrasto cromatico è la differenza tra la luminanza degli elementi in primo piano e dello sfondo, presentata sotto forma di rapporto. A questo criterio vengono assegnati i voti. Ad esempio, la misurazione del contrasto tra il testo su un pulsante e il relativo contenitore consente di determinare la leggibilità del testo. Le linee guida sul contrasto di colore sono suddivise in testi e non in testo, ognuno con il proprio insieme di voti. Per ulteriori dettagli, consulta Progettare con colori accessibili.
Non rendere mai il colore l'unico invito o indicatore per un'azione disponibile. Utilizza un pulsante del componente, una modifica dello spessore del carattere o persino un'icona per informare l'utente che può interagire con l'elemento.
Colore implementazione
I token sono piccole rappresentazioni semantiche di variabili dei dati di progettazione. Sono ripetibili e sostituiscono i valori statici, come i codici esadecimali del colore, con nomi semplici. Per assegnare il ruolo del colore a un elemento, usa i token anziché i valori colore hardcoded.
Consulta l'esempio di Figma Now in Android per avere alcuni esempi di mappatura dei ruoli per i colori.
I valori dei colori vengono impostati all'interno di un file colore color.kt utilizzando Scrivi (o color.xml utilizzando Visualizzazioni). Questi colori impostati come stili
fanno parte di un tema. Per ulteriori informazioni, consulta l'articolo Progettare temi per dispositivi mobili Android.
Per impostare i valori dei colori su Android, utilizza il codice esadecimale, che rappresenta l'RGB in un formato a 6 cifre. Per acquisire l'opacità, aggiungi il valore all'inizio in modo da creare un codice a 8 cifre.
Utilizzo dello strumento per la creazione di temi di Material:
Puoi creare combinazioni di colori chiari e scuri personalizzate utilizzando lo strumento Material Theme Builder (MTB).
La modalità MTB consente di visualizzare i colori dinamici, generare token di material design e personalizzare le combinazioni di colori.
La combinazione di colori può essere completamente personalizzata aggiornando le proprietà di stile nel riquadro di controllo Figma. Questi valori modificati vengono esportati.
