Colore

La strategia di colore del sistema operativo Android Automotive si basa sull'idea di "costruire dal nero". Basare i colori dell'interfaccia su nero rende un'esperienza utente più coerente, senza alcun cambiamento drastico tra i temi di giorno e di notte.

Costruire di nero contribuisce anche a migliorare l'allineamento con l'hardware, poiché i materiali scuri vengono spesso utilizzati negli interni e nei cruscotti delle auto.

Riepilogo in breve (TL; DR)

  • Crea i tuoi colori neri per supportare la guida di giorno e di notte
  • Mantieni un rapporto di contrasto di almeno 4,5:1 tra sfondo e icone o testo
  • Utilizzare il colore al minimo, con uno scopo
  • Mostra altitudine tramite scala di grigi
  • Usa trasparenza e opacità per guidarti con la messa a fuoco visiva

Tavolozze e gradienti

Il tema scuro dell'interfaccia del sistema operativo Android Automotive è basato su una tavolozza in scala di grigi. Idealmente, i colori aggiuntivi dovrebbero essere di intensità ridotta, come nelle varianti scure dei colori nelle tavolozze del Material Design.

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

Tavolo in scala di grigi del sistema operativo Android Automotive

La tavolozza della 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:

  • Copertura di tutti i diversi casi d'uso dell'interfaccia utente del tema scuro
  • Fornisci un intervallo sufficiente per definire la gerarchia attraverso le differenze tonali
tavolozza dei colori grigi
Questa tavolozza in scala di grigi è la tavolozza dei colori principale per il sistema operativo Android Automotive, in quanto supporta il tema scuro dell'interfaccia.

Le differenze tonali creano l'illusione della profondità anche su sfondi neri reali in cui le ombre sono impercettibili. Per fornire differenze tonali sufficienti, la tavolozza in scala di grigi del sistema operativo Android Automotive include i grigi. I grigi di Material Design a partire dal grigio 900 si avvicinano ai colori più chiari troppo velocemente; un colore a due passi più chiaro potrebbe essere Grigio 700, che è troppo luminoso per il contesto dell'auto.

Grafico di elevazione dei componenti
Questo grafico mostra i livelli di altitudine dei vari componenti. A ogni livello di altitudine è associato un valore grigio.
Livelli di altitudine in scala di grigi per giorno e notte
Questo grafico mostra i valori in grigio associati a vari livelli di altitudine in modalità giorno e notte

Accent color

Oltre alla tavolozza in scala di grigi al centro dell'interfaccia del sistema operativo Android Automotive, è possibile utilizzare altri colori con parsimonia per scopi come il disegno.

Attualmente, il sistema operativo Android Automotive ha un colore di accento ufficiale, una sfumatura di blu che viene indicata nella libreria di assistenza come "accento in auto". Per aumentare la saturazione e la vivacità, questo blu è leggermente spostato dal blu standard di Google. Questo cambiamento aiuta a colorare i colori su una superficie scura.

Esempio di colore intenso dell'auto blu
Il colore blu con "accento auto" nel sistema operativo Android Automotive è più saturo rispetto allo standard blu Google, progettato per funzionare bene nell'interfaccia a tema scuro sia durante la guida 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 dei valori di opacità scura è la creazione di scrims (overlay).

Valori di opacità neri per gli overlay

Valori di opacità bianca

Questi valori sono principalmente utilizzati nel testo. Sono particolarmente efficaci quando lo sfondo è colorato. L'uso di un colore grigio chiaro su sfondo colorato scuro sembra troppo fangoso.

Valori di opacità bianca per il testo

Per esempi su come utilizzare l'opacità in scrime e gerarchie di testo, vedi Linee guida ed esempi.


Contrasto

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

Contrasto sì

Cosa fare

Assicurati che il contrasto soddisfi un rapporto minimo di 4,5:1 per tutti i contenuti leggibili e strategici
Contrasto't

Cosa non fare

Evita un contrasto inferiore a 4,5:1, riducendo la sicurezza dei conducenti

Indicazioni ed esempi

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

Questa sezione fornisce linee guida ed esempi per applicare trasparenza, opacità e colore in modo da raggiungere una serie di obiettivi. Questi obiettivi includono:

  • Oscuramento degli sfondi
  • Mantenere la coerenza
  • Stabilire una gerarchia visiva che attragga l'utente alle azioni principali.
  • Entità distintive in un elenco

Oscuramento degli sfondi con schizzi

Gli crimini a schermo intero (overlay) vengono utilizzati per coprire gli sfondi dietro elementi dirompenti, come le finestre di dialogo che richiedono agli utenti di eseguire un'azione. Gli scrim parziali vengono utilizzati per attirare l'attenzione sulla transizione di elementi come le notifiche.

Ripida completa in modalità Giorno
Full scrim (dietro la finestra di dialogo) in modalità giorno
Ripida a schermo intero in modalità notturna
Full scrim (dietro la finestra di dialogo) in modalità notturna
Ripida parziale in modalità Giorno
Strutture parziali (dietro la notifica) in modalità giorno
Ripida parziale in modalità notturna
Strutture parziali (dietro la notifica) in modalità notturna

Mantenere la coerenza con i colori

Il colore è un potente segnale per rafforzare la memoria e il riconoscimento. Usalo per creare un'esperienza coerente da una schermata all'altra.

Riconoscimento del colore delle immagini

Cosa fare

Mantieni la continuità visiva utilizzando lo stesso colore per un elemento in più viste, ad esempio il colore verde utilizzato per le visualizzazioni passo passo di navigazione qui
Continuità dei colori

Cosa fare

Utilizza il colore per connettere visivamente elementi e funzioni correlati, ad esempio gli inviti all'azione di chiusura rossa mostrati qui
Colore intenso app intenso

Cosa fare

Utilizza il colore predominante della copertina dell'album o il colore assegnato da un'app a elementi correlati per garantire un'immagine permanente. Qui, il cerchio intorno al pulsante di pausa è evidenziato in verde di Spotify.
Limitazione di utilizzo del colore

Cosa non fare

Non utilizzare colori diversi per differenziare arbitrariamente i componenti ripetuti in un'unica schermata. Fai attenzione quando utilizzi i colori quando non aggiungono valore, come nel caso dei contorni colorati intorno alle schede riepilogative, che replicano il colore dell'icona dell'app.

Stabilire una gerarchia visiva

Utilizza i valori di opacità bianca per creare una gerarchia visiva coerente ed efficace. I valori di opacità 88, 72 e 56 contengono un contrasto sufficiente per soddisfare i requisiti di accessibilità, creando un ambiente di lettura confortevole su uno sfondo scuro. Usa il 96% di opacità su tutti i bianchi per la modalità notturna.

Esempio di opacità e contrasto per mantenere la gerarchia visiva

Cosa fare

Utilizza valori di opacità e contrasto diversi per mantenere una gerarchia visiva.
Opacità e limitazione del contrasto

Cosa non fare

Non utilizzare eccessivamente i valori di opacità o contrasto completi applicandoli a troppi elementi. È necessario un contrasto nei valori di opacità per differenziare le informazioni primarie e secondarie.