Google'i materjalidisaini kasutajaliides on muutumas uute värvide, ikonograafia ja puudutusele keskendumisega

Uued kohustused Chromium Gerritis näivad viitavat "Material Design 2-le", mis võib olla Google'i materjalidisaini keele uus ja täiustatud versioon.

Material Design, ühtne disainikeel, mis käivitati koos Android Lollipopiga, sisaldab lamedaid pastelseid värvipalette, sügavust, pehmet valgustust ja realistlikku füüsikat. See on mõeldud reaalse maailma objektide taktiilsuse jäljendamiseks, kasutamata skeuomorfismi; Google kirjeldab seda kui "klassikaliste põhimõtete" sünteesi tehnoloogia "innovatsiooni ja võimalusega".

Alates Material Designi debüüdist 2014. aastal on see levinud kogu Androidi ökosüsteemis kulutulena – rääkimata Google'i rakendustest, nagu YouTube, Chrome, Gmail, Hangouts ja Google'i kalender. Osana on saadaval ujuvad toimingunupud, meeldivad värvid ja tõstmistehnikad Materjalide komponentide raamatukogu GitHubis (Androidi disaini tugiteegi ja Google'i veebikeskse Material Design Lite'i järg), mis toob kaasa Materiali headus Androidile kohandatud vaadete kujul ja veebile pakettide kujul, mida saab importida ja kasutada nagu tavalist HTML-i sildid.

Nüüd, materjalidisaini neljanda aastapäeva eel, näib, et Google valmistab ette oma järgmise põlvkonna paberist ja tindist inspireeritud esteetiline: Materjali disain 2. Material Design 2 kohta on avalikult saadaval vähe väärtuslikku teavet, mille olemasolu avastasime sel nädalal Chromium Gerriti uutes kohustustes. Me ei väida, et see on a korralik uusima materjalidisaini raamistiku järeltulija, kuid see viitab märgatavatele, kuigi peentele muutustele värvipalettides, ikonograafias ja puuteekraani käitumises.


Materjalikujundus 2 kuvatakse Chromium Gerritis

Veebruari alguses rakendasid Chromium Gerrit uued kohustused Chrome'i kasutajaliidese "Material Design 2" vahekaardiriba – lohistatavad vahelehed, mis sisaldavad veebilehtede pealkirju, lemmikikoone ja Chrome'i kohal olevat vahekaardi sulgemise nuppu aadressiriba.

Kinnitused ei ole drastilised, kuid muudavad Chrome'i vahekaartide välimust. Need suurendavad vahelehe kõrgust; muutke vahekaartide sisu paigutust, eriti pealkirju ja hoiatusindikaatoreid, määramata; ja vähendage vahelehe puutelaiust, suurendades samal ajal vahelehe standardlaiust. Nad selgesõnaliselt ära tee saate muuta vahelehtede märguande indikaatori värve, vahelehtede eraldamise värve, nuppu "uus vaheleht" või mis tahes vahekaardi tüpograafiat.

Chrome'i vahelehtede kogu.

Ilmselt viitavad kohustused vahekaardi "Material Design 2" sulgemisnupu ikoonile ja "Google Material Design 2 jaoks nõutavatele põhivärvikonstantidele".

Kinnituskoodi süvenedes kuvatakse uued "Material Design 2" värvipalette halli, punase ja punase-tumeda Chromiumi teemade jaoks ning uued värvid tavalisele Chrome'i tööriistaribale ja inkognito tööriistaribale. RGB-proovide loomiseks kasutasime kuueteistkümnendsüsteemi otsingutabelit:

Material Design 2 punane on veidi tumedam kui praegune materjalidisain Punane 800 (#C62828) ja Punane 600 (#E53935), samas kui uued hallid toonid (#3C4043, #5F6368, #BDC1C6, #F1F3F4) on heledama sinaka varjundiga. Materjalikujunduses on esindatud traditsioonilised hallid, kus R=G=B, siin aga B>G>R igas toonis (aga ainult 1-4 võrra 255-st).

Material Design 2-ga ühilduvad versioonid Chrome'il on ka palju heledam tööriistariba kui praegustel versioonidel – see on praeguse hallika värviskeemiga võrreldes peaaegu valge.

Siin on kiire makett selle kohta, kuidas tööriistariba uute värvidega välja näeb:

Lõpuks lisab kohustus uue IsTouchOptimizedMaterial() lipp MaterialDesignController, mis võib viidata puutetundlikult optimeeritud Material Design 2 elementidele. Kirjutasime jaanuari alguses Google'i jõupingutustest täiustada Chrome'i veebibrauseri puuteekraani tugi Chrome OS-i seadmetes ja see näib olevat selle jätk.

Näiteks näitab kohustus, et puuteekraaniga seadmetes on Chrome'i SetStackedLayout alati lubatud.' Kui avate palju vahekaarte, vähenevad teiste vahekaartide laiused vaikimisi uued vahelehed. Chrome'i virnastatud paigutus säilitab vahelehtede algsed laiused ja lisab nende taha uued vahelehed.


Värvi tähtsus materjalikujunduses

Mida siis uued värvid materjalidisaini laiemas kontekstis tähendavad?

Materjalide disain on enamat kui lihtsalt kihtide, komponentide ja elementide ning nende käitumise kohta üksteise suhtes. Google'i disainimotiivi keskmes on suure kontrastsusega teemad, erksad värvid ja julged esiletõstmised – just need panevad materjalidisainiga ühilduvad rakendused teistest silma.

Google pakub näidist värvipaletid loodud platvormide vahel "hästi koos töötama" ja julgustab arendajaid, kes kasutavad eeliseid, hankima allikat rakenduse põhivärv – muidu tuntud kui "dominantne" värv - 500 erinevast kollektsioonist proovid. (Mõelge "sinisele", "rohelisele" või "lillale" ja muudele põhivärvidele.) Vajadusel hangivad nad sekundaarset värvi 700 värvi laiendatud kollektsioonist (täiendavad värvid kõige olulisemate kasutajaliidese elementide jaoks ja analoogsed vähem oluliste kasutajaliidese elementide jaoks ning kolmanda taseme värv 300).

Värvil on materjalidisaini hierarhias oluline osa. Erksad värvid viitavad tähtsusele – need on reserveeritud silmapaistvate nuppude ja muude interaktiivsete elementide jaoks. Peenemad värvid aga lisavad visuaalset huvi, rõhutades tekstivälju, edenemisribasid, linke ja muid kasutajaliidese osi.

Selle põhjal, mida me Material Design 2 värvipaleti kohta teame, on vähemalt mõned Google'i esmase 500 proovid, nagu Red 600 ja 800, tumedamad kui nende Material Designi eelkäijad. Kuid teised, nagu hallid, saavad vastupidise kohtlemise - nii Chrome'i vahekaardi maketis näidatud hallidel kui ka valgetel proovidel on külmem halltoon ja kõrgemad sinised väärtused.


Praegu on see kõik, mida me Material Design 2 kohta tegelikult teame. Kuid kohustused võivad olla märk sellest, et kulisside taga toimub midagi, ja kui see on tõsi, võime varem kui hiljem rohkem teada saada. Google loodab Androidi järgmise suurema versiooni Android P-d kasutusele võtta juba märtsis ja Google I/O 2018 algab 8. mail. Mõlemad on suurepärased võimalused Material Design 2 ümbriste eemaldamiseks.

Värskendus 4.02.2018: Vahetult pärast selle artikli avaldamist muudeti kohustus privaatseks, mis võib tähendada, et see oli mõeldud saladuseks. Kontrollime pidevalt Chromium Gerriti muudatusi ja värskendame seda artiklit, kui leiame neid.