Jūsu materiāla saskarne un dinamiskās krāsas, pamatojoties uz jūsu fonu

  • Material You ievieš dinamisku krāsu sistēmu, kas ģenerē pilnīgas paletes no avota krāsas, kas iegūta no fona, lietotnes vai zīmola.
  • Algoritms izveido piecas tonālās paletes ar kopumā 65 krāsām, kas tiek piešķirtas saskarnes lomām, nodrošinot pieejamību un konsekvenci gaišajos un tumšajos režīmos.
  • Dizaineri un zīmoli saglabā kontroli, izmantojot pielāgotas tēmas, dizaina žetonus un rīkus, piemēram, Material Theme Builder, lai apvienotu zīmola identitāti un personalizāciju.
  • Atbalsts ir paplašināts uz vairākiem ražotājiem un Android apvalkiem, kā arī ir uzlabota kustība, logrīki un dinamiskās ikonas, lai nodrošinātu vienotu pieredzi.

Jūsu materiāla saskarne un dinamiskās krāsas, pamatojoties uz jūsu fonu

Android jau gadiem ilgi ir veltījusi sevi materiālu dizainam, taču ar Material You tā ir spērusi ievērojamu soli šajā virzienā. dziļa pielāgošana, pamatojoties uz jūsu fona attēliemVairs nav tikai jāmaina dažas ikonas vai jāpāriet uz tumšu tēmu, bet gan jāļauj visai sistēmai inteliģenti pielāgoties jūsu izvēlētajām krāsām, vienlaikus saglabājot pieejamību un vienotu dizainu.

Šī jaunā dizaina filozofija, kas pastāv kopš android 12 un paplašināts operētājsistēmā Android 13, tas apvieno dinamiskas krāsas, plūstoša kustība un pārveidoti logrīkiRezultāts ir vizuāla pieredze, kas šķiet cilvēcīgāka un emocionālāka, taču vienlaikus respektē dizaineru, izstrādātāju un zīmolu darbu, kuriem ir jākontrolē sava vizuālā identitāte.

Kas ir Material You jeb Material Design 3?

Materiālais Tu, pazīstams arī kā Materiālu dizains 3Tā ir jaunākā Google UX/UI saskarņu dizaina sistēmas evolūcija. Tas nav tikai vizuāls stils, bet gan elementu kopums. ceļveži, komponenti un algoritmi kas ļauj veidot konsekventas saskarnes mobilajos tālruņos, planšetdatoros, pulksteņos un citās Android ierīcēs.

Atšķirībā no iepriekšējām Material Design versijām, Material You koncentrējas uz personīgā izpausme un pielāgošanās lietotājamIdeja ir tāda, ka diviem cilvēkiem ar vienu un to pašu mobilo tālruni var būt ļoti atšķirīga saskarne, taču abi paliek lietojami, pieejami un atbilst Android ekosistēmai.

Estētiski šī iterācija izvēlas pieeju minimālistiskāks un maigāksMazāk asu ēnu, mazāk dažādu tipogrāfisko stilu, noapaļotākas formas un tīrāks izskats. Tas viss ir apvienots ar daudz sarežģītāku krāsu sistēmu, kas spēj ģenerēt veselas paletes no vienas avota krāsas.

Interesanti ir tas, ka Material You nav ierobežots ar Google PixelDinamiskās krāsu loģikas un dizaina vadlīnijas ir paplašinātas, iekļaujot daudzus pielāgošanas līmeņus, piemēram, Viena lietotāja saskarne, OxygenOS, ColorOS, OriginOS vai MIUI, ar īpašu Google atbalstu, lai nodrošinātu vienotu pieredzi lielākajā daļā ierīču, kurās darbojas Android 12 un jaunāka versija.

Kā izveidot fona attēlus, izmantojot mākslīgo intelektu operētājsistēmā Android
saistīto rakstu:
Kā ģenerēt savas AI tapetes operētājsistēmai Android

Emocijas, individualitāte un paradigmas maiņa

“Material You” pamatā ir arī pārdomas par to, kā mēs izprotam digitālo dizainu. Google apgalvo, ka saskarnei jāreaģē ne tikai uz funkciju, bet arī uz... lietotāja sajūtas, viņa emocijasLīdz ar to vārdu spēle filmā “Material You”: ierīcei jābūt tikpat unikālai kā jums, nevis identiskam miljonu cilvēku klonam.

Gadiem ilgi gan iOS, gan Android ir bijušas samērā neelastīgas attiecībā uz īsta lietotāja interfeisa pielāgošanaPapildus fona maiņai, logrīka pievienošanai vai palaidēja instalēšanai iespējas bija ierobežotas. Ar Android 12 un Material You Google daļēji atgūst sava vecā saukļa "Esiet kopā, nevis vienādi" garu, koncentrējoties uz kopīgu ekosistēmu, bet ar katram lietotājam pielāgotām saskarnēm.

Šī filozofija ir pretrunā ar Apple stratēģiju, kas vairāk koncentrējas uz slēgta un stingri kontrolēta ekosistēma kur vizuālā pieredze dažādiem lietotājiem maz atšķiras. Savukārt Google ļauj daudz precīzāk pielāgot izskatu, neapdraudot lietotņu vienlīdz labu darbību dažādos zīmolos un modeļos.

Material You galvenās jaunās funkcijas

Material You ievieš vairākas inovāciju līnijas, kas savstarpēji saistītas, lai veidotu pilnīgu pieredzi: dziļa pielāgošanas iespēja, dinamiskas krāsas, pielāgojamība un jēgpilna kustībaTo visu atbalsta stabila tehniskā sistēma, ko var izmantot gan ražotāji, gan dizaineri, gan izstrādātāji.

Dziļa saskarnes pielāgošana

Viena no lielākajām izmaiņām ir tā, ka lietotājs var daudz precīzāk pielāgot sistēmas izskatu. Android spēj pārkārtot krāsas, virsmas, pogas un vadības ierīces lai tie atbilstu no fona attēla ģenerētajai paletei vai manuāli izvēlētai krāsai.

Šī pielāgošana attiecas uz statusa joslām, paziņojumiem, izvēlnēm, ātro paneli, iestatījumiem, Google lietotnēm un pakāpeniski arī uz trešo pušu lietotnēm, kas integrē Material Design 3. Ideja ir tāda, lai lietotājs uztvertu vienota vizuālā pieredze no sākuma līdz beigām, bez pēkšņām krāsu pārlēcienām starp sistēmu un lietojumprogrammām.

Pielāgojamība ekrāniem un formas faktoriem

Materiāls Jūs arī pastiprina saskarņu pielāgošanās spēja dažādiem ekrāna formātiemTas ietver tradicionālos mobilos tālruņus, planšetdatorus, viedpulksteņus un salokāmās ierīces. Tā pati krāsu, tipogrāfijas un atstarpju loģika ir pielāgota, lai nodrošinātu, ka saskarne ir ērta lietošanā jebkurā kontekstā.

Salokāmo tālruņu gadījumā Google ir definējis īpašas vadlīnijas par tādiem aspektiem kā elementu sasniedzamība, centrālā eņģe un vissarežģītākie izkārtojumiPiemēram, atvērtā ekrāna augšējie 25% tiek uzskatīti par grūti sasniedzamiem, tāpēc nav ieteicams tur izvietot galvenās darbības, un svarīgu informāciju nevajadzētu novietot tieši virs eņģes.

Kustība un taustes atgriezeniskā saite

Kustība filmā “Material You” nav paredzēta tikai izrādīšanai. Android 12 ievieš efektu Pārmērīga pārvietošanās, kuras pamatā ir elastīga stiepšanāsKad lietotājs mēģina ritināt tālāk par saraksta beigām, virsma vienmērīgi izstiepjas, nevis attēlo tipisko vecmodīgo atspīduma spilgtumu.

Turklāt viļņošanās animācijas pie pieskāriena ir pārveidotas, lai piedāvātu smalkāka un plūstošāka haptiskā atgriezeniskā saiteGoogle mudina ražotājus saglabāt šo uzvedību pēc iespējas tuvāku standartam, lai lietotnes darbotos paredzami neatkarīgi no pielāgošanas slāņa.

Dinamiskas krāsas: Material You būtība

Jūsu materiāla saskarne un dinamiskās krāsas, pamatojoties uz jūsu fonu

Šī jaunā posma galvenais elements ir dinamiskā krāsu sistēma, kas iekšēji pazīstama kā MonēSākot ar Android 12, sistēma var iegūt dominējošo krāsu no jūsu ekrāna. tapetes vai definētu pamatkrāsu un automātiski ģenerē pilnīgu paleti, kas tiek lietota sistēmā un saderīgās lietotnēs.

Šī sistēma balstās uz diezgan sarežģītu tehnisku pieeju, kas apvieno krāsu telpu CAM16, tonālās paletes un krāsu lomasMērķis ir saglabāt labu lasāmību, pietiekamu kontrastu un izsmalcinātu estētiku gan gaišajā, gan tumšajā režīmā, pat ja lietotājs izvēlas nedaudz sarežģītas tapetes.

Kā darbojas palešu ģenerēšana programmā Material You

El radīšanas process Dinamisko krāsu izmantošanu var apkopot vairākos precīzi definētos soļos, lai gan pamatā ir daudz krāsu matemātikas:

  • Sēklu krāsas ekstrakcija pamatojoties uz fona attēlu, lietotnes saturu vai fiksētu krāsu, ko izvēlējies lietotājs vai zīmols.
  • Konversija un analīze CAM16 telpā lai iegūtu toni, hromatiku un citus uztveres parametrus.
  • Piecu galveno tonālo palešu ģenerēšana (akcents1, akcents2, akcents3, neitrāls1 un neitrāls2) no avota krāsas un hroma un toņa korekcijas.
  • 13 toņu izveide katrā paletē, ar dažādiem spilgtuma līmeņiem (0, 10, 50, 100, 200, 300… līdz pat 1000), kā rezultātā kopā ir 65 dinamiskas krāsas.
  • Šo toņu kartēšana lietotāja interfeisa krāsu lomām, piemēram, primārais, sekundārais, virsma, fons, teksts, konteineri utt.
Kā pārbaudīt Android 16 pirms visiem pārējiem
saistīto rakstu:
Android 16 un Material 3 Expressive: vizuālā atdzimšana, kas no jauna definē mobilo pieredzi

Katrai no piecām paletēm ir noteikta uzvedība: piemēram, accent1 parasti ir zīmola vai lietotāja tēmas galvenā krāsa., akcents2 un akcents3 kalpo kā papildinoši akcenti, un neitrāls1/neitrāls2 ir rezervēti foniem, virsmām un mazāk pamanāmiem elementiem.

Motīvu stili operētājsistēmā Android 13

Ar Android 13 sistēma sper soli tālāk un ļauj jums izvēlēties starp seši dažādi tēmu stilikas atšķiras no tā, kā šī sākotnējā krāsa tiek interpretēta, lai ģenerētu galīgo paleti:

  • TONĀLS_SPOT: ir Material You noklusējuma tēma ar vidēju vibrāciju un līdzsvarotu akcentu apstrādi.
  • SPĒCĪGA: izvēlieties intensīvāku paleti, bet ar vienmērīgām pārejām starp krāsām, kas ir ideāli piemērota pievilcīgākām saskarnēm.
  • EKSPRESĪVS: ģenerē negaidītākas un unikālas akcenta krāsu kombinācijas ar augstu hromatisko intensitāti.
  • ŠĻAKSTĀJUMI: samazina piesātinājumu līdz minimumam, cenšoties panākt gandrīz monohromatisku un ļoti maigu efektu.
  • RAINBOW: apvieno krāsainus akcentus ar neitrālām virsmām, lai iegūtu diskrētāku rezultātu, ieteicams statiskām shēmām, nevis izvilkšanai no foniem.
  • AUGĻU SALĀTI: apvieno divtoņu krāsas, lai piešķirtu lielāku izteiksmību, arī piemērotāks fiksētām paletēm, nevis dinamiskiem foniem.

Sistēma ņem JSON failu, kas saglabāts Iestatījumi.Droši.TĒMAS_CUSTOMIZACIJA_PĀRĒJĀS_PAKOTES kur ir norādīta avota krāsa (piemēram, "746BC1") un, pēc izvēles, tēmas stils (piemēram, "IZTEIKUMS"). Tādējādi Android automātiski ģenerē 65 krāsu variācijas, kuras lietotnes pēc tam izmantos.

No kurienes rodas pamatkrāsas?

Materiāls. Jūs apsverat trīs galvenos veidus, kā iegūt oriģinālā krāsa kas kalpos par algoritma sākumpunktu:

  • No lietotāja fona attēlaŠis ir visizplatītākais gadījums. Sistēma analizē attēlu, izmantojot krāsu kvantizāciju, iegūst vairākus kandidātus un atlasa to, kas atbilst minimālajiem hroma kritērijiem (piemēram, CAM16 vērtība ≥ 5), lai nodrošinātu, ka rezultāts nav pārāk blāvs.
  • No lietotnes vai tīmekļa vietnes saturaPati lietojumprogramma var izlemt, ka saskarnes galvenā krāsa ir atvasināta no tās satura, tādējādi saglabājot spilgtu estētiku, bet saskaņotu ar produktu.
  • No manuāli izvēlētas krāsasZīmols vai lietotājs izvēlas konkrētu krāsu, un sistēma no tās izveido visu paleti, nepaļaujoties uz fonu.

Visos gadījumos mērķis ir panākt, lai viena ievades krāsa kļūtu pilnīga, pieejama un konsekventa krāsu shēmaizvairoties no kombinācijām, kas traucē lasīšanu vai pārtrauc vizuālās vienotības sajūtu.

Kontrole zīmoliem, dizaineriem un izstrādātājiem

Loģisks jautājums ikvienam, kas strādā digitālo produktu dizaina jomā, ir, vai šī dinamiskā sistēma "pārspēj" zīmola dizainu. Galu galā jūs pavadāt stundas, pilnveidojot savu dizaina sistēmu, tikai lai vēlāk to iegūtu. Android maina krāsas atkarībā no lietotāja fona attēla.

Atbilde ir tāda, ka Material You piedāvā saprātīgu līdzsvaru: kā dizainerim vai izstrādātājam Jūs nezaudējat kontroli, jo varat izlemt, cik lielā mērā vēlaties izmantot dinamiskās krāsas.Sistēma ir izstrādāta tā, lai tā būtu elastīga un nepārspētu katra produkta identitāti.

Pielāgotas tēmas un zīmola shēmas

Materiālu dizains 3 ietver ideju par pielāgotas vai firmas shēmasŠīs krāsas nav iegūtas no lietotāja fona attēla, bet gan no krāsām, ko definē pati lietojumprogramma. Izmantojot tādus rīkus kā Materiālu tēmu veidotājs Figma programmā varat ievadīt sava zīmola krāsas (primārās, sekundārās, terciārās, neitrālās) un ļaut sistēmai ģenerēt pilnīgu shēmu, kas ir saskaņota ar M3.

Šīs pielāgotās tēmas konfigurē nepieciešamās krāsas žetoni un ļaujiet lietotnei:

  • Tam vajadzētu izskatīties saskaņā ar pārējo Material You ekosistēmu.
  • Nodrošiniet atbilstošu pieejamību gan gaišajā, gan tumšajā režīmā.
  • Atvieglojiet turpmāku kombinēšanu ar dinamiskām sistēmas krāsām, ja vēlaties to darīt.

Jūs varat arī apvienojiet zīmola krāsas ar dinamiskām krāsāmPamata shēma var mantot daļu no lietotāja pielāgojumiem, savukārt paplašināts krāsu kopums (piemēram, ļoti specifiskiem semantiskajiem stāvokļiem vai zīmola akcentiem) paliek statisks.

Dizaina žetoni un krāsu lomas

Materiāls, ko jūs stingri reklamējat, ir šāds: dizaina žetoniTas ir, semantiski nosaukumi, kas aizstāj tiešas vērtības, piemēram, heksadecimālos kodus. Tā vietā, lai izmantotu tikai "#6200EE", tiek izmantoti tokeni, piemēram krāsaPrimārā, uz virsmas, primārais konteiners, Uc

Šie žetoni savienojas ar dinamiskas tonālās paletes (system_accent1_600, system_neutral1_10 utt.), lai lietotne varētu atjaunināt savu izskatu, nepārrakstot visu kodu. Dizaina komplekts un Figma spraudnis ģenerē šos tokenus un sasaista tos ar stiliem dizaina failos, padarot pārsūtīšanu uz izstrādi daudz vienkāršāku.

Vizuālā hierarhija un pieejamība

Pielietojot krāsu lomas lietotāja interfeisam, joprojām ir svarīgi ievērot svarīguma hierarhijaPiesātinātākās krāsas jārezervē aicinājumiem uz darbību un prioritārajiem elementiem; neitrālas un maigākas variācijas ir paredzētas foniem un sekundārajam saturam.

Material You garantē, ka, pamatojoties uz jūsu sniegtajām krāsām, sistēma ģenerēs variācijas ar atbilstoši teksta un ikonu kontrastigan gaišā, gan tumšā režīmā. Pat ja tā, ieteicams pārbaudīt kombinācijas reālās pasaules kontekstā, īpaši, ja ieviešat ļoti spilgtas sekundārās vai terciārās krāsas, kas varētu konkurēt ar primāro krāsu.

Dinamiska krāsa Android ekosistēmā

Sākotnēji dinamiskā krāsu sistēma nebija AOSP sastāvdaļa, kas radīja šaubas par to, vai tā būs pieejama tikai Pixel tālruņiem. Laika gaitā Google ir bijis paletes ieguves un ģenerēšanas loģikas integrēšana operētājsistēmās Android 12 un 13piedāvājot ielāpus un dokumentāciju, lai palīdzētu oriģinālā aprīkojuma ražotājiem (OEM) to konsekventi ieviest.

Tādi zīmoli kā Samsung, OnePlus, Oppo, Vivo, Realme vai Xiaomi Viņi jau ir paziņojuši par atbalstu dinamiskām krāsām savos Android 12+ bāzes slāņos, lai tādas lietotnes kā Gmail varētu pielāgot savu izskatu, vienlaikus ievērojot vienu un to pašu paleti dažādās ierīcēs.

Prasības ražotājiem (OEM)

Lai piedāvātu a saskaņošana ar Material YouAndroid partneriem ir jāievēro tālāk norādītās prasības.

  • Izmantojiet tāda pati krāsu ekstrakcijas loģika kā AOSP lai iegūtu tapešu sākotnējo krāsu.
  • Izvērsiet šo krāsu 65 krāsu API oficiāla (akcentu un neitrālas paletes ar 13 toņiem katrā).
  • Lietojiet šīs paletes abos Sistēmas lietotāja saskarne tāpat kā tās lietotnēslai trešo pušu izstrādātājiem būtu konsekventa rīcība.
  • Lai sniegtu pieredzi, tēmas un fona attēla atlasītājs kur lietotājs var skatīt un izvēlēties krāsu kombinācijas, pamatojoties uz fonu vai pamatkrāsām.

Turklāt, ja ierīce neatbalsta fona krāsas ieguvi (tehnisku ierobežojumu vai dizaina lēmumu dēļ), var izvēlēties alternatīvu iespēju. statiskā palete, noklusējuma materiāla tips, saglabājot zināmu vizuālo saskaņotību, pat ja dinamiskā daļa ir zudusi.

Tapetes, ThemePicker un statiskās paletes

Standarta dinamiskā krāsu plūsma sākas ar fona attēla vai tēmas atlasītājsKad lietotājs maina fonu vai izvēlas krāsu kopu, sistēma:

  1. Aprēķiniet dominējošās fona krāsas (vai nolasiet izvēlēto pamatkrāsu).
  2. Filtrējiet šīs krāsas, pamatojoties uz to hromatisko vērtību un citiem noteikumiem, lai atlasītu derīgu krāsu.
  3. Ģenerējiet piecas tonālās paletes un aizpildiet 65 krāsu API.
  4. Atjauniniet sistēmas lietotāja saskarni un padariet šīs krāsas pieejamas lietotnēm.

Fiksētām pamatkrāsām ražotāji var definēt Stub APK ar krāsu masīviem un aprakstošiem nosaukumiem (piemēram, zils, sarkans, dzeltens, zaļš), kas atlasītājā tiek parādīti kā iepriekš definētas opcijas. Katrā ierakstā ir iekļautas primārās un sekundārās vērtības, kuras sistēma izmantos kā sākumpunktu tonālajām paletēm.

Dizaineru rīki: materiālu tēmu veidotājs un dizaina komplekti

Lai atvieglotu Material You ieviešanu dizaina pasaulē, Google ir izveidojis vairākus specifiskus rīkus, kas galvenokārt ir vērsti uz Figma. Vissvarīgākais ir Materiālu tēmu veidotāja spraudniskas ļauj ģenerēt dinamiskas un firmas zīmola krāsu shēmas, necīnoties ar krāsu matemātiku.

ar šis rīks kuces:

  • Slodze a atsauces tēma vai izveidojiet to no nulles.
  • Definējiet atslēgas krāsas (primārie, sekundārie, terciārie, neitrālie) un skatiet, kā tie izplatās visā lietotāja saskarnē.
  • Lietojiet ģenerētās shēmas Materiālu dizaina komplekta sastāvdaļas iekļauts Figma failā.
  • Paplašināt shēmu ar papildu pielāgotas krāsas (Pielāgots0, Pielāgots1…) specifiskām zīmola veidošanas vai semantiskajām vajadzībām.

Spraudnis automātiski ģenerē Figma stilus, kas darbojas kā krāsu žetoni, un tie ir saite uz modeļiemTādā veidā tēmas maiņa (piemēram, no neitrālas uz firmas zīmi) praktiski nozīmē pogas nospiešanu un jaunā stilu kopas piešķiršanu.

Vairāk nekā mobilais: logrīki, ikonas un palaidēji

Material You ietekme neapstājas pie sistēmas lietotnēm. Android 12 logrīki Tie ir atjaunināti, lai ņemtu vērā jaunās API attiecībā uz izmēru, noapaļotiem stūriem un krāsu, un izstrādātājiem ieteicams atjaunināt savus logrīkus, lai izmantotu šīs iespējas.

No otras puses, arī palaišanas programmu un ikonu pakotņu kopiena ir to pamanījusi. Ir pieejamas dinamiskas ikonu pakotnes, kas... Tie maina krāsu atkarībā no tapetes vai sistēmas akcenta.un tie pielāgojas gan gaišajam, gan tumšajam režīmam. Lai tie darbotos, jāizmanto saderīgi palaidēji (Nova palaidējs, Lawnchair, Hyperion, Niagara, Smart Launcher utt.) un pēc fona vai tēmas maiņas atkārtoti lietojiet ikonu pakotni, lai atjaunotu paleti.

Kas ir Google Material 3 Expressive?
saistīto rakstu:
Materiāls 3 Izteiksmīgs: Vizuāla un personiska revolūcija Google pieredzē

Material You ir pārveidojis Android par platformu, kurā krāsa un forma inteliģenti pielāgojas katram lietotājam, neatstājot novārtā dizainerus, zīmolus vai izstrādātājus. Pateicoties sistēmai… dinamiskas krāsas, toņu paletes un dizaina žetoniIr iespējams izveidot ļoti personalizētu, tomēr saskaņotu, pieejamu un tehniski paredzamu saskarni. Neatkarīgi no tā, vai izmantojat Pixel, Samsung vai Xiaomi, ideja ir tāda, lai jūsu tālrunis atspoguļotu jūsu personību, vienlaikus joprojām darbotos un izskatītos tā, kā to sagaida miljoniem cilvēku visā Android ekosistēmā. Kopīgojiet informāciju, lai vairāk lietotāju varētu uzzināt par šo tēmu.