Android on sitoutunut materiaalisuunnitteluun jo vuosia, mutta Material Youn myötä se on ottanut merkittävän harppauksen kohti… syvä räätälöinti taustakuviesi perusteellaKyse ei ole enää vain muutaman kuvakkeen vaihtamisesta tai tummaan teemaan siirtymisestä, vaan koko järjestelmän älykkäästä mukautumisesta valitsemiisi väreihin säilyttäen samalla esteettömyyden ja yhtenäisen muotoilun.
Tämä uusi suunnittelufilosofia, joka on ollut olemassa vuodesta Android 12 ja laajennettuna Android 13:ssa, se yhdistää dynaamiset värit, sujuva liike ja uudistetut widgetitTuloksena on visuaalinen kokemus, joka tuntuu inhimillisemmältä ja tunteellisemmalta, mutta samalla kunnioittaa suunnittelijoiden, kehittäjien ja brändien työtä, joiden on pidettävä visuaalinen identiteettinsä hallinnassa.
Mikä on Material You eli Material Design 3?
Materiaalinen sinä, joka tunnetaan myös nimellä Materiaalisuunnittelu 3Se on Googlen UX/UI-käyttöliittymien suunnittelujärjestelmän uusin kehitysaskel. Se ei ole vain visuaalinen tyyli, vaan joukko oppaat, komponentit ja algoritmit jotka mahdollistavat yhtenäisten käyttöliittymien rakentamisen matkapuhelimille, tableteille, kelloille ja muille Android-laitteille.
Toisin kuin aiemmat Material Design -versiot, Material You keskittyy henkilökohtainen ilmaisu ja sopeutuminen käyttäjäänAjatuksena on, että kahdella saman matkapuhelimen käyttäjällä voi olla hyvin erilainen käyttöliittymä, mutta molemmat pysyvät käyttökelpoisina, saavutettavina ja Android-ekosysteemin mukaisina.
Esteettisesti tämä iteraatio valitsee lähestymistavan minimalistisempi ja pehmeämpiVähemmän jyrkkiä varjoja, vähemmän erilaisia typografisia tyylejä, pyöristetympiä muotoja ja siistimpi ulkoasu. Kaikki tämä yhdistetään paljon hienostuneempaan värijärjestelmään, joka pystyy luomaan kokonaisia paletteja yhdestä lähdeväristä.
Mielenkiintoista on, että Material You ei rajoitu Google PixelDynaamista värilogiikkaa ja suunnitteluohjeita on laajennettu useille räätälöintikerroksille, kuten Yksi käyttöliittymä, OxygenOS, ColorOS, OriginOS tai MIUI, ja Google tukee sitä erityisesti varmistaakseen yhdenmukaisen käyttökokemuksen useimmilla Android 12:ta ja uudempia käyttöjärjestelmiä käyttävillä laitteilla.
Tunteet, yksilöllisyys ja paradigman muutos
Material You kumpuaa myös pohdinnasta siitä, miten ymmärrämme digitaalisen suunnittelun. Google väittää, että käyttöliittymän tulisi vastata paitsi toimintoon myös... käyttäjän tunteet, heidän tuntemuksensaTästä johtuu sanaleikki ”Material You” -tekstissä: laitteen tulisi olla yhtä ainutlaatuinen kuin sinä, ei miljoonien ihmisten identtinen klooni.
Sekä iOS että Android ovat olleet vuosien ajan suhteellisen jäykkiä... todellinen käyttöliittymän mukauttaminenTaustan vaihtamisen, widgetin lisäämisen tai käynnistysohjelman asentamisen lisäksi vaihtoehdot olivat rajalliset. Android 12:n ja Material Youn myötä Google osittain palauttaa mieleensä vanhan iskulauseensa "Olkaa yhdessä, älkää samoja" keskittymällä yhteiseen ekosysteemiin, mutta käyttöliittymillä, jotka on räätälöity kullekin käyttäjälle.
Tämä filosofia on ristiriidassa Applen strategian kanssa, joka keskittyy enemmän a:han. suljettu ja tarkasti kontrolloitu ekosysteemi jossa visuaalinen kokemus vaihtelee vain vähän käyttäjien välillä. Google puolestaan mahdollistaa ulkoasun paljon hienostuneemman mukauttamisen tinkimättä sovellusten yhtä hyvästä toimivuudesta eri merkeillä ja malleissa.
Material Youn tärkeimmät uudet ominaisuudet
Material You esittelee useita innovaatioita, jotka kietoutuvat yhteen rakentaen kokonaisvaltaisen kokemuksen: syvällinen räätälöinti, dynaamiset värit, mukautuvuus ja merkityksellinen liikeKaikkea tätä tukee vankka tekninen järjestelmä, jota voivat käyttää niin valmistajat, suunnittelijat kuin kehittäjätkin.
Syvä käyttöliittymän mukauttaminen
Yksi suurimmista muutoksista on, että käyttäjä voi säätää järjestelmän ulkonäköä paljon tarkemmin. Android pystyy järjestele värejä, pintoja, painikkeita ja säätimiä niin, että ne vastaavat taustakuvasta luotua palettia tai manuaalisesti valittua väriä.
Tämä mukautus ulottuu tilariveihin, ilmoituksiin, valikoihin, pikapaneeliin, asetuksiin, Googlen omiin sovelluksiin ja vähitellen myös Material Design 3:n integroiviin kolmannen osapuolen sovelluksiin. Ajatuksena on, että käyttäjä havaitsee yhtenäinen visuaalinen kokemus kokonaisvaltaisestiilman äkillisiä värien vaihteluita järjestelmän ja sovellusten välillä.
Sopeutuvuus näyttöihin ja kokotekijöihin
Materiaali, jota käytät, vahvistaa myös käyttöliittymien mukautuvuus eri näyttöformaatteihinTämä sisältää perinteiset matkapuhelimet, tabletit, älykellot ja taittuvat laitteet. Samaa värien, typografian ja välistyksen logiikkaa on mukautettu varmistamaan, että käyttöliittymää on mukava käyttää kaikissa yhteyksissä.
Google on määritellyt taittuvien puhelimien osalta erityisiä ohjeita, kuten elementtien saavutettavuus, keskeinen sarana ja monimutkaisimmat asettelutEsimerkiksi avoimen näytön ylintä 25 %:a pidetään vaikeasti tavoitettavana, joten on suositeltavaa olla sijoittamatta ensisijaisia toimintoja sinne, eikä kriittisiä tietoja tulisi sijoittaa suoraan saranan yläpuolelle.
Liike ja tuntopalaute
Material You -pelin liike ei ole vain näytöstä varten. Android 12 esittelee efektin, joka Liiallinen siirtymä elastisen venytyksen perusteellaKun käyttäjä yrittää vierittää luettelon lopun yli, pinta venyy tasaisesti tyypillisen vanhanaikaisen heilahduskirkkauden näyttämisen sijaan.
Lisäksi napautuksen aaltoiluanimaatiot on suunniteltu uudelleen tarjoamaan hienovaraisempaa ja sujuvampaa haptista palautettaGoogle kannustaa valmistajia pitämään nämä toimintatavat mahdollisimman lähellä standardia, jotta sovellukset toimivat ennustettavasti räätälöintitasosta riippumatta.
Dynaamiset värit: Material Youn ydin
Tämän uuden vaiheen keskeinen elementti on dynaaminen värijärjestelmä, joka tunnetaan sisäisesti nimellä MonetAndroid 12:sta alkaen järjestelmä pystyy poimimaan hallitsevan värin näytöstäsi. tapetti tai määritellyn perusvärin ja luo automaattisesti täydellisen paletin, jota käytetään järjestelmässä ja yhteensopivissa sovelluksissa.
Tämä järjestelmä perustuu melko hienostuneeseen tekniseen lähestymistapaan, joka yhdistää väriavaruuden CAM16, sävypaletit ja väriroolitTavoitteena on säilyttää hyvä luettavuus, riittävä kontrasti ja viimeistelty estetiikka sekä vaaleissa että tummissa tiloissa, vaikka käyttäjä valitsisikin hieman monimutkaisia taustakuvia.
Palettien luominen Material Youssa
El luomisprosessi Dynaamisten värien käyttö voidaan tiivistää useisiin hyvin määriteltyihin vaiheisiin, vaikka niiden alla on paljon värimatematiikkaa:
- Siemenen värin uuttaminen taustakuvan, sovelluksen sisällön tai käyttäjän tai tuotemerkin valitseman kiinteän värin perusteella.
- Muunnos ja analyysi CAM16-tilassa sävyn, kroman ja muiden havaintoparametrien saamiseksi.
- Viiden keskeisen sävypaletin generointi (aksentti1, aksentti2, aksentti3, neutraali1 ja neutraali2) lähdeväristä sekä kroman ja sävyn säädöt.
- 13 sävyn luominen palettia kohden, eri luminanssitasoilla (0, 10, 50, 100, 200, 300… jopa 1000), jolloin tuloksena on yhteensä 65 dynaamista väriä.
- Näiden sävyjen yhdistäminen käyttöliittymän värirooleihin, kuten ensisijainen, toissijainen, pinta, tausta, teksti, säilöt jne.
Jokaisella viidestä paletista on tietty toimintatapa: esimerkiksi accent1 on yleensä brändin tai käyttäjän teeman pääväri, aksentti2 ja aksentti3 toimivat toisiaan täydentävinä aksentteina, ja neutraali1/neutraali2 on varattu taustoille, pinnoille ja vähemmän silmiinpistäville elementeille.
Teematyylit Android 13:ssa
Android 13:n myötä järjestelmä ottaa askeleen eteenpäin ja antaa sinun valita seuraavista: kuusi erilaista teemaajotka vaihtelevat sitä, miten alkuperäinen väri tulkitaan lopullisen paletin luomiseksi:
- TONAL_SPOT: on Material You -lehden oletusteema, jossa on keskivahva värähtely ja tasapainoinen aksenttien käsittely.
- VIBRANTTIValitse intensiivisempi paletti, jossa on kuitenkin pehmeät siirtymät värien välillä – ihanteellinen katseenvangitseviin käyttöliittymiin.
- ILMEIKÄS: luo odottamattomampia ja ainutlaatuisempia korostusväriyhdistelmiä, joilla on korkea kromaattinen intensiteetti.
- SPRAY: vähentää kylläisyyttä minimiin ja pyrkii lähes monokromaattiseen ja erittäin pehmeään vaikutelmaan.
- SATEENKAARI: yhdistää värikkäitä yksityiskohtia neutraaleihin pintoihin tarjotakseen huomaamattomamman lopputuloksen, suositellaan staattisiin kuvioihin eikä taustoista poimimiseen.
- HEDELMÄSALAATTI: yhdistää kaksisävyisiä värejä antaakseen enemmän ilmaisuvoimaa, sopii paremmin kiinteille paleteille kuin dynaamisille taustoille.
Järjestelmä ottaa JSON-tiedoston, joka on tallennettu Asetukset.Secure.THEME_CUSTOMIZATION_OVERLAY_PAKETIT jossa lähdeväri on määritetty (esimerkiksi "746BC1") ja valinnaisesti teeman tyyli (esimerkiksi "ILMIÄISEVÄ"). Tämän avulla Android luo automaattisesti 65 värivariaatiota, joita sovellukset sitten käyttävät.
Mistä pohjavärit tulevat?
Materiaali, jota harkitset, on kolme pääasiallista tapaa hankkia alkuperäinen väri joka toimii algoritmin lähtökohtana:
- Käyttäjän taustakuvastaTämä on yleisin tapaus. Järjestelmä analysoi kuvan värikvantisoinnin avulla, poimii useita ehdokkaita ja valitsee sellaisen, joka täyttää vähimmäiskromakriteerit (esimerkiksi CAM16-arvo ≥ 5) varmistaakseen, ettei tulos ole liian tylsä.
- Sovelluksen tai verkkosivuston sisällöstäSovellus voi itse päättää, että käyttöliittymän pääväri on johdettu sen sisällöstä, jolloin säilytetään eloisa estetiikka, mutta se on linjassa tuotteen kanssa.
- Manuaalisesti valitusta väristäTuotemerkki tai käyttäjä valitsee tietyn värin, ja järjestelmä rakentaa koko paletin siitä ilman, että taustasta tarvitsee olla riippuvainen.
Kaikissa tapauksissa tavoitteena on, että yksittäinen syöteväri muuttuu täydellinen, helppokäyttöinen ja johdonmukainen värimaailmavälttäen yhdistelmiä, jotka haittaavat lukemista tai rikkovat visuaalisen yhtenäisyyden tunteen.
Hallinta brändeille, suunnittelijoille ja kehittäjille
Looginen kysymys kenelle tahansa digitaalisen tuotesuunnittelun parissa työskentelevälle on, "ohjaako" tämä dynaaminen järjestelmä brändisuunnittelun. Loppujen lopuksi käytät tuntikausia suunnittelujärjestelmäsi hienosäätöön vain saadaksesi sen myöhemmin... Android vaihtaa värejä käyttäjän taustakuvan perusteella.
Vastaus on, että Material You tarjoaa kohtuullisen tasapainon: suunnittelijana tai kehittäjänä Et menetä kontrollia, koska voit päättää, missä määrin haluat käyttää dynaamisia värejä.Järjestelmä on suunniteltu joustavaksi, eikä se korvaa yksittäisten tuotteiden identiteettiä.
Mukautetut teemat ja brändimallit
Material Design 3 sisältää ajatuksen räätälöityjä tai brändättyjä järjestelmiäNämä värit eivät ole peräisin käyttäjän taustakuvasta, vaan sovelluksen itsensä määrittämistä väreistä. Käyttämällä työkaluja, kuten Materiaaliteemojen rakentaja Figmassa voit syöttää brändisi värit (ensisijainen, toissijainen, tertiäärinen, neutraalit) ja antaa järjestelmän luoda täydellisen M3:n kanssa linjassa olevan järjestelmän.
Nämä mukautetut teemat määrittävät vaaditut värilliset merkit ja anna sovelluksellesi lupa:
- Sen tulisi näyttää yhdenmukaiselta muun Material You -ekosysteemin kanssa.
- Säilytä asianmukainen saavutettavuus sekä vaaleissa että pimeissä tiloissa.
- Helpota tulevaa yhdistelyä dynaamisilla järjestelmäväreillä, jos haluat tehdä niin.
Voit myös yhdistä brändivärejä dynaamisiin väreihinYdinjärjestelmä voi periä osan käyttäjän mukautuksista, kun taas laajennettu värivalikoima (esim. hyvin erityisille semanttisille tiloille tai brändiaksenteille) pysyy staattisena.
Suunnittelumerkit ja väriroolit
Material You kannattaa vahvasti käyttöä suunnittelumerkkejäEli semanttisia nimiä, jotka korvaavat suorat arvot, kuten heksadesimaalikoodit. Pelkän "#6200EE":n sijaan käytetään tokeneita, kuten väriEnsisijainen, pinnalla, ensisijainen säiliö, Jne
Nämä merkit yhdistyvät dynaamiset sävypaletit (system_accent1_600, system_neutral1_10 jne.), jotta sovellus voi päivittää ulkoasuaan kirjoittamatta koko koodia uudelleen. Design Kit ja Figma-laajennus luovat nämä tokenit ja yhdistävät ne suunnittelutiedostojen tyyleihin, mikä tekee siirrosta kehitystyöhön paljon suoraviivaisempaa.
Visuaalinen hierarkia ja saavutettavuus
Kun lisäät värirooleja käyttöliittymään, on edelleen tärkeää kunnioittaa tärkeysjärjestysKylläisimmät värit tulisi varata toimintakehotuksiin ja prioriteettielementteihin; neutraalit ja pehmeämmät variaatiot on varattu taustoille ja toissijaiselle sisällölle.
Material You takaa, että järjestelmä luo variaatioita antamiesi värien perusteella sopivat kontrastit tekstille ja kuvakkeillesekä vaaleissa että tummissa tiloissa. Silti on suositeltavaa testata yhdistelmiä todellisissa tilanteissa, varsinkin jos käytät erittäin kirkkaita sekundaarisia tai tertiäärisiä värejä, jotka saattavat kilpailla primaarivärin kanssa.
Dynaaminen väri Android-ekosysteemissä
Aluksi dynaaminen värijärjestelmä ei ollut osa AOSP:tä, mikä herätti epäilyksiä siitä, olisiko se yksinomaan Pixel-puhelimissa. Ajan myötä Google on ollut paletin poiminnan ja generointilogiikan integrointi Android 12:ssa ja 13:ssatarjoamalla korjauksia ja dokumentaatiota auttaakseen laitevalmistajia omaksumaan sen johdonmukaisesti.
Tuotemerkit kuten Samsung, OnePlus, Oppo, Vivo, Realme tai Xiaomi He ovat jo ilmoittaneet tukevansa dynaamisia värejä Android 12+ -pohjaisissa tasoissaan, jotta sovellukset, kuten Gmail, voivat säätää ulkoasuaan samalla väripaletilla eri laitteilla.
Valmistajille (OEM) asetetut vaatimukset
Tarjotakseen a yhdenmukaisuus Material You -tuotteen kanssaAndroid-kumppaneiden on:
- Käytä sama värien erotuslogiikka kuin AOSP:ssä saadaksesi taustakuvan alkuperäisen värin.
- Laajenna kyseistä väriä 65 värien API:a viralliset (aksentti- ja neutraalit paletit, joissa kussakin 13 sävyä).
- Käytä näitä paletteja sekä Järjestelmän käyttöliittymä kuten sen omissa sovelluksissajotta kolmannen osapuolen kehittäjillä on johdonmukainen toimintatapa.
- Tarjotakseen kokemuksen teeman ja taustakuvan valitsin jossa käyttäjä voi tarkastella ja valita väriyhdistelmiä taustan tai perusvärien perusteella.
Lisäksi, jos laite ei tue taustavärin erottamista (teknisten rajoitusten tai suunnittelupäätösten vuoksi), voidaan valita vaihtoehtoinen vaihtoehto. staattinen paletti, oletusmateriaalityyppisäilyttäen tietyn visuaalisen yhtenäisyyden, vaikka dynaaminen osa katoaakin.
Taustakuvat, ThemePicker ja staattiset paletit
Vakiodynaaminen värivirtaus alkaa taustakuvan tai teeman valitsinKun käyttäjä muuttaa taustaa tai valitsee värijoukon, järjestelmä:
- Laske vallitsevat taustavärit (tai lue valittu perusväri).
- Suodata värit niiden kromaattisuuden ja muiden sääntöjen perusteella valitaksesi kelvollisen värin.
- Luo viisi sävypalettia ja täytä 65 väri-API:a.
- Päivitä järjestelmän käyttöliittymä ja anna kyseiset värit sovellusten käyttöön.
Kiinteille perusväreille valmistajat voivat määritellä Stub APK, jossa on väriryhmiä ja kuvaavia nimiä (esimerkiksi Sininen, Punainen, Keltainen, Vihreä), jotka näkyvät valitsimessa ennalta määritettyinä vaihtoehtoina. Jokainen merkintä sisältää ensisijaisia ja toissijaisia arvoja, joita järjestelmä käyttää lähtökohtana sävypaleteille.
Suunnittelijoiden työkalut: Material Theme Builder ja Design Kits
Google on luonut useita erityisiä työkaluja, jotka keskittyvät pääasiassa Figmaan ja helpottavat Material Youn käyttöönottoa suunnittelumaailmassa. Tärkein on Material Theme Builder -laajennusjonka avulla voit luoda dynaamisia ja brändättyjä värimaailmoja ilman, että sinun tarvitsee painida värien matematiikan kanssa.
kanssa työkalun sinä pystyt:
- Lataa a viiteaihe tai luo sellainen tyhjästä.
- Määritä avainvärit (ensisijainen, toissijainen, tertiäärinen, neutraali) ja katso, miten ne leviävät käyttöliittymässä.
- Käytä luotuja skeemoja Material Design -sarjan osat sisältyy Figma-tiedostoon.
- Laajenna järjestelmää lisää mukautettuja värejä (Mukautettu0, Mukautettu1…) tiettyjä brändäys- tai semanttisia tarpeita varten.
Lisäosa luo automaattisesti Figma-tyylejä, jotka toimivat väritunnuksina, ja nämä ovat linkki malleihinTällä tavoin teeman vaihtaminen (esimerkiksi neutraalista brändättyyn) tapahtuu käytännössä napin painalluksella ja uusien tyylien määrittämisellä.
Mobiililaitteiden ulkopuolella: widgetit, kuvakkeet ja käynnistysohjelmat
Material Youn vaikutus ei rajoitu järjestelmäsovelluksiin. Android 12 -widgetit Niitä on päivitetty vastaamaan uusia API-rajapintoja koon, pyöristettyjen kulmien ja värin osalta, ja kehittäjiä kannustetaan päivittämään omia widgettejään hyödyntääkseen näitä ominaisuuksia.
Toisaalta käynnistysohjelmien ja kuvakepakettien yhteisö on myös pannut merkille tämän. Saatavilla on dynaamisia kuvakepaketteja, jotka Ne vaihtavat väriä taustakuvan tai järjestelmän aksentin mukaan.ja ne mukautuvat sekä vaaleisiin että tummiin tiloihin. Jotta ne toimisivat, sinun on käytettävä yhteensopivia käynnistysohjelmia (Nova Launcher, Lawnchair, Hyperion, Niagara, Smart Launcher jne.) ja taustan tai teeman vaihtamisen jälkeen ota kuvakepaketti uudelleen käyttöön paletin uudistamiseksi.
Material You on muuttanut Androidin alustaksi, jossa väri ja muoto mukautuvat älykkäästi jokaiseen käyttäjään jättämättä suunnittelijoita, brändejä tai kehittäjiä jälkeen. Järjestelmän ansiosta dynaamiset värit, sävypaletit ja suunnittelumerkitOn mahdollista saada erittäin personoitu mutta silti yhtenäinen, helppokäyttöinen ja teknisesti ennustettava käyttöliittymä. Käytitpä sitten Pixeliä, Samsungia tai Xiaomia, ajatuksena on, että puhelimesi heijastaa persoonallisuuttasi, mutta toimii ja näyttää silti siltä, miltä miljoonat ihmiset Android-ekosysteemissä odottavat. Jaa tietoa, jotta useammat käyttäjät voivat oppia aiheesta.