V zadnjem I / O dogodku leta 2014 se je Google vrnil s svojimi novimi presenečenji. Poleg uradno izdane nove Android posodobitve s kodnim imenom Lollipop, je Google predstavil tudi svoj svež nov oblikovalski jezik, Material Design . Gre za sistem oblikovanja, ki ni namenjen samo novim izboljšavam uporabniškega vmesnika Lollipop, ampak tudi za naprave in okolja.
Material Design ima nekaj glavnih značilnosti, ki ga razlikujejo med drugimi trendi oblikovanja s svojimi edinstvenimi načini. Tako kot njegovo ime je bila navdihnjena z resničnimi materiali in jih združila v en sistem za oblikovanje, da bi ustvarila elegantno, intuitivno, lepo in najbolj interaktivno uporabniško izkušnjo. V tej objavi bomo pogledali, kaj je v oblikovanju materialov, in vam dali kratek vodnik, kako ga izvajati. S citiranjem spletnega dnevnika Googla bom rekel: "To je materialno oblikovanje".
Uvod
Material Design je enoten sistem oblikovanja, kar pomeni, da je bil izdelan za delo z vsemi razpoložljivimi današnjimi napravami in platformami. Od tabličnega računalnika, pametnega telefona do namizja in platforme Android, iOs, Windows in Web. Vse oblikovanje izgleda in se počuti enako, kjerkoli je.
Glavna načela
Obstajajo tri glavna načela, ki gradijo Material Design. To so najbolj temeljni del tega, kar material ponuja na splošno.
- Material je metafora . Razvoj materiala je navdihnil študij taktilnih elementov, ki jih uporabljamo vsak dan, papir in črnilo . Omogoča boljši svetlobni položaj, površino in gibanje medsebojnega delovanja.
- Krepko, grafično in namerno . Tipografija, rešetke, prostor, merilo, barva in uporaba posnetkov, ki se uporabljajo v tiskarsko zasnovanem oblikovalskem modelu, izboljša vsebino materiala.
- Motion zagotavlja pomen . To je ena najbolj opaznih stvari. V materialu bi morali imeti smiselno in ustrezno gibanje, subtilno in jasno povratno informacijo ter učinkovit in skladen prehod.
Komponente
Material Design posveča pozornost vsaki podrobnosti njenih komponent, tako da jih je mogoče uporabljati univerzalno. Te komponente vam bodo pomagale zgraditi neverjetno aplikacijo in spletno mesto. Obstaja toliko elementov, ki jih Material, kot so gumbi, stikalo, kartica, vnos besedila, Fab (plavajoči gumb), pogovorno okno, toast, podmeni, tab in več. Vsak od njih ima svoje pravilo in navodila, kako jih zgraditi, tako da ne boste imeli nobenih nepomembnih elementov.
Vzorci Stvar
Poleg komponent vam gradivo nudi tudi nekaj osnovnih vzorcev za dodatni uporabniški vmesnik. Ti vzorci bodo izboljšali uporabniški vmesnik, ki ste ga ustvarili z komponentami materiala. Vzorci, vključno s formatom podatkov, predalom za navigacijo, napakami, kretnjami, tehnikami drsenja, iskanjem, nastavitvami, nalaganjem slik, povlecite za osvežitev in še več.
Barve za oblikovanje materialov
Barve v materialu so bile oblikovane tako, da se ne boste počutili neprijetno, čudno in ravno. Navdih iz naših vsakodnevnih okolij, kot so prometni znaki, sodobna arhitektura, trakovi za označevanje pločnikov in športna igrišča, vam Material Design prinaša nepričakovane in živahne barve. Obstaja toliko barvne palete, da izberete, ki vam daje več udobja pri razvoju aplikacij ali spletnih mest. Prav tako lahko prenesete barvne vzorce za lokalno uporabo, kot je na primer za vašo zbirko Photoshop.
Ikona materiala
Če ste razvijalec za Android, morate poznati nekatere brezplačne pakete z ikonami, ki jih je predložil Google. Ponavadi se uporabljajo samo za glavni element in akcijski vrstici. Medtem ko za druge vire, moramo ročno iskati druge ikone, kot so mapa, datoteka, kopiranje in lepljenje itd. V Material Design Google je popravil težavo s tonami paketov ikon, ki jih lahko uporabite.
Vsaka od ikon je prešla nekaj oblikovalskega pristopa, ki uporablja tudi študij otipljivih materialov. So tudi ohranjanje materialnega načela, ki je dosledno. Lahko prenesete te ikone na GitHub, prihajajo z nekaj možnosti za različne uporabe, kot so za iOs, web, Android ali SVG. Če želite širšo možnost za preprosto prilagajanje, boste verjetno želeli videti pakete ikon Material Design v programu FlatIcon. Znotraj paketa boste dobili vektor ikon (SVG & EPS), PSD in PNG različico.
Animacija materiala
To so lastnosti materiala, ki mi je najbolj všeč. Animacije v materialu so tako resnične in intuitivne. Vsaka animacija ima smiselne, dosledne in pravilne časovne prehode. Gif demo, ki je prikazan spodaj, je le ena izmed lepih animacij Material. Da bi zagotovili privlačno in odzivno interakcijo, Google ekipa ustvari tudi animacijo, podobno vodnemu valovanju, za učinek uporabniškega vnosa. Večinoma se uporablja na gumbih in karticah.
Te funkcije, ki sem jih razložil, so le majhen del ponudbe materialnega dizajna. Če želite izvedeti več o materialnem svetu, pojdite na stran z dokumentacijo.
Izvajanje
Material Design je privzeto nova posodobitev uporabniškega vmesnika za Android Lollipop. Vse smernice, ki so bile uporabljene v materialu. Ker je Material namenjen vsem vrstam okolja, ga izvajanje v drug sistem ne bo težko. Zahvaljujoč skupnostim je še veliko lažje z nekaterimi orodji, ki so jih ustvarili.
To je več načinov, ki jih lahko dosežete, da dobite Material Design zunaj Androida, spleta, na primer.
Uporaba okvirov CSS
To je najlažji način, če želite uvesti materialno oblikovanje v spletno platformo. Z okviri je vse, kar morate storiti, da ga inicializirate in nato vpišete elemente, ki jih potrebujete. Obstaja veliko okvirov, ki jih lahko uporabite kot Materialize, Material UI ali Polymer, če naštejemo le nekaj. Moja osebna izbira pade v Materialize. To je lažje za uporabo in razumevanje in imajo veliko dokumentacijo z lepo demo.
Sledi smernicam
Če želite izvedbo materiala brez pomoči okvira in raje nered z najbolj kodami, potem morate slediti material smernice. Tam boste našli vse, kar morate storiti in kaj ne, da boste opazili, da boste dosegli materialne principe. Videli boste vse osnovne smernice za ustvarjanje komponent, postavitve, animacije, barve, vzorcev in še več. Morda boste želeli videti nekaj kontrolnega seznama materialov za lažji razvoj.
Zaključek
Oblikovanje materiala je odličen sistem oblikovanja in je postal eden najbolj pričakovanih trendov v letu. V naslednjih nekaj mesecih ga bomo lahko videli povsod. S to novo Googlovo posodobitvijo zasnove bo polirano več aplikacij in spletnega mesta.
In z materialno zasnovo je Google dokazal svojo superiornost kot eno največjih tehnoloških podjetij. Google ne vodi samo na področju iskalnikov in mobilnih operacijskih sistemov, temveč tudi na področju oblikovanja. Do sedaj ni drugih podjetij, ki bi razvila to veliko stvar, kot je Google. Toda izkušnje kažejo, da ne bo dolgo trajalo. Počakajmo, da se druga podjetja odzovejo na Googlov Material Design.
