Android ne oferă de ani de zile mult mai multe opțiuni de personalizare decât alte sisteme, dar odată cu apariția... Material You și sistemul său dinamic de culori Lucrurile au scăpat de sub control (într-un sens bun). Nu mai vorbim doar despre schimbarea imaginii de fundal: acum întreaga interfață se „pictează” singură în funcție de gusturile tale, de brandul tău sau chiar de conținutul propriei aplicații.
Această nouă abordare nu este doar un lifting facial. Material You combină designul, accesibilitatea și personalizarea profundă.inclusiv paleta dinamică, astfel încât atât utilizatorii, cât și designerii și dezvoltatorii să se poată juca cu culorile fără a afecta consecvența vizuală a sistemului sau identitatea unui brand.
Ce este Material You și cum diferă de Material Design clasic?
Material You, cunoscut și sub numele de Material Design 3 (M3)Este evoluția sistemului de design al Google, lansat odată cu Android 12 în 2021. În timp ce Design material original Material You, care în 2014 s-a concentrat pe oferirea unei estetici coerente și a unor componente reutilizabile, se concentrează pe adaptarea interfeței la fiecare persoană, dispozitiv și context.
În esență, rămâne o limbaj de design complet pentru UX și UIcu îndrumări pentru tipografie, culoare, mișcare, componente și modele de interacțiune. Cu toate acestea, estetica s-a schimbat considerabil în comparație cu versiunile anterioare: Mai puține umbre, mai puține stiluri tipografice, forme mai delicate și mai rotunjite și un aspect mult mai minimalist.
Scopul Google este de a oferi un set de principii și linii directoare unificate care îmbină elementele fundamentale ale unui design de calitate cu posibilitățile tehnice actuale: sisteme de culori generative, animații fluide, adaptabilitate la mii de dimensiuni de ecran și suport pentru teme luminoase/întunecate și variații intermediare, fără ca designerul să fie nevoit să proiecteze fiecare ecran manual.
De la Material Design-ul original la Material You: o schimbare de mentalitate
Cu primul Material Design, Google a introdus idei precum „material metaforic” (hârtie digitală cu profunzime)Utilizarea îndrăzneață a culorilor și a tipografiei („Îndrăzneț, Grafic, Intențional”) și mișcarea semnificativă pentru a indica ierarhia și cauza și efectul. Elemente precum cardurile, butonul de acțiune plutitor, barele de aplicații și panourile glisante au devenit standard în interfața Android.
Pe atunci, echipele de produs trebuiau memorează dimensiunile componentelor, ierarhiile tipografice, elevațiile, umbrele și stările pentru multe variante de ecran. Cu reviziile succesive ale Material Design, detaliile au fost rafinate, dar logica de bază nu s-a schimbat: brandul dicta culoarea, iar utilizatorul abia putea modifica unele detalii superficiale.
Material You rupe acest tipar: acum Interfața nu mai este concepută exclusiv din perspectiva brandului către utilizator.dar și din perspectiva utilizatorului față de sistem. Designul devine mai simplu, mai flexibil și mai „tematizabil” fără a pierde din structură. Ghidul oficial Material Design a fost actualizat pentru a arăta, componentă cu componentă, cum se face trecerea de la Material Design 2 la Material You și ce dimensiuni, culori și fonturi trebuie utilizate în fiecare caz.
Material You în ecosistemul Android: dincolo de Pixel
Când a fost anunțat pentru prima dată, mulți au crezut că Material You va fi ceva exclusiv pentru Google PixelNimic mai departe de adevăr: încă de la Android 12, sistemul dinamic de culori și principiile vizuale ale Material Design sunt disponibile pentru o mare varietate de dispozitive. Dispozitive Android de la diferiți producătoriinclusiv telefoane mobile, tablete, ceasuri inteligente și alte formate.
Aceasta înseamnă că o experiență consistentă în întregul ecosistemAcelași utilizator poate vedea un stil vizual consistent pe telefon, tabletă și ceas inteligent, cu aceeași paletă de culori derivată din imaginea de fundal sau din culorile mărcii sale, cu condiția ca producătorul și aplicațiile să utilizeze corect API-urile și instrucțiunile Material You.
Culoarea dinamică: cheia personalizării interfeței
Piesa centrală a Material You este culoare dinamicăAcest sistem permite Android să genereze, dintr-o singură sursă de culoare (culoare de bază), un set complet și accesibil de palete tonale care sunt aplicate sistemului și aplicațiilor compatibile. Rezultatul este că utilizatorul simte că telefonul se „potrivește” cu fundalul și stilul său.
În Android 12, culoarea dinamică se baza în principal pe tapet alesSistemul a analizat imaginea, a ales o culoare predominantă potrivită și a generat paleta. Cu Android 13, sistemul face încă un pas înainte și... Oferă mai multe palete alternative derivate din același fundal, astfel încât utilizatorul poate alege între diferite variații care rămân în armonie cu tapetul său.
Fluxul de lucru standard pe care Google îl propune producătorilor de echipamente originale (OEM) și dezvoltatorilor de sisteme constă în patru trepteUtilizatorul alege un fundal sau o temă, se definește o singură culoare sursă, AOSP o extinde în cinci palete tonale cu câte 13 nuanțe fiecare (65 de culori în total), iar interfața sistemului și aplicațiile utilizează acele atribute de culoare în mod constant.
Cum sunt generate paletele Material You
În spatele întregii acestei magii se află o bună parte din știința culorilor. Materialul pe care îl folosești Algoritmi de cuantizare și manipulare a spațiului de culoare CAM16 pentru a trece de la o singură culoare la un sistem complet de culori. Procesul, simplificat, implică următoarele etape:
- Selectarea culorii de bazăPornind de la imaginea de fundal sau de la o valoare definită de aplicație sau de sistem, se alege o culoare care îndeplinește cerințele minime de cromă (de exemplu, o valoare CAM16 mai mare sau egală cu 5) pentru a evita tonurile șterse sau murdare.
- Generarea a cinci culori complementare cheie: accent1, accent2, accent3, neutru1 și neutru2, fiecare cu un rol diferit: accente primare, secundare, terțiare și neutre pentru fundaluri și suprafețe.
- Crearea paletelor tonaleFiecare culoare cheie este convertită într-o paletă cu 13 niveluri de ton (luminanță diferită), generând astfel cele 65 de culori expuse prin API-urile sistemului.
Logica AOSP definește, de exemplu, că sistem_accent1 menține tonul original cu cromatice specifice în funcție de nivel, care sistem_accent3 Rotiți tonul cu 60 de grade pentru a adăuga contrast sau sistem_neutru1 și neutru2 au niveluri scăzute de cromă (4 și 8) pentru a servi drept fundaluri discrete, dar înrudite cu culoarea de bază.
De unde provin culorile originale?
Materialul pe care îl contemplați trei surse majore pentru culoarea surseiAcest lucru ne oferă o flexibilitate considerabilă atât pentru personalizarea utilizatorilor, cât și pentru branding:
- Imagine de fundal a utilizatoruluiAceasta este cea mai vizibilă opțiune. Sistemul analizează imaginea de fundal (inclusiv fundalurile dinamice sau video) folosind cuantizarea culorilor și selectează un singur ton reprezentativ atunci când utilizatorul îl setează sau când pornește și oprește ecranul.
- Conținutul aplicației sau al site-ului webAplicațiile în sine își pot analiza conținutul (de exemplu, imaginile prezentate, coperta, identitatea grafică) pentru a extrage o culoare predominantă și a genera scheme consistente cu ceea ce afișează.
- Culoare definită manualAtât sistemul, cât și instrumentele de design (de exemplu, Material Theme Builder) vă permit să introduceți manual o culoare hexadecimală ca „Primară” sau ca paletă de culori pentru brand, din care întreaga schemă de culori este generată automat.
În plus, pe dispozitivele pe care extragerea culorii din imaginea de fundal nu este fezabilă, puteți opta pentru palete non-dinamice bazat pe paleta de materiale implicită, dezactivând logica de monetizare (flag_monet), dar menținând posibilitatea ca utilizatorul să aleagă teme implicite.
Control pentru designeri și branduri: nu totul este decis de algoritm.
O întrebare foarte frecventă printre designeri este dacă această generare automată de culori va... distruge sistemele de design și identitățile vizuale la care au muncit atât de mult. Răspunsul scurt este nu: Material You este conceput pentru a oferi echipelor controlul granular de care au nevoie.
Ca designer sau dezvoltator UX/UI, poți definiți culorile de bază, token-urile de design și excepțiile Pentru elementele critice, puteți specifica ce componente ar trebui să urmeze paleta dinamică de culori și care ar trebui să rămână ancorate în culorile mărcii. Puteți chiar decide ca aplicația sau site-ul dvs. web să nu adopte deloc culoarea dinamică dacă acest lucru compromite identitatea vizuală.
Pentru a facilita această muncă, Google a creat instrumente precum Constructor de teme de materiale pentru Figma și un vizualizator dinamic de teme care vă permite să previzualizați cum vor arăta designurile dvs. cu palete generate din imagini de fundal sau alte culori sursă.
Constructor de teme Material: Crearea de teme personalizate cu culorile tale
Material Theme Builder este un add-on Figma care Generează jetoane de culoare accesibile, palete tonale și scheme. Bazat pe culorile mărcii sau culori dinamice, gata de utilizare atât în design, cât și în implementare.
Funcționarea sa Se învârte în jurul câtorva concepte cheie:
- Schemă personalizatăÎn loc să derivați schema de culori din tapet, o derivați dintr-una sau mai multe culori ale mărcii. M3 ajustează aceste culori la spațiul de culori al sistemului pentru a asigura accesibilitatea și consecvența cu orice scheme dinamice.
- Roluri de culoareFiecarei nuanțe din paletele de culori i se atribuie un rol funcțional în interfața cu utilizatorul (colorPrimary, colorOnPrimary, colorSurface, colorOnSurface etc.). Acesta este apoi tradus în componente concrete: butoane, fundaluri, text, jetoane, carduri etc.
- Jetoane de proiectareÎn loc să utilizați coduri hexadecimale brute, lucrați cu nume semantice (de exemplu, primaryContainer, onSurfaceVariant) care reprezintă decizii de design reutilizabile și facilitează traducerea designului în cod.
În plugin puteți introduce un culoare primară Culoarea primară a mărcii este cea din care derivă toate celelalte culori cheie. Apoi puteți ajusta culorile secundare, terțiare și neutre, după cum este necesar. Totul este apoi convertit în stiluri Figma pe care le puteți aplica componentelor sau sistemului de design al organizației dumneavoastră.
Extinderea schemei: culori suplimentare și utilizări semantice
În multe proiecte, cele cinci culori cheie nu sunt suficiente. De aceea, Material Theme Builder vă permite să... extindeți schema cu culori personalizate (de exemplu, Custom0, Custom1 etc.) care trec prin același proces de generare tonală.
Aceste culori suplimentare pot reprezenta stări semantice (succes, alertă, informație)Variații de produs sau nuanțe suplimentare ale unui brand. Pluginul generează paleta de culori și rolurile corespunzătoare pentru a le menține accesibile, iar tu alegi unde să le utilizezi: etichete, insigne, grafică, stări speciale etc.
Din panoul de stiluri Figma puteți Redenumiți aceste culori personalizate astfel încât să aibă sens în contextul tău (de exemplu, custom0 → brandSecondaryHighlight) și să le poți atribui cu ușurință componentelor tale. Dacă decizi să elimini unul, poți șterge stilul; data viitoare când deschizi pluginul, acesta va dispărea din setări.
Jetoane, ierarhie vizuală și aplicație tematică
Odată ce tema este creată, următorul pas este să o aplici machetelor tale. Componentele oficiale Material Design sunt deja mapate la rolurile de culoareastfel încât, atunci când schimbați tema cu pluginul, stilurile acesteia sunt actualizate automat.
Pentru componentele personalizate, va trebui să Atribuiți manual stiluri FigmaDe exemplu, utilizarea unui container terțiar pentru o carte specială sau a unui onSurfaceVariant pentru text secundar. Acest lucru vă permite să experimentați cu diferite ierarhii de culori fără a fi nevoie să refăceți întregul design.
În producție, aceste roluri și token-uri sunt mutate în atributele temei în bibliotecile de materialeDe exemplu, în temele deschise cu culoare dinamică, `colorPrimary` poate fi mapat la `system_accent1_600` și `colorOnPrimary` la `system_accent1_0`; în temele întunecate, la alte combinații care mențin un contrast adecvat. Materialul 3 definește, de asemenea, atribute specifice pentru stări (straturi de conținut și stare) care se bazează pe tonuri specifice din palete pentru trecerea cu mouse-ul, apăsat, dezactivat etc.
Utilizarea culorilor în SysUI și în aplicații
Sistemul de operare Android aplică aceste 65 de atribute de culoare pentru a picta practic întreaga interfață a sistemului: panoul de notificări, setările rapide, setările de sistem, widget-urile, fundalul aplicației de setări, indicatorii etc.
În interfața cu utilizatorul a sistemului, rolurile sunt distribuite într-un mod care garantează lizibilitate și continuitate vizualăDe exemplu, fundalurile folosesc de obicei nuanțe neutre slabe, în timp ce textul cu accentuare puternică folosește nuanțe neutre puternice pentru a maximiza contrastul. Suprafețele plutitoare și cartonașele combină nuanțe neutre cu accente delicate pentru a menține o ierarhie clară, fără a copleși utilizatorul.
Aplicațiile care utilizează componente Material pentru Android pot adoptă automat culoarea dinamică Dacă activează asistența și se bazează pe temele și rolurile recomandate. Multe aplicații Google, precum Gmail, fac deja asta. Joaca StoreDrive, Google Camera sau Android Auto: butoanele, barele de navigare, câmpurile de căutare și alte componente sunt repictate urmând paleta dinamică sau schema de brand adaptată.
Experiența utilizatorului: cum arată Material You în viața de zi cu zi
Pentru utilizatorul final, tot acest cadru tehnic se traduce într-o experiență destul de simplă: Schimbi imaginea de fundal și tot telefonul își schimbă culoarea menținând o armonie vizuală foarte plăcută.
În ecranul de pornirePictogramele (dacă activați pictogramele tematice) și widgeturile adoptă culoarea de accent generată. Widget-urile oficiale Google și cele de la producătorii care respectă instrucțiunile se integrează perfect cu fundalul și restul interfeței, creând un sentiment de continuitate care nu exista înainte.
În panoul de notificări și setările rapidePictogramele Wi-Fi, Bluetooth, lanternă și modul avion își schimbă culoarea în funcție de tema activă. Bara de luminozitate este colorată în funcție de temă, iar sistemul ajustează automat culorile textului și ale pictogramelor în funcție de modul luminos sau întunecat pentru a asigura lizibilitatea.
La Aplicația Setări De asemenea, are avantaje: culori de accent mai estompate sunt aplicate anteturilor, sliderelor și elementelor interactive, astfel încât tema este vizibilă fără a interfera cu citirea conținutului. Când accesați anumite secțiuni, comutatoarele, butoanele radio și butoanele respectă aceeași schemă de culori.
Unde găsești și cum să folosești opțiunile Material You pe mobil
Pe un dispozitiv cu Android 12 sau o versiune ulterioară, opțiunile pentru Personalizare Material You De obicei, acestea se găsesc în Setări > Imagine de fundal și stil (calea exactă poate varia în funcție de producător).
De acolo poți:
- Schimbați tapetul și lăsați sistemul să genereze automat paleta dinamică.
- Alege intre „Culorile tapetului”, care sunt palete derivate din imagine sau „Culori de bază”care sunt combinații standard care nu sunt legate de tapet.
- Activați sau dezactivați icoane tematice pe ecranul de pornire, dacă lansatorul dvs. îl acceptă.
Modificările sunt aplicate în timpul zborului, astfel încât puteți Încearcă diferite combinații și vezi rezultatul în timp realUnele straturi de personalizare ale producătorilor adaugă și proprii selectori de teme care se integrează (mai mult sau mai puțin) cu sistemul dinamic de culori.
Control avansat al culorilor: ThemePicker, fișier APK și variante de temă
Pentru producători (OEM) și dezvoltatori de sisteme, Android oferă instrumente suplimentare pentru definiți palete de bază, culori personalizate și variații de stil dincolo de simpla extracție automată.
Dacă utilizați aplicația Selector de teme AOSPPuteți configura un fișier APK „stub” care conține doar resurse de culoare de bază și numele acestora. Un fișier XML în res/xml, care conține o matrice de pachete (color1, color2 etc.) și șirurile descriptive corespunzătoare, definește numele care vor apărea în selector. Un fișier XML separat specifică valorile hexazecimale reale pentru fiecare culoare primară și secundară din fiecare pachet.
În Android 13 și versiunile ulterioare, pe lângă culoarea paletei, atributul este gestionat și android.theme.personalizare.stil_temă, cu variații precum:
- TONAL_SPOT: tema Material You implicită de la Android 12 (S).
- VIBRANT: palete mai intense în accentele 2 și 3, analoge cu accentul principal.
- EXPRESIV: o temă foarte cromatică, mai „îndrăzneață”.
- STROPI: temă desaturată, aproape în tonuri de gri.
Acești parametri sunt trimiși în JSON către Setări.Securitate.PACHETE_SUPERFECTE_DE_PERSONALIZARE_TEMEspecificând paleta de sistem (de exemplu, „B1611C”) și stilul temei. În Android 12 și versiunile anterioare, a fost folosit și android.theme.customization.accent_colorcare a fost întreruptă în versiunile recente.
Mișcare și widgeturi în Material You
Material You nu se oprește doar la culoare. mișcare fluidă și widget-uri actualizate Acestea sunt o parte esențială a experienței moderne pe care Google o dorește pentru Android.
În ceea ce privește mișcarea, Android 12 a introdus o efect de supradeplasare elasticăunde listele se „întind” subtil pe măsură ce ajungi la final. Pe dispozitivele cu hardware puternic, această întindere este neliniară și foarte lină; pe dispozitive mai modeste, este simplificată pentru a evita afectarea performanței.
La ondulație tactilă De asemenea, a fost rafinat: acum este mai subtil, cu o animație de umplere lină care oferă feedback fără a fi intruzivă. Nu este necesară nicio integrare specială pentru a-l utiliza, dar este recomandabil să îl testați pe fiecare dispozitiv pentru a evita regresiile vizuale.
Cu widget-uriGoogle a lansat noi API-uri pentru dimensiuni, parametri de aspect și colțuri rotunjite. Producătorii de echipamente originale (OEM) trebuie să accepte aceste API-uri, iar aplicațiile în sine ar trebui Actualizați sau creați widget-uri compatibile cu Material You, profitând de culoarea dinamică, colțurile actualizate și spațierea pentru a se integra bine în lansator.
Avantajele și limitele actuale ale Materialului pe care îl oferiți
Adoptarea Material You a adus o gură de aer proaspăt pentru Android: Sistemul pare mai personal, mai coerent și mai modernDesignul adaptiv al imaginii de fundal oferă un sentiment de „proprietate” asupra dispozitivului, mai ales atunci când toate piesele se potrivesc împreună: sistemul, aplicațiile Google, widget-urile și aplicațiile terțe care se alătură petrecerii.
Cu toate acestea, mai există unele limitări și inconsecvențe care merită luate în considerare:
- Nu toate aplicațiile acceptă culori dinamiceAșadar, uneori treci de la un ecran foarte integrat la unul cu un aspect și o funcționalitate complet diferite.
- L icoane tematiceDeși sunt foarte atrăgătoare, acestea pot face mai dificilă recunoașterea unor aplicații dintr-o privire dacă pictogramele lor nu sunt foarte distinctive.
- Unii producători Ei nu acceptă pe deplin materialul tău în straturile lor de personalizare; alții îl reinterpretează atât de mult încât o parte din coerența originală intenționată de Google se pierde.
Chiar și cu aceste dezavantaje, direcția este clară: Google îi îndeamnă pe producătorii de echipamente originale (OEM) și dezvoltatorii să integreze sistemul de palete tonale dinamice și teme adaptive, până la punctul în care se impune ca anumite implementări să facă parte din „lista albă” de dispozitive care activează oficial suportul dinamic pentru culori pentru aplicații terțe.
În cele din urmă, Material You reprezintă o combinație foarte puternică de personalizare profundă, design sistematic și instrumente practice Atât pentru utilizatori, cât și pentru profesioniști: utilizatorul simte că mobilul vorbește limbajul lor vizual, aplicațiile pot moșteni scheme dinamice fără a pierde identitatea mărcii, iar designerii au la dispoziție un sistem de culori robust, accesibil și flexibil pe care pot construi produse mai consistente și mai plăcute de utilizat. Distribuie aceste informații și mai mulți utilizatori vor ști cum să își personalizeze interfața cu Material You.