Materiale Interfaccia e colori dinamici in base allo sfondo

Android è impegnata da anni nel Material Design, ma con Material You ha fatto un passo significativo verso personalizzazione profonda basata sui tuoi sfondiNon si tratta più solo di cambiare qualche icona o di passare a un tema scuro, ma di far sì che l'intero sistema si adatti in modo intelligente ai colori scelti, mantenendo al contempo accessibilità e un design coerente.

Questa nuova filosofia di design, presente fin dal Android 12 e ampliato in Android 13, combina colori dinamici, movimento fluido e widget rinnovatiIl risultato è un'esperienza visiva che risulta più umana ed emotiva, ma che allo stesso tempo rispetta il lavoro di designer, sviluppatori e marchi che hanno bisogno di tenere sotto controllo la propria identità visiva.

Che cosa sono Material You o Material Design 3?

Material You, noto anche come Design dei materiali 3È l'ultima evoluzione del sistema di progettazione di Google per le interfacce UX/UI. Non è solo uno stile visivo, ma un insieme di guide, componenti e algoritmi che consentono di creare interfacce coerenti su telefoni cellulari, tablet, orologi e altri dispositivi Android.

A differenza delle versioni precedenti di Material Design, Material You si concentra su espressione personale e adattamento all'utenteL'idea è che due persone con lo stesso telefono cellulare possano avere un'interfaccia molto diversa, ma che entrambe rimangano utilizzabili, accessibili e coerenti con l'ecosistema Android.

Esteticamente, questa iterazione opta per un approccio più minimalista e morbidoMeno ombre nette, meno stili tipografici diversi, forme più arrotondate e un aspetto più pulito. Tutto questo si combina con un sistema di colori molto più sofisticato, in grado di generare intere palette a partire da un singolo colore sorgente.

Ciò che è interessante è che Material You non è limitato a Google PixelLa logica dinamica del colore e le linee guida di progettazione sono state estese a molti livelli di personalizzazione come Un'interfaccia utente, OxygenOS, ColorOS, OriginOS o MIUI, con il supporto specifico di Google per garantire un'esperienza coerente sulla maggior parte dei dispositivi con Android 12 e versioni successive.

Emozione, individualità e cambio di paradigma

Material You nasce anche da una riflessione sul modo in cui intendiamo il design digitale. Google sostiene che l'interfaccia non dovrebbe rispondere solo alla funzione, ma anche a... il sentimento dell'utente, la sua emozioneDa qui il gioco di parole in "Material You": il dispositivo dovrebbe essere unico come te, non un clone identico a milioni di persone.

Per anni, sia iOS che Android sono stati relativamente rigidi in termini di vera personalizzazione dell'interfaccia utenteOltre a cambiare lo sfondo, aggiungere un widget o installare un launcher, le opzioni erano limitate. Con Android 12 e Material You, Google riprende in parte lo spirito del suo vecchio slogan, "Be together, not the same", concentrandosi su un ecosistema comune ma con interfacce personalizzate per ogni utente.

Questa filosofia contrasta con la strategia di Apple, che è più focalizzata su un ecosistema chiuso e altamente controllato dove l'esperienza visiva varia poco tra gli utenti. Google, d'altra parte, consente una personalizzazione molto più precisa dell'aspetto, senza compromettere il funzionamento uniforme delle app su marchi e modelli diversi.

Principali novità di Material You

Material You introduce diverse linee di innovazione che si intrecciano per costruire l'esperienza completa: profonda personalizzazione, colori dinamici, adattabilità e movimento significativoTutto ciò è supportato da un solido sistema tecnico che può essere utilizzato da produttori, progettisti e sviluppatori.

Personalizzazione profonda dell'interfaccia

Uno dei cambiamenti più importanti è che l'utente può regolare l'aspetto del sistema in modo molto più preciso. Android è in grado di riorganizzare colori, superfici, pulsanti e controlli in modo che corrispondano alla tavolozza generata dallo sfondo o a un colore scelto manualmente.

Questa personalizzazione si estende alle barre di stato, alle notifiche, ai menu, al pannello rapido, alle impostazioni, alle app di Google e, progressivamente, alle app di terze parti che integrano Material Design 3. L'idea è che l'utente percepisca un esperienza visiva coerente end-to-end, senza bruschi salti di colore tra il sistema e le applicazioni.

Adattabilità a schermi e fattori di forma

Material You rafforza anche il adattabilità delle interfacce a diversi formati di schermoQuesto include telefoni cellulari tradizionali, tablet, smartwatch e dispositivi pieghevoli. La stessa logica di colori, tipografia e spaziatura viene adattata per garantire che l'interfaccia sia comoda da usare in ogni contesto.

Nel caso dei telefoni pieghevoli, Google ha definito linee guida specifiche su aspetti quali raggiungibilità degli elementi, cerniera centrale e layout più complessiAd esempio, il 25% superiore dello schermo aperto è considerato difficile da raggiungere, quindi si consiglia di non posizionare lì le azioni principali e di non posizionare le informazioni cruciali direttamente sopra la cerniera.

Movimento e feedback tattile

Il movimento in Material You non è solo per spettacolo. Android 12 introduce un effetto di Spostamento eccessivo basato sullo stiramento elasticoQuando l'utente prova a scorrere oltre la fine di un elenco, la superficie si allunga in modo fluido anziché visualizzare la tipica luminosità di rimbalzo di vecchia data.

Inoltre, le animazioni a increspatura al tocco sono state riprogettate per offrire un feedback tattile più sottile e fluidoGoogle incoraggia i produttori a mantenere questi comportamenti il ​​più possibile vicini allo standard, in modo che le app si comportino in modo prevedibile indipendentemente dal livello di personalizzazione.

Colori dinamici: il cuore di Material You

L'elemento chiave di questa nuova fase è l' sistema di colori dinamico, internamente noto come MonetA partire da Android 12, il sistema può estrarre un colore dominante dal tuo carta da parati o un colore di base definito e genera automaticamente una tavolozza completa che viene applicata al sistema e alle app compatibili.

Questo sistema si basa su un approccio tecnico piuttosto sofisticato che combina lo spazio colore CAM16, tavolozze tonali e ruoli di coloreL'obiettivo è mantenere una buona leggibilità, un contrasto sufficiente e un'estetica curata sia in modalità chiara che scura, anche se l'utente sceglie sfondi un po' complessi.

Come funziona la generazione di palette in Material You

El processo di creazione L'uso dei colori dinamici può essere riassunto in diversi passaggi ben definiti, sebbene alla base ci sia molta matematica del colore:

• Estrazione del colore del seme in base allo sfondo, al contenuto dell'app o a un colore fisso scelto dall'utente o dal marchio.
• Conversione e analisi nello spazio CAM16 per ottenere tono, cromaticità e altri parametri percettivi.
• Generazione di cinque tavolozze tonali chiave (accent1, accent2, accent3, neutral1 e neutral2) dal colore sorgente e dalle regolazioni di croma e tono.
• Creazione di 13 tonalità per tavolozza, con diversi livelli di luminanza (0, 10, 50, 100, 200, 300… fino a 1000), per un totale di 65 colori dinamici.
• Mappatura di tali toni sui ruoli dei colori dell'interfaccia utente, come primario, secondario, superficie, sfondo, testo, contenitori, ecc.

Ognuna delle cinque palette ha un comportamento specifico: ad esempio, accent1 è solitamente il colore principale del marchio o del tema dell'utente, accent2 e accent3 servono come accenti complementari, mentre neutral1/neutral2 sono riservati agli sfondi, alle superfici e agli elementi meno evidenti.

Stili dei temi in Android 13

Con Android 13 il sistema fa un ulteriore passo avanti e ti consente di scegliere tra sei diversi stili di temache variano il modo in cui il colore originale viene interpretato per generare la tavolozza finale:

• TONAL_SPOT: è il tema predefinito di Material You, con una vibrazione media e un trattamento equilibrato degli accenti.
• VIVACE: scegli una palette più intensa ma con transizioni fluide tra i colori, ideale per interfacce più accattivanti.
• ESPRESSIVO: genera combinazioni di colori più inaspettate e uniche, con elevata intensità cromatica.
• SPRUZZATA: riduce al minimo la saturazione, ricercando un effetto quasi monocromatico e molto morbido.
• RAINBOW: mescola accenti colorati con superfici neutre per offrire un risultato più discreto, consigliato per schemi statici piuttosto che per l'estrazione da sfondi.
• MACEDONIA: combina colori bicolore per conferire maggiore espressività, più adatto alle tavolozze fisse che agli sfondi dinamici.

Il sistema accetta un JSON memorizzato in Impostazioni.Sicurezza.PACCHETTI_OVERLAY_PERSONALIZZAZIONE_TEMA dove viene specificato il colore sorgente (ad esempio, "746BC1") e, facoltativamente, lo stile del tema (ad esempio, "EXPRESSIVE"). In questo modo, Android genera automaticamente le 65 varianti di colore che le app utilizzeranno.

Da dove provengono i colori di base?

Material You considera tre percorsi principali per ottenere il colore originale che servirà come punto di partenza per l'algoritmo:

• Dallo sfondo dell'utenteQuesto è il caso più comune. Il sistema analizza l'immagine utilizzando la quantizzazione del colore, estrae diversi candidati e ne seleziona uno che soddisfa i criteri minimi di cromaticità (ad esempio, un valore CAM16 ≥ 5) per garantire che il risultato non sia troppo opaco.
• Dal contenuto dell'app o del sito webL'applicazione stessa può decidere che il colore principale dell'interfaccia derivi dal suo contenuto, mantenendo così un'estetica vivace ma in linea con il prodotto.
• Da un colore selezionato manualmenteIl marchio o l'utente seleziona un colore specifico e il sistema crea l'intera tavolozza a partire da esso, senza dover dipendere dallo sfondo.

In tutti i casi, l'obiettivo è che il singolo colore di input diventi una combinazione di colori completa, accessibile e coerenteevitando combinazioni che ostacolano la lettura o rompono il senso di unità visiva.

Controllo per marchi, designer e sviluppatori

Una domanda logica per chiunque lavori nella progettazione di prodotti digitali è se questo sistema dinamico "scavalchi" i design dei marchi. Dopotutto, si passano ore a perfezionare il proprio sistema di progettazione solo per ritrovarsi con un risultato inaspettato. Android cambia i colori in base allo sfondo dell'utente.

La risposta è che Material You offre un equilibrio ragionevole: come designer o sviluppatore Non perdi il controllo, perché puoi decidere in che misura adottare i colori dinamici.Il sistema è progettato per essere flessibile e non per ignorare l'identità di ciascun prodotto.

Temi personalizzati e schemi di marca

Material Design 3 incorpora l'idea di schemi personalizzati o di marcaQuesti colori non derivano dallo sfondo dell'utente, ma da colori definiti dall'applicazione stessa. Utilizzando strumenti come Material Theme Builder In Figma puoi inserire i colori del tuo marchio (primari, secondari, terziari, neutri) e lasciare che il sistema generi uno schema completo allineato con M3.

Questi temi personalizzati configurano il gettoni colorati richiesti e consenti alla tua app di:

• Dovrebbe apparire coerente con il resto dell'ecosistema Material You.
• Mantenere un'adeguata accessibilità sia in modalità chiara che scura.
• Se lo si desidera, è possibile facilitare la combinazione futura con i colori dinamici del sistema.

Inoltre, puoi combinare i colori del marchio con colori dinamiciLo schema di base può ereditare parte della personalizzazione dell'utente, mentre un set esteso di colori (ad esempio, per stati semantici molto specifici o accenti del marchio) rimane statico.

Design dei token e dei ruoli dei colori

Material You promuove fortemente l'uso di gettoni di progettazioneSi tratta di nomi semantici che sostituiscono valori diretti come i codici esadecimali. Invece di utilizzare solo "#6200EE", vengono utilizzati token, come colorePrimario, sulla superficie, contenitore primario, ecc.

Questi token si collegano con il tavolozze tonali dinamiche (system_accent1_600, system_neutral1_10, ecc.) in modo che l'app possa aggiornare il suo aspetto senza dover riscrivere tutto il codice. Il Design Kit e il plugin Figma generano questi token e li mappano agli stili all'interno dei file di progettazione, semplificando notevolmente il trasferimento allo sviluppo.

Gerarchia visiva e accessibilità

Quando si applicano i ruoli di colore all'interfaccia utente, è fondamentale rispettare il gerarchia di importanzaI colori più saturi dovrebbero essere riservati alle call to action e agli elementi prioritari; i colori neutri e le varianti più tenui sono riservati agli sfondi e ai contenuti secondari.

Material You garantisce che, in base ai colori da te forniti, il sistema genererà delle variazioni con contrasti appropriati per testo e iconesia in modalità chiara che scura. Tuttavia, si consiglia di testare le combinazioni in contesti reali, soprattutto se si introducono colori secondari o terziari molto vivaci che potrebbero competere con il colore primario.

Colore dinamico nell'ecosistema Android

Inizialmente, il sistema di colori dinamici non faceva parte dell'AOSP, il che ha sollevato dubbi sul fatto che sarebbe stato un'esclusiva dei telefoni Pixel. Nel corso del tempo, Google è stata integrazione della logica di estrazione e generazione della palette in Android 12 e 13offrendo patch e documentazione per aiutare gli OEM ad adottarlo in modo coerente.

Marche come Samsung, OnePlus, Oppo, Vivo, realme o Xiaomi Hanno già annunciato il supporto per i colori dinamici nei livelli basati su Android 12+, in modo che app come Gmail possano adattare il loro aspetto rispettando la stessa tavolozza su dispositivi diversi.

Requisiti per i produttori (OEM)

Per offrire un allineamento con Material YouI partner Android devono:

• Usa il stessa logica di estrazione del colore di AOSP per ottenere il colore originale della carta da parati.
• Espandi quel colore nel 65 API di colore ufficiale (palette accent e neutre con 13 tonalità ciascuna).
• Applicare queste tavolozze sia nel interfaccia utente del sistema come nelle sue appin modo che gli sviluppatori terzi abbiano un comportamento coerente.
• Per fornire un'esperienza di selettore di temi e sfondi dove l'utente può visualizzare e scegliere combinazioni di colori in base allo sfondo o ai colori di base.

Inoltre, se un dispositivo non supporta l'estrazione del colore di sfondo (a causa di limitazioni tecniche o decisioni di progettazione), è possibile scegliere un'opzione alternativa. tavolozza statica, tipo di materiale predefinito, mantenendo una certa coerenza visiva anche se si perde la parte dinamica.

Sfondi, ThemePicker e palette statiche

Il flusso di colore dinamico standard inizia da selettore di sfondo o temaQuando l'utente cambia lo sfondo o sceglie un set di colori, il sistema:

1. Calcola i colori dominanti dello sfondo (o leggi il colore di base scelto).
2. Filtra i colori in base alla loro croma e ad altre regole per selezionarne uno valido.
3. Genera le cinque tavolozze tonali e riempi le 65 API colore.
4. Aggiornare l'interfaccia utente del sistema e rendere disponibili quei colori alle app.

Per i colori di base fissi, i produttori possono definire Stub APK con array di colori e nomi descrittivi (ad esempio, Blu, Rosso, Giallo, Verde), che appaiono nel selettore come opzioni predefinite. Ogni voce include valori primari e secondari che il sistema utilizzerà come punto di partenza per le tavolozze tonali.

Strumenti per designer: Material Theme Builder e Design Kit

Per facilitare l'adozione di Material You nel mondo del design, Google ha creato diversi strumenti specifici, focalizzati principalmente su Figma. Il più importante è Plug-in Material Theme Builderche consente di generare combinazioni di colori dinamiche e personalizzate senza dover lottare con la matematica del colore.

Con questo strumento Puoi:

• Carica un argomento di riferimento oppure crearne uno da zero.
• Definisci i colori chiave (primari, secondari, terziari, neutri) e osserva come si diffondono nell'interfaccia utente.
• Applicare gli schemi generati a Componenti del kit Material Design incluso nel file Figma.
• Estendi lo schema con colori personalizzati aggiuntivi (Custom0, Custom1…) per esigenze specifiche di branding o semantiche.

Il plugin genera automaticamente stili Figma che fungono da token di colore, e questi sono link ai modelliIn questo modo, cambiare tema (ad esempio da neutro a brandizzato) consiste praticamente nel premere un pulsante e assegnare il nuovo set di stili.

Oltre il mobile: widget, icone e launcher

L'impatto di Material You non si limita alle app di sistema. Widget di Android 12 Sono stati aggiornati per rispettare le nuove API in termini di dimensioni, angoli arrotondati e colore e gli sviluppatori sono incoraggiati ad aggiornare i propri widget per sfruttare queste funzionalità.

D'altra parte, anche la comunità dei launcher e dei pacchetti di icone ha preso nota. Ci sono pacchetti di icone dinamici che Cambiano colore a seconda dello sfondo o dell'accento del sistema.e si adattano sia alla modalità chiara che a quella scura. Per farli funzionare, è necessario utilizzare launcher compatibili (Nova Launcher, Lawnchair, Hyperion, Niagara, Smart Launcher, ecc.) e, dopo aver modificato lo sfondo o il tema, riapplicare il pacchetto di icone per rigenerare la tavolozza.

Material You ha trasformato Android in una piattaforma in cui il colore e la forma si adattano in modo intelligente a ciascun utente, senza lasciare indietro designer, marchi o sviluppatori. Grazie al sistema di colori dinamici, tavolozze tonali e token di designÈ possibile avere un'interfaccia altamente personalizzata ma coerente, accessibile e tecnicamente prevedibile. Che tu utilizzi un Pixel, un Samsung o uno Xiaomi, l'idea è che il tuo telefono rifletta la tua personalità, pur continuando a funzionare e ad avere l'aspetto che milioni di persone nell'ecosistema Android si aspettano. Condividi le informazioni in modo che più utenti possano approfondire l'argomento.