Share
Nu cu mult timp în urmă, Google a introdus Material Design, un set complet nou de linii directoare pentru designeri și dezvoltatori. Designul de material introduce o nouă perspectivă asupra interfețelor utilizatorului, a mișcării și a stărilor de interacțiune și reprezintă o fundație excelentă pentru a vă construi un produs după.
În esență, puteți rezuma materialul de design al Google prin două componente:
Material oferă context în proiectare, suprafața și marginea unui "material" ne oferă indicii vizuale. Să comparăm asta cu viața reală. Înțelegem dimensiunile unei încăperi, pentru că vedem ziduri. În același timp, interiorul ne oferă o înțelegere a contextului camerei. Bucătăria dvs. arată foarte diferit de baie, de exemplu.
Același lucru se aplică și în proiectarea materialelor. Combinația dintre stil și conținut oferă context pentru utilizator într-un spațiu digital, la fel ca pereții fizici și interioare. Un utilizator are o mai bună înțelegere a interfeței cu utilizatorul, deoarece materialul proiectat oferă context pentru interfață.
Un card oferă design contextual și este un element utilizat în mod obișnuit în designul de materiale. Un card oferă context în sine, precum și având o relație cu alte cărți.Conceptul de Mişcare în Material Design are o poveste foarte asemănătoare. Propunerea oferă context într - un design prin curgere a unei cereri, mai ales atunci când este vorba despre continuitate a unui produs, un utilizator are sentimentul de a fi neîntrerupt. Nu există obstacole, cum ar fi inconsistența în design sau o navigație confuză.
Cum funcționează mișcarea? Iată un exemplu. Există un feed de acasă care conține o listă de cărți. Când atingeți o singură carte, materialul cardului se extinde pentru a deveni lățimea și înălțimea totală a ecranului, în loc de dimensiunile unei singure cărți.
Observați cum se aplică acest exemplu atât material cât și mișcare. O carte este materialul. Atunci când un utilizator interacționează cu acesta, prin mișcare se va extinde pentru a afișa mai mult conținut. Acest lucru oferă continuitate utilizatorului deoarece arată modul în care intrarea acestuia afectează interfața de utilizator.
Să explorăm materialul mai mult. În esență, materialul este combinația elementelor de design statice. Gândiți-vă la forme, culori, tipografie și varietatea instrumentelor pe care le utilizați pentru a crea modele. Toate acestea formează împreună un material.
Culoarea este o chestiune grozavă atât pentru designeri, cât și pentru utilizatori. Are o influență enormă asupra aspectului unui design, precum și asupra efectelor psihologice asupra unui utilizator. Culoarea poate face un design demn de încredere, interesant, utilitar și multe altele. În Material Design, avem acces la o paletă largă de culori, pe care o putem folosi ca fundație pentru proiectarea unui produs.
Vă recomandăm să aveți următoarea referință a culorilor salvate ca un marcaj, este o referință convenabilă pentru a proiecta o paletă de culori pentru o interfață cu utilizatorul.
Roboto, fontul standard pentru Android, a fost lustruit pentru a-l îmbunătăți pentru utilizarea pe mai multe platforme. Pentru designerii care nu sunt foarte familiarizați cu tipografia, Material Design furnizează îndrumări care se ocupă de designul de tipografie pentru dvs..
Cea mai ușoară modalitate de a începe să utilizați această rețea este să descărcați următoarea foaie de etichetă. Instrucțiunile vă vor oferi o structură pentru tipografia dvs. atunci când începeți un nou design.
Proiectarea unui aspect în Material Design folosește unele din principiile de bază ale designului de imprimare, pe care Google le indică ca o sursă de inspirație pentru Designul Materialului. Există un accent puternic pe construirea de interfețe utilizator care scară bine între diferitele tipuri de dispozitive. După cum știți, scalabilitatea a devenit crucială pentru proiectarea produselor care au succes pe mai multe dispozitive.
Această ilustrație prezintă conceptul de adâncime în interfețele utilizatorilor.Unul dintre conceptele principale este stivuire. Când proiectați o interfață de utilizator cu Material Design, utilizați umbre de picătură, contrast în culoare și z-poziționare pentru a oferi utilizatorului un sentiment de profunzime în interfața cu utilizatorul. Adâncimea creează un context pentru utilizatori. Elementele plutitoare deasupra stivei, cum ar fi un buton, subliniază apelul la acțiune într-o interfață de utilizator.
Exemplu de trei straturi de adâncime: un meniu, bara de navigare de sus și zona de conținut.Pentru designeri mai avansați, liniile directoare includ grila de bază. Pagina de măsurători și keyline din instrucțiunile de proiectare a materialului merge în detaliu și vă oferă resurse pentru a experimenta.
Dacă preferați să lucrați cu un layout pre-făcut, puteți să descărcați șablonul de rame albe Google.
Exemplu de aspect proiectat. Propunerea merge mână în mână cu materialul descris mai devreme în exemplul cardului. Propunerea este ceea ce face ca materialul proiectat să vină în viață.
Când începeți să învățați elementele de bază ale designului mișcării, unul dintre primele principii pe care le veți învăța este relaxarea.
Când ușurați o animație, încercați să faceți o mișcare mai naturală. În loc să animați mișcarea unui obiect la o viteză constantă, creșteți viteza la începutul animației și reduceți viteza la sfârșitul animației.
Gândiți-vă la o mașină în mișcare în trafic și la modul în care o mașină accelerează și frânează, este o mișcare foarte naturală. Easing încearcă să reproducă astfel încât un utilizator consideră că mișcarea unui obiect este naturală.
Cea mai ușoară modalitate de a vă familiariza cu relaxarea este să vedeți câteva exemple de design. Următoarele resurse reprezintă un marcaj excelent:
Această ilustrare ilustrează relaxarea, așa cum este prezentat în "Principiile de animație în UI Design: Understanding Easing".Atunci când un utilizator interacționează cu un element de design, în majoritatea cazurilor elementul ar trebui să furnizeze feedback. În proiectarea materialelor, obiectivul este acela de a încânta utilizatorul cu feedback-ul mișcării, precum și de a oferi context pentru materialul cu care interacționează utilizatorul. Frumusețea mișcării receptive este că recunoașteți acțiunea utilizatorului, ceea ce îmbunătățește gradul de utilizare a produsului dvs..
Cel mai frumos exemplu pe care l-am văzut este zvâcnirea de atingere, o evidențiere vizuală atunci când utilizatorul interacționează cu un anumit element.
Un alt exemplu este deschiderea sau extinderea elementelor. Când atingeți un anumit element pentru ao extinde, materialul nou se extinde de la punctul atins de utilizator. Creșterea unui element se simte natural când crește direct din centrul atingerii utilizatorului. Pentru mai multe exemple de interacțiune reactivă, vizitați site-ul Google Design Material.
Nu în ultimul rând, tranziții între interfețe este important pentru interacțiunea reactivă. Este cea mai importantă formă de mișcare pentru a proiecta continuitate pentru utilizator. Pentru ecrane de intrare și ieșire, punctul de origine oferă context. O interfață de utilizator poate crește și extinde în mod dinamic, ceea ce oferă designerilor o mulțime de spațiu de joc cu tranziții frumoase. Și, cel mai bine, le pot face să aibă sens.
Mai jos sunt câteva exemple minunate de Material Design create de designeri excelenți.
Google - Explorarea materialelor de Aurélien Salomon
Alarm Material UI de Ehsan Rahimi
Aviasales L (Material Design) de Mark MAceasta este o scurtă introducere în designul materialelor. Dacă oricare dintre cele de mai sus a stârnit interesul dvs., recomandăm să citiți mai mult în orientări oficiale de către Google.
Vă rugăm să abordați Material Design cu o mentalitate creativă. O mulțime de ceea ce este prezentat este o reamintire a ceea ce face marele design minunat. În același timp, sunt numai linii directoare, ceea ce înseamnă că de dragul de a crește în calitate de designer sunteți mai mult decât bineveniți să îi dați propriul tău răsucire.
Vă încurajez pe toți să creați un design cu aceste seturi de linii directoare în minte. Ar putea însemna că adoptați o abordare diferită decât de obicei, ceea ce este minunat să vă mențineți aptitudinile la margine și să deveniți un designer.
Ce credeți despre materialul de design? Care sunt experiențele tale până acum? Vă rugăm să-l împărtășiți mai jos în comentarii, sunt foarte curios și sunt sigur că și alții sunt la fel de bine.
Accentsconagua