Material You on määritellyt uudelleen mukauttamisen Androidilla Android 12:sta lähtien olemme tuoneet järjestelmän värit ja teemat paljon ilmeikkäämmälle ja yhtenäisemmälle tasolle. Tämä käytännöllinen ja yksityiskohtainen opas näyttää, kuinka teemaa ja dynaamista palettia muutetaan, miten värien erottaminen toimii ja miten se integroidaan oikein sekä järjestelmä- että sovellustasolla.
Sen lisäksi, että perehdytään dynaamiset värit, liike ja widgetit, opit, kuinka valmistella sovelluksesi Material Design 3:a varten, kuinka käyttää Material Theme Builderia Figmassa ja mitä muutoksia tehdä Android 12:ssa ja 13:ssa. Löydät myös vastauksia usein kysyttyihin kysymyksiin, suosituksia laitevalmistajille ja pääpuheenvuoroja kehittäjille.
Mikä on Material You ja miksi sillä on väliä?
Materiaalinen sinä (Materiaalisuunnittelu 3) Se on suunnittelukieli, joka keskittyy ilmeikkyyteen, sujuvuuteen ja yhtenäisyyteen koko ekosysteemissä. Se ylläpitää minimalistista lähestymistapaa (vähemmän varjoja, puhtaampia fontteja, pehmeämpiä muotoja) ja tarjoaa jokaiselle käyttäjälle ainutlaatuisen kokemuksen, joka mukautuu heidän kontekstiinsa ja mieltymyksiinsä.
Tämä lähestymistapa ei rajoitu pelkästään Pixelsiin; Se ulottuu Samsungin, OnePlusin, OPPON, Vivon, Realmen ja Xiaomin matkapuhelimiin., tabletteja, kelloja ja muita laitteita. Sen tavoitteena on yhdistää syvällinen räätälöinti saavutettavuuteen, visuaaliseen yhtenäisyyteen ja moderniin liikejärjestelmään.
Dynaaminen väri: keskipiste
Dynaaminen väri on Material Youn ydin: poimii lähdevärin taustakuvasta tai valitusta väristä, laajentaa sen viiteen sävypalettiin, joissa kussakin on 13 sävyä (yhteensä 65 väriä), ja soveltaa sitä harmonisesti koko järjestelmässä ja sovelluksissa.
Yhdenmukaisuuden varmistamiseksi On suositeltavaa käyttää muokkaamatonta AOSP-poimintalogiikkaa ja ylläpitää yhdenmukaisuutta 65 väriattribuutin kanssa. Tällä tavoin käyttäjät ja kehittäjät löytävät vakaan ja tehokkaan mukautuskokemuksen millä tahansa Android-laitteella.
Dynaamisen värivirtauksen toimintaperiaate
Koko prosessi koostuu neljästä vaiheesta erittäin selkeä, värien erottaminen ja eteneminen prosessin keskiössä:
- Käyttäjä vaihtaa taustakuvan tai valitsee teeman OEM-valmistajan teemavalitsimesta. Tuo liipaisin aktivoi paletin uudelleenmäärittelyn.
- Käyttäjä valitsee eri vaihtoehtojen välillä: laitteen teema (Android valitsee automaattisesti kelvollisen siemenvärin) tai uusi taustakuva ja teema (AOSP poimii siemenvärin taustakuvasta).
- AOSP ottaa yhden siemenvärin ja laajentaa sen viideksi sävypaletiksi (A1, A2, A3, N1, N2), joissa kussakin on 13 tasoa, siten levittäen 65 väriominaisuutta järjestelmän toimesta.
- Järjestelmän käyttöliittymä ja sovellukset käyttävät näitä 65 attribuuttia johdonmukaisesti. Suositus: Käytä samaa palettia sekä SysUI- että OEM-sovelluksissa yhtenäisen kokemuksen saavuttamiseksi.
Algoritmin yksityiskohdat: sävyt, kromat ja konsistenssi
Material You käyttää CAM16-pohjaisia muunnoksia harmonian ja kontrastin varmistamiseksi. Siemenen värin on oltava vähintään 5 kroma CAM16:ssa (jotta erittäin tummat sävyt eivät pilaa sävylaajennusta). Voit lukea/kirjoittaa CAM16-tiedostoja apuohjelmilla, kuten Cam#fromInt tai Cam#getInt.
Jokaiseen sävypalettiin sovelletaan erityisiä kroma- ja sävysääntöjä: aksentti1 (kromaattipitoisuus 40 kohdissa 0, 10, 50 ja 100; 48 muissa kohdissa, sävy sama kuin siemenellä), aksentti2 (kroma 16, sama sävy), aksentti3 (kroma 32, sävy kierretty +60 astetta), neutraali1 (kroma 4) ja neutraali2 (kroma 8), samalla sävyllä kuin siemen.
Yhteensopivuus, testaus ja AOSP
Android 12L ja uudemmat sisältävät nyt dynaamisen värin vakiona.Android 12 integroi tarvittavat korjauspäivitykset tukeakseen kokonaisvaltaista logiikkaa (noutaminen ja levittäminen 65 API:lle). CTS validoi luminanssin ja sävyn; voit suorittaa sen atest SystemPalettella.
Jos laitteesi ei tue taustakuvan poimintaa, voit poistaa flag_monetin käytöstä ja tarjoavat teemavalitsimen ennalta määritellyillä paleteilla, mikä varmistaa mukauttamisen ilman dynaamisia värejä.
AOSP ThemePicker: Mukautetut värit ja APK-tynkä
Jos käytät AOSP ThemePickeriä, väriosio tulee näkyviin, jos flag_monet on käytössä Ja themes_stub_package-arvossa on ilmoitettu järjestelmän tynkä APK. Tynkä sisältää vain perusvärien resurssit ja niiden nimet.
Tyngän rakenne sisältää res/xml-tiedostossa olevan XML-tiedoston, joka sisältää väripakettien taulukon (esim. color1, color2 jne.) ja bundle_name_colorX -merkkijonotLisäksi sinun on määriteltävä kunkin perusvärin arvot ensisijaisina/toissijaisina pareina (esimerkiksi color_primary_color1 ja color_secondary_color1) ja molempien on oltava samanvärisiä.
Suositellut integrointivaiheet
Vaihe 1: Käyttäjäteeman käyttökokemus
Tarjoaa tuotteellesi räätälöidyn teeman tai taustakuvan valitsimen. Taustakuvan valitsimella poiminta on oletuksena käytössä., mutta voit lisätä käyttäjälle lisää vaihtoehtoja, jos haluat.
Vaihe 2: Siementen värin erottaminen
Android 12:ssa aktivointireitti SysUI:ssa on ThemeOverlayController (mOnColorsChangedListener) WallpaperManager#onWallpaperColorsChanged-metodin kautta. Käytä ColorScheme#getSeedColors-funktiota useiden siementen näyttämiseen valitsimella, ei vain korkeimmalla taajuudella.
Vaatii CAM16-kromaattisuuden ≥ 5, jotta siemenväri olisi kelvollinen. Jos kelvollisia siemeniä ei ole, käytä varasijaa oppaan mukaisesti. ja säilyttää sävyn ja kontrastin yhtenäisyyden.
Vaihe 3: Laajenna 65 API:in
Siemenvärin avulla Android luo viisi palettia ja 13 sävyaskelta palettia kohden (0, 10, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000). Käytä Android 12 -korjauslogiikkaa laajentuaksesi oikein ja noudattavat CTS:ää ja CDD:tä.
Vaihe 4: Käytä sovelluksissa ja järjestelmän käyttöliittymässä
Integroi Material You omiin sovelluksiisi ja SysUI:hin. Materiaalioppaat selittävät roolien ja tokeneiden yhdistämisen jotta komponentit omaksuvat dynaamiset värit, säilyttäen saavutettavuuden ja luettavuuden.
Vaihe 5: Asetukset WallpaperPickerissa (Android 13+)
Android 13:sta lähtien accent_color ei ole enää saatavilla ja android.theme.customization.theme_style lisättiin, ja tyylejä ovat esimerkiksi TONAL_SPOT, VIBRANT, EXPRESSIVE ja SPRITZ. Ainakin 'android.theme.customization.system_palette' lähetetään Settings.Secure.THEME_CUSTOMIZATION_OVERLAY_PACKAGES JSON-tiedostossa.
Esimerkki kokoonpanosta: { 'android.theme.customization.system_palette':'B1611C', 'android.theme.customization.theme_style':'ILMAISUUDELLINEN' }Android 12:ssa ja aiemmissa versioissa käytettiin 'system_palette'- ja 'accent_color'-värejä samalla seed code -värikoodilla.
Vaihe 6: Lisää sallittujen luetteloon
Lähetä tukipyyntö RAKENNUS.VALMISTAJA jotta Material Components -pohjaiset sovellukset voivat tunnistaa dynaamisten palettien saatavuuden laitteillasi. Tämä varmistaa yhdenmukaisen käyttökokemuksen kolmansille osapuolille.
Järjestelmän teematyylit ja sävypaletit
Android 13 lisää algoritmimuunnelmia kontrastin ja ilmaisun tarpeisiin: TONAL_SPOT (oletus) VIBRANTTI (korkea hienovarainen intensiteetti), ILMEIKÄS (korkea intensiteetti odottamattomilla aksenteilla), SPRAY (alhainen intensiteetti, desaturoitunut ulkonäkö), SATEENKAARI y HEDELMÄSALAATTI (suunniteltu staattisille teemoille, ei suositella taustakuvasta poimimiseen).
Dynaamiset sävypaletit näkyvät resursseina R.colorissa nimillä, kuten system_accent1_10 jopa 13 indeksiä. Järjestelmä luo sävyn ja kroman ajonaikana siemenestä.
Roolien ja aiheominaisuuksien yhdistämiset
Materiaali 3 määrittelee joukon rooleja, jotka on liitetty Android-teeman ominaisuuksiin, muunnelmilla vaalealle ja tummalle teemalleJoitakin keskeisiä esimerkkejä (yhteenvetona):
| rol | Attribuutti | Tyhjennä | oscuro |
|---|---|---|---|
| Pääasiallinen | väriEnsisijainen | system_accent1_600 | system_accent1_200 |
| Pääsivulla | väri ensisijaisessa | system_accent1_0 | system_accent1_800 |
| Toissijainen | väriToissijainen | system_accent2_600 | system_accent2_200 |
| Toissijaisella | väri toissijaisella | system_accent2_0 | system_accent2_800 |
| Pohja | android:väritausta | system_neutral1_10 | system_neutral1_900 |
| Taustalla | väri taustalla | system_neutral1_900 | system_neutral1_100 |
| Alue | väripinta | system_neutral1_10 | system_neutral1_900 |
| Pinnalla | väri pinnalla | system_neutral1_900 | system_neutral1_100 |
On myös valtion määritteet (esim. colorPrimaryStateContent, colorOnSurfaceVariantStateLayer), jotka on johdettu samoista rooleista, mikä varmistaa yhdenmukaisuuden painettujen, aktiivisten ja käytöstä poistettujen tilojen välillä.
Liike: siirtymä ja aalto
Sujuva liike tuo ensiluokkaisen tuotetuntuman. Android 12 debytoi ylivieritä venytyksen avulla joka reagoi, kun yritetään vierittää luettelon rajojen ulkopuolelle.
Yhdenmukaisuusohjeet: Laitteilla, joissa ActivityManager.isHighEndGfx() on true, käyttää epälineaarista venytystä; vaatimattomammilla laitteistoilla se yksinkertaistaa lineaariseksi venytykseksi kuormituksen vähentämiseksi.
Vaakasuuntaisen vierityksen tukemiseksi mukautetuissa näkymissä päivittää kirjastoja uusin: androidx.recyclerview:recyclerview 1.3.0-alpha01, androidx.core 1.7.0-alpha01 (NestedScrollView ja EdgeEffectCompat) ja androidx.viewpager 1.1-alpha01.
EdgeEffectiä käyttävissä malleissa näkymää venytettäessä sinun ei pitäisi olla vuorovaikutuksessa sisällön kanssaAnimaation kaappaaminen ja venytyksen käsittely tehdään EdgeEffectCompat.getDistance()- ja onPullDistance()-funktioilla. Sisäkkäisissä pull-operaatioissa venytyksen on ensin käsiteltävä ele ei-toivotun liikkeen välttämiseksi.
La tuntoaalto (Ripple) on Android 12:ssa sulavampi ja hienovaraisempi. Se ei vaadi lisäintegraatiota, mutta on hyvä tarkistaa laitekohtaiset regressiot.
Widgetit: API:t ja päivitykset
Widgetit ovat avainasemassa Androidissa, ja Android 12:ssa kokoa, asettelua ja parametreja, kuten, koskevat API:t. nurkan sädeKäyttöjärjestelmäsi on oltava oikein käytettävissä näissä API-rajapinnoissa ja sallittava widgetien koon muuttaminen ja konfigurointi.
Omissa sovelluksissasi hyödynnä uusia ominaisuuksia ja päivittää tai luoda widgetejäNiiden priorisointi alustan ohjeiden mukaisesti parantaa yhdenmukaisuutta Material Youn kanssa.
Suunnittelu Material Theme Builderilla ja tokeneilla
Material Theme Builder (Figma ja verkkoversio) tekee luomisesta helppoa esteettömiä brändäysteemoja ja yhdistää ne dynaamiseen väriin. Sen avulla voit määrittää avainvärit (ensisijainen, toissijainen, tertiäärinen, neutraali) ja luoda vaaleita/tummia sävypaletteja, tokeneita ja koodivientejä.
Los suunnittelumerkkejä korvaa staattiset arvot semanttisilla nimillä, mikä luo yhteisen kielen suunnittelun ja kehityksen välille. Voit laajentaa järjestelmää mukautetuilla väreillä (esim. Custom0) tietylle semantiikalle tai tuotteille rikkomatta järjestelmää.
Värihierarkia on tärkeä: Tyydyttyneemmät sävyt herättävät enemmän huomiota, joten varaa ensisijainen aste toimintakehotuksille ja käytä toissijaista/kolmannen asteen asteikkoa tasapainottamaan ja ohjaamaan katsetta.
Figma-koodilaboratorio: Olennaiset vaiheet
Kirjaudu sisään tai luo tili Figmassa, kopioi laboratoriotiedosto ja Asenna Material Theme Builder -lisäosaAsiakirja on jaettu osioihin, joissa on peräkkäisiä käsitteitä ja harjoituksia; noudata järjestystä ymmärtääksesi aiheen roolit, merkit ja sovelluksen.
Syötä brändisi ensisijainen väri; muut värit tulevat perässä. Lisää toissijainen ja tertiäärinen lisää värien ilmaisua. Määritä neutraaleja sävyjä pinnoille ja tekstille. Vaihda teemaan laajennuspaneelissa ja käytä tyylejä mukautettuihin komponentteihin tarvittaessa.
Jos haluat laajentaa keskiviivan ulkopuolelle, lisää mukautettuja värejä (Custom#) plugin-modaalista. Voit nimetä ne uudelleen Figman Tyylit-paneelissa ja liittää ne tiettyihin tageihin tai komponentteihin.
Päivitä Android-sovellus materiaaliin 3
Ennen dynaamisen värin lisäämistä päivitysriippuvuudet (com.google.android.material uudemmissa versioissa) ja käytä compileSdkVersion/targetSdkVersion 31:tä tai uudempaa. Vaihda perusteema Theme.MaterialComponents.*:sta Theme.Material3.*:ksi.
Tarkista, että perityt ominaisuudet ovat edelleen järkeviä ja siirrä mukautettuja tyylejä jotka ovat nyt vakiona M3:ssa. Voit luoda täydellisen teeman Material Theme Builderilla ja kopioida tiedostot values/colors.xml ja values-night/themes.xml sekä muokata teeman nimeä.
Jos kohdistat Android 12:een, muista ilmoittaa android:exported nimenomaisesti AndroidManifest-päätoiminnossasi järjestelmävaatimusten täyttämiseksi.
Käytä dynaamista väriä sovelluksessa
Kun Material 3 -teema on käytössä, ota dynaamiset värit käyttöön maailmanlaajuisesti DynamicColors.applyToActivitiesJosSaatavilla Application-luokassasi. Tämä rekisteröi ActivityLifecycleCallbackit ja käyttää järjestelmän luomaa ThemeOverlay-ominaisuutta.
Jos sinun on pakotettava brändin vivahteita, määrittele teemojen päällekkäisyys (ThemeOverlay.Material3.DynamicColors.Light/Dark/DayNight) Määritä sävyillesi colorPrimary-, onPrimary-, primaryContainer- ja onPrimaryContainer-arvot ja välitä ne toisena parametrina applyToActivitiesIfAvailable-funktiolle.
Mukautettujen attribuuttien (esim. oman iconColor-värin) osalta katso järjestelmäpaletit kuten @android:color/system_accent2_600 päällekkäistiedostossasi. Sijoita resurssit -v31-kansioihin, jos minSdk-tiedostosi on alle 31.
Siementen värilähteet ja saatavuus
Siemen voi tulla taustakuvasta (kvantisointi), sovelluksesi sisällöstä tai käyttäjän valitsemasta väristä. Järjestelmä manipuloi sävyä ja kromatiikkaa luodakseen viisi avainväriä ja niiden paletit. Tavoitteena on ylläpitää korkea kontrasti ja luettavuus, mukaan lukien tuki tummalle tilalle ja vaihteleville kontrastitasoille.
Jos sinulla on jo hyvin määritellyt brändivärit, voit syötä ne Teeman luontityökaluun luoda helppokäyttöisiä ja yhdenmukaisia paletteja M3:lla. Käytettävissä on myös katseluohjelma, jolla voi tarkistaa tulokset eri kuvilla.
Ekosysteemien yhteensopivuus ja työkalut
Google vahvisti saapumisen dynaamiset värit tasoille, kuten One UI, OxygenOS, ColorOS, OriginOS ja MIUI, mikä tarjoaa yhtenäisen käyttökokemuksen eri valmistajilla. Jopa Gmail mukauttaa ulkoasuaan useissa lippulaivamalleissa.
Jos sinulla ei ole yhteensopivaa laitetta käsillä, kokeile dynaamisia teemoja selaimessa Material Theme Builderilla voit ladata oman taustasi nähdäksesi tuloksena olevan paletin.
Käytännön huomautus: jotkin kolmannen osapuolen teematyökalut saattavat ristiriidassa järjestelmäpaletin kanssaJos mukautettu teemasi poistaa palettivaihtoehdon käytöstä tai pakottaa sen käyttöön, tarkista päällekkäisasetusten prioriteetit ja OEM-asetukset.
Usein kysytyt kysymykset
Aktivoituuko värien poisto automaattisesti taustakuvaa vaihdettaessa? Android 12 -korjausten kanssa kyllä: ThemeOverlayController#mOnColorsChangedListener WallpaperManagerin kautta käsittelee tapahtuman automaattisesti.
Entä live- tai videotaustat? Uuttaminen tehdään taustakuvaa asetettaessa tai näytön virrankatkaisun ja sammuttamisen jälkeen; uusin WallpaperColors-tapahtuma Se otetaan käyttöön uudelleenkäynnistyksen yhteydessä.
Voinko näyttää useita siemeniä poimijassa? Kyllä, käytä Värimalli#getSeedColors luetella muita vaihtoehtoja kuin yleisimmän.
Entä temaattiset kuvakkeet? Ne eivät olleet osa Android 12 -vakaa versiota. Niitä ei otettu mukaan kyseiselle versiolle mainituissa korjauksissa.
Voinko käyttää Google Wallpaper -sovellusta värien esikatselun kanssa? Kyllä, ilmoitetun integroinnin jälkeen. WallpaperPicker2 ja Launcher3 renderöi esikatselun; WallpaperSectionController hallinnoi näyttöä ja GridCustomizationsProvider näyttää tiedot ContentProviderin kautta.
Taittuvat laitteet: Suunnittelunäkökohdat
Taittuvien näyttöjen myötä ergonomia muuttuu: Ylintä 25 prosenttia voi olla vaikea tavoittaa Käyttöön otettuna se jakaa sisältöä kätevän tavoittavuuden ja relevanssin perusteella.
Vältä kriittisten hallintalaitteiden sijoittamista keskisaranaOn suositeltavaa varata noin 48 dp tilaa kyseisen alueen ympärille, jotta vuorovaikutus ei häiriinny.
Vaakasuuntaisessa tilassa sijoita päänavigointi vasemmalle ja jaa sisältö kaksi saraketta, saranavälin säätäminen. Pystyasennossa priorisoi leveää saraketta luettavuuden säilyttämiseksi.
Toteutusavaimet Android 13:ssa ja 12:ssa
Android 13:ssa aseta Settings.Secure.THEME_CUSTOMIZATION_OVERLAY_PACKAGES-asetukseksi järjestelmäpaletti ja valinnaisesti teeman_tyyli (TONAL_SPOT, VIBRANT, EXPRESSIVE, SPRITZ tai muut staattisiin teemoihin keskittyvät).
Jos käytät Android 12:ssa tai vanhemmissa versioissa mukautettua teemanvalitsinta, lähetä sama asetus JSON-tiedostona, jossa on system_palette ja accent_color ovat yhtä suuret ohittaaksesi vaiheen 2 erottamisen ja laajentaaksesi suoraan vaiheeseen 3.
Material You mahdollistaa syvällisen mutta hallitun mukauttamisenVoit valita automaattisen poiminnan taustasta tai brändiväreistä, mikä varmistaa aina kontrastin, luettavuuden ja johdonmukaisuuden. Oikein integroituna (AOSP/CTS/peittokuvat) dynaaminen väri parantaa käyttökokemusta häiritsemättä visuaalista identiteettiä ja avaa oven henkilökohtaisempiin kokemuksiin Android-ekosysteemissä. Jaa opas, niin useammat käyttäjät tietävät, miten Material You -sovellusta käytetään Androidin mukauttamiseen..