Questa pagina è stata tradotta dall'API Cloud Translation.

Colore

Il fondamento della strategia cromatica del sistema operativo Android Automotive è l'idea di "costruire dal nero". Basare i colori dell'interfaccia sul nero garantisce un'esperienza utente più coerente, senza drastiche variazioni tra i temi giorno e notte.

Costruire in nero garantisce anche un migliore allineamento con l'hardware, poiché negli interni e nei cruscotti delle auto vengono spesso utilizzati materiali scuri.

Guida in sintesi (TL;DR)

Crea le tue scelte di colore dal nero per supportare la guida sia di giorno che di notte
Mantenere un rapporto di contrasto di almeno 4,5:1 tra lo sfondo e le icone o il testo

Utilizzare il colore in modo minimo, con uno scopo
Mostra l'elevazione tramite scala di grigi
Utilizzare la trasparenza e l'opacità per guidare la messa a fuoco visiva

Palette e sfumature

Il tema scuro dell'interfaccia del sistema operativo Android Automotive si basa su una tavolozza in scala di grigi. Idealmente, eventuali colori aggiuntivi dovrebbero avere un'intensità ridotta, come nelle varianti scure dei colori delle palette Material Design.

Questa sezione include informazioni sulla tavolozza e sull'opacità, insieme a grafici che forniscono valori in scala di grigi per i livelli di elevazione associati a ciascun componente.

Progettazione dei materiali

Utilizzo dei colori e tavolozze

Palette in scala di grigi del sistema operativo Android Automotive

La tavolozza in scala di grigi del sistema operativo Android Automotive viene utilizzata per elementi quali testo e icone ed è progettata per soddisfare i requisiti specifici dell'ambiente di guida.

Questa tavolozza deve essere sufficientemente diversificata per:

Copri tutti i diversi casi d'uso dell'interfaccia utente del tema scuro
Fornire una gamma sufficiente per definire la gerarchia attraverso differenze tonali

tavolozza dei colori grayscle — Questa tavolozza in scala di grigi è la tavolozza di colori principale per Android Automotive OS e supporta il tema scuro dell'interfaccia.

Le differenze tonali creano l'illusione di profondità anche su sfondi completamente neri, dove le ombre sono impercettibili. Per fornire differenze tonali sufficienti, la tavolozza dei grigi del sistema operativo Android Automotive include grigi medi. I grigi di Material Design a partire dal Grigio 900 si avvicinano troppo rapidamente ai colori più brillanti; un colore due toni più chiaro sarebbe il Grigio 700, che è troppo luminoso per il contesto automobilistico.

Grafico di elevazione dei componenti — Questo grafico mostra i livelli di elevazione a cui si trovano i vari componenti. A ciascun livello di elevazione è associato un valore grigio.

Livelli di elevazione in scala di grigi in modalità giorno e notte — Questo grafico mostra i valori di grigio associati ai vari livelli di elevazione in modalità giorno e notte

Colore di accento

Oltre alla tavolozza in scala di grigi alla base dell'interfaccia del sistema operativo Android Automotive, è possibile utilizzare con parsimonia altri colori, ad esempio per mettere a fuoco il disegno.

Attualmente, il sistema operativo Android Automotive ha un colore di accento ufficiale, una tonalità di blu denominata nella libreria di supporto "accento auto". Per aumentare la saturazione e la vivacità, questo blu è leggermente diverso dal blu standard di Google. Questa modifica aiuta i colori a uniformarsi meglio su superfici scure.

Il colore blu "accento auto" nel sistema operativo Android Automotive è più saturo del blu standard di Google, progettato per funzionare bene nell'interfaccia a tema scuro durante la guida sia di giorno che di notte.

Grafici del valore di opacità

La trasparenza trasmette un senso di profondità e rafforza il modello spaziale di Material Design. Per utilizzare la trasparenza in modo efficace, scegli valori di opacità scuri o bianchi in base al tuo caso d'uso.

Valori di opacità scura

Il caso d'uso più comune per i valori di opacità scura è la creazione di veli (sovrapposizioni).

Valori di opacità del nero per le sovrapposizioni

Valori di opacità del bianco

Questi valori sono utilizzati principalmente sul testo. Sono particolarmente efficaci quando lo sfondo è colorato. L'uso del grigio uniforme su uno sfondo scuro e colorato crea un effetto troppo confuso.

Per esempi su come utilizzare l'opacità in scrim e gerarchie di testo, vedere Guida ed esempi .

Contrasto

Per soddisfare le linee guida di sicurezza di base del sistema operativo Android Automotive, il rapporto di contrasto tra sfondo e icone o testo deve essere almeno 4,5:1. Per maggiori dettagli su come i rapporti di contrasto si applicano a specifici elementi dell'interfaccia utente per auto, consulta Rendi i contenuti facili da leggere .

Il contrasto non — Non lasciare che il contrasto scenda al di sotto di 4,5:1, riducendo la sicurezza del conducente

Guida ed esempi

L'interfaccia utente scura del sistema operativo Android Automotive è pulita e semplice, con un uso minimo del colore. Oltre a utilizzare colori, toni e valori di opacità appropriati per gli elementi dell'interfaccia utente (vedere Palette e gradienti ), è importante assicurarsi che ogni utilizzo di colori e gradienti abbia uno scopo.

Questa sezione fornisce indicazioni ed esempi per applicare trasparenza, opacità e colore per raggiungere diversi obiettivi. Tra questi obiettivi rientrano:

Sfondi oscuranti
Mantenere la coerenza
Stabilire una gerarchia visiva che concentri l'attenzione dell'utente sulle azioni principali.
Distinguere le entità in un elenco

Oscurare gli sfondi con le reti

Gli schermi a schermo intero (sovrapposizioni) vengono utilizzati per coprire gli sfondi dietro elementi di disturbo, come le finestre di dialogo che richiedono all'utente di eseguire un'azione. Gli schermi parziali vengono utilizzati per attirare l'attenzione sulla transizione di elementi come le notifiche.

Full scrim in modalità giorno — Schermo intero (dietro la scheda di dialogo) in modalità giorno

Schermo intero in modalità notturna — Schermo intero (dietro la scheda di dialogo) in modalità notturna

Scherma parziale in modalità giorno — Schermo parziale (dietro la notifica) in modalità giorno

Schermo parziale in modalità notturna — Schermo parziale (dietro la notifica) in modalità notturna

Mantenere la coerenza con il colore

Il colore è un potente strumento per rafforzare la memoria e il riconoscimento. Usalo per creare un'esperienza coerente da uno schermo all'altro.

Riconoscimento visivo del colore — Mantieni la continuità visiva utilizzando lo stesso colore per un elemento in più viste, come il colore verde utilizzato per le viste di navigazione passo passo qui

Continuità visiva del colore — Utilizzare il colore per collegare visivamente elementi e funzioni correlati, come i CTA rossi mostrati qui

Colore di accento persistente dell'app — Utilizza il colore dominante della copertina dell'album o il colore assegnato a un'app sugli elementi correlati come elemento visivo persistente. Qui, il cerchio attorno al pulsante di pausa è evidenziato dal verde Spotify.

Restrizione sull'uso del colore — Non utilizzare colori diversi per differenziare arbitrariamente componenti ripetuti all'interno di una singola schermata. Fai attenzione a usare i colori quando non aggiungono valore, come nel caso di questi contorni colorati attorno alle schede riepilogative, che riproducono il colore dell'icona dell'app.

Stabilire una gerarchia visiva

Utilizza i valori di opacità del bianco per creare una gerarchia visiva coerente e forte. I valori di opacità di 88, 72 e 56 offrono un contrasto sufficiente a soddisfare i requisiti di accessibilità, creando al contempo un ambiente di lettura confortevole su uno sfondo scuro. Utilizza l'opacità del 96% su tutti i bianchi per la modalità notturna.

Esempio di opacità e contrasto per mantenere la gerarchia visiva — Utilizzare valori di opacità e contrasto diversi per mantenere una gerarchia visiva.

Limitazione dell'opacità e del contrasto — Non abusare dei valori di opacità o contrasto massimi, applicandoli a troppi elementi. Un contrasto nei valori di opacità è necessario per differenziare le informazioni primarie da quelle secondarie.

Colore Mantieni tutto organizzato con le raccolte Salva e classifica i contenuti in base alle tue preferenze.