Android je godinama posvećen Material Designu, ali s Material You napravio je značajan korak naprijed. duboka prilagodba na temelju vaših pozadinaViše se ne radi samo o promjeni nekoliko ikona ili prelasku na tamnu temu, već o tome da se cijeli sustav inteligentno prilagođava bojama koje odaberete, a pritom zadržava pristupačnost i dosljedan dizajn.
Ova nova filozofija dizajna, prisutna od Android 12 i proširen u Androidu 13, kombinira dinamične boje, fluidno kretanje i obnovljeni widgetiRezultat je vizualno iskustvo koje se čini ljudskijim i emocionalnijim, ali istovremeno poštuje rad dizajnera, programera i brendova koji moraju kontrolirati svoj vizualni identitet.
Što je Material You ili Material Design 3?
Materijal Vi, također poznat kao Dizajn materijala 3To je najnovija evolucija Googleovog dizajnerskog sustava za UX/UI sučelja. Nije to samo vizualni stil, već skup vodiči, komponente i algoritmi koji omogućuju izgradnju konzistentnih sučelja na mobilnim telefonima, tabletima, satovima i drugim Android uređajima.
Za razliku od prethodnih verzija Material Designa, Material You se fokusira na osobni izraz i prilagodba korisnikuIdeja je da dvije osobe s istim mobilnim telefonom mogu imati vrlo različito sučelje, ali da oboje ostanu upotrebljivi, dostupni i konzistentni s Android ekosustavom.
Estetski, ova iteracija se odlučuje za pristup minimalističkiji i mekšiManje oštrih sjena, manje različitih tipografskih stilova, zaobljeniji oblici i čišći izgled. Sve je to kombinirano s mnogo sofisticiranijim sustavom boja, sposobnim generirati cijele palete iz jedne izvorne boje.
Zanimljivo je da Material You nije ograničen na Google PixelDinamička logika boja i smjernice dizajna proširene su na mnoge slojeve prilagodbe, kao što su One UI, OxygenOS, ColorOS, OriginOS ili MIUI, uz posebnu podršku od Googlea kako bi se osiguralo dosljedno iskustvo na većini uređaja s Androidom 12 i novijim verzijama.
Emocije, individualnost i promjena paradigme
Material You također proizlazi iz razmišljanja o tome kako razumijemo digitalni dizajn. Google tvrdi da sučelje ne bi trebalo samo odgovarati funkciji, već i... korisnikov osjećaj, njegova emocijaOtuda igra riječi u "Material You": uređaj bi trebao biti jedinstven kao i vi, a ne identičan klon milijuna ljudi.
Godinama su i iOS i Android bili relativno kruti u pogledu stvarna prilagodba korisničkog sučeljaOsim promjene pozadine, dodavanja widgeta ili instaliranja pokretača, mogućnosti su bile ograničene. S Androidom 12 i Material You, Google djelomično vraća duh svog starog slogana "Budite zajedno, ne isti", fokusirajući se na zajednički ekosustav, ali sa sučeljima prilagođenim svakom korisniku.
Ova filozofija je u suprotnosti s Appleovom strategijom, koja je više usmjerena na zatvoreni i strogo kontrolirani ekosustav gdje se vizualno iskustvo malo razlikuje među korisnicima. Google, s druge strane, omogućuje puno finiju prilagodbu izgleda bez kompromisa u tome da aplikacije funkcioniraju jednako dobro na različitim markama i modelima.
Glavne nove značajke Material You
Material You uvodi nekoliko inovacijskih linija koje se isprepliću kako bi izgradile cjelovito iskustvo: duboka prilagodba, dinamične boje, prilagodljivost i smisleno kretanjeSve to podržava robustan tehnički sustav koji mogu koristiti proizvođači, dizajneri i programeri.
Dubinska prilagodba sučelja
Jedna od najvećih promjena je ta što korisnik može prilagoditi izgled sustava na puno finiji način. Android je sposoban za preurediti boje, površine, gumbe i kontrole tako da odgovaraju paleti generiranoj iz pozadine ili ručno odabranoj boji.
Ova prilagodba se proteže na statusne trake, obavijesti, izbornike, brzi panel, postavke, Googleove vlastite aplikacije i, postupno, na aplikacije trećih strana koje integriraju Material Design 3. Ideja je da korisnik percipira dosljedno vizualno iskustvo od početka do kraja, bez naglih prelazaka boja između sustava i aplikacija.
Prilagodljivost ekranima i formatima
Materijal Vi također pojačava prilagodljivost sučelja različitim formatima zaslonaTo uključuje tradicionalne mobilne telefone, tablete, pametne satove i sklopive uređaje. Ista logika boja, tipografije i razmaka prilagođena je kako bi se osiguralo da je sučelje ugodno za korištenje u svakom kontekstu.
U slučaju sklopivih telefona, Google je definirao specifične smjernice o aspektima kao što su dostupnost elemenata, središnji zglob i najsloženiji rasporediNa primjer, gornjih 25% otvorenog zaslona smatra se teško dostupnima, stoga se preporučuje da se tamo ne postavljaju primarne radnje, a ključne informacije ne bi se trebale postavljati izravno iznad šarke.
Pokret i taktilna povratna informacija
Pokret u Material You nije samo za pokazivanje. Android 12 uvodi efekt Prekomjerni pomak zbog elastičnog istezanjaKada korisnik pokuša pomicati se dalje od kraja popisa, površina se glatko rasteže umjesto da prikazuje tipičnu staromodnu svjetlinu odbijanja.
Osim toga, animacije valova na dodir su redizajnirane kako bi ponudile suptilnija i fluidnija haptička povratna informacijaGoogle potiče proizvođače da ova ponašanja zadrže što bliže standardu, kako bi se aplikacije ponašale predvidljivo bez obzira na sloj prilagodbe.
Dinamične boje: srce Material You-a
Ključni element ove nove faze je dinamički sustav boja, interno poznat kao MonetPočevši od Androida 12, sustav može izdvojiti dominantnu boju iz vašeg tapeta ili definiranu osnovnu boju i automatski generirati potpunu paletu koja se primjenjuje na sustav i kompatibilne aplikacije.
Ovaj sustav se oslanja na prilično sofisticirani tehnički pristup koji kombinira prostor boja CAM16, tonske palete i uloge bojaCilj je održati dobru čitljivost, dovoljan kontrast i uglađenu estetiku i u svijetlom i u tamnom načinu rada, čak i ako korisnik odabere donekle složene pozadine.
Kako funkcionira generiranje paleta u Material You
El proces stvaranja Korištenje dinamičkih boja može se sažeti u nekoliko dobro definiranih koraka, iako se ispod njih krije mnogo matematike boja:
- Ekstrakcija boje sjemena na temelju pozadine, sadržaja aplikacije ili fiksne boje koju je odabrao korisnik ili robna marka.
- Konverzija i analiza u CAM16 prostoru za dobivanje tona, kroma i drugih perceptivnih parametara.
- Generiranje pet ključnih tonskih paleta (naglasak1, naglasak2, naglasak3, neutralno1 i neutralno2) iz izvorne boje i prilagodbi kromatike i tona.
- Stvaranje 13 nijansi po paleti, s različitim razinama luminancije (0, 10, 50, 100, 200, 300… do 1000), što rezultira s ukupno 65 dinamičkih boja.
- Mapiranje tih tonova na uloge boja korisničkog sučelja, kao što su primarni, sekundarni, površina, pozadina, tekst, spremnici itd.
Svaka od pet paleta ima specifično ponašanje: na primjer, accent1 je obično glavna boja brenda ili korisničke teme, accent2 i accent3 služe kao komplementarni akcenti, a neutralni1/neutral2 rezervirani su za pozadine, površine i manje uočljive elemente.
Stilovi tema u Androidu 13
S Androidom 13 sustav ide korak dalje i omogućuje vam odabir između šest različitih stilova temakoji variraju način na koji se ta izvorna boja interpretira za generiranje konačne palete:
- TONALNA TOČKA: je zadana tema Material You, sa srednjom vibracijom i uravnoteženim tretmanom naglasaka.
- VIBRANTANOdlučite se za intenzivniju paletu, ali s glatkim prijelazima između boja, idealno za privlačnija sučelja.
- IZRAZITO: stvara neočekivanije i jedinstvenije kombinacije akcentnih boja, s visokim kromatskim intenzitetom.
- SPREJ: smanjuje zasićenost na minimum, tražeći gotovo monokromatski i vrlo mekan efekt.
- RAINBOW: miješa šarene akcente s neutralnim površinama kako bi se postigao diskretniji rezultat, preporučuje se za statične sheme, a ne za izdvajanje iz pozadine.
- VOĆNA SALATA: kombinira dvobojne boje kako bi se dobila veća izražajnost, također prikladnije za fiksne palete nego za dinamične pozadine.
Sustav prima JSON pohranjen u Postavke.Sigurno.PAKETI_ZA_PRILAGANJE_PREKRIVANJA_TEMA gdje je navedena izvorna boja (na primjer, "746BC1") i, opcionalno, stil teme (na primjer, "EXPRESSIVE"). S tim, Android automatski generira 65 varijacija boja koje će aplikacije zatim koristiti.
Odakle dolaze osnovne boje?
Materijal Vi razmatra tri glavna puta za dobivanje originalna boja što će poslužiti kao početna točka za algoritam:
- S korisnikove pozadineOvo je najčešći slučaj. Sustav analizira sliku pomoću kvantizacije boja, izdvaja nekoliko kandidata i odabire onog koji zadovoljava minimalne kriterije kromatike (na primjer, vrijednost CAM16 ≥ 5) kako bi se osiguralo da rezultat nije previše tup.
- Iz sadržaja aplikacije ili web-straniceSama aplikacija može odlučiti da glavna boja sučelja bude izvedena iz njezina sadržaja, čime se održava živahna estetika, ali usklađena s proizvodom.
- Iz ručno odabrane bojeBrend ili korisnik odabire određenu boju, a sustav iz nje gradi cijelu paletu, bez potrebe da ovisi o pozadini.
U svim slučajevima, cilj je da jedna ulazna boja postane potpuna, pristupačna i dosljedna shema bojaizbjegavanje kombinacija koje ometaju čitanje ili narušavaju osjećaj vizualnog jedinstva.
Kontrola za brendove, dizajnere i developere
Logično pitanje za svakoga tko radi u digitalnom dizajnu proizvoda jest "nadjačava" li ovaj dinamički sustav dizajn robnih marki. Uostalom, satima se usavršava vaš sustav dizajna samo da biste ga kasnije... Android mijenja boje na temelju pozadine korisnika.
Odgovor je da Material You nudi razumnu ravnotežu: kao dizajner ili programer Ne gubite kontrolu, jer možete odlučiti u kojoj mjeri želite usvojiti dinamične boje.Sustav je dizajniran da bude fleksibilan, a ne da nadjača identitet svakog proizvoda.
Prilagođene teme i sheme robnih marki
Material Design 3 uključuje ideju prilagođene ili brendirane shemeOve boje nisu izvedene iz korisnikove pozadine, već iz boja koje definira sama aplikacija. Korištenjem alata kao što su Graditelj tema za materijale U Figmi možete unijeti boje svoje marke (primarne, sekundarne, tercijarne, neutralne) i pustiti sustav da generira kompletnu shemu usklađenu s M3.
Ove prilagođene teme konfiguriraju potrebni žetoni u boji i dopustite svojoj aplikaciji da:
- Trebalo bi izgledati u skladu s ostatkom ekosustava Material You.
- Održavajte odgovarajuću pristupačnost i u svijetlom i u tamnom načinu rada.
- Omogućite buduće kombiniranje s dinamičkim bojama sustava ako se za to odlučite.
Možete i vi kombinirajte boje brenda s dinamičnim bojamaOsnovna shema može naslijediti neke od korisničkih prilagodbi, dok prošireni skup boja (npr. za vrlo specifična semantička stanja ili akcente brenda) ostaje statičan.
Dizajnerski tokeni i uloge boja
Materijal Vi snažno potičete upotrebu tokeni dizajnaTo jest, semantička imena koja zamjenjuju izravne vrijednosti poput heksadecimalnih kodova. Umjesto korištenja samo "#6200EE", koriste se tokeni, kao što je Primarna boja, na površini, primarniSpremnik, Itd
Ovi tokeni se povezuju s dinamične tonske palete (system_accent1_600, system_neutral1_10, itd.) tako da aplikacija može ažurirati svoj izgled bez ponovnog pisanja cijelog koda. Design Kit i Figma dodatak generiraju ove tokene i mapiraju ih na stilove unutar dizajnerskih datoteka, što prijenos u razvoj čini mnogo jednostavnijim.
Vizualna hijerarhija i pristupačnost
Prilikom primjene uloga boja na vaše korisničko sučelje, ključno je poštivati hijerarhija važnostiNajzasićenije boje trebale bi biti rezervirane za pozive na akciju i prioritetne elemente; neutralne i blaže varijacije rezervirane su za pozadine i sekundarni sadržaj.
Material You jamči da će sustav, na temelju boja koje navedete, generirati varijacije s odgovarajući kontrasti za tekst i ikoneu svijetlom i tamnom načinu rada. Unatoč tome, preporučuje se testiranje kombinacija u stvarnim kontekstima, posebno ako uvodite vrlo žive sekundarne ili tercijarne boje koje bi mogle konkurirati primarnoj boji.
Dinamičke boje u Android ekosustavu
U početku, dinamički sustav boja nije bio dio AOSP-a, što je izazvalo sumnje u to hoće li biti dostupan isključivo za Pixel telefone. S vremenom je Google... integriranje logike ekstrakcije i generiranja paleta u Androidu 12 i 13nudeći zakrpe i dokumentaciju kako bi se pomoglo proizvođačima originalne opreme da ga dosljedno usvoje.
Marke poput Samsung, OnePlus, Oppo, Vivo, Realme ili Xiaomi Već su najavili podršku za dinamičke boje u svojim slojevima temeljenim na Androidu 12+, tako da aplikacije poput Gmaila mogu prilagoditi svoj izgled uz poštivanje iste palete na različitim uređajima.
Zahtjevi za proizvođače (OEM)
Ponuditi a usklađivanje s materijalom ViAndroid partneri moraju:
- Upotrijebite ista logika ekstrakcije boja kao AOSP kako bi se dobila izvorna boja tapete.
- Proširite tu boju u 65 API-ja boje službene (naglasne i neutralne palete s po 13 nijansi).
- Primijenite ove palete i u korisničko sučelje sustava kao u vlastitim aplikacijamakako bi razvojni programeri trećih strana imali dosljedno ponašanje.
- Pružiti iskustvo birač tema i pozadine gdje korisnik može pregledavati i birati kombinacije boja na temelju pozadine ili osnovnih boja.
Nadalje, ako uređaj ne podržava izdvajanje boje pozadine (zbog tehničkih ograničenja ili dizajnerskih odluka), može se odabrati alternativna opcija. statička paleta, zadana vrsta materijala, održavajući određenu vizualnu koherentnost iako je dinamički dio izgubljen.
Pozadine, ThemePicker i statične palete
Standardni dinamički tok boja počinje od birač pozadine ili temeKada korisnik promijeni pozadinu ili odabere skup boja, sustav:
- Izračunajte dominantne boje pozadine (ili pročitajte odabranu osnovnu boju).
- Filtrirajte te boje na temelju njihove krome i drugih pravila kako biste odabrali valjanu.
- Generirajte pet tonskih paleta i ispunite 65 API-ja za boje.
- Ažurirajte korisničko sučelje sustava i izložite te boje aplikacijama kako bi ih mogle koristiti.
Za fiksne osnovne boje, proizvođači mogu definirati Stub APK s nizovima boja i opisnim nazivima (na primjer, Plava, Crvena, Žuta, Zelena), koje se u selektoru pojavljuju kao unaprijed definirane opcije. Svaki unos uključuje primarne i sekundarne vrijednosti koje će sustav koristiti kao početnu točku za tonske palete.
Alati za dizajnere: Alat za izradu tema za materijale i dizajnerski setovi
Kako bi olakšao usvajanje Material You u svijetu dizajna, Google je stvorio nekoliko specifičnih alata, prvenstveno usmjerenih na Figmu. Najvažniji je Dodatak za izradu tema Material Themešto vam omogućuje generiranje dinamičnih i brendiranih shema boja bez potrebe za bavljenjem matematikom boja.
s ovaj alat kučke:
- Opterećenje a referentna tema ili ga stvoriti od nule.
- Definirajte ključne boje (primarni, sekundarni, tercijarni, neutralni) i pogledajte kako se šire po korisničkom sučelju.
- Primijenite generirane sheme na Komponente kompleta za dizajn materijala uključeno u Figma datoteku.
- Proširite shemu s dodatne prilagođene boje (Custom0, Custom1…) za specifične potrebe brendiranja ili semantike.
Dodatak automatski generira Figma stilove koji djeluju kao tokeni boja, a to su poveznica na modeleNa taj način, promjena teme (na primjer, iz neutralne u brendiranu) praktički se svodi na pritisak gumba i dodjeljivanje novog skupa stilova.
Više od mobilnih uređaja: widgeti, ikone i pokretači
Utjecaj Material Youa ne staje samo na sistemskim aplikacijama. Widgeti za Android 12 Ažurirani su kako bi se poštovali novi API-ji za veličinu, zaobljene kutove i boju, a programerima se preporučuje da ažuriraju vlastite widgete kako bi iskoristili te mogućnosti.
S druge strane, zajednica pokretača i paketa ikona također je to primijetila. Postoje dinamički paketi ikona koji Mijenjaju boju ovisno o pozadini ili naglasku sustava.i prilagođavaju se i svijetlom i tamnom načinu rada. Da bi radili, morate koristiti kompatibilne pokretače (Nova Launcher, Lawnchair, Hyperion, Niagara, Smart Launcher itd.) i, nakon promjene pozadine ili teme, ponovno primijenite paket ikona za regeneraciju palete.
Material You je transformirao Android u platformu gdje se boja i oblik inteligentno prilagođavaju svakom korisniku, ne ostavljajući dizajnere, brendove ili developere iza sebe. Zahvaljujući sustavu dinamične boje, tonske palete i dizajnerski elementiMoguće je imati visoko personalizirano, a opet koherentno, pristupačno i tehnički predvidljivo sučelje. Bez obzira koristite li Pixel, Samsung ili Xiaomi, ideja je da vaš telefon odražava vašu osobnost, a da i dalje funkcionira i izgleda onako kako očekuju milijuni ljudi diljem Android ekosustava. Podijelite informacije kako bi više korisnika moglo saznati više o toj temi.