Viimasel 2014. aasta I / O-üritusel tuli Google oma uute üllatustega tagasi. Peale selle andis Google ametlikult välja uue Android-värskenduse koodnimega Lollipop, samuti tutvustas Google oma uut värsket disaini keelt Material Design . See on disainisüsteem, mis ei ole mõeldud ainult uue Lollipopi kasutajaliidese täiustamiseks, vaid ka kõigi seadmete ja keskkondade jaoks.
Material Design'il on mõned olulised omadused, mis eristavad seda teiste disainisuundumuste vahel, millel on oma ainulaadsed võimalused. Just nagu tema nimi, on see inspireeritud reaalsetest materjalidest ja kombineerinud need üheks disainisüsteemiks, et luua stiilne, intuitiivne, ilus ja kõige interaktiivsem kasutajakogemus. Selles postituses vaatame materjali disaini sisemuses ja anname teile lühikese juhendi selle rakendamiseks. Google'i blogi tsiteerides ütlen: „See on materiaalne disain”.
Sissejuhatus
Material Design on ühtne disainisüsteem, mis tähendab seda, et see toimib kõigi olemasolevate tänapäevaste seadmete ja platvormidega. Tabletist, nutitelefonist töölauale ja Androidist, iOs, Windowsist veebiplatvormidele. Kogu disain näeb välja ja peaks olema sama, kus see on.
Peamised põhimõtted
Materjali disaini on kolm peamist põhimõtet. Need on kõige olulisemad osad, mida Materjal üldiselt pakub.
- Materjal on metafoor . Materjali arendamist inspireeris iga päev kasutatavate puutetundlike elementide uurimine, paber ja tint . See muudab objekti valguse, pinna ja liikumise üksteisega suhtlemisel paremaks.
- Rasvane, graafiline ja tahtlik . Tüpograafia, võrgud, ruum, ulatus, värv ja piltide kasutamine, mida kasutati trükipõhisel disainialusel, muudab materjali sisu paremaks.
- Motion pakub tähendust . See on üks kõige märgatavamaid asju. Materjalis peaksite olema mõtestatud ja asjakohane algatus, peen ja selge tagasiside ning tõhus ja sidus üleminek.
Komponendid
Materjali disain pöörab tähelepanu komponentide igale detailile, nii et neid saab kasutada universaalselt. Need komponendid aitavad teil luua hämmastavat rakendust ja saiti. Materjalist on nii palju komponente, nagu nupud, lüliti, kaart, tekstisisestus, fab (ujuva toimingu nupp), dialoog, röstsai, alammenüü, kaart ja palju muud. Igal neist on oma reegel ja juhend selle kohta, kuidas neid ehitada, nii et teil ei ole mingeid ebaolulisi elemente.
Mustrid
Lisaks komponentidele pakub Materjal ka täiendavaid kasutajaliideseid. Need mustrid parandavad materjali komponentidega loodud kasutajaliidest. Mustrid, sealhulgas andmevorming, navigeerimise sahtel, vead, žestid, kerimise tehnika, otsing, seaded, piltide laadimine, pühkimine värskendamiseks ja palju muud.
Materjali kujundusvärvid
Materjalis olevad värvid olid disainitud nii, et need ei tekitaks teile ebamugavust, kummalist ja lame. Materiaalne disain annab inspiratsiooni meie igapäevastest keskkondadest, nagu liiklusmärgid, kaasaegne arhitektuur, kõnniteede märgistuslint ja spordikohad. Seal on nii palju värvipalette, et valida, kas soovite rakenduste või saitide arendamisel rohkem mugavust pakkuda. Saate alla laadida ka kohaliku kasutuse värvi värvid, näiteks Photoshopi kollektsiooni jaoks.
Materjali ikoon
Kui olete Android-arendaja, peate olema tuttav mõningate tasuta Google'i pakettidega. Neid kasutatakse tavaliselt ainult põhielemendi ja toiminguriba jaoks. Teiste ressursside puhul peame otsima teisi ikoone, näiteks kausta, faili, kopeerimise ja kleepimise kohta jne. Materiaalses disainis on Google loonud probleemi tonni ikoonpakenditega, mida saate kasutada.
Iga ikoon on läbinud mõningase disainipõhise lähenemise, mis kasutab ka puutetundlike materjalide uurimist. Nad on ka Materiaalse põhimõtte säilitamisel, mis on järjekindel. Neid ikoone saab alla laadida GitHubis, kus on mõned võimalused erinevate kasutusviiside jaoks, nagu näiteks iO, veeb, Android või svg. Kui soovite lihtsama kohandamise võimalust, siis soovite ilmselt näha materjali disaini ikoonpakendeid FlatIconis. Paki sees saad ikoonivektori (SVG ja EPS), PSD ja PNG versiooni.
Materjali animatsioon
See on materjali funktsioonid, mida mulle kõige rohkem meeldib. Materjalis olevad animatsioonid on nii reaalsed ja intuitiivsed. Igal animatsioonil on tähendusrikas, järjekindel ja õige ajastuse üleminek. Allpool näidatud gif-demo on vaid üks ilusast Materjali animatsioonist. Et pakkuda huvitavat ja reageerivat suhtlemist, loob Google'i meeskond kasutaja sisendefekti jaoks ka veevarustusega sarnase animatsiooni. Seda kasutatakse enamasti nuppudel ja kaartidel.
Need funktsioonid, mida ma selgitasin, on vaid väike osa sellest, mida pakub materjali disain. Materjalimaailma kohta lisateabe saamiseks minge lihtsalt dokumentatsiooni lehele.
Rakendamine
Vaikimisi on materjalikujundus uue kasutajaliidese värskenduseks Android Lollipopile. Kõik juhised, mida Materjal on selle sees rakendatud. Kuna Materjal on suunatud igasugusele keskkonnale, ei ole selle rakendamine mõnele teisele süsteemile raske. Tänu kogukondadele on see veelgi lihtsam mõne loodud tööriistaga.
Need on mitmed viisid, kuidas saavutada materjali disaini väljaspool Androidi, näiteks veebi.
CSS raamistike kasutamine
See on lihtsaim viis, kui soovid rakendada materjali disaini veebiplatvormil. Raamidega on vaja teha ainult see, et vormindada, seejärel kirjutada vajalikud elemendid. On palju raamistikke, mida saab kasutada näiteks Materialiseeri, Materjali UI või Polümeeri nime all. Minu isiklik valik kuulub materiaalsesse. See on lihtsam kasutada ja mõista ning on suurepärane dokumentatsioon koos kena demoga.
Järgib juhiseid
Kui soovite materjali ilma raamistiku abita rakendada ja eelistate kõige rohkem koodidega segada, peate järgima materjalijuhiseid. Seal leiad kõik toimingud ja keelud, mida peate oluliste põhimõtete saavutamiseks märkama. Näete kõiki põhijuhiseid komponentide, paigutuse, animatsiooni, värvi, mustrite ja muu loomiseks. Lihtsama arengu jaoks võiksite näha materjali kontrollnimekirja.
Järeldus
Materjali disain on suurepärane disainisüsteem, mis on muutunud üheks aasta kõige oodatumaks trendiks. Järgmistel paaril kuul näeme seda kõikjal. Selle uue Google'i disainiuuendusega poleeritakse rohkem rakendusi ja saiti.
Materjali disainiga on Google tõestanud oma parimat tehnoloogiat kui üks suurimaid tehnoloogiaettevõtteid. See muudab Google'i mitte ainult otsingumootori ja mobiilse operatsioonisüsteemi valdkonnas, vaid ka disaini valdkonnas. Praegu ei ole teisi ettevõtteid, kes arendaksid seda suurt asja, nagu Google. Kuid kogemus ütleb, et see ei kesta kaua. Ootame lihtsalt, et teised ettevõtted vastaksid Google'i materjali kujundusele.
