Lo stile efficace dei widget è fondamentale per ottenere un'esperienza utente visivamente accattivante e coerente. Questa sezione approfondisce i concetti e le tecniche chiave per definire il colore e la tipografia per creare i widget per Android più utili e coinvolgenti.
Colore
Utilizza il colore per esprimere lo stile e comunicare il significato. L'impostazione di colori appropriati per i widget è fondamentale per la leggibilità, la personalizzazione e, naturalmente, per esprimere l'identità del brand della tua app.
Utilizza ruoli e token di colore Material per rispettare le linee guida sul contrasto per l'accessibilità e supportare le funzionalità di colore dinamico, come il colore generato dall'utente e i temi scuri o chiari.
Esplora la gerarchia visiva attraverso i ruoli di accento per creare un contrasto vivace negli elementi o esplora un tema personalizzato più giocoso che esprima il tuo brand.
Consulta le linee guida sui colori di Material Design per scoprire di più sui ruoli dei colori.
Forma
La forma del widget ne determina l'atmosfera. Per i widget rettangolari, utilizza la proprietà Raggio angolo di sistema. Questa proprietà crea coerenza su diversi dispositivi e contribuisce a evitare che i contenuti dei widget vengano tagliati.
Se il widget mostra contenuti di dati minimi, come una foto, il meteo o la riproduzione del brano corrente, prova a rendere l'intero widget una forma espressiva per portare una scarica di energia entusiasmante nella schermata Home dell'utente. Se hai layout e dati più complessi, valuta la possibilità di utilizzare forme espressive per la gerarchia visiva, evidenziando nuovi contenuti o un invito all'azione.
Per scoprire di più, consulta Implementare gli angoli arrotondati.
Temi dinamici
A partire da Android 12, un widget può utilizzare i colori del tema del dispositivo per pulsanti, sfondi e altri componenti. In questo modo, si ottiene una coerenza visiva tra diversi widget, icone della schermata Home e sfondi, offrendo agli utenti Android un'esperienza più coesa. L'utilizzo dei token di colore forniti consente al widget di apparire integrato nei temi dei dispositivi forniti da diversi produttori e nei temi dinamici impostati dall'utente.
Tema chiaro e scuro
Un tema scuro è una versione con scarsa illuminazione dell'interfaccia utente del dispositivo che mostra principalmente colori di superficie scuri. Gli utenti passano sempre più spesso al tema scuro per una migliore durata della batteria e per il comfort degli occhi. Se il widget non si adatta al tema scuro, sembrerà fuori posto e potrebbe frustrare gli utenti.
Tipografia
La tipografia contribuisce a rendere la scrittura leggibile e bella. Utilizza dimensioni e pesi dei caratteri per stabilire una gerarchia chiara, guidando lo sguardo dell'utente verso gli elementi più importanti. Presta attenzione all'interlinea e alla spaziatura tra le lettere (kerning) per migliorare la leggibilità, soprattutto per i testi più piccoli all'interno dello spazio limitato di un widget.
Gerarchia
La gerarchia viene comunicata attraverso differenze di spessore, dimensione, altezza della riga e spaziatura tra le lettere del carattere. La scala tipografica aggiornata organizza gli stili di testo in cinque ruoli che prendono il nome dal loro scopo. I cinque stili di testo sono display, titolo, titolo, sottotitolo e corpo. I nuovi ruoli sono indipendenti dal dispositivo, il che consente un'applicazione più semplice in una varietà di casi d'uso.
Anche se i widget utilizzano i caratteri di sistema, puoi comunque aggiungere dettagli espressivi con scale tipografiche d'impatto: osa di più con titoli, etichette e dati.
