Un tema è un insieme di stili o attributi, come colore, tipo e forma, che possono influenzare l'aspetto dei dispositivi mobili o degli schermi più grandi di un utente. un'esperienza in-app.
Concetti principali
- Per offrire agli utenti un'esperienza più personalizzata e accessibile, assicurati che la tua app adotta le preferenze di sistema, inclusi temi come chiaro o scuro, dinamici e il contrasto.
- Crea un tema personalizzato da utilizzare come riserva se il tema dinamico non è disponibile.
- Considera le impostazioni tipo quando usi diversi temi.
- Verifica sempre il contrasto del testo e della superficie per garantirne la leggibilità.
Tipi di temi
I temi sono basati sul sistema o sulle app. I temi di sistema possono influire sull'intera UI di un dispositivo e forniscono i controlli corrispondenti nelle impostazioni, mentre riguarda solo l'app in cui è implementato.
La tua app deve implementare uno dei due tipi di tema per visualizzarlo, ma si applicano i temi dell'app solo all'interno dell'app e non altrove sul dispositivo. Puoi anche eseguire l'override impostazioni del tema di sistema con impostazioni in-app.
Temi di sistema
I temi di sistema vengono applicati all'intero dispositivo Android, incluse le singole app in base alle impostazioni utente. I temi di sistema includono temi chiari e scuri. temi generati dagli utenti e temi per i produttori.
Temi chiari e scuri
Il tema chiaro, o modalità Giorno, è costituito da una modalità di visualizzazione luminosa con un luminanza e superfici realizzate con valori tonali elevati. Al contrario, con il tema scuro, o Modalità notturna, sposta l'UI per ridurre la luminanza. Le superfici sono di colore scuro grigi o valori tonali bassi.
Il tema scuro offre diversi vantaggi, ad esempio contribuisce a migliorare la leggibilità dello schermo in condizioni di sole o in condizioni di scarsa illuminazione condizioni di luce, riducendo l'affaticamento oculare dovuto alla minore luminosità e batteria. Inoltre, spesso si tratta della funzionalità dell'app più richiesta dagli utenti.
Prendi in considerazione i seguenti concetti durante l'implementazione dei temi chiari e scuri:
- Puoi personalizzare una combinazione di colori per ottenere una maggiore espressione. Se utilizzi Material Theme Builder per creare uno schema, crea automaticamente un'immagine . Scopri di più sulla personalizzazione del materiale e del sistema dei colori per creare tema brandizzato.
- Gli utenti possono impostare un tema chiaro o scuro nelle impostazioni del display a livello di sistema su sempre acceso, sempre spento o automatico in base all'ora del giorno. I nostri suggerimenti impostazioni di sistema preferite dell'utente, ma è anche una buona idea Creare controlli in-app per fornire agli utenti modifiche più granulari.
- I contenuti web in WebView possono anche utilizzare lo stile chiaro, scuro o predefinito. Letto il supporto del tema scuro in WebView.
- Se gli utenti l'hanno attivato, Android può forzare l'applicazione di un tema scuro. Puoi anche creare un tema scuro personalizzato per un maggiore controllo.
- Se l'utente non ha attivato altri temi o impostazioni, puoi scegliere "chiusura" il tema chiaro per la tua app. Tuttavia, sconsigliamo di farlo, in quanto può 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 reso disponibile con Material You a partire da Android 12. Se attivato, dinamico Il colore ricava i colori personalizzati dallo sfondo di un utente da applicare alle sue app e UI di sistema. Questa tavolozza dei colori viene utilizzata come punto di partenza per la generazione combinazioni di colori chiari e scuri.
Le impostazioni dei caratteri possono essere aggiornate anche nelle impostazioni del dispositivo per soddisfare le preferenze ed esigenze di accessibilità. Queste impostazioni possono devono essere applicati alle app, quindi assicurati di usare valori pixel scalabili per i caratteri.
Temi del produttore
I produttori di dispositivi potrebbero fornire ulteriori funzionalità proprietarie per la tematizzazione che possono influire sulle impostazioni dell'interfaccia utente di sistema e di visualizzazione.
Temi dell'app
Temperatura di riferimento
I componenti Material nella raccolta Material forniscono un tema di base che utilizza una combinazione di colori viola e carattere Roboto. Qualsiasi app che non definisce un tema vengono ripristinati agli attributi di riferimento.
Personalizzato (brand)
I temi personalizzati ti offrono una maggiore gamma di espressioni per l'aspetto della tua app o di agire da riserva quando determinati temi di sistema non sono disponibili. Ciò è utile se stai lavorando con un sistema di progettazione completamente personalizzato, un guida al brand o alcuni dei tuoi colori preferiti.
La tua app può anche avere più schemi personalizzati, che si tratti di schemi completi che un utente può scegliere tra elementi ispirati ai contenuti o con brand secondari.
Contenuti
Per dare maggiore risalto ad alcuni contenuti, l'UI può utilizzare il colore dinamico per ereditare il colore da tali contenuti. Il colore dei contenuti funziona bene con un'unica origine di contenuto, usalo con cautela nelle visualizzazioni con più fonti di contenuto.
In genere un tema influisce sull'intera app, ma può anche essere applicato in modo selettivo e insieme ad altri temi. Evita troppi temi e combinazioni mantenendo con una gerarchia: l'origine del tema principale (dinamico o personalizzato) che si applica alla maggior parte dell'interfaccia utente.
Materiale
Material Design fornisce un tema di base e sistemi di temi (Colore, Tipo, forma). I temi Material possono anche essere estesi per realizzare ulteriori attributi al tema.
Brand
Se i sistemi di 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 impostazioni proprietà di contrasto e leggibilità.
Scopri come implementare un sistema personalizzato in Compose.
Attributi del tema
Gli attributi del tema sono allineati con gli stili visivi comuni utilizzati nella progettazione dell'interfaccia utente per evocano una serie di aspetti estetici. In-app, queste proprietà sono spesso legate al Material a tema per consentire la personalizzazione di app maker.
Colore
Usa i colori per esprimere lo stile e comunicare un significato. Impostare i colori dell'app può essere fondamentale per la personalizzazione, la definizione dello scopo semantico e, naturalmente, definire l'identità del brand.
All'interno di un tema, una combinazione di colori è il gruppo di toni assegnati a ruoli specifici mappati ai componenti. Scopri di più sui colori in Android UI e il sistema di colori Material 3.
Tipo
Il carattere di sistema di Android è Roboto (che è disponibile senza costi per tutte le app), ma personalizzare il tipo. Considera la leggibilità dei caratteri scelti per allinearli a nei loro ruoli. Scopri di più sull'applicazione del tipo.
Forma
Personalizzare la forma degli angoli dei contenitori dopo i valori predefiniti di base è utile per definire il carattere dell'app. Ad esempio, puoi utilizzare angoli arrotondati per creare un look più morbido e divertente oppure con un taglio angolare per un tocco più serio. Controlla i token di forma e gli stili per i componenti Material.
Icone
Le icone dei materiali sono disponibili in cinque stili: riempite, Con contorni, nitidi, arrotondati, bicolore. Utilizza lo stesso stile di icona in tutti i tuoi per mantenere un aspetto coerente e ricercato.
Altri attributi del tema
Sebbene colore, tipo e forma costituiscono i principali sistemi di tematizzazione, dei sistemi di progettazione non si limitano ai concetti su cui fa affidamento Material. Puoi modificare i sistemi esistenti e introdurne di nuovi, con nuove classi di testo, per rendere altri concetti compatibili con i temi. Potresti anche dover estendere o sostituire i sistemi esistenti per utilizzare attributi personalizzati in cui viene fornito il valore. Ad esempio, potresti voler aggiungere un sistema di sfumature o spaziatura dimensioni.
Applicare un tema nell'app
Tema/stile più corsi
Sia i temi che gli stili possono avere più attributi di design. Uno stile può essere indipendente da un tema, si riferisce all'aspetto di un singolo elemento (o Vista), mentre puoi impostare un tema per più elementi e anche per l'intero dell'app. Uno stile è una scelta stilistica riutilizzabile, analoga a uno stile o a un token il tuo software di progettazione. Ad esempio, Corpo grande è uno stile, mentre Chiaro e Scuro sono temi.
Implementare un tema in Compose
Solitamente, un tema è formato da più sistemi che raggruppano elementi visivi e di comportamento, che modelli utilizzando classi con valori tematici.
Consulta Material Design 3 in Compose per ulteriori informazioni sull'utilizzo di Jetpack Scrivi 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 nelle viste
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 a Visualizzazioni.
Colors.xml
<resources>
<color name="home_yellow">#E8D655</color>
</resources>
WebView
I contenuti web in WebView possono utilizzare anche lo stile chiaro, scuro o predefinito. Scopri come il tema scuro in WebView è supportato.
Personalizzare un tema Material
Puoi utilizzare il plug-in Figma Material Theme Builder per personalizzare un tema Material. Se crei un tema, puoi implementarlo file a tema con combinazioni di colori chiari e scuri già generati, consentendoti per migliorare la personalizzazione aggiornando il file del tema esportato con il tuo valori esatti.
