În ultimul eveniment I / O din 2014, Google sa întors cu noile sale surprize. Pe lângă lansarea oficială a noului update Android cu numele de cod Lollipop, Google a introdus, de asemenea, noul său limbaj de design, Material Design . Este un sistem de design care nu este destinat doar noilor îmbunătățiri ale interfeței cu utilizatorul Lollipop, dar și pentru dispozitive și medii diferite.
Designul de materiale are câteva caracteristici majore care o diferențiază printre alte tendințe de design cu propriile sale moduri unice. La fel ca și numele, a fost inspirat de materiale reale și le-a combinat într-un sistem de design pentru a crea o experiență elegantă, intuitivă, frumoasă și cea mai interactivă. În acest post, vom examina ceea ce este în interiorul Material Design și vă vom oferi un ghid rapid cu privire la modul de implementare a acestuia. Citând blogul Google, voi spune: "Acesta este materialul de design".
O introducere
Material Design este un sistem de design unificat, ceea ce înseamnă că a fost făcut pentru a funcționa cu toate dispozitivele și platformele existente. De la tabletă, smartphone la desktop și de la Android, iOs, Windows la platforme Web. Toate design-urile arata si ar trebui sa fie aceleasi oriunde ar fi.
Principii principale
Există trei principii principale care construiesc Designul materialelor. Acestea sunt partea cea mai fundamentală a ceea ce oferă materialul în general.
- Materialul este metafora . Dezvoltarea materialului a fost inspirată de studiul elementelor tactile pe care le folosim zilnic, hârtie și cerneală . Aceasta face ca lumina obiectului, suprafața și mișcările să fie mai bune atunci când interacționează unul cu celălalt.
- Bold, grafic și intenționat . Tipografia, grilajele, spațiul, scara, culoarea și utilizarea imaginilor utilizate în proiectarea bazată pe tipărire face ca conținutul materialului să fie mai bun.
- Propunerea are sens . Acesta este unul dintre cele mai notabile lucruri. În material, ar trebui să aveți o mișcare semnificativă și adecvată, un feedback subtil și clar și o tranziție eficientă și coerentă.
Componentele
Designul materialelor acordă atenție fiecărui detaliu al componentelor sale, astfel încât acestea să poată fi utilizate universal. Aceste componente vă vor ajuta să construiți o aplicație și un site uimitor. Există atât de multe componente furnizate de Material, cum ar fi butoane, comutator, card, introducere text, fab (buton de acțiune plutitoare), dialog, toast, submeniu, fila și multe altele. Fiecare dintre ele are propria regulă și ghid pentru a le construi, astfel încât să nu aveți elemente inconsecvente.
Modele de lucruri
Pe lângă componente, Materialul vă oferă și câteva modele de bază pentru interfața de utilizare suplimentară. Aceste modele vor îmbunătăți interfața de utilizare pe care ați creat-o cu componentele Materialului. Modelele, inclusiv formatul de date, sertarul de navigare, erorile, gesturile, tehnica derulării, căutarea, setările, încărcarea imaginilor, glisarea pentru reîmprospătare și multe altele.
Culori de design material
Culorile din Material au fost proiectate astfel încât să nu te facă să te simți incomod, ciudat și plat. Având inspirație din mediile noastre zilnice, cum ar fi semnele rutiere, arhitectura contemporană, banda de marcare a pavajului și terenurile sportive, Material Design vă aduce culori neașteptate și pline de viață. Există atât de multe palete de culori pentru a alege să vă oferim mai multă conveniență atunci când dezvoltați aplicații sau site-uri. De asemenea, puteți descărca modelele de culoare pentru utilizare locală, cum ar fi pentru colecția Photoshop.
Iconul materialului
Dacă sunteți un dezvoltator Android, atunci trebuie să fiți familiarizați cu unele pachete gratuite de pictograme oferite de Google. Acestea sunt de obicei utilizate numai pentru elementul principal și bara de acțiune. În timp ce pentru alte resurse, trebuie să căutăm alte pictograme, cum ar fi pentru folder, fișier, copiere și lipire, etc. manual. În Material Design Google a rezolvat problema cu tone de pachete de pictograme pe care le puteți utiliza.
Fiecare dintre icoane a trecut printr-o abordare de proiectare care utilizează, de asemenea, studiul materialelor tactile. Ele mențin și principiul Material, care este consecvent. Puteți descărca aceste pictograme pe GitHub, ele vin cu unele opțiuni pentru utilizare diferită, cum ar fi pentru iOS, web, Android sau svg. Dacă doriți o opțiune mai largă pentru personalizare ușoară, probabil că doriți să vedeți pachete de pictograme Material Design pe FlatIcon. În interiorul pachetului, veți obține versiunea vectorului de pictograme (SVG și EPS), PSD și PNG.
Materialul este animat
Acestea sunt caracteristicile Materialului pe care îmi place cel mai mult. Animațiile din Material sunt atât de reale și intuitive. Fiecare animație are o tranziție semnificativă, consecventă și corectă. Demo-ul Gif care ți-a arătat mai jos este doar unul dintre cele mai frumoase materiale de animație. Pentru a oferi o interacțiune captivantă și receptivă, echipa Google creează, de asemenea, animație asemănătoare cu apă, pentru efectul de intrare al utilizatorului. Este folosit în cea mai mare parte pe butoane și cărți.
Aceste caracteristici pe care le-am explicat sunt doar o parte din ceea ce oferă Material Design. Pentru a afla mai multe despre Lumea materialelor, trebuie doar să vă îndreptați către pagina de documentare.
Punerea în aplicare
În mod implicit, Material Design vine ca noua actualizare UI pentru Android Lollipop. Toate instrucțiunile pe care materialul le-a aplicat în interiorul lui. Deoarece materialul este destinat pentru toate tipurile de medii, implementarea acestuia într-un alt sistem nu va fi greu. Și datorită comunităților, este chiar mult mai ușor cu unele instrumente create.
Acestea sunt câteva modalități pe care le puteți obține pentru a obține Material Design în afara Android, de exemplu, pe web.
Utilizarea cadrelor CSS
Acesta este cel mai simplu mod dacă doriți să implementați Designul materialelor în platforma web. Cu cadre, tot ce trebuie să faceți este inițializarea acesteia, apoi scrieți elementele de care aveți nevoie. Există mai multe cadre pe care le puteți utiliza ca Materialalize, Material UI sau Polymer pentru a numi câteva. Alegerea mea personală intră în Materialalize. Este mai ușor de utilizat și de înțeles și are o documentație excelentă cu un demo frumos.
Urmează liniile directoare
Dacă doriți să implementați materialul fără ajutorul cadrului și preferați să vă deranjezi cel mai mult codurile, atunci trebuie să urmați instrucțiunile de material. Acolo, veți găsi toate lucrurile și nu trebuie să observați pentru a atinge principiile materiale. Veți vedea toate ghidurile de bază pentru a crea componente, layout, animație, culoare, modele și multe altele. S-ar putea să doriți să vedeți o listă de verificare a materialelor pentru o dezvoltare mai ușoară.
Concluzie
Proiectarea materialelor este un sistem de design deosebit și a devenit una dintre cele mai anticipate tendințe ale anului. În următoarele câteva luni, s-ar putea să-l vedem peste tot. Mai multe aplicații și site-ul vor fi lustruite cu noua actualizare a proiectului Google.
Și cu designul materialelor, Google și-a dovedit superioritatea ca fiind una dintre cele mai mari companii de tehnologie. Aceasta face ca Google să nu conducă doar în domeniul motorului de căutare și al sistemului de operare mobil, ci și în domeniul designului. Până acum, nu există alte companii care să dezvolte acest lucru mare, cum a făcut Google. Dar experiența spune că nu va dura mult. Să așteptăm doar alte companii să răspundă la designul materialului Google.
