Recomandări pentru lucrul cu Google Images. Ce este Material Design?

Asta e tot azi cantitate mare clienții corporativi sunt indicați în coloana „Solicitare de proiectare” din brief-ul pentru crearea unui site web - „Design material”. În același timp, nu atât componenta vizuală atrage atenția segmentului corporate, cât faptul că stilul este trendy și cunoscut.

Înainte de a trece la exemple, să înțelegem un adevăr simplu:

Material Design este stilul corporativ al Google. A-l imita este la fel de stupid ca, de exemplu, un producător de tăiței instant care încearcă să imite marca Ferrari.

Ghidul Material Design, pe lângă Google însuși, se aplică și produselor companiilor partenere, în principal aplicațiilor pentru platforma Android. Pentru toți ceilalți care nu au legătură cu Google Corporation și Platforma Android, interesul pentru Material Design ar trebui să fie pur educațional.

Un site web corporativ necesită o abordare mai semnificativă decât să spui doar „Vreau așa”. Dacă un site web este chipul unui brand pe internet, atunci ar trebui să aibă caracteristici individuale și să corespundă vizual imaginii generale a companiei.

Material Design nu a atins încă apogeul dezvoltării sale și astăzi nu există multe site-uri care nu numai că sunt realizate în deplină concordanță cu cerințele cărții de brand Google, dar sunt și integrate armonios în propriul branding vizual. Cu toate acestea, am reușit să găsim câteva exemple de succes site-uri web în stil Material Design.

Exemple de site-uri web în stilul Material Design

Site-ul web Kiosk Browser nu este realizat doar în stilul Material Design, ci este și bine optimizat pentru dispozitive mobile.

O soluție de mare succes care îmbină armonios detaliile și design-urile din ghidul Material Design (umbre, butoane, design plat, culori și efecte JS) și stilul corporativ al grupului de școli internaționale ISOE.

Platforma lifeaweso este proiectată în conformitate cu principiile fundamentale ale Material Design: simplitate, claritate, înțelegere. Site-ul este încă în dezvoltare, dar integrarea elementelor vizuale în stil Material Design arată destul de bine.

Cunoscută companie de dezvoltare soluții digitaleși serviciile online Futurice pur și simplu nu a putut face un site web prost. Schema de culori pastelate, navigarea lină și elementele funcționale se combină pentru a crea un minunat experiența utilizatorului.

Acest site folosește principiul simplității inerent în Material Design și îl completează cu vii, fotografii de înaltă calitate. Deosebit de impresionant imagini de fundal la defilare.

Aici vedem elementul cheie al Material Design - carduri. Site-ul este foarte ușor și simplu: nu există aglomerație de elemente inutile și Informatie cheie afișate în blocuri separate.

Pe lângă alte atribute din conceptul Material Design, aici există un element cheie de control - un buton care plutește deasupra site-ului. După carduri, acesta este poate unul dintre cele mai memorabile elemente ale direcției de design a Google.

Și, desigur, să nu uităm de sursa originală. Interfață de service Alerte Google actualizat recent la Material Design, care și-a îmbunătățit semnificativ caracteristicile vizuale și capacitatea de utilizare.

De la autor: în 2014 Google a publicat specificația Material Design, limbaj vizual, care își propune să reunească principiile de design consacrate, o experiență de utilizator fără întreruperi diverse platformeși dispozitive, precum și inovații tehnologice și științifice.

Dacă utilizați Bower ca manager, puteți introduce următoarea comandă pentru a instala MDL în folderul bower_components: bower install material-design-lite –save

Dacă utilizați npm, pentru a instala MDL în folderul node_modules trebuie să introduceți următoarea comandă: npm install material-design-lite –save

Google recomandă utilizarea fișierelor CSS și JS aflate pe un CDN. Aceasta este metoda pe care am folosit-o în demonstrație. În primul rând, în antet document HTML trebuie să te conectezi fișier CSS MDL, pictograme Material Design și stiluri de proiect în care puteți face propriile modificări:

< link rel = "stylesheet" href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css" > < link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons" > < link rel = "stylesheet" href = "css/styles.css" >

Tipografia în material Design Lite

Pentru engleză și limbi similare (caractere latină, greacă și chirilice) au fost alese fonturile Roboto și Noto în designul materialului.

Noto acceptă, de asemenea, scripturi „dense” precum chineză, japoneză și coreeană, precum și scripturi „înalte”, cum ar fi limbi din Asia de Sud-Est și Orientul Mijlociu, de exemplu. arabă, hindi etc. Pentru a conecta fontul Roboto la proiectul dvs., adăugați o etichetă de link în partea de sus cap HTML document:

< link rel = "stylesheet" href = "http://fonts.googleapis.com/css?family=Roboto:400,100,500,300italic,500italic,700italic,900,300" >

Pentru latină, greacă și Caractere chirilice Specificația Material Design recomandă scale tipografice de 12, 14, 16, 20 și 34. Puteți aplica principiile tipografice MDL adăugând un set de clase speciale la marcaj. De exemplu, .mdl-typography—display-2 pentru h1 și .mdl-typography—display-1 pentru

Dimensiunea fontului va fi de 45 px și respectiv 34 px:

Titlu

Subtitlu

< h1 class = "mdl-typography--display-2" >Titlu< / h1 > < p class = "mdl-typography--display-1" > Subtitlu < / p >

MDL are destul de multe clase cu scale tipografice, accesibilitate și lizibilitate. Cursurile facilitează afișarea conținutului text, care este apoi plăcut de citit indiferent de dispozitivul de pe care este vizualizat site-ul.

Cum să alegi o culoare pentru proiectul tău în MDL

Aruncă o privire la fișierul MDL al bibliotecii material.indigo-pink.min.css. Numele fișierului se referă la paleta de culori Material Design din stiluri. Paleta de culori implicită folosește indigo ca culoare principală și roz ca culoare de accent. Dar nu sunteți în niciun caz limitat la aceste culori. Mai jos sunt ghiduri de proiectare a materialelor despre cum să vă dezvoltați propria paletă de culori și cum să o utilizați în MDL.

Principii pentru alegerea culorilor în Material Design

Designul materialului îi place să combine culorile luminoase și dezactivate, umbrele și luminile: „Culoarea ar trebui să fie neașteptată și strălucitoare
Specificație Google Material Design"

Cu toate acestea, acest lucru nu înseamnă că puteți utiliza culori arbitrare pe o pagină web. Este chiar invers.
Material Design oferă o gamă largă de palete de culori frumoase și armonioase. Pentru a facilita selecția culorilor, fiecare culoare din paletă are mai multe niveluri și valori în sistem hexazecimal. Există 500 de culori primare în ghidurile de proiectare a materialelor. Alte culori sunt cel mai bine folosite pentru accent.

Când vă dezvoltați propria paletă design material recomandă utilizarea a trei nuanțe din paleta principală și o culoare de accent din paleta secundară. Exemplu:

Odată ce înțelegeți principiile utilizării culorilor în designul materialelor, este timpul să alegeți o paletă de culori cool pentru proiectul dvs. MDL. Mai jos vă voi spune cum să faceți acest lucru.

Cum să personalizați paleta de culori implicită în Material Design Lite

Comutați de la nativ paleta de culori Roz indigo poate fi aplicat pe al tău în unul dintre următoarele moduri. Dacă ați folosit Google CDN ca în demonstrația de mai sus, trebuie să:

Setați adresa URL la fișierul de stil MDL din atribut link-uri href link din antetul documentului HTML.

Înlocuiți indigo și roz cu culorile primare și, respectiv, de accent.

De exemplu, ați ales turcoaz ca culoare principală și galben ca culoare de accent în paletă. Mai jos este cum va arăta URL-ul către stilurile MDL de pe CDN:

< link rel = "stylesheet" href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.teal-amber.min.css" >

Asta e tot! Dacă stocați fișiere MDL compilate și minimizate pe serverul dvs., atunci site-ul MDL vă va ajuta. Acolo veți găsi instrumentul Personalizare și previzualizare, care vă permite să alegeți culorile principale și de accent folosind o roată interactivă pentru paletă. Apoi puteți descărca fișierul CSS cu tema aleasă și îl puteți lipi direct în proiectul dvs.:

Demo-ul HTML pentru acest articol folosește paleta implicită indigo-roz, dar sunteți liber să experimentați Culori diferiteîntr-unul din două moduri.

Stratul de componente MDL

MDL oferă multe componente web utilizate în mod obișnuit, inclusiv straturi, butoane, carduri, butoane radio etc. Începeți să construiți structura șablonului HTML folosind straturi Material Design Lite. Stratul MDL se extinde la întregul container cu classes.mdl-layout .mdl-js-layout. Începeți cu codul de mai jos, lipiți-l imediat după eticheta de deschidere a corpului:

Pentru a crea straturi în MDL, utilizați Flexbox CSS. O etichetă cu class.mdl-layout este container flexibil cu proprietatea flex-direction: coloană. Stratul este format din următoarele subcomponente:

Stratul de navigare

Cum să utilizați filele pentru navigare

Puteți crea un meniu în unul dintre următoarele moduri:

Antet transparent

Fix panou lateral Fără antet

Antet fix

Anteturi fixeși bara laterală

Antet derulant

Antet în cascadă

Simțiți-vă liber să vizualizați toate opțiunile de mai sus în secțiunea de navigare MDL și, de asemenea, să experimentați cu fiecare dintre ele în proiectul dvs.

În ceea ce privește demo-ul de la începutul articolului, acolo am selectat componenta Tabs ca meniu. Ceea ce este grozav la file este că, deși conținutul este împărțit în ecrane separate în secțiuni, toate secțiunile sunt situate fizic pe aceeași pagină. Aceasta înseamnă că atunci când utilizatorii dau clic pe un link de filă, ei nu așteaptă să se încarce serverul pagina nouaîn browser. Conținutul este disponibil instantaneu, creând astfel o experiență plăcută pentru vizitatorii site-ului.

Pentru a crea rapid un antet cu file, veți avea nevoie de: Adăugați încă două clase la containerul pe care l-am creat mai devreme - .mdl-layout—fixed-header și .mdl-layout—fixed-tabs.

< div class = "mdl-layout Mdl-js-layout mdl-layout--antet-fix Mdl-layout--fixed-files" > < / div >

Observați cum MDL folosește clase CSS din spațiul de nume BEM.

Titlul dvs. Fila 1 Fila 2

< header class = "mdl-layout__header" > < div class = "mdl-layout__header-row" > < ! -- Title -- > < span class = "mdl-layout-title" >Titlul tau< / span > < / div > < ! -- Tabs -- > < div class = "mdl-layout__tab-bar mdl-js-ripple-effect" > < a href = "#fixed-tab-1" class = "mdl-layout__tab is-active" >Fila 1< / a > < a href = "#fixed-tab-2" class = "mdl-layout__tab" >Fila 2< / a > < / div > < / header >

Tot ce rămâne este să adăugați panourile corespunzătoare cu conținut:

panoul de conținut 1 panoul de conținut 2

< main class = "mdl-layout__content" > < ! -- Panel 1 -- > < section class = "mdl-layout__tab-panel is-active" id = "fixed-tab-1" > < div class = "page-content" > < ! -- контентпанели1 -- > panoul de conținut 1 < / div > < / section > < ! -- Panel 2 -- > < section class = "mdl-layout__tab-panel" id = "fixed-tab-2" > < div class = "page-content" > < ! -- контентпанели2 -- > panoul de conținut 2 < / div > < / section > < / main >

Panoul cu id="fixed-tab-1" are clasa setată la .is-active și va fi afișat implicit.

Cum să postezi continut suplimentarîn bara laterală

Demo-ul folosește și secțiunea sertarului. Sertarul este o bară laterală care poate fi ascunsă sau afișată făcând clic pe un buton. De asemenea, puteți face panoul deschis și fixat, astfel încât conținutul său să fie întotdeauna vizibil.

Titlul tau

< div class = "mdl-layout__drawer" > < span class = "mdl-layout-title" >Titlul tau< / span > < / div >

Urmăriți aceste bucăți de cod în acțiune sau aruncați o privire la demonstrația finală cu file și bară laterală.

Grilă în Material Design Lite

MDL folosește o grilă cu 12 coloane pentru computere desktop, grilă cu 8 coloane pentru tablete (până la 800 px) și 4 coloane pentru ecranele dispozitivelor mobile (până la 500 px). Puteți face din container o grilă adăugând clasa .mdl-grid:

În mod implicit, containerul pentru coloanele grilă ocupă întreaga lățime a ecranului. Dacă nu vă place acest lucru, limitați lățimea folosind stiluri. De exemplu, în demonstrația pentru acest articol, sunt implementate ambele opțiuni, atât o grilă pe ecran complet, cât și un bloc centrat:

Acest rezultat poate fi obținut dacă includeți fiecare secțiune în elemente .mdl-grid diferite și adăugați o clasă personalizată cu lățime maximă CSS: 960px într-o secțiune separată.

< div class = "mdl-grid intro-section" > < ! -- контентненавесьэкран-- > < / div >

Intro-secțiune (lățime maximă: 960 px; )

Introducere - secțiune ( max - latime : 960px ;

De asemenea, dacă vrei să scapi de marginile marjă între coloanele grilei, MDL are o clasă minunată care trebuie adăugată la containerul coloanei - .mdl-grid—fără spațiere:

< div class = "mdl-grid mdl-grid--no-spacing" > < ! -- контент-- > < / div >

Veți obține ceva de genul:

< div class = "content-grid mdl-grid" > < div class = "mdl-cell" > < ! -- контент-- >

Material Design este un concept de design creat pentru a unifica servicii, interfețe și alte produse. Conceptul a fost dezvoltat de Google și prezentat unui public larg pe 25 iunie 2014 la convenția Google I/O. În centrul dezvoltării schema de culori, proprietăți și elemente ale obiectelor de design. Material Design este completat și actualizat în mod regulat de către dezvoltatori. Vorbitor într-un limbaj simplu, ideea de bază este un design asemănător blocurilor care se deschide și se pliază în cuburi ca niște cărți, folosind un efect de umbră. Cărțile în sine ar trebui să se schimbe fără probleme între ele.

Strategia acestui design se bazează pe crearea unei experiențe holistice de utilizator, capacitatea de a pătrunde serviciile în diferite domenii ale vieții unui utilizator de PC.

Când creăm obiecte, pornim de la o experiență veche de secole și ne bazăm pe ea. Dar proiectare software- acesta este încă doar un incipient și sistematic produs în curs de dezvoltare. Privind-o complet, ne-am întrebat: în ce constă?

- John Wiley, Chief Design Officer, Căutare Google

Principii principale

Principalele principii ale Designului Materialelor includ suprafețele tactile, designul de imprimare, animația semnificativă și designul adaptiv.

Suprafețe tactile. Interfața constă din „hârtie digitală”. Straturile din această „hârtie” sunt plasate unul deasupra celuilalt și aruncă umbre. Datorită acestor umbre, utilizatorii de computere înțeleg mai bine elementele de bază ale lucrului cu interfața.

Design tipărit. „Hârtie digitală” afișează „cerneală digitală”. Pentru imaginile cu cerneală digitală, se utilizează abordarea tradițională a revistei sau a afișelor. Elementele principale ale designului de imprimare sunt scara, grila, culoarea și spațiul. Din acestea se creează focalizarea, ierarhia și sensul. Datorită culorii, fonturilor, dimensiunilor, fundalului și altor elemente, este creat designul interfeței în sine. Folosirea acestuia concentrează atenția asupra principalului funcţionalitate, puncte cheie ale managementului produselor sau serviciilor.

Animație semnificativă. Claritatea și înțelegerea animației aplicației afectează direct timpul petrecut de utilizator calculator personal pentru a înțelege rezultatele acțiunilor utilizate în acest program. Animația este un fel de indiciu pentru gestionarea interfeței Material Design.

Design adaptiv. Una dintre caracteristicile Material Design este versatilitatea sa, adică posibilitatea de a utiliza cele trei componente descrise mai sus diferite dispozitive ah, cum ar fi un computer, telefon, tabletă etc.

Suprafețe tactile

Suprafețele tactile sunt aceleași bucăți de „hârtie digitală” care, spre deosebire de hârtia obișnuită, au superputeri - se pot întinde, se pot conecta și își pot schimba forma.

Suprafaţă

O suprafață este partea unui element de design care aruncă o umbră care face un element diferit de altul. Designul materialului urmărește simplitate maximă și design „curat”.

Designul „pur” se numește de obicei capacitatea de a transmite proprietățile unui obiect printr-un gradient sau umbră, fără a utiliza structura. Toate suprafețele au propria umbră și o anumită înălțime.

Adâncime

IN " design plat„Încercați să nu folosiți umbre care arată volum. În același timp, sunt stabilite umbre o anumită ierarhieși structura elementelor de interfață. Umbra adâncă evidențiază subiectul cheie și concentrează atenția asupra acestuia într-un mod subtil și elegant.

Adâncimea este un indiciu despre modul în care obiectele interacționează. În momentul derulării utilizatorului, placa verde este atașată la stratul superior și formează o umbră. Acest lucru demonstrează în mod clar nu numai mișcarea „cernelii”, ci și mișcarea fundalului alb situat dedesubt.

Stratul inferior al adâncimii este „partea de jos”.

• Amintiți-vă de logistică. Variat casete de dialog, ferestrele plutitoare, barele de instrumente au o anumită înălțime. Pentru a evita coliziunile, trebuie să se deplaseze periodic de-a lungul axei Z.
• Nu forțați butoanele. Ar trebui să utilizați un buton plutitor numai în caz de nevoie urgentă, deoarece utilizarea lui aduce imediat efectul Material Design în design. Nu ar trebui să-l utilizați pentru a confirma orice acțiune sau pentru a închide ferestrele.
• Nu totul trebuie să fie pe card. Este indicat să folosiți un card numai atunci când obiectul conține multe forme și o cantitate mare de conținut. Pentru alte opțiuni, este mai logic să folosiți text sau liste tradiționale.
• Minimalism în casetele de dialog. Casetele de dialog ar trebui folosite numai pentru a confirma acțiunile utilizatorului atunci când apar întrebări.

Design tipărit

Toate obiectele situate pe suprafața designului materialului sunt aplicate cu „cerneală digitală”. Aceste obiecte sunt imagini, test, pictograme. Aranjarea acestor obiecte urmează principiul designului de imprimare.

Tipografie elegantă

Tipografia este importantă în designul tipăritului. Stabilește structura conținutului și influențează formarea stilului unui anumit brand.

Tipografia formează o structură de elemente care au propria lor dimensiune, font, ierarhie.Cu ajutorul lor, înțelegem vizual care elemente sunt mai semnificative și de ce unele dintre ele sunt cheie, iar altele sunt secundare.

Tipografie contrastantă

Încă una principiu important imprimarea este un contrast de tipografie. Este ușor de observat că un titlu mare și un font întunecat înseamnă ceva important și de bază, în timp ce textul mai mic și un ton mai deschis înseamnă informații secundare. Contrastul vă permite să evidențiați punctele principale, oferind estetica generală a conținutului.

Grilă modulară si ghiduri

În timp ce proiectarea ecranului utilizează grile de bază, designul de imprimare utilizează grile modulare. Pentru Material Design, se folosește o grilă cu un pas de 8 dp.

O caracteristică distinctivă a plasării conținutului în Material Design este plasarea liniilor directoare de bază. Datorită acestora, din marginile ecranului sunt create indentări, afectând structura conținutului paginii și controlul privirii utilizatorului. Drept urmare, vedem textul principal în centrul ecranului, iar elementele suplimentare sunt plasate în afara acestuia, lângă margini.

Iconografia geometrică

Cele mai simple pictograme au fost folosite mult timp pe baza sistemului Android. În Material Design, acestea arată și mai simple și mai plăcute vizual.

De exemplu, indicatorii și butoanele sunt evidențiate în culori bogate și luminoase. Datorită acestor culori, ele pun accent pe principalele elemente de control (butoane plutitoare etc.). Dacă este necesar să se introducă culori suplimentare în design, se recomandă utilizarea nuanțelor de bază, discrete.

Descărcați pictograme pe acest subiect:

Culoare

Culoarea în design este responsabilă pentru expresivitate. Anterior, în Android, schema de culori era secundară, dar acum i se atribuie unul dintre rolurile cheie. În Material Design, paleta de culori de bază constă din accent și nuanțe primare.

Bara de acțiuni este vopsită cu culoarea principală, iar bara de stare este evidențiată cu un ton mai saturat. Culoarea de accent este folosită pentru dungi, indicatoare, butoane plutitoare. Atrage atenția asupra elementelor cheie ale consiliului.

Accentuările sunt puse punctual și în cantitate mica. Pentru restul interfeței, culorile sunt folosite în conformitate cu regula: este lăsată o cantitate mare de text (o listă de scrisori de e-mail) marimea standardși adăugați culoare pentru a atrage atenția utilizatorului de computer; o cantitate mică de text (calculator, fotografie) este mărită de 2-3 ori și se adaugă matrițe colorate.

În sistemul Android, puteți colora interfața în mod dinamic, adică evidențiați culorile principale din fotografia de ansamblu.

Fotografii frumoase

În Material Design puteți și chiar trebuie să utilizați diverse fotografii și ilustrații. Adesea imaginile nu au rame. Bara de stare în sine este făcută incoloră pentru a nu distrage atenția de la imagini. „Cerneala digitală” este întotdeauna folosită nu numai pentru frumusețe, ci și pentru funcționalitatea designului.

• Branding-ul este recomandat.
• Nu trebuie să uităm de indentări și spațiu liber (pentru grila de bază 8dp, pentru indentări - 72 dp).
• Utilizați imagini luminoase.

Animație semnificativă

Material Design, ca și lumea fizică, folosește o animație semnificativă pentru a arăta utilizatorului ce s-a întâmplat acest moment. Adică, utilizatorul ar trebui să vadă că niciun obiect nu vine de nicăieri și nu dispare în neant.

Exemplul 1. Animația arată că acest card special, după ce a fost dat clic, a ajuns în prim-plan, s-a deschis și au devenit vizibile mai multe informații.

Exemplul 2. Când faceți clic pe o dată din calendar, apare un eveniment, care se desprinde ușor ca un strat din calendarul general, se transformă într-un bloc separat și este dezvăluit într-un bloc separat detaliat care descrie acest eveniment.

Animația ajută la concentrarea atenției utilizatorului și la concentrarea privirii asupra acțiunilor interfeței.

Reacţie

Încă una punct-cheie animația în Material Design este considerată a fi o reacție la anumite acțiuni ale utilizatorului de PC. Modificările în interfața Android L apar după ce vă atingeți degetele. Aceste schimbări se reflectă într-o acțiune de tip val.

Microanimatii

Micro-animațiile sunt extrem de importante. Ele sunt folosite ca răspuns la toate manipulările utilizatorului. Acest lucru face interfața mai detaliată și mai receptivă.

Claritate și claritate

Principiul final al animației este claritatea și claritatea acțiunii. Material Design are o curbă de animație interesantă. Toate obiectele răspund rapid la acțiunile utilizatorului, revin brusc, dar durează puțin mai mult pentru a îngheța și a trece la starea finală de calm. În cele din urmă, utilizatorul nu pierde timpul așteptând, ceea ce înseamnă că nu se enervează și nu experimentează emoții negative atunci când interacționează cu interfața.

• Gândiți-vă la animație în avans.
• Utilizați animația în mod optim (utilizarea excesivă este descurajată, deoarece toată animația trebuie să aibă sens).

Design adaptiv

Final aspect cheie Designul materialului este un concept design adaptiv. Aceasta înseamnă opțiuni pentru aplicarea celorlalte trei aspecte diverse ecrane dispozitive (telefon, PC, televizor etc.).

De la general la specific

Cea mai populară metodă este comprimarea cantității de informații împreună cu comprimarea ecranului în sine. Puteți încadra o mulțime de conținut pe televizor. Telefonul afișează mai întâi o listă, pe care se poate face clic pentru a dezvălui informații detaliate.

Indentări

Pe ecrane mari conținutul este plasat folosind blocuri. Ele umplu spațiul liber și pot fi întinse în lățime. Întinderea are loc având în vedere lizibilitatea conținutului. În partea rămasă a ecranului, sunt create indentări pe care pot fi plasate butoane sau plăci plutitoare.

Ghiduri

Indentările sunt stabilite folosind ghiduri. Lățimea indentărilor pentru smartphone-uri, tablete, computere și televizoare va fi complet diferită. Deci, pentru o tabletă este de 80 dp, iar pentru ecranul unui smartphone este de doar 72 dp.

Dimensiuni

Toate elementele de interfață trebuie să aibă proporții multiple. Dimensiunile ecranului tabletelor și smartphone-urilor diferă unele de altele, dar aplicațiile care folosesc elemente cu parametri multipli se adaptează la orice dimensiune a dispozitivului.

Blocuri

O grilă modulară de blocuri ajută la stabilirea unui ritm vizual pentru luarea deciziilor optime.

Bara de instrumente

Bara de acțiuni este una dintre componentele principale ale interfeței. Conține butoane de acțiune și titluri. În Android L bara de acțiune a devenit atractivă și bloc funcţional management. Acest lucru a fost realizat datorită faptului că formularele, butoanele plutitoare și navigarea extrasă cu comenzi convenabile pot fi plasate în Bara de instrumente.

• Nu ar trebui să utilizați sertarul de navigare pentru instrumente simple. Este recomandat să utilizați navigarea numai pentru mai multe sarcini din aplicație.
• Fii îndrăzneț cu barele de instrumente.
• Plasați butonul plutitor în locația cea mai optimă. Nu vă fixați strict în colțul de jos.
• Exersați elementele de interfață atât pe verticală, cât și pe verticală ecran orizontal dispozitive.

Materialul ca metaforă

Pentru dezvoltatori Google a reușit să îmbine un design bun și atractiv cu inovația tehnologii moderne si stiinta.

Materialismul în sfera digitală Nu este prima dată când sunt folosite. Astfel, Apple a folosit recent filosofia skeuomorfismului (imitarea percepției obiectelor vizuale din lumea materială din jurul nostru) în designul interfeței.

Un bun exemplu în acest sens este aplicația Chioșc de ziare. Aici am vizualizat obiecte cunoscute nouă: ziare, reviste care stau pe rafturi. Răsfoind aceste reviste, imităm actul real de a răsfoi o carte obișnuită în viața de zi cu zi. Astfel, viața reală tradițională este duplicată în „digital”.

Dezvoltarea designului digital

Marea majoritate a utilizatorilor interacționează zilnic cu mediul digital. Nu mai necesită asemănări exacte între obiectele virtuale și lumea reală. Cu cât toți utilizatorii se obișnuiesc mai repede cu acest moment, cu atât designul digital poate începe să avanseze în mod activ.

Pe baza acestui fapt, Material Design nu mai este atât de influențat de skeuomorfism. Acum acesta este doar un nou pas în evoluția obiectelor virtuale.

Vizibilitatea ca bază fundamentală

Suprafețele și marginile diferitelor controale din Material Design creează indicii în modul de navigare și manipulare a interfeței, similar cu acțiunile din viața reală.

Caracteristicile tactile ale obiectelor ajută la distingerea obiectelor cheie de altele suplimentare și la determinarea relației dintre ele.

Bazele Design material include, de asemenea, principiile de design de imprimare. Accentul se pune nu numai pe estetică, ci și pe crearea unei structuri speciale, a ierarhiei și a unui sistem de management simplu.

Componenta vizuală a Material Design se bazează pe: culori bogate, margini clare, tipografie mare și liniuțe mariîntre diferite elemente.

Dinamica semnificativă

Atenția principală este concentrată pe comportamentul (acțiunile) utilizatorului. Interacțiunea lui cu designul are loc pe baza experienței acumulate de utilizator și nimic altceva.

Exemple de site-uri web în stilul Material Design

De îndată ce lansarea conceptului a apărut pe internet, mulți reprezentanți ai Material Design au apărut online.

Exemplele de site-uri sunt create în strictă conformitate cu principiile de bază ale Material Design. Sunt simple și clare, conțin butoane plutitoare, umbre, culori deschiseși efecte vizuale, navigare lină. Toate acestea se adaugă la o experiență excelentă pentru utilizator.

Videoclipuri

Material Design a atras un public uriaș. El demonstrează cum să creeze corect o interfață de utilizare, astfel încât să fie absolut de înțeles și clar pentru utilizator, exact în același mod ca un obiect familiar din lumea reala, pe care o poți atinge cu mâinile.

Roman Nurik, unul dintre designeri Google Teams, a descris modul în care aplicația I/O 2014 s-a schimbat în timpul dezvoltării pentru a se conforma cu principiile Material Design. Am tradus videoclipul lui special pentru tine.

Video de pe canalul Google Design.

• Tutorial

Butoanele pot fi hexagonale?

Google I/O 2018 a rămas o cantitate mare material pentru înțelegere. Ce mai e nou? Cum să trăiești mai departe? Aplicația mea este depășită? Butoanele pot fi hexagonale? Nu mai este nevoie de designeri din nou? Este mai plăcut de înțeles încet și în porții mici. Această porțiune este despre design.

După patru ani, m-am săturat de Material Design. Potrivit Google, 1,5 milioane de aplicații au fost create pe baza acestui sistem de design. De ce? La urma urmei, a fost creat inițial pentru nevoile interne ale Google.

A rezolvat problemele de design eterogen pentru Android și lipsa oricărui sistem
- Era universal pentru diferite dispozitive: tablete, smartphone-uri, web.
- Este conceput din punctul de vedere al utilizatorului și este intuitiv.

Sistemul a fost acuzat că este inflexibil și, ca urmare, a primit un design în copie. Dacă proiectați un serviciu urmând strict ghidurile, atunci din punct de vedere vizual aplicațiile se dovedesc într-adevăr lipsite de caracter. Pe de altă parte, de ce să dai vina pe sistem? Ghidurile nu au fost niciodată biblie; cineva ar putea să se abată de la ele. Poate ați ales doar culoarea pentru aplicația dvs. în paleta Google Color? Sper ca nu.

Pe de altă parte, adăugând elemente personalizate, ai riscat să le întâlnești pe ale tale Dezvoltatori Android pe o alee întunecată și ascultă un discurs lung despre de ce și cât de greșit. Erau vremuri periculoase.

Toți câștigătorii premiului Material Design Award și-au asumat același risc. Ați observat cât de personalizată este interfața de utilizare a acestor proiecte? Dar Google i-a încurajat și toată lumea a fost surprinsă.

Acum este evident: Google vrea să ne personalizăm aplicațiile. Produsele ar trebui să fie frumoase și diferite. MD-ul actualizat este o încercare de a le arăta designerilor și companiilor cum să personalizeze interfața de utilizare fără teama de a fi certați de dezvoltatori.

material.io – Proiectare, Dezvoltare, Instrumente

Puteți începe să învățați sistemul de design de pe site - nu doar o parte din conținut a fost actualizat acolo, ci și stilul vizual. Acum chiar și ecranul 404 te va învăța și făcând clic pe un element din ghiduri, vei vedea specificația acestuia cu toate distanțele, fonturile și linkurile de descărcat din biblioteca Google.

Rezultatul nu este încă impresionant. Cel mai mare beneficiu ar fi trebuit să fie codul gata făcut pentru elementele native, dar link-ul GitHub nu este atât de cool. De asemenea, este prea devreme să le ceri dezvoltatorilor să adauge noi elemente la aplicația ta - codul pentru acestea nu a fost încă furnizat.

Ce se întâmplă dacă elementele tale nu sunt native? Puteți vedea marcajele, dar nu veți putea obține pictogramele tăiate. Deci este prea devreme să vorbim despre înlocuirea lui Zeplin.

Evanghelistul de design Google Mustafa Kurtuldu despre utilizarea tehnologiei lor în dezvoltarea aplicațiilor Keep și Inbox.

La marcaje

Traducerea a fost pregătită de echipa școlii online de engleză Skyeng.

Material Design oferă un set de instrumente și reguli care vă ajută să abordați în mod conștient designul UX atunci când creați o interfață de aplicație.

Dar dacă aceste principii nu funcționează pentru un anumit produs? Și ce fac ei designeri Google, când dezvoltă un produs care depășește liniile directoare clasice?

Orientările materiale sunt adaptative. În acest articol, ne vom uita la două aplicații Google, Keep și Inbox, pentru a înțelege cum acestea nu numai că se abate de la unele reguli, dar formează și altele noi. Principii materiale Proiecta.

Inbox: Grilă modulară

Dezvoltarea de noi serviciu poștal- un obiectiv foarte ambițios pentru Google, având în vedere prezența Gmail deja înrădăcinată pe piață. Scopul Inbox a fost de a adăuga profunzime designului interfeței și de a crea o experiență unică de utilizator și stilul formei, jucându-se după noile reguli de Material Design.

Când echipa Inbox colecta proiecte preliminare, conceptul de Material Design era încă în dezvoltare. Acest lucru a oferit Inbox o oportunitate excelentă de a stabili standardele pentru Material Design, abordând în același timp provocarea de adâncime și volum în interfața de utilizare.

Adâncime

Designul original al Inbox nu a fost suficient de flexibil – spațiul din grilă permitea doar șapte e-mailuri să încapă pe un ecran de 13 inchi. Acest lucru a fost prea puțin, mai ales în comparație cu Gmail, care se potrivește cu 16-20 de litere.

Dacă deschideți Gmail și Inbox în ferestrele adiacente, puteți vedea mare diferențăîn greutate vizuală. Și una dintre cele mai multe sarcini complexe a fost să găsim echilibrul potrivit între conținut și spațiul alb.

Tim Smith

Designer șef la Inbox

Modificând setările grilei, înălțimile liniilor și felul în care arată fontul, designerii Inbox au reușit să obțină o adâncime optimă în interfață, afișând în același timp 12-17 litere, fiecare în interiorul unui card Material Design. Interfața aplicației se adaptează la dispozitivul utilizatorului. De exemplu, fontul din linia „Subiect” se schimbă în funcție de dimensiunea ecranului.

Culori, imagini și pictograme

Utilizarea imaginilor contextuale în grupurile de e-mail este alta trăsătură distinctivă serviciu. De exemplu, dacă utilizatorul plănuiește o călătorie la New York, va vedea cerul Manhattan pe card cu litera corespunzătoare.

Există multe pictograme pe bara de navigare din stânga, culorile acestora corespund cu funcțiile lor din aplicație. Când utilizatorul face clic butonul verde„Finalizat”, fundal panoul de sus devine, de asemenea, verde, indicând faptul că contextul s-a schimbat.

Panoul de sus

O altă sarcină importantă pentru echipă a fost dezvoltarea barei de sus a aplicației. Ideea inițială a fost de a crea un panou transformabil care să nu se întindă pe lățimea ferestrei browserului, ci să se schimbe în funcție de conținut.

Am lucrat vreo duzină diverse opțiuni acest concept până când am ajuns în cele din urmă la modul ecran întreg, pe care o vedeți acum. De asemenea, am creat mai multe concepte de bară de căutare înainte de a alege cel mai bun stil.

Tim Smith

Designer șef la Inbox

Cardurile din Inbox se extind și se contractă, ceea ce înseamnă că formatul titlului se schimbă în funcție de modul în care interacționează utilizatorul prin e-mail. Bara de sus afișează, de asemenea, o bară de căutare și un meniu cu altele Aplicatii Google. Această abordare permite Inbox să rămână adaptiv fără a complica interfața.

Păstrați: mostre navigație adaptivă

Keep este o aplicație de luare de note multiplatformă care extinde și restrânge cardurile pe ecran, concentrând atenția utilizatorului atunci când adaugă o nouă notă. Panoul de jos Navigarea vă permite să creați rapid o notă nouă cu un singur clic.

Implicare, ecrane goale și animație

De obicei, utilizatorul se confruntă cu un ecran gol atunci când nu există conținut pe pagină. În Keep, acest ecran arată ca o pânză goală în care utilizatorul își poate nota rapid ideile.

Spațiul alb încurajează utilizatorul să exploreze elementele de meniu într-un panou care se extinde pentru a afișa diferite filtre reprezentate ca pictograme; un meniu de aspect care vă permite să comutați între listă și grilă și o bară de navigare din stânga unde puteți modifica setările de bază ale aplicației.

Am lucrat mult la animație - cum sunt afișate notele ca flux, cum se mișcă atunci când le deschideți și închideți.

Genevieve Cuevas

Alegere elemente corecte Material: Navigare de jos sau Buton de acțiune plutitor

Concizie și ușurință în utilizare - caracteristici cheie A pastra. În timpul reproiectării aplicației, dezvoltatorii au studiat modelele Material Design și, în cele din urmă, au ales carduri care ajută la diferențierea notelor unele de altele, o bară de navigare din stânga care face ușoară personalizarea aplicației și un meniu contextual care se modifică în funcție de tipul de notă - cum ar fi note cu casete de selectare care afișează un meniu pentru a verifica și modifica elementele din listă.

Luate împreună, aceste elemente creează o claritate și interfata functionala, adaptându-se la o situație specifică. La reproiectarea Keep, creatorii au experimentat cu unele dintre elementele de navigare de bază ale aplicației - în special, au încercat să înlocuiască navigarea existentă cu un buton de acțiune plutitor.

Navigarea inițială v-a permis să creați o notă nouă cu o singură atingere, iar butonul de acțiune plutitor a necesitat două clicuri: unul pentru a afișa opțiunile și al doilea pentru a crea o notă.

Când am introdus butonul plutitor, unii dintre utilizatorii noștri s-au plâns că crearea unei note în două clicuri nu era la fel de convenabilă.

Genevieve Cuevas

Inginer software Google Keep

Mulți utilizatori care au folosit aplicația înainte și au fost obișnuiți cu navigarea cu un singur clic nu au aprobat această modificare. Testând și în cele din urmă respingând butonul plutitor, dezvoltatorii Keep au putut alege soluția care se potrivea cel mai bine intereselor produsului lor.

Un ghid, nu un set de reguli

Echipele Keep și Inbox au folosit liniile directoare ca bază pentru aplicațiile lor. Când au întâlnit un scenariu de utilizator care nu a funcționat, au putut să-și adapteze designul pentru a se potrivi nevoilor utilizatorilor.

Material Design oferă îndrumări bazate pe ani de experiență Google, dar cu ajutorul lui este imposibil să rezolvi absolut orice problemă. Exemplele Keep și Inbox arată că puteți utiliza instrucțiunile de Material Design, modificându-le după cum este necesar pentru produsul dvs.