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
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.
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.
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à 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.
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.
Cosa fare
Cosa non fare
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.
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.
Cosa fare
Cosa fare
Cosa fare
Cosa non fare
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.
Cosa fare
Cosa non fare