„Android“ jau daugelį metų yra atsidavusi medžiagų dizainui, tačiau su „Material You“ ji žengė didelį žingsnį link šios srities. gilus pritaikymas pagal jūsų tapetusNebereikia tik pakeisti kelių piktogramų ar perjungti į tamsią temą, bet ir tai, kad visa sistema išmaniai prisitaikytų prie jūsų pasirinktų spalvų, išlaikant prieinamumą ir nuoseklų dizainą.
Ši nauja dizaino filosofija, egzistuojanti nuo "Android" 12 ir išplėsta „Android 13“ versijoje, ji sujungia dinamiškos spalvos, sklandus judėjimas ir atnaujinti valdikliaiRezultatas – vizualinė patirtis, kuri atrodo žmogiškesnė ir emocingesnė, tačiau tuo pat metu gerbia dizainerių, kūrėjų ir prekių ženklų, kuriems reikia kontroliuoti savo vizualinį identitetą, darbą.
Kas yra „Material You“ arba „Material Design 3“?
Materialusis Tu, dar žinomas kaip Medžiagų dizainas 3Tai naujausia „Google“ UX/UI sąsajų dizaino sistemos evoliucija. Tai ne tik vizualinis stilius, bet ir rinkinys... vadovai, komponentai ir algoritmai kurios leidžia kurti nuoseklias sąsajas mobiliuosiuose telefonuose, planšetiniuose kompiuteriuose, laikrodžiuose ir kituose „Android“ įrenginiuose.
Skirtingai nuo ankstesnių „Material Design“ versijų, „Material You“ daugiausia dėmesio skiria asmeninė išraiška ir prisitaikymas prie vartotojoIdėja yra ta, kad du žmonės, turintys tą patį mobilųjį telefoną, gali turėti labai skirtingą sąsają, tačiau abu išlikti tinkami naudoti, prieinami ir suderinti su „Android“ ekosistema.
Estetiškai ši iteracija pasirenka požiūrį minimalistinis ir švelnesnisMažiau atšiaurių šešėlių, mažiau skirtingų tipografinių stilių, labiau apvalintos formos ir švaresnė išvaizda. Visa tai derinama su daug sudėtingesne spalvų sistema, galinčia generuoti ištisas paletes iš vienos šaltinio spalvos.
Įdomu tai, kad „Material You“ neapsiriboja "Google" PixelDinaminės spalvų logikos ir dizaino gairės buvo išplėstos iki daugelio pritaikymo lygių, tokių kaip Viena vartotojo sąsaja, OxygenOS, ColorOS, OriginOS arba MIUI, su specialiu „Google“ palaikymu, siekiant užtikrinti nuoseklią patirtį daugumoje įrenginių, kuriuose veikia „Android 12“ ir naujesnės versijos.
Emocijos, individualumas ir paradigmos pokytis
„Material You“ taip pat kyla iš apmąstymų apie tai, kaip mes suprantame skaitmeninį dizainą. „Google“ teigia, kad sąsaja turėtų reaguoti ne tik į funkciją, bet ir į... vartotojo jausmai, jo emocijosTodėl ir žodžių žaismas „Material You“ filme: įrenginys turėtų būti toks pat unikalus kaip ir jūs, o ne identiškas milijonų žmonių klonas.
Jau daugelį metų tiek „iOS“, tiek „Android“ sistemos yra gana nelanksčios. tikras vartotojo sąsajos pritaikymasBe fono keitimo, valdiklio pridėjimo ar paleidimo priemonės įdiegimo, galimybės buvo ribotos. Su „Android 12“ ir „Material You“ „Google“ iš dalies atkuria savo senojo šūkio „Būkite kartu, o ne vienodi“ dvasią, sutelkdama dėmesį į bendrą ekosistemą, tačiau su kiekvienam vartotojui pritaikytomis sąsajomis.
Ši filosofija prieštarauja „Apple“ strategijai, kuri labiau orientuota į... uždara ir griežtai kontroliuojama ekosistema kur vizualinė patirtis tarp naudotojų mažai skiriasi. Kita vertus, „Google“ leidžia daug tiksliau pritaikyti išvaizdą, nepakenkiant programėlių vienodam veikimui skirtingų prekių ženklų ir modelių įrenginiuose.
Pagrindinės naujos „Material You“ funkcijos
„Material You“ pristato kelias inovacijų linijas, kurios susipina, kad sukurtų visapusišką patirtį: gilus pritaikymas, dinamiškos spalvos, pritaikomumas ir prasmingas judėjimasVisa tai palaiko tvirta techninė sistema, kuria gali naudotis tiek gamintojai, tiek dizaineriai, tiek kūrėjai.
Gilus sąsajos pritaikymas
Vienas didžiausių pakeitimų yra tai, kad vartotojas gali daug tiksliau koreguoti sistemos išvaizdą. „Android“ gali pertvarkyti spalvas, paviršius, mygtukus ir valdiklius kad jie atitiktų iš fono paveikslėlio sugeneruotą paletę arba rankiniu būdu pasirinktą spalvą.
Šis pritaikymas apima būsenos juostas, pranešimus, meniu, greitąjį skydelį, nustatymus, „Google“ programas ir palaipsniui trečiųjų šalių programas, kurios integruoja „Material Design 3“. Idėja yra ta, kad vartotojas suvoktų nuosekli vizualinė patirtis nuo pradžios iki galo, be staigių spalvų šuolių tarp sistemos ir programų.
Prisitaikymas prie ekranų ir formos veiksnių
Medžiaga Jūs taip pat sustiprina sąsajų pritaikomumas skirtingiems ekrano formatamsTai apima tradicinius mobiliuosius telefonus, planšetinius kompiuterius, išmaniuosius laikrodžius ir sulankstomus įrenginius. Ta pati spalvų, tipografijos ir tarpų logika pritaikyta siekiant užtikrinti, kad sąsaja būtų patogi naudoti kiekviename kontekste.
Kalbant apie sulankstomus telefonus, „Google“ nustatė konkrečias gaires tokiais aspektais kaip elementų pasiekiamumas, centrinis vyris ir sudėtingiausi išdėstymaiPavyzdžiui, viršutiniai 25 % atviro ekrano laikomi sunkiai pasiekiamais, todėl rekomenduojama ten nedėti pagrindinių veiksmų, o svarbi informacija neturėtų būti dedama tiesiai virš vyrio.
Judėjimas ir lytėjimo grįžtamasis ryšys
Judėjimas žaidime „Material You“ nėra skirtas tik pasirodymui. „Android 12“ pristato efektą Per didelis poslinkis dėl elastingo tempimoKai vartotojas bando slinkti per sąrašo pabaigą, paviršius sklandžiai išsitempia, o ne rodo įprastą senamadišką atspindžio ryškumą.
Be to, buvo pertvarkytos liečiamojo animacijos su raibuliavimu, kad būtų galima subtilesnis ir sklandesnis haptinis grįžtamasis ryšys„Google“ ragina gamintojus išlaikyti šį elgesį kuo artimesnį standartui, kad programos veiktų nuspėjamai, nepriklausomai nuo pritaikymo lygio.
Dinamiškos spalvos: „Material You“ esmė
Svarbiausias šio naujo etapo elementas yra dinaminė spalvų sistema, viduje žinoma kaip MonetPradedant nuo „Android 12“, sistema gali išgauti dominuojančią spalvą iš jūsų... tapetai arba apibrėžtą bazinę spalvą ir automatiškai sugeneruoti visą paletę, kuri taikoma sistemai ir suderinamoms programoms.
Ši sistema remiasi gana sudėtingu techniniu metodu, kuris sujungia spalvų erdvę CAM16, toninės paletės ir spalvų vaidmenysTikslas – išlaikyti gerą skaitomumą, pakankamą kontrastą ir išbaigtą estetiką tiek šviesiu, tiek tamsiu režimu, net jei vartotojas pasirenka kiek sudėtingus tapetus.
Kaip paletės generavimas veikia programoje „Material You“
El kūrimo procesas Dinaminių spalvų naudojimą galima apibendrinti keliais aiškiai apibrėžtais žingsniais, nors po jais slypi daug spalvų matematikos:
- Sėklos spalvos išgavimas remiantis fono paveikslėliu, programėlės turiniu arba fiksuota spalva, kurią pasirinko naudotojas ar prekės ženklas.
- Konversija ir analizė CAM16 erdvėje norint gauti toną, chromatinę spalvą ir kitus suvokimo parametrus.
- Penkių pagrindinių toninių palečių generavimas (akcentas1, akcentas2, akcentas3, neutralus1 ir neutralus2) iš šaltinio spalvos ir chromatinės bei tono korekcijos.
- 13 atspalvių sukūrimas vienoje paletėje, su skirtingais šviesumo lygiais (0, 10, 50, 100, 200, 300… iki 1000), todėl iš viso gaunamos 65 dinaminės spalvos.
- Šių tonų susiejimas su vartotojo sąsajos spalvų vaidmenimis, pvz., pirminis, antrinis, paviršius, fonas, tekstas, konteineriai ir kt.
Kiekviena iš penkių palečių turi specifinį elgesį: pavyzdžiui, „accent1“ paprastai yra pagrindinė prekės ženklo arba vartotojo temos spalva, „akcentas2“ ir „akcentas3“ yra vienas kitą papildantys akcentai, o „neutralus1“/„neutralus2“ skirti fonams, paviršiams ir mažiau pastebimiems elementams.
Temų stiliai sistemoje „Android 13“
Su „Android 13“ sistema žengia dar vieną žingsnį ir leidžia jums pasirinkti tarp šeši skirtingi temų stiliaikurie skiriasi tuo, kaip ta originali spalva interpretuojama, kad būtų sukurta galutinė paletė:
- TONAL_SPOT: yra numatytoji „Material You“ tema, pasižyminti vidutine vibracija ir subalansuotu akcentų išdėstymu.
- VIBRANTASrinkitės intensyvesnę paletę, bet su sklandžiais perėjimais tarp spalvų – idealiai tinka akį traukiančioms sąsajoms.
- IŠRAIŠKINGAS: sukuria netikėtesnius ir unikalius akcento spalvų derinius, pasižyminčius dideliu chromatiniu intensyvumu.
- PURŠKITE: sumažina sodrumą iki minimumo, siekiant beveik monochromatinio ir labai švelnaus efekto.
- VAIVORYKŠTĖ: spalvingi akcentai derinami su neutraliais paviršiais, siekiant diskretiškesnio rezultato, rekomenduojama statinėms schemoms, o ne ištraukimui iš fono.
- VAISIŲ SALOTOS: sujungia dviejų atspalvių spalvas, kad suteiktų daugiau išraiškingumo, taip pat labiau tinka fiksuotoms paletėms nei dinamiškam fonui.
Sistema paima JSON failą, saugomą Nustatymai.Saugūs.TEMOS_CUSTOMIZACIJA_OVERLAY_PAKETAI kur nurodoma šaltinio spalva (pvz., „746BC1“) ir, pasirinktinai, temos stilius (pvz., „IŠRAIŠKINGAS“). Tai padarius, „Android“ automatiškai sugeneruoja 65 spalvų variantus, kuriuos programos naudos.
Iš kur atsiranda pagrindinės spalvos?
Medžiaga, kurią jūs svarstote, yra trys pagrindiniai būdai, kaip gauti originali spalva kuris bus algoritmo atspirties taškas:
- Iš naudotojo ekrano fonoTai yra dažniausias atvejis. Sistema analizuoja vaizdą naudodama spalvų kvantavimą, išskiria kelis kandidatus ir pasirenka tą, kuris atitinka minimalius chromatinės spalvos kriterijus (pavyzdžiui, CAM16 reikšmė ≥ 5), kad rezultatas nebūtų pernelyg blankus.
- Iš programėlės ar svetainės turinioPati programa gali nuspręsti, kad pagrindinė sąsajos spalva būtų gaunama iš jos turinio, taip išlaikant ryškią estetiką, bet suderintą su produktu.
- Iš rankiniu būdu pasirinktos spalvosPrekės ženklas arba vartotojas pasirenka konkrečią spalvą, o sistema iš jos sukuria visą paletę, nereikės priklausyti nuo fono.
Visais atvejais tikslas yra, kad viena įvesties spalva taptų išsami, prieinama ir nuosekli spalvų schemavengiant derinių, kurie trukdo skaityti arba ardo vizualinės vienovės pojūtį.
Prekių ženklų, dizainerių ir kūrėjų valdymas
Logiškas klausimas kiekvienam, dirbančiam skaitmeninių produktų dizaino srityje, yra tai, ar ši dinamiška sistema „nepaiso“ prekės ženklo dizaino. Juk valandų valandas tobulinate savo dizaino sistemą, kad vėliau... „Android“ keičia spalvas pagal vartotojo pasirinktą foną.
Atsakymas yra tas, kad „Material You“ siūlo tinkamą pusiausvyrą: kaip dizaineris ar kūrėjas Neprarandate kontrolės, nes galite nuspręsti, kiek norite naudoti dinamiškas spalvas.Sistema sukurta taip, kad būtų lanksti ir nepaisytų kiekvieno produkto tapatybės.
Individualios temos ir prekės ženklo schemos
„Material Design 3“ apima idėją individualios arba firminės schemosŠios spalvos nėra gaunamos iš vartotojo fono paveikslėlio, o iš pačios programos apibrėžtų spalvų. Naudojant tokius įrankius kaip Medžiagų temų kūrimo priemonė „Figma“ programoje galite įvesti savo prekės ženklo spalvas (pirminę, antrinę, tretinę, neutralias) ir leisti sistemai sugeneruoti visą schemą, suderintą su M3.
Šios pasirinktinės temos konfigūruoja reikamų spalvotų žetonų ir leiskite savo programai:
- Jis turėtų atrodyti darniai su likusia „Material You“ ekosistemos dalimi.
- Palaikykite tinkamą prieinamumą tiek šviesiu, tiek tamsiu režimu.
- Jei norite, palengvinkite būsimą derinimą su dinaminėmis sistemos spalvomis.
Jūs taip pat galite derinkite prekės ženklo spalvas su dinamiškomis spalvomisPagrindinė schema gali paveldėti kai kuriuos vartotojo pritaikymus, o išplėstinis spalvų rinkinys (pvz., labai specifinėms semantinėms būsenoms ar prekės ženklo akcentams) išlieka statiškas.
Dizaino žetonai ir spalvų vaidmenys
„Material You“ primygtinai skatina naudoti dizaino žetonaiTai yra semantiniai pavadinimai, kurie pakeičia tiesiogines reikšmes, pvz., šešioliktainius kodus. Užuot naudoję vien „#6200EE“, naudojami žetonai, pvz. spalvaPagrindinė, onSurface, pirminis konteinerisIr tt
Šie žetonai jungiasi su dinamiškos toninės paletės (system_accent1_600, system_neutral1_10 ir kt.), kad programa galėtų atnaujinti savo išvaizdą neperrašydama viso kodo. „Design Kit“ ir „Figma“ įskiepis generuoja šiuos žetonus ir susieja juos su stiliais dizaino failuose, todėl perkėlimas į kūrimo etapą yra daug paprastesnis.
Vizualinė hierarchija ir prieinamumas
Taikant spalvų vaidmenis vartotojo sąsajoje, svarbu atsižvelgti į svarbos hierarchijaSočiausios spalvos turėtų būti skirtos raginimams veikti ir prioritetiniams elementams; neutralios ir švelnesnės spalvos – fonui ir antriniam turiniui.
„Material You“ garantuoja, kad pagal jūsų pateiktas spalvas sistema sugeneruos variantus su tinkami teksto ir piktogramų kontrastaitiek šviesiu, tiek tamsiu režimu. Nepaisant to, rekomenduojama išbandyti derinius realiose situacijose, ypač jei įvesite labai ryškias antrines arba tretines spalvas, kurios gali konkuruoti su pagrindine spalva.
Dinamiškos spalvos „Android“ ekosistemoje
Iš pradžių dinaminė spalvų sistema nebuvo AOSP dalis, todėl kilo abejonių, ar ji bus išskirtinė „Pixel“ telefonams. Laikui bėgant, „Google“... Paletės išgavimo ir generavimo logikos integravimas „Android 12“ ir „13“ versijosesiūlant pataisymus ir dokumentaciją, padedančius originalios įrangos gamintojams (OEM) jį nuosekliai taikyti.
Patinka tokie prekės ženklai „Samsung“, „OnePlus“, „Oppo“, „Vivo“, „Realme“ arba „Xiaomi“ Jie jau paskelbė apie dinaminių spalvų palaikymą savo „Android 12+“ pagrindu sukurtuose sluoksniuose, kad tokios programos kaip „Gmail“ galėtų koreguoti savo išvaizdą, atsižvelgdamos į tą pačią paletę skirtinguose įrenginiuose.
Reikalavimai gamintojams (OEM)
Siūlyti a suderinamumas su „Material You“„Android“ partneriai privalo:
- Naudokite ta pati spalvų išskyrimo logika kaip ir AOSP norint gauti originalią tapetų spalvą.
- Išplėskite tą spalvą 65 spalvų API oficialios (akcentinės ir neutralios paletės po 13 atspalvių).
- Taikykite šias paletes tiek sistemos vartotojo sąsaja, kaip ir jos pačios programosekad trečiųjų šalių kūrėjai veiktų nuosekliai.
- Suteikti patirties, temos ir fono paveikslėlio parinkiklis kur vartotojas gali peržiūrėti ir pasirinkti spalvų derinius pagal foną arba pagrindines spalvas.
Be to, jei įrenginys nepalaiko fono spalvų išskyrimo (dėl techninių apribojimų ar dizaino sprendimų), galima pasirinkti alternatyvų variantą. statinė paletė, numatytasis medžiagos tipas, išlaikant tam tikrą vizualinį darną, net jei dinaminė dalis prarandama.
Tapetai, temos parinkiklis ir statinės paletės
Standartinis dinaminis spalvų srautas prasideda nuo fono arba temos parinkiklisKai vartotojas pakeičia foną arba pasirenka spalvų rinkinį, sistema:
- Apskaičiuokite dominuojančias fono spalvas (arba perskaitykite pasirinktą bazinę spalvą).
- Filtruokite tas spalvas pagal jų chromatinę vertę ir kitas taisykles, kad pasirinktumėte tinkamą.
- Sugeneruokite penkias tonines paletes ir užpildykite 65 spalvų API.
- Atnaujinkite sistemos vartotojo sąsają ir parodykite tas spalvas, kurias programos galėtų naudoti.
Fiksuotoms pagrindinėms spalvoms gamintojai gali apibrėžti APK failas su spalvų ir aprašomųjų pavadinimų masyvais (pavyzdžiui, mėlyna, raudona, geltona, žalia), kurios parinkiklyje rodomos kaip iš anksto nustatytos parinktys. Kiekviename įraše yra pirminės ir antrinės reikšmės, kurias sistema naudos kaip atspirties tašką toninėms paletėms.
Įrankiai dizaineriams: medžiagų temų kūrimo priemonė ir dizaino rinkiniai
Siekdama palengvinti „Material You“ pritaikymą dizaino pasaulyje, „Google“ sukūrė keletą specialių įrankių, daugiausia skirtų „Figma“. Svarbiausia yra Medžiagų temų kūrimo įskiepiskuri leidžia generuoti dinamiškas ir firmines spalvų schemas, nereikia grumtis su spalvų matematika.
su šis įrankis tu gali:
- apkrova a nuorodų tema arba sukurti jį nuo nulio.
- Apibrėžkite pagrindines spalvas (pirminis, antrinis, tretinis, neutralus) ir pažiūrėkite, kaip jie pasiskirsto visoje vartotojo sąsajoje.
- Taikyti sugeneruotas schemas Medžiagų dizaino rinkinio komponentai įtraukta į „Figma“ failą.
- Išplėskite schemą su papildomos pasirinktinės spalvos (Custom0, Custom1…) konkretiems prekės ženklo kūrimo ar semantiniams poreikiams.
Įskiepis automatiškai generuoja „Figma“ stilius, kurie veikia kaip spalvų žetonai, ir jie yra nuoroda į modeliusTokiu būdu temos keitimas (pavyzdžiui, iš neutralios į firminę) praktiškai reiškia mygtuko paspaudimą ir naujo stilių rinkinio priskyrimą.
Daugiau nei mobilieji įrenginiai: valdikliai, piktogramos ir paleidimo priemonės
„Material You“ poveikis neapsiriboja vien sistemos programėlėmis. „Android 12“ valdikliai Jie buvo atnaujinti, kad atitiktų naujus API dydžiui, užapvalintiems kampams ir spalvai, o kūrėjams rekomenduojama atnaujinti savo valdiklius, kad galėtų pasinaudoti šiomis galimybėmis.
Kita vertus, paleidimo priemonių ir piktogramų paketų bendruomenė taip pat atkreipė dėmesį. Yra dinaminių piktogramų paketų, kurie... Jie keičia spalvą priklausomai nuo tapetų arba sistemos akcento.ir jie prisitaiko prie šviesaus ir tamsaus režimų. Kad jie veiktų, turite naudoti suderinamus paleidimo įrenginius (Naujoji launcher, „Lawnchair“, „Hyperion“, „Niagara“, „Smart Launcher“ ir kt.) ir, pakeitus foną ar temą, iš naujo pritaikykite piktogramų paketą, kad paletė būtų atkurta.
„Material You“ pavertė „Android“ platforma, kurioje spalvos ir forma išmaniai prisitaiko prie kiekvieno naudotojo, nepaliekant nuošalyje dizainerių, prekių ženklų ar kūrėjų. Dėl sistemos dinamiškos spalvos, toninės paletės ir dizaino žetonaiĮmanoma turėti itin suasmenintą, tačiau nuoseklią, prieinamą ir techniškai nuspėjamą sąsają. Nesvarbu, ar naudojate „Pixel“, „Samsung“ ar „Xiaomi“, idėja yra ta, kad jūsų telefonas atspindėtų jūsų asmenybę, tuo pačiu metu funkcionuodamas ir atrodydamas taip, kaip tikisi milijonai žmonių „Android“ ekosistemoje. Pasidalykite informacija, kad daugiau vartotojų galėtų sužinoti apie šią temą.