Un tema è un insieme di stili o attributi, ad esempio colore, tipo e forma, che possono influire sull'aspetto e sul design del dispositivo mobile o dello schermo di un utente e dell'esperienza in-app.
Possessi guadagnati
- Per offrire agli utenti un'esperienza più personalizzata e accessibile, assicurati che la tua app adotti le preferenze di sistema, inclusi temi quali chiaro o scuro, dinamici e contrasto.
- Crea un tema personalizzato da utilizzare come riserva se il tema dinamico non è disponibile.
- Valuta le impostazioni del tipo quando utilizzi vari temi.
- Verifica sempre la presenza di contrasto del testo e della superficie per garantire la leggibilità.
Tipi di temi
I temi si basano sul sistema o sulle app. I temi di sistema possono interessare l'intera UI del dispositivo dell'utente e fornire i controlli corrispondenti nelle impostazioni del dispositivo, mentre il tema di un'app interessa solo l'app in cui è implementato.
La tua app deve implementare uno dei due tipi di tema per visualizzarlo, ma i temi dell'app si applicano solo all'interno dell'app e non altrove sul dispositivo. Puoi anche eseguire l'override di alcune impostazioni del tema di sistema con le impostazioni in-app.
Temi di sistema
I temi di sistema si applicano a un intero dispositivo Android, incluse singole app, a seconda delle impostazioni utente. I temi di sistema includono quelli chiari e scuri, quelli generati dagli utenti e quelli del produttore.
Temi chiaro e scuro
Il tema chiaro, o modalità Giorno, è costituito da una modalità di visualizzazione luminosa con maggiore luminanza e superfici caratterizzate da elevati valori tonali. Al contrario, il tema scuro, o modalità notturna, sposta l'interfaccia utente per ridurre la luminanza. Le superfici sono realizzate con grigi scuri o tonali bassi.
Il tema scuro offre diversi vantaggi: contribuisce alla leggibilità dello schermo in condizioni di sole o scarsa illuminazione, riduce l'affaticamento degli occhi a causa della minore luminosità e risparmia la batteria. Inoltre, è spesso la funzionalità dell'app più richiesta dagli utenti.
Tieni presente quanto segue durante l'implementazione dei temi chiari e scuri:
- Puoi personalizzare una combinazione di colori per migliorare l'espressione. Se utilizzi il generatore di temi di Material per creare uno schema, ne viene creato automaticamente uno scuro. Ulteriori informazioni sulla personalizzazione del materiale e del sistema di colori per creare un tema con brand.
- Gli utenti possono impostare un tema chiaro o scuro nelle impostazioni Display a livello di sistema su schermo sempre acceso, sempre disattivato o automatico in base all'ora del giorno. Consigliamo di riflettere le impostazioni di sistema preferite dall'utente, ma è anche una buona idea creare controlli in-app per fornire agli utenti modifiche più granulari.
- Anche i contenuti web nei componenti WebView possono utilizzare uno stile chiaro, scuro o predefinito. Leggi come è supportato il tema scuro nelle WebView.
- Se gli utenti lo hanno abilitato, Android può forzare l'utilizzo di un tema scuro. Puoi anche creare un tema scuro personalizzato per un maggiore controllo.
- Se l'utente non ha abilitato altri temi o impostazioni, hai la possibilità di "bloccare" la tua app al tema chiaro. Tuttavia, sconsigliamo di farlo, perché questo potrebbe andare contro le esigenze di accessibilità e personalizzazione dell'utente.
Temi generati dagli utenti
I temi generati dagli utenti sono supportati dal colore dinamico, che abbiamo reso disponibile con Material You a partire da Android 12. Quando questa opzione è abilitata, il colore dinamico ricava i colori personalizzati dallo sfondo di un utente da applicare alle sue app e all'interfaccia utente del sistema. Questa tavolozza dei colori è utilizzata come punto di partenza per generare combinazioni di colori chiari e scuri.
Le impostazioni dei caratteri possono anche essere aggiornate all'interno delle impostazioni del dispositivo per soddisfare le preferenze e le esigenze di accessibilità dell'utente. Queste impostazioni possono e devono essere applicate alle app, pertanto assicurati di utilizzare valori di pixel scalabili per i caratteri.
Temi del produttore
I produttori di dispositivi potrebbero fornire ulteriori funzionalità proprietarie dei temi, che possono influire sull'interfaccia utente e sulle impostazioni di visualizzazione del sistema.
Temi dell'app
Baseline
I componenti Material nella libreria Material forniscono un tema di base che utilizza una combinazione di colori viola e il carattere Roboto. Qualsiasi app che non definisce attributi del tema ripristina questi attributi di base.
Personalizzato (brand)
L'utilizzo di temi personalizzati ti offre una gamma più ampia di espressione per l'aspetto e il design della tua app o come alternativa quando determinati temi di sistema non sono disponibili. Ciò è utile sia che tu stia lavorando con un sistema completo di design personalizzato, una piccola guida al brand o alcuni dei tuoi colori preferiti.
La tua app può anche avere più schemi personalizzati, ad esempio schemi completi tra cui l'utente può scegliere, elementi ispirati ai contenuti o elementi con brand secondari.
Contenuti
Per dare maggiore risalto ad alcuni contenuti, l'UI può usare il colore dinamico per ereditare il colore da tali contenuti. Il colore dei contenuti funziona bene con una singola origine di contenuto principale, ma assicurati di utilizzarlo con cautela nelle visualizzazioni con più origini di contenuto.
In genere un tema influisce su un'app nel suo complesso, ma può essere applicato anche in modo selettivo e insieme ad altri temi. Evita troppi temi e combinazioni mantenendo una gerarchia, ovvero l'origine di un tema principale (dinamico o personalizzato) che si applichi alla maggior parte dell'interfaccia utente.
Materiale
Il material design fornisce un tema di base e sistemi di tema (Colore, Tipo, Forma). I temi del Material possono essere estesi anche per aggiungere attributi aggiuntivi al tema.
Brand
Se i sistemi dei temi Material Design non sono in linea con l'aspetto che desideri nella tua app, puoi implementare un tema completamente personalizzato. Assicurati di testare le proprietà personalizzate per verificarne il contrasto e la leggibilità.
Scopri come implementare un sistema personalizzato in Scrivi.
Attributi del tema
Gli attributi dei temi sono allineati con gli stili visivi comuni utilizzati nella progettazione dell'interfaccia utente per evocare una gamma di estetica. All'interno dell'app, queste proprietà sono spesso associate a sistemi di tema Materiale per consentire la personalizzazione degli app maker.
Colore
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.
All'interno di un tema, una combinazione di colori è il gruppo di tonalità assegnati a ruoli specifici mappati ai componenti. Scopri di più sul colore nell'interfaccia utente di Android e sul sistema di colori Material 3.
Tipo
Il carattere di sistema di Android è Roboto (disponibile senza costi per tutte le app), ma puoi personalizzare il tipo di carattere. Considera la leggibilità dei caratteri scelti per allinearli ai loro ruoli. Scopri come applicare il tipo.
Forma
La personalizzazione della forma degli angoli del container oltre le impostazioni predefinite della base di riferimento aiuta a definire il carattere della tua app. Ad esempio, usa gli angoli arrotondati per dare un tocco più morbido e divertente o un taglio angolare per una sensazione più seria. Controlla i token e gli stili di forma per i componenti Material.
Icone
Le icone Material possono essere utilizzate nella tua app in cinque stili: riempito, Contorno, Nitido, arrotondato, bicolore. Usa lo stesso stile delle icone in tutta l'app per mantenere un look coerente ed elegante.
Altri attributi del tema
Sebbene colore, tipo e forma siano i principali sistemi di tematizzazione di Material, i sistemi di progettazione non si limitano ai concetti su cui si basa Material. Puoi modificare i sistemi esistenti e introdurne di nuovi, con nuove classi e tipi, per rendere altri concetti compatibili con i temi. Potrebbe anche essere necessario estendere o sostituire i sistemi esistenti per utilizzare attributi personalizzati oltre a quelli forniti. Ad esempio, potresti voler aggiungere un sistema di sfumature o dimensioni di spaziatura.
Applicare un tema nell'app
Tema e stile più corsi
Sia i temi che gli stili possono avere più attributi di design. Uno stile può essere indipendente da un tema e si riferisce all'aspetto di un singolo elemento (o elemento View), mentre puoi impostare un tema per più elementi e persino per l'intera app. Uno stile è una scelta stilistica riutilizzabile, analoga a uno stile o a un token nel software di progettazione. Ad esempio, Corpo grande è uno stile, mentre Chiaro e Scuro sono temi.
Implementare un tema in Compose
Un tema è in genere costituito da più sistemi che raggruppano concetti visivi e comportamentali comuni, che puoi modellare utilizzando classi con valori a tema.
Vedi Material Design 3 in Compose per ulteriori informazioni sull'utilizzo di Jetpack Compose per creare un'implementazione del tema Material Design 3.
Color.kt
val md_theme_light_primary = Color(0xFF476810)
val md_theme_light_onPrimary = Color(0xFFFFFFFF)
val md_theme_light_primaryContainer = Color(0xFFC7F089)
val md_theme_dark_primary = Color(0xFFACD370)
val md_theme_dark_onPrimary = Color(0xFF213600)
val md_theme_dark_primaryContainer = Color(0xFF324F00)
Implementare un tema in Visualizzazioni
I temi sono una raccolta di risorse con nomi semantici che possono essere utilizzate in tutta l'app. I temi condividono la stessa sintassi di stile.
Guida introduttiva all'utilizzo di Views.
Colors.xml
<resources>
<color name="home_yellow">#E8D655</color>
</resources>
WebView
Anche i contenuti web in WebView possono utilizzare uno stile chiaro, scuro o predefinito. Scopri come è supportato il tema scuro nelle WebView.
Personalizzare un tema Material
Puoi utilizzare il plug-in Figma Material Theme Builder per personalizzare un tema Material. La creazione di un tema con questo strumento ti offre file di temi implementabili con combinazioni di colori chiari e scuri già generati, il che ti consente di andare oltre la personalizzazione aggiornando il file del tema esportato con i tuoi valori esatti.
