Pogledajte u Googleov dizajn materijala

2019

U posljednjem I / O događaju 2014. Google se vratio s novim iznenađenjima. Osim službeno objavljenog novog Android ažuriranja s kodnim imenom Lollipop, Google je također predstavio svoj novi jezik dizajna, Material Design . To je sustav dizajna koji nije namijenjen samo novim poboljšanjima korisničkog sučelja za Lollipop, već i za više uređaja i okruženja.

Materijalni dizajn ima neke glavne značajke koje ga razlikuju od ostalih dizajnerskih trendova sa svojim jedinstvenim načinima. Baš kao i njegovo ime, inspiriran je stvarnim materijalima i kombinirao ih u jedan sustav dizajna kako bi stvorio uglađen, intuitivan, lijep i interaktivan korisnički doživljaj. U ovom postu gledat ćemo što se nalazi unutar dizajna materijala i dati vam kratki vodič o tome kako ga implementirati. Citirajući Googleov blog, reći ću: "Ovo je materijalni dizajn".

Uvod

Dizajn materijala je jedinstven sustav dizajna, što znači da je napravljen za rad sa svim dostupnim današnjim uređajima i platformama. Od tableta, pametnih telefona do stolnih računala i od platformi Android, iOs, Windows do Web. Svi izgledi i osjećaji dizajna trebali bi biti isti gdje god bili.

Glavna načela

Postoje tri glavna načela koja konstruiraju Materijalni dizajn. To su najosnovniji dio onoga što Materijal nudi općenito.

Materijal je metafora . Razvoj materijala bio je nadahnut proučavanjem taktilnih elemenata koje koristimo svakodnevno, papiru i tintom . Zbog toga je objekt svjetlo, površina i pokreti bolji u međusobnoj interakciji.

Hrabri, grafički i namjerni . Tipografija, rešetke, prostor, mjerilo, boja i upotreba slika koje se koriste u temeljnom dizajnu temeljenom na ispisu čini sadržaj Materijala boljim.

Motion pruža značenje . Ovo je jedna od najvidljivijih stvari. U materijalu, trebali biste imati smisleno i odgovarajuće kretanje, suptilnu i jasnu povratnu informaciju i učinkovitu i koherentnu tranziciju.

Komponente

Materijalni dizajn obraća pažnju na svaki detalj njegovih komponenata kako bi ih se moglo univerzalno koristiti. Te će vam komponente pomoći da izgradite nevjerojatnu aplikaciju i web-lokaciju. Postoji toliko mnogo komponenti koje pruža Materijal, kao što su tipke, prekidač, kartica, unos teksta, fab (plutajući gumb akcije), dijalog, tost, podizbornik, kartica i još mnogo toga. Svaki od njih ima svoje pravilo i vodič o tome kako ih izgraditi, tako da nećete imati nikakvih nedosljednih elemenata.

Uzorci stvar

Osim komponenti, materijal vam također pruža neke osnovne obrasce za dodatno korisničko sučelje. Ovi obrasci poboljšat će korisničko sučelje koje ste stvorili s komponentama materijala. Uzorci koji uključuju format podataka, ladicu za navigaciju, pogreške, geste, tehniku pomicanja, pretraživanje, postavke, učitavanje slika, povlačenje za osvježavanje i još mnogo toga.

Boje dizajna materijala

Boje u materijalu bile su dizajnirane tako da se ne osjećate nelagodno, čudno i ravno. Uzimajući inspiraciju iz naših svakodnevnih okruženja kao što su prometni znakovi, suvremena arhitektura, traka za obilježavanje kolnika i sportski tereni, Material Design vam donosi neočekivane i žestoke boje. Postoji toliko mnogo paleta boja da odaberete daje vam više udobnosti pri razvoju aplikacija ili web-mjesta. Također možete preuzeti swatcheve boja za lokalnu uporabu kao i za vašu Photoshop kolekciju.

Ikona materijala

Ako ste razvojni programer za Android, morate poznavati neke besplatne pakete ikona koje je Google dao. Obično se koriste samo za glavni element i traku akcija. Dok za druge resurse, moramo tražiti druge ikone kao za mapu, datoteku, kopirati i zalijepiti, itd. Ručno. U materijalnom dizajnu Google je riješio problem s tonama paketa ikona koje možete koristiti.

Svaka od ikona prošla je neki dizajnerski pristup koji također koristi proučavanje taktilnih materijala. Oni su također održali materijalni princip, koji je dosljedan. Možete preuzeti te ikone na GitHubu, dolaze s nekim opcijama za različitu upotrebu kao što su iOs, web, Android ili svg. Ako želite širu opciju za jednostavnu prilagodbu, vjerojatno želite vidjeti pakete ikona Material Design u programu FlatIcon. Unutar paketa dobit ćete ikonu vektora (SVG i EPS), PSD i PNG verziju.

Animacija materijala

To su značajke materijala koje najviše volim. Animacije u materijalu su tako stvarne i intuitivne. Svaka animacija ima smislene, dosljedne i ispravne vremenske prijelaze. Gif demo koji je prikazan u nastavku samo je jedna od prekrasnih Materijalnih animacija. Kako bi osigurao privlačnu i odgovornu interakciju, Google tim također stvara animaciju nalik na vodu za efekt korisničkog unosa. Uglavnom se koristi na gumbima i karticama.

Te značajke koje sam objasnio samo su mali dio ponude materijala Design. Da biste saznali više o svijetu materijala, jednostavno prijeđite na stranicu s dokumentacijom.

izvršenje

Prema zadanim postavkama, Material Design dolazi kao novo ažuriranje korisničkog sučelja za Android Lollipop. Sve smjernice koje je Materijal primijenio u njemu. Budući da je Materijal namijenjen svim vrstama okruženja, njegovo provođenje u drugi sustav neće biti teško. Zahvaljujući zajednicama, još je mnogo lakše s nekim alatima koje su stvorili.

Ovo je nekoliko načina na koje možete postići da Materijalni dizajn bude izvan Androida, na primjer weba.

Korištenje CSS okvira

Ovo je najjednostavniji način ako želite implementirati Material Design u web platformu. Uz okvire, sve što trebate učiniti je inicijalizirati ga, a zatim napisati elemente koji su vam potrebni. Postoje mnogi okviri koje možete koristiti kao Materialize, Material UI ili Polymer u ime nekoliko. Moj osobni izbor pada u materijalizam. Lakši je za korištenje i razumijevanje te ima izvrsnu dokumentaciju s dobrim demo snimcima.

Slijedi smjernice

Ako želite implementirati materijal bez pomoći okvira i radije se zabrljati s kodovima najviše, onda morate slijediti smjernice materijala. Tamo ćete pronaći sve što treba učiniti i što ne morate primijetiti da biste ostvarili materijalne principe. Vidjet ćete sve osnovne upute za izradu komponenti, izgleda, animacije, boja, uzoraka i još mnogo toga. Možda biste željeli vidjeti neki popis materijala za lakši razvoj.

Zaključak

Dizajn materijala je sjajan sustav dizajna i postao je jedan od najtraženijih trendova u godini. U sljedećih nekoliko mjeseci možemo ga vidjeti posvuda. Više aplikacija i web lokacija bit će uglađeno s novim Googleovim ažuriranjem dizajna.

S materijalnim dizajnom Google je dokazao svoju superiornost kao jednu od najvećih tehnoloških tvrtki. To čini Google ne samo vode u tražilicu i mobilni OS području, ali i na području dizajna. Do sada, nema drugih tvrtki koje razvijaju ovu veliku stvar kao što je Google. Ali iskustvo kaže, neće dugo trajati. Pričekajte samo da druge tvrtke odgovore na Googleov dizajn materijala.