Android har været dedikeret til Material Design i årevis, men med Material You har det taget et betydeligt spring i retning af dybdegående tilpasning baseret på dine baggrundeDet handler ikke længere bare om at ændre et par ikoner eller skifte til et mørkt tema, men om at hele systemet intelligent tilpasser sig de farver, du vælger, samtidig med at tilgængelighed og et ensartet design opretholdes.
Denne nye designfilosofi, der har været til stede siden Android 12 og udvidet i Android 13, kombinerer den dynamiske farver, flydende bevægelse og opdaterede widgetsResultatet er en visuel oplevelse, der føles mere menneskelig og følelsesladet, men som samtidig respekterer arbejdet udført af designere, udviklere og brands, der har brug for at holde deres visuelle identitet under kontrol.
Hvad er Material You eller Material Design 3?
Material You, også kendt som Materialesign 3Det er den seneste udvikling af Googles designsystem til UX/UI-grænseflader. Det er ikke bare en visuel stil, men et sæt af vejledninger, komponenter og algoritmer der gør det muligt at bygge ensartede grænseflader på mobiltelefoner, tablets, ure og andre Android-enheder.
I modsætning til tidligere versioner af Material Design fokuserer Material You på personlig udtryk og tilpasning til brugerenIdeen er, at to personer med den samme mobiltelefon kan have en meget forskellig brugerflade, men at begge forbliver brugbare, tilgængelige og i overensstemmelse med Android-økosystemet.
Æstetisk set vælger denne iteration en tilgang mere minimalistisk og blødFærre skarpe skygger, færre forskellige typografiske stilarter, mere afrundede former og et renere udseende. Alt dette kombineres med et langt mere sofistikeret farvesystem, der er i stand til at generere hele paletter fra en enkelt kildefarve.
Det interessante er, at Material You ikke er begrænset til Google PixelDynamisk farvelogik og designretningslinjer er udvidet til mange tilpasningslag, f.eks. One UI, OxygenOS, ColorOS, OriginOS eller MIUI, med specifik support fra Google for at sikre en ensartet oplevelse på tværs af de fleste enheder, der kører Android 12 og nyere.
Følelser, individualitet og paradigmeskift
Material You udspringer også af en refleksion over, hvordan vi forstår digitalt design. Google argumenterer for, at brugerfladen ikke kun skal reagere på funktion, men også på... brugerens følelse, deres følelseDerfor ordspillet i “Materielle dig”: enheden skal være lige så unik som dig, ikke en identisk klon af millioner af mennesker.
I årevis har både iOS og Android været relativt rigide med hensyn til ægte brugergrænsefladetilpasningUd over at ændre baggrunden, tilføje en widget eller installere en launcher var mulighederne begrænsede. Med Android 12 og Material You genindvinder Google delvist ånden i sit gamle slogan, "Vær sammen, ikke ens", ved at fokusere på et fælles økosystem, men med grænseflader skræddersyet til hver bruger.
Denne filosofi står i kontrast til Apples strategi, som er mere fokuseret på en lukket og stærkt kontrolleret økosystem hvor den visuelle oplevelse varierer lidt mellem brugerne. Google giver derimod mulighed for langt finere tilpasning af udseendet uden at gå på kompromis med, at appsene fungerer lige godt på forskellige mærker og modeller.
Vigtigste nye funktioner i Material You
Material You introducerer flere innovationslinjer, der flettes sammen for at skabe den komplette oplevelse: dybdegående tilpasning, dynamiske farver, tilpasningsevne og meningsfuld bevægelseAlt dette understøttes af et robust teknisk system, der kan bruges af både producenter, designere og udviklere.
Dyb grænsefladetilpasning
En af de største ændringer er, at brugeren kan justere systemets udseende i en langt finere grad. Android er i stand til Omarranger farver, overflader, knapper og kontroller så de matcher den palet, der er genereret fra tapetet, eller en manuelt valgt farve.
Denne tilpasning omfatter statuslinjer, notifikationer, menuer, hurtigpanel, indstillinger, Googles egne apps og gradvist tredjepartsapps, der integrerer Material Design 3. Ideen er, at brugeren skal opfatte en ensartet visuel oplevelse fra start til slut, uden pludselige farveskift mellem systemet og applikationerne.
Tilpasningsevne til skærme og formfaktorer
Material You forstærker også tilpasningsevne af grænseflader til forskellige skærmformaterDette inkluderer traditionelle mobiltelefoner, tablets, smartwatches og foldbare enheder. Den samme logik med hensyn til farve, typografi og afstand justeres for at sikre, at brugerfladen er behagelig at bruge i enhver sammenhæng.
I tilfælde af foldbare telefoner har Google defineret specifikke retningslinjer for aspekter som f.eks. elementernes tilgængelighed, det centrale hængsel og de mest komplekse layoutsFor eksempel anses de øverste 25% af den åbne skærm for at være vanskelige at nå, så det anbefales ikke at placere primære handlinger der, og vigtige oplysninger bør ikke placeres direkte over hængslet.
Bevægelse og taktil feedback
Bevægelsen i Material You er ikke kun til pynt. Android 12 introducerer en effekt af Overdreven forskydning baseret på elastisk strækningNår brugeren forsøger at rulle forbi slutningen af en liste, strækker overfladen sig jævnt i stedet for at vise den typiske gammeldags bounce-lysstyrke.
Derudover er ripple-animationerne på tryk blevet redesignet for at tilbyde en mere subtil og flydende haptisk feedbackGoogle opfordrer producenter til at holde disse adfærdsmønstre så tæt på standarden som muligt, så apps opfører sig forudsigeligt uanset tilpasningslaget.
Dynamiske farver: hjertet i Material You
Det centrale element i denne nye fase er dynamisk farvesystem, internt kendt som MonetFra og med Android 12 kan systemet udtrække en dominerende farve fra din tapet eller en defineret basisfarve og genererer automatisk en komplet palet, der anvendes på systemet og kompatible apps.
Dette system er afhængig af en ret sofistikeret teknisk tilgang, der kombinerer farverum CAM16, tonepaletter og farverollerMålet er at opretholde god læsbarhed, tilstrækkelig kontrast og en poleret æstetik i både lys og mørk tilstand, selvom brugeren vælger noget komplekse baggrunde.
Sådan fungerer paletgenerering i Material You
El skabelsesproces Brugen af dynamiske farver kan opsummeres i flere veldefinerede trin, selvom der ligger en masse farvematematik bagved:
- Ekstraktion af en frøfarve baseret på baggrundsbilledet, appindholdet eller en fast farve valgt af brugeren eller brandet.
- Konvertering og analyse i CAM16-området for at opnå tone, kroma og andre perceptuelle parametre.
- Generering af fem nøgletonepaletter (accent1, accent2, accent3, neutral1 og neutral2) fra kildefarven og justeringer i kroma og tone.
- Skab 13 nuancer pr. palet, med forskellige niveauer af luminans (0, 10, 50, 100, 200, 300… op til 1000), hvilket resulterer i i alt 65 dynamiske farver.
- Kortlægger disse toner til UI-farveroller, såsom primær, sekundær, overflade, baggrund, tekst, beholdere osv.
Hver af de fem paletter har en specifik opførsel: for eksempel, accent1 er normalt brandets hovedfarve eller brugerens tema, accent2 og accent3 fungerer som komplementære accenter, og neutral1/neutral2 er reserveret til baggrunde, overflader og mindre iøjnefaldende elementer.
Temastilarter i Android 13
Med Android 13 tager systemet et skridt videre og giver dig mulighed for at vælge mellem seks forskellige temastilesom varierer, hvordan den oprindelige farve fortolkes for at generere den endelige palet:
- TONAL_SPOT: er standardtemaet for Material You, med en medium vibration og en afbalanceret behandling af accenter.
- VIBRANT: vælg en mere intens palet, men med glatte overgange mellem farverne, ideel til mere iøjnefaldende grænseflader.
- UDTRYKKENDEgenererer flere uventede og unikke accentfarvekombinationer med høj kromatisk intensitet.
- SPRAYReducerer mætningen til et minimum og søger en næsten monokromatisk og meget blød effekt.
- RAINBOWBlander farverige accenter med neutrale overflader for at opnå et mere diskret resultat. Anbefales til statiske temaer frem for uddrag fra baggrunde.
- FRUGTSALATKombinerer tofarvede farver for at give mere udtryksfuldhed, også mere egnet til faste paletter end til dynamiske baggrunde.
Systemet tager en JSON gemt i Indstillinger.Sikker.TEMA_TILPASNING_OVERLAY_PAKKER hvor kildefarven er angivet (for eksempel "746BC1") og eventuelt temastilen (for eksempel "EXPRESSIVE"). Med det genererer Android automatisk de 65 farvevariationer, som appsene derefter vil bruge.
Hvor kommer grundfarverne fra?
Material You overvejer tre hovedveje til at opnå original farve som vil tjene som udgangspunkt for algoritmen:
- Fra brugerens baggrundsbilledeDette er det mest almindelige tilfælde. Systemet analyserer billedet ved hjælp af farvekvantisering, udtrækker flere kandidater og vælger en, der opfylder minimumskriterierne for kroma (f.eks. en CAM16-værdi ≥ 5) for at sikre, at resultatet ikke er for mat.
- Fra indholdet af appen eller hjemmesidenApplikationen kan selv bestemme, at brugerfladen skal være baseret på indholdet, og dermed bevare en levende æstetik, men i overensstemmelse med produktet.
- Fra en manuelt valgt farveMærket eller brugeren vælger en bestemt farve, og systemet opbygger hele paletten ud fra den, uden at være afhængig af baggrunden.
I alle tilfælde er målet, at den enkelte inputfarve bliver et komplet, tilgængeligt og ensartet farveskemaundgå kombinationer, der hindrer læsning eller bryder følelsen af visuel enhed.
Kontrol for brands, designere og udviklere
Et logisk spørgsmål for alle, der arbejder med digitalt produktdesign, er, om dette dynamiske system "tilsidesætter" branddesign. Du bruger trods alt timevis på at finjustere dit designsystem, kun for at have det senere. Android ændrer farver baseret på brugerens baggrund.
Svaret er, at Material You tilbyder en fornuftig balance: som designer eller udvikler Du mister ikke kontrollen, fordi du kan bestemme, i hvilken grad du vil anvende de dynamiske farver.Systemet er designet til at være fleksibelt og ikke til at tilsidesætte identiteten af hvert produkt.
Brugerdefinerede temaer og brandordninger
Material Design 3 inkorporerer ideen om brugerdefinerede eller mærkevarede ordningerDisse farver er ikke afledt af brugerens baggrundsbillede, men fra farver defineret af selve applikationen. Brug af værktøjer som f.eks. Material Theme Builder I Figma kan du indtaste dine brandfarver (primære, sekundære, tertiære, neutrale) og lade systemet generere et komplet skema, der er justeret med M3.
Disse brugerdefinerede temaer konfigurerer nødvendige farvede tokens og tillad din app at:
- Det skal se ud som om det stemmer overens med resten af Material You-økosystemet.
- Oprethold korrekt tilgængelighed i både lys og mørk tilstand.
- Gør det lettere at kombinere dynamiske systemfarver i fremtiden, hvis du ønsker det.
Det kan du også Kombinér brandfarver med dynamiske farverKerneskemaet kan arve nogle af brugerens tilpasningsmuligheder, mens et udvidet sæt farver (f.eks. til meget specifikke semantiske tilstande eller brandaccenter) forbliver statisk.
Designtokens og farveroller
Material You opfordrer kraftigt til brug af designtokensDet vil sige semantiske navne, der erstatter direkte værdier som hexadecimale koder. I stedet for at bruge "#6200EE" alene, bruges tokens, såsom farvePrimær, på overfladen, primærbeholderOsv
Disse tokens forbinder sig med dynamiske tonepaletter (system_accent1_600, system_neutral1_10 osv.) så appen kan opdatere sit udseende uden at omskrive al koden. Design Kit og Figma-pluginet genererer disse tokens og knytter dem til stilarter i designfilerne, hvilket gør overførslen til udvikling meget mere ligetil.
Visuelt hierarki og tilgængelighed
Når du anvender farveroller på din brugergrænseflade, er det fortsat vigtigt at respektere hierarki af vigtighedDe mest mættede farver bør reserveres til opfordringer til handling og prioriterede elementer; neutrale og blødere variationer er reserveret til baggrunde og sekundært indhold.
Material You garanterer, at systemet, baseret på de farver, du angiver, vil generere variationer med passende kontraster for tekst og ikoneri både lys og mørk tilstand. Alligevel anbefales det at teste kombinationerne i virkelige kontekster, især hvis du introducerer meget levende sekundære eller tertiære farver, der kan konkurrere med primærfarven.
Dynamisk farve i Android-økosystemet
I starten var det dynamiske farvesystem ikke en del af AOSP, hvilket rejste tvivl om, hvorvidt det ville være eksklusivt for Pixel-telefoner. Med tiden har Google været Integrering af paletudtrækning og genereringslogik i Android 12 og 13tilbyder programrettelser og dokumentation for at hjælpe OEM'er med at implementere det konsekvent.
Mærker som Samsung, OnePlus, Oppo, Vivo, Realme eller Xiaomi De har allerede annonceret understøttelse af dynamiske farver i deres Android 12+-baserede lag, så apps som Gmail kan justere deres udseende, samtidig med at de respekterer den samme palet på forskellige enheder.
Krav til producenter (OEM)
At tilbyde en tilpasning til Material YouAndroid-partnere skal:
- Brug samme farveudtrækningslogik som AOSP for at opnå tapetets originale farve.
- Udvid den farve i 65 API'er med farver officiel (accent- og neutrale paletter med 13 nuancer hver).
- Anvend disse paletter både i systembrugergrænsefladen som i dens egne appsså tredjepartsudviklere har ensartet adfærd.
- At give en oplevelse af tema- og baggrundsvælger hvor brugeren kan se og vælge farvekombinationer baseret på baggrund eller grundfarver.
Derudover kan en alternativ mulighed vælges, hvis en enhed ikke understøtter udtrækning af baggrundsfarve (på grund af tekniske begrænsninger eller designbeslutninger). statisk palet, standard materialetype, der opretholder en vis visuel sammenhæng, selvom den dynamiske del går tabt.
Baggrunde, ThemePicker og statiske paletter
Standard dynamisk farveflow starter fra baggrundsbillede eller temavælgerNår brugeren ændrer baggrunden eller vælger et sæt farver, gør systemet følgende:
- Beregn de dominerende baggrundsfarver (eller aflæs den valgte basisfarve).
- Filtrer disse farver baseret på deres kroma og andre regler for at vælge en gyldig.
- Generer de fem tonepaletter og udfyld de 65 farve-API'er.
- Opdater systembrugergrænsefladen, og vis disse farver til apps.
For faste grundfarver kan producenter definere Stub APK med farverige arrays og beskrivende navne (for eksempel Blå, Rød, Gul, Grøn), som vises i vælgeren som foruddefinerede indstillinger. Hver post indeholder primære og sekundære værdier, som systemet bruger som udgangspunkt for tonepaletterne.
Værktøjer til designere: Material Theme Builder og Design Kits
For at fremme implementeringen af Material You i designverdenen har Google skabt adskillige specifikke værktøjer, primært fokuseret på Figma. Det vigtigste er Material Theme Builder-pluginhvilket giver dig mulighed for at generere dynamiske og brandede farveskemaer uden at skulle kæmpe med farvematematikken.
med dette værktøj du kan:
- indlæse a referenceemne eller lav en fra bunden.
- Definer nøglefarver (primær, sekundær, tertiær, neutral) og se, hvordan de spreder sig i hele brugergrænsefladen.
- Anvend de genererede skemaer på Komponenter i Material Design-sættet inkluderet i Figma-filen.
- Udvid ordningen med yderligere brugerdefinerede farver (Brugerdefineret0, Brugerdefineret1…) til specifikke branding- eller semantiske behov.
Plugin'et genererer automatisk Figma-stilarter, der fungerer som farvetokens, og disse er link til modellernePå denne måde består ændringen af temaet (for eksempel fra et neutralt til et brandet tema) praktisk talt af at trykke på en knap og tildele det nye sæt af stilarter.
Ud over mobil: widgets, ikoner og launchers
Effekten af Material You stopper ikke ved systemapps. Android 12-widgets De er blevet opdateret for at respektere de nye API'er for størrelse, afrundede hjørner og farve, og udviklere opfordres til at opdatere deres egne widgets for at drage fordel af disse funktioner.
På den anden side har launcher- og ikonpakkefællesskabet også bemærket det. Der findes dynamiske ikonpakker, der De skifter farve afhængigt af tapetet eller systemaccenten.og de tilpasser sig både lys og mørk tilstand. For at få dem til at virke, skal du bruge kompatible launchers (Nova Launcher, Lawnchair, Hyperion, Niagara, Smart Launcher osv.) og, efter at have ændret baggrund eller tema, skal du genanvende ikonpakken for at regenerere paletten.
Material You har forvandlet Android til en platform, hvor farver og form intelligent tilpasser sig hver bruger, uden at lade designere, brands eller udviklere i stikken. Takket være systemet af dynamiske farver, tonepaletter og designtokensDet er muligt at have en meget personlig, men alligevel sammenhængende, tilgængelig og teknisk forudsigelig brugerflade. Uanset om du bruger en Pixel, en Samsung eller en Xiaomi, er ideen, at din telefon skal afspejle din personlighed, samtidig med at den fungerer og ser ud, som millioner af mennesker i Android-økosystemet forventer. Del informationen, så flere brugere kan lære om emnet.