Sistema di colori

Android TV rispetta le linee guida sui colori di Google Material, garantendo un'interfaccia coesa e visivamente accattivante. Crea uno stile visivo molto coinvolgente e coinvolgente su misura per lo schermo della TV. Questa guida illustra nei dettagli come applicare il tema Material Design a un'interfaccia Android TV.

In evidenza

  • Android TV è conforme alle linee guida sul colore del materiale di Google, ma è ottimizzata per la TV
  • Sviluppa con temi scuri per creare esperienze cinematografiche.
  • Usa lo strumento Material Theme Builder per creare un tema.

Combinazione di colori

Una combinazione di colori consente di applicare i colori alla UI in modo significativo, creando armonia, coerenza del brand e scalabilità.

La base di una combinazione di colori è l'insieme di cinque colori chiave relativi singolarmente a tavolozze tonali distinte con tredici o più tonalità. Le specifiche tonalità di ogni tavolozza dei toni vengono assegnate ai ruoli di colore in un'interfaccia utente. I colori dei tasti sono la base per la creazione di qualsiasi combinazione di colori dinamica. Puoi creare colori chiave in base a un colore di base utilizzando lo strumento per la creazione di temi di materiali, oppure scegliendo i colori che preferisci.

Colori dei tasti

Una volta stabiliti i colori chiave, l'algoritmo di Material specifica l'intero spettro di colori necessario per esprimere stati di interazione, errori e contrasto accessibile.

Procedura di generazione del tema a colori

Lo strumento per la creazione di temi Material genera schemi di colori sia chiari sia scuri con gli stessi token di colore, semplificando il passaggio da un tema all'altro.

Ruoli colore

Principale

I ruoli principali vengono utilizzati per i componenti chiave dell'interfaccia utente, come i pulsanti in evidenza, gli stati attivi e la tonalità delle superfici elevate.

Accento principale

Secondario

I ruoli secondari vengono utilizzati per i componenti meno in evidenza nell'interfaccia utente, come i chip di filtro e le opportunità di ulteriori per l'espressione dei colori.

Accento secondario

Terziario

I ruoli terziari vengono utilizzati per accenti contrastanti che possono essere utilizzati per bilanciare colori primari e secondari o per attirare maggiore attenzione su un elemento, ad esempio un campo di immissione.

Accento terziario

Piattaforme

Vengono utilizzati ruoli neutrali per superfici e sfondi, nonché testi e icone che enfatizzano un'elevata enfasi. Scopri di più sulle piattaforme nelle linee guida di Material Design.

Piattaforme

Sinossi

Scopri di più sui ruoli relativi ai contorni nelle linee guida di Material Design.

Panoramica

Colore dinamico

Su Android Mobile, a partire da Android 12, gli utenti possono generare schemi personalizzati tramite la selezione di sfondi e altre personalizzazioni. Android TV non supporta gli sfondi, pertanto gli schemi generati dagli utenti non sono supportati e il sistema operativo Android TV trasmette solo le tavolozze di base.

Al posto delle combinazioni generate dagli utenti, puoi utilizzare combinazioni di colori basate sui contenuti per creare design dinamici e divertenti, basati su contenuti come locandine di film, copertine di album e altre immagini hero. Per maggiori dettagli, consulta le schemi di colori basate sui contenuti.

Utilizzando le librerie per gli sviluppatori delle utilità colore Material, puoi estrarre i colori chiave direttamente dall'immagine oppure eseguire il tuo algoritmo di estrazione dei colori per trovare un colore chiave e poi utilizzare la funzionalità Material Color Utility per generare un tema.

Ecco un esempio di come i colori vengono estratti da un'immagine:

Colore dinamico

  1. Immagine di origine
  2. Colore dei semi estratti
  3. Colori della chiave generati

Puoi generare una combinazione di colori utilizzando questi colori chiave oppure applicare i toni all'interfaccia utente.

Esempio di applicazione di colori dinamici

Accessibilità

Per considerazioni sull'accessibilità, consulta le best practice per l'accessibilità per Android TV