Az Android évek óta elkötelezett az anyagszerű design iránt, de a Material You-val jelentős lépést tett efelé. mélyreható testreszabás a háttérképek alapjánMár nem csak néhány ikon megváltoztatásáról vagy sötét témára váltásról van szó, hanem arról, hogy a teljes rendszer intelligensen alkalmazkodik a kiválasztott színekhez, miközben megőrzi az akadálymentességet és az egységes dizájnt.
Ez az új tervezési filozófia, amely azóta van jelen Android 12 és az Android 13-ban kibővítve, egyesíti a dinamikus színek, folyamatos mozgás és átdolgozott widgetekAz eredmény egy olyan vizuális élmény, amely emberibbnek és érzelmesebbnek érződik, ugyanakkor tiszteletben tartja a tervezők, fejlesztők és márkák munkáját, akiknek kézben kell tartaniuk vizuális identitásukat.
Mi az a Material You vagy Material Design 3?
Anyagi Te, más néven Anyagtervezés 3Ez a Google UX/UI interfészek tervezési rendszerének legújabb fejlesztése. Nem csupán egy vizuális stílus, hanem egy sor… útmutatók, komponensek és algoritmusok amelyek lehetővé teszik az egységes felületek létrehozását mobiltelefonokon, táblagépeken, órákon és más Android-eszközökön.
A Material Design korábbi verzióival ellentétben a Material You a következőkre összpontosít: személyes kifejezésmód és alkalmazkodás a felhasználóhozAz ötlet az, hogy két embernek ugyanazzal a mobiltelefonnal nagyon eltérő felülete legyen, de mindkettő használható, hozzáférhető és összhangban maradjon az Android ökoszisztémával.
Esztétikailag ez az iteráció egy olyan megközelítést választ, minimalistább és lágyabbKevesebb durva árnyék, kevesebb eltérő tipográfiai stílus, lekerekítettebb formák és letisztultabb megjelenés. Mindezt egy sokkal kifinomultabb színrendszerrel párosítják, amely képes egyetlen forrásszínből teljes palettákat generálni.
Az érdekes az, hogy a Material You nem korlátozódik a következőkre: Google PixelA dinamikus színlogikát és a tervezési irányelveket kiterjesztették a testreszabás számos rétegére, például Egy felhasználói felület, OxygenOS, ColorOS, OriginOS vagy MIUI, a Google külön támogatásával, hogy a legtöbb Android 12-es vagy újabb rendszert futtató eszközön egységes felhasználói élményt biztosítson.
Érzelem, individualitás és paradigmaváltás
A Material You a digitális design felfogásának vizsgálatából is fakad. A Google szerint a felhasználói felületnek nemcsak a funkcióra kell reagálnia, hanem a következőkre is... a felhasználó érzései, érzelmeiInnen ered a szójáték az „Anyagi Te” című műben: a készüléknek olyan egyedinek kell lennie, mint te, nem pedig emberek millióinak azonos klónjának.
Évekig mind az iOS, mind az Android viszonylag merev volt a következők tekintetében: valódi felhasználói felület testreszabásaA háttér megváltoztatásán, egy widget hozzáadásán vagy egy indítóprogram telepítésén túl a lehetőségek korlátozottak voltak. Az Android 12-vel és a Material You-val a Google részben visszaadja régi szlogenjének, az „Együtt legyünk, ne ugyanolyanok” szellemét, egy közös ökoszisztémára összpontosítva, de minden felhasználóhoz igazított felületekkel.
Ez a filozófia ellentétben áll az Apple stratégiájával, amely inkább a következőkre összpontosít: zárt és szigorúan ellenőrzött ökoszisztéma ahol a vizuális élmény alig változik a felhasználók között. A Google ezzel szemben sokkal finomabb testreszabást tesz lehetővé a megjelenés terén anélkül, hogy veszélyeztetné az alkalmazások egyformán jó működését a különböző márkákon és modelleken.
A Material You főbb új funkciói
A Material You számos innovációs vonalat vezet be, amelyek összefonódnak a teljes élmény megteremtése érdekében: mélyreható testreszabhatóság, dinamikus színek, alkalmazkodóképesség és értelmes mozgásMindezt egy robusztus műszaki rendszer támogatja, amelyet gyártók, tervezők és fejlesztők egyaránt használhatnak.
Mélyreható felület testreszabás
Az egyik legnagyobb változás, hogy a felhasználó sokkal finomabban tudja beállítani a rendszer megjelenését. Az Android képes erre átrendezheti a színeket, felületeket, gombokat és vezérlőket hogy azok megegyezzenek a háttérképből generált palettával vagy egy manuálisan kiválasztott színnel.
Ez a testreszabás kiterjed az állapotsorokra, az értesítésekre, a menükre, a gyorspanelre, a beállításokra, a Google saját alkalmazásaira, és fokozatosan a Material Design 3-at integráló harmadik féltől származó alkalmazásokra is. Az ötlet az, hogy a felhasználó érzékelje a végponttól végpontig konzisztens vizuális élmény, hirtelen színváltások nélkül a rendszer és az alkalmazások között.
Alkalmazkodhatóság a képernyőkhöz és a formai tényezőkhöz
Az Ön anyaga is megerősíti a a felületek alkalmazkodóképessége a különböző képernyőformátumokhozEz magában foglalja a hagyományos mobiltelefonokat, táblagépeket, okosórákat és összecsukható eszközöket. Ugyanazt a szín-, tipográfiai és térköz-logikát alkalmazzuk, hogy a felület minden kontextusban kényelmesen használható legyen.
Az összecsukható telefonok esetében a Google konkrét irányelveket határozott meg olyan szempontokra vonatkozóan, mint például az elemek elérhetősége, a központi csuklópont és a legösszetettebb elrendezésekPéldául a nyitott képernyő felső 25%-a nehezen elérhetőnek tekinthető, ezért nem ajánlott oda helyezni az elsődleges műveleteket, és a kulcsfontosságú információkat sem szabad közvetlenül a zsanér fölé helyezni.
Mozgás és tapintási visszajelzés
A Material You mozgalma nem csak a látványosság kedvéért van. Az Android 12 egy olyan effektust vezet be, mint a Rugalmas nyújtáson alapuló túlzott elmozdulásAmikor a felhasználó megpróbál egy lista végére görgetni, a felület simán megnyúlik a tipikus régimódi visszapattanó fényerő megjelenítése helyett.
Ezenkívül a koppintásra megjelenő fodrozódó animációkat újratervezték, hogy a következőket kínálják: finomabb és folyékonyabb haptikus visszajelzésA Google arra ösztönzi a gyártókat, hogy ezeket a viselkedési mintákat a lehető legközelebb tartsák a szabványhoz, hogy az alkalmazások a testreszabási rétegtől függetlenül kiszámíthatóan viselkedjenek.
Dinamikus színek: a Material You lelke
Ennek az új szakasznak a kulcseleme a dinamikus színrendszer, belső nevén MonetAz Android 12-től kezdődően a rendszer képes kinyerni egy domináns színt a képernyőről. tapéta vagy egy meghatározott alapszínt, és automatikusan generál egy teljes palettát, amelyet a rendszerre és a kompatibilis alkalmazásokra alkalmaz.
Ez a rendszer egy meglehetősen kifinomult technikai megközelítésen alapul, amely a színteret ötvözi CAM16, tónuspaletták és színszerepekA cél a jó olvashatóság, a megfelelő kontraszt és a kifinomult esztétika fenntartása mind világos, mind sötét módban, még akkor is, ha a felhasználó némileg összetett háttérképeket választ.
Hogyan működik a palettagenerálás a Material You-ban?
El létrehozási folyamat A dinamikus színek használata több jól definiált lépésben foglalható össze, bár mögötte sok színmatematika rejlik:
- Vetőmag színének kinyerése a háttérkép, az alkalmazás tartalma vagy a felhasználó vagy a márka által választott fix szín alapján.
- Konverzió és elemzés a CAM16 térben a tónus, a színárnyalat és más érzékelési paraméterek megszerzéséhez.
- Öt kulcsfontosságú tónuspaletta generálása (akcentus1, akcentus2, akcentus3, semleges1 és semleges2) a forrásszínből, valamint a kromatikus és tónusos beállítások.
- 13 árnyalat létrehozása palettánként, különböző fényerősségi szintekkel (0, 10, 50, 100, 200, 300… akár 1000-ig), ami összesen 65 dinamikus színt eredményez.
- Ezen tónusok leképezése a felhasználói felület színszerepeire, például elsődleges, másodlagos, felület, háttér, szöveg, tárolók stb.
Mind az öt palettának megvan a maga sajátos viselkedése: például Az accent1 általában a márka vagy a felhasználó témájának fő színeAz accent2 és az accent3 kiegészítő hangsúlyként szolgálnak, a neutral1/neutral2 pedig hátterek, felületek és kevésbé feltűnő elemek számára van fenntartva.
Témastílusok az Android 13-ban
Az Android 13-mal a rendszer egy lépéssel továbbmegy, és lehetővé teszi, hogy a következők közül válassz: hat különböző témastílusamelyek megváltoztatják, hogyan értelmezik az eredeti színt a végső paletta létrehozásához:
- TONAL_SPOT: a Material You alapértelmezett témája, közepes rezgéssel és kiegyensúlyozott hangsúlykezeléssel.
- ÉLÉNK: válassz intenzívebb palettát, de a színek közötti átmenetek finomak, ideális a szemet gyönyörködtetőbb felületekhez.
- KIFEJEZŐ: váratlanabb és egyedibb hangsúlyszín-kombinációkat generál, magas kromatikus intenzitással.
- LOCCSANÁS: minimálisra csökkenti a telítettséget, szinte monokróm és nagyon lágy hatást érve el.
- RAINBOW: színes díszítőelemeket kever semleges felületekkel a diszkrétebb eredmény érdekében, statikus sémákhoz ajánlott, nem pedig a hátterekből való kiemeléshez.
- GYÜMÖLCSSALÁTA: kéttónusú színeket kombinál a kifejezőbb hatás érdekében, inkább fix palettákhoz alkalmas, mint dinamikus hátterekhez.
A rendszer egy JSON-t fogad el, amely a következő helyen van tárolva: Beállítások.Biztonságos.TÉMA_CUSTOMIZATION_OVERLAY_PACKAGES ahol a forrásszín meg van adva (például „746BC1”), és opcionálisan a téma stílusa (például „KIFEJEZŐ”). Ezzel az Android automatikusan generálja a 65 színváltozatot, amelyeket az alkalmazások ezután használni fognak.
Honnan származnak az alapszínek?
Anyag, amit figyelembe veszel, három fő utat vesz igénybe a megszerzéséhez eredeti szín ami az algoritmus kiindulópontjaként szolgál majd:
- A felhasználó háttérképérőlEz a leggyakoribb eset. A rendszer színkvantálás segítségével elemzi a képet, több jelöltet kiemel, és kiválaszt egyet, amelyik megfelel a minimális kromatikus kritériumoknak (például CAM16 érték ≥ 5), hogy az eredmény ne legyen túl fakó.
- Az alkalmazás vagy a weboldal tartalmábólMaga az alkalmazás eldöntheti, hogy a felület fő színe a tartalomból származzon, így élénk esztétikát biztosít, de összhangban van a termékkel.
- Egy manuálisan kiválasztott színbőlA márka vagy a felhasználó kiválaszt egy adott színt, és a rendszer ebből építi fel a teljes palettát anélkül, hogy a háttértől kellene függenie.
Minden esetben az a cél, hogy az egyetlen bemeneti szín a következővé váljon: teljes, könnyen hozzáférhető és egységes színsémakerüljük az olvasást akadályozó vagy a vizuális egység érzetét megbontó kombinációkat.
Irányítás márkák, tervezők és fejlesztők számára
Logikus kérdés merül fel bárki számára, aki digitális terméktervezéssel foglalkozik, hogy vajon ez a dinamikus rendszer "felülírja-e" a márkadizájnokat. Végül is órákat töltesz a tervezési rendszered finomhangolásával, hogy aztán később... Az Android a felhasználó háttérképe alapján változtatja a színeket.
A válasz az, hogy a Material You ésszerű egyensúlyt kínál: tervezőként vagy fejlesztőként Nem veszíted el az irányítást, mert eldöntheted, milyen mértékben szeretnéd alkalmazni a dinamikus színeket.A rendszert rugalmasra tervezték, nem írja felül az egyes termékek identitását.
Egyedi témák és márkaépítési megoldások
Az Anyagtervezés 3 magában foglalja a következő ötletet: egyedi vagy márkás sémákEzek a színek nem a felhasználó háttérképéből származnak, hanem az alkalmazás által meghatározott színekből. Olyan eszközök használatával, mint a Anyagtéma-készítő A Figmában megadhatod a márka színeit (elsődleges, másodlagos, harmadlagos, semleges), és hagyhatod, hogy a rendszer egy teljes, az M3-hoz igazított sémát generáljon.
Ezek az egyéni témák konfigurálják a szükséges színes zsetonok és engedélyezze az alkalmazásának a következőket:
- Összhangban kell lennie a Material You ökoszisztéma többi részével.
- Tartsa fenn a megfelelő akadálymentesítést világos és sötét módban is.
- A dinamikus rendszerszínekkel lehetővé teheti a jövőbeni kombinációkat, ha úgy dönt.
Ön is Kombinálja a márka színeit dinamikus színekkelAz alapséma örökölheti a felhasználó testreszabásának egy részét, míg a kibővített színek (például nagyon specifikus szemantikai állapotokhoz vagy márkakiemeléshez) statikusak maradnak.
Tervezési zsetonok és színszerepek
A Material You határozottan támogatja a következők használatát: tervezési zsetonokVagyis olyan szemantikai nevek, amelyek a közvetlen értékeket, például a hexadecimális kódokat helyettesítik. A "#6200EE" önmagában történő használata helyett tokeneket használnak, például színElsődleges, onSurface, elsődleges tárolóStb
Ezek a tokenek kapcsolódnak a dinamikus tónuspaletták (system_accent1_600, system_neutral1_10 stb.), hogy az alkalmazás frissíthesse a megjelenését anélkül, hogy az összes kódot át kellene írnia. A Design Kit és a Figma bővítmény generálja ezeket a tokeneket, és leképezi őket a tervezési fájlokon belüli stílusokhoz, így sokkal egyszerűbbé téve a fejlesztésbe való átvitelt.
Vizuális hierarchia és akadálymentesítés
Amikor színszerepköröket alkalmaz a felhasználói felületen, továbbra is kulcsfontosságú a tiszteletben tartása fontossági hierarchiaA legtelítettebb színeket a cselekvésre ösztönzéseknek és a kiemelt elemeknek kell fenntartani; a semleges és lágyabb variációkat a háttereknek és a másodlagos tartalomnak kell fenntartani.
A Material You garantálja, hogy az Ön által megadott színek alapján a rendszer variációkat generál a következőkkel: megfelelő kontrasztok a szöveg és az ikonok közöttmind világos, mind sötét módban. Ennek ellenére ajánlott a kombinációkat valós körülmények között tesztelni, különösen akkor, ha nagyon élénk másodlagos vagy harmadlagos színeket vezet be, amelyek versenyezhetnek az elsődleges színnel.
Dinamikus színek az Android ökoszisztémában
Kezdetben a dinamikus színrendszer nem volt része az AOSP-nek, ami kétségeket vetett fel azzal kapcsolatban, hogy kizárólag a Pixel telefonokra lesz-e elérhető. Idővel a Google... palettakivonási és generálási logika integrálása Android 12 és 13 rendszerbenjavításokat és dokumentációt kínálva, hogy segítsen az OEM-eknek következetesen bevezetni azt.
Márkák, mint Samsung, OnePlus, Oppo, Vivo, Realme vagy Xiaomi Már bejelentették a dinamikus színek támogatását az Android 12+ alapú rétegeikben, így az olyan alkalmazások, mint a Gmail, a megjelenésüket úgy módosíthatják, hogy ugyanazt a palettát tiszteletben tartják a különböző eszközökön.
Gyártókra (OEM) vonatkozó követelmények
Ajánlani a igazodás a Material You-hozAz Android-partnereknek a következőket kell tenniük:
- Használja a ugyanaz a színkivonási logika, mint az AOSP-nél hogy visszanyerje a tapéta eredeti színét.
- Bontsa ki ezt a színt a 65 szín API hivatalos (akcentus és semleges paletták, mindegyik 13 árnyalattal).
- Alkalmazd ezeket a palettákat mindkettőben a rendszer felhasználói felülete, mint a saját alkalmazásaibanhogy a külső fejlesztők következetesen viselkedjenek.
- Hogy élményt nyújtsunk téma- és háttérképválasztó ahol a felhasználó megtekintheti és kiválaszthatja a színkombinációkat a háttér vagy az alapszínek alapján.
Továbbá, ha egy eszköz nem támogatja a háttérszín kinyerését (műszaki korlátok vagy tervezési döntések miatt), alternatív lehetőség választható. statikus paletta, alapértelmezett anyagtípus, megőrizve egy bizonyos vizuális koherenciát, még akkor is, ha a dinamikus rész elvész.
Háttérképek, ThemePicker és statikus paletták
A szabványos dinamikus színfolyam a következőképpen kezdődik: háttérkép- vagy témaválasztóAmikor a felhasználó megváltoztatja a hátteret vagy kiválaszt egy színkészletet, a rendszer:
- Számítsd ki a domináns háttérszíneket (vagy olvasd le a kiválasztott alapszínt).
- Szűrje ezeket a színeket a kromatikusságuk és egyéb szabályok alapján, hogy érvényes színt válasszon.
- Generálja az öt tónuspalettát és töltse ki a 65 szín API-t.
- Frissítsd a rendszer felhasználói felületét, és tedd elérhetővé ezeket a színeket az alkalmazások számára.
Fix alapszínek esetén a gyártók meghatározhatják Színtömbökkel és leíró nevekkel ellátott csonk APK (például Kék, Piros, Sárga, Zöld), amelyek előre definiált opcióként jelennek meg a választóban. Minden bejegyzés elsődleges és másodlagos értékeket tartalmaz, amelyeket a rendszer kiindulópontként használ a tónuspalettákhoz.
Eszközök tervezőknek: Anyagtéma-készítő és tervezőkészletek
A Material You dizájnvilágban való alkalmazásának megkönnyítése érdekében a Google számos speciális eszközt hozott létre, amelyek elsősorban a Figmára összpontosítanak. A legfontosabb a Anyagtéma-készítő bővítményamely lehetővé teszi dinamikus és márkás színsémák létrehozását anélkül, hogy a színek matematikájával kellene bajlódnia.
Con ez az eszköz tudsz:
- Töltés a referencia téma vagy hozz létre egyet a semmiből.
- Kulcsszínek meghatározása (elsődleges, másodlagos, harmadlagos, semleges), és nézd meg, hogyan terjednek el a felhasználói felületen.
- Alkalmazd a létrehozott sémákat a következőre: Anyagtervezési készlet összetevői a Figma fájlban található.
- Bővítse ki a rendszert a következővel: további egyedi színek (Custom0, Custom1…) adott márkaépítési vagy szemantikai igényekhez.
A bővítmény automatikusan generál Figma stílusokat, amelyek színtokenekként működnek, és ezek a következők: link a modellekhezIly módon a téma megváltoztatása (például semlegesről márkásra) gyakorlatilag egy gombnyomásból és az új stíluskészlet hozzárendeléséből áll.
Mobilon túl: widgetek, ikonok és indítók
A Material You hatása nem áll meg a rendszeralkalmazásoknál. Android 12 widgetek Frissítették őket, hogy figyelembe vegyék az új API-kat a méret, a lekerekített sarkok és a szín tekintetében, és a fejlesztőket arra ösztönzik, hogy frissítsék saját widgetjeiket, hogy kihasználhassák ezeket a képességeket.
Másrészt az indítóprogramok és ikoncsomagok közössége is felfigyelt erre. Léteznek dinamikus ikoncsomagok, amelyek... A színük a háttérképtől vagy a rendszer akcentusától függően változik.és mind a világos, mind a sötét módhoz alkalmazkodnak. Ahhoz, hogy működjenek, kompatibilis indítóprogramokat kell használnia (Nova Launcher, Kerti szék, Hyperion, Niagara, Smart Launcher stb.), és a háttér vagy a téma megváltoztatása után alkalmazza újra az ikoncsomagot a paletta újragenerálásához.
A Material You az Androidot egy olyan platformmá alakította, ahol a szín és a forma intelligensen alkalmazkodik minden felhasználóhoz anélkül, hogy a tervezőket, márkákat vagy fejlesztőket hátrahagyná. A rendszernek köszönhetően... dinamikus színek, tónuspaletták és dizájnjellegzetességekLehetséges egy személyre szabott, mégis koherens, könnyen hozzáférhető és technikailag kiszámítható felületet létrehozni. Akár Pixelt, akár Samsungot, akár Xiaomit használsz, az a lényeg, hogy a telefonod tükrözze a személyiségedet, miközben továbbra is úgy működik és néz ki, ahogyan azt az Android ökoszisztémában élő emberek milliói elvárják. Oszd meg az információkat, hogy több felhasználó is megismerhesse a témát.