Design material de la Google - argumente pro și contra. Cele mai bune practici Google Imagini

În articolul nostru de astăzi, vom atinge un subiect care nu a fost încă discutat despre Rusability. De dragul corectitudinii, observăm că în Runet ca atare, interesul pentru acest subiect abia începe să capete amploare, în ciuda faptului că conceptul în sine a luat naștere anul trecut. Aceasta este o direcție de design senzațională și, după cum cred unii, revoluționară, pe care Google a numit-o ca fiind design material.

Designul material nu este atât o abordare nouă pentru construirea de relații între utilizator și mediul virtual, ci mai degrabă o întreagă filozofie care reglementează astfel de relații. La fel ca multe fenomene cu adevărat strălucitoare și proaspete din ultima vreme, designul materialului este o compilație de succes a acelor idei și concepte care fie au fost deja întâlnite separat în diferite produse, fie, după cum se spune, au fost în aer. Dezbaterea despre dacă designul material este o direcție bună este încă în desfășurare, precum și o căutare pretențioasă și scrupuloasă a tot felul de neajunsuri, totuși, poate că nimeni nu neagă că acest concept este o reflectare foarte fidelă a spiritului vremurilor și aspiraţiile utilizatorilor obişnuiţi. Este consistent din punct de vedere estetic, atractiv, intuitiv și, aparent, foarte ușor de utilizat. „Material design is cool” - acest tip de emoție reunește atât un public entuziast, cât și un public cu un ochi mai critic, subliniind deficiențele designului material.

Designul materialului poate fi văzut ca primul pas major și destul de previzibil către unificarea masivă a interfeței și, prin urmare, o experiență de utilizator unificată ca atare. Această caracteristică este cheia designului materialului - este versatilă și consecventă. A doua trăsătură caracteristică a designului materialului este intuitivitatea, care este următorul aspect cel mai important după unificarea atotcuprinzătoare. De fapt, aceste două componente - unificarea interfeței și intuitivitatea maximă - sunt concepute pentru a face din designul materialului un fenomen cu adevărat masiv.

Google a lansat Material Design pentru publicul larg pe 25 iunie 2014 ca design al noului sistem de operare Android, numit ulterior Lollipop. Designul materialului poate fi utilizat pe deplin numai în cadrul creării de aplicații pentru Lollipop, dar unele aplicații pentru Android 4 pot fi, de asemenea, reproiectate în stilul materialului, cu anumite restricții. Principalul și probabil singurul factor care limitează semnificativ libertatea dezvoltatorilor de aplicații pentru Lollipop este compatibilitatea slabă a conceptului de design material cu versiunile anterioare de Android și prevalența încă scăzută a Android 5.1 Lollipop. În orice caz, eliminarea acestei din urmă deficiențe este doar o chestiune de timp.

Android Acadea

Lansarea conceptului de design material a fost asociată cu apariția unui detaliat, accesibil și detaliat Ghidul Google... Pe măsură ce discutăm despre designul materialelor în articolul nostru, ne vom referi în mod regulat la acest tutorial complet și colorat de la designerii Google.

Puncte cheie și principii de bază ale designului materialelor

Întreaga filozofie a designului materialelor se bazează pe patru principii fundamentale și ușor de înțeles:

1. Suprafeţe. Încorporate sub formă de carduri create din „hârtie digitală”, astfel de suprafețe respectă pe deplin legile lumii fizice, au un răspuns tactil și oferă un feedback puternic împreună cu o intuiție ridicată.
2. Tipografia sensului poligrafic. În loc să reinventezi roata, de ce să nu profiti de mai mult de un secol de experiență în tipărire? Avand in vedere ca suprafata originala este acum reprezentata de straturi de hartie virtuala, practic tangibila, este destul de logic sa aplicam informatii pe aceasta in conformitate cu cele mai bune mostre de produse de tipar. Mai exagerat, Google a adaptat regulile tipografiei „reale” pentru ecranele mobile.
3. Animaţie. Animația în designul material trebuie să se supună legilor fizice și, prin urmare, așteptărilor intuitive ale utilizatorului. Relația dintre obiectele în mișcare, influența lor unul asupra celuilalt, felul în care apar și se mișcă - toate acestea ar trebui să fie reale, logice și previzibile.
4. Design adaptiv. Aspectul principal despre care am vorbit la începutul articolului. Designul responsive își propune să unifice experiența utilizatorului și să o facă consistentă pe toate platformele.

Combinând aceste principii destul de simple și evidente, Google a creat un sistem puternic și foarte logic, care, cel mai probabil, va fi folosit de noi cel puțin în următorii cinci ani. Să aruncăm o privire mai atentă asupra fiecăruia dintre cele patru aspecte ale designului materialului.

Suprafețele, proprietățile și funcțiile lor

Însăși materialitatea conceptului Google este concentrată în proprietățile suprafețelor. Structura interfeței în sine este cât se poate de realistă - are o adâncime limitată de grosimea dispozitivului. De exemplu, un dispozitiv cu grosimea de 1 cm după designul materialului va conține o lume interioară de aceeași grosime. Acesta este foarte asemănător cu un acvariu subțire, care are un perete din spate și o sticlă frontală, dar în locul vieții marine, suprafețe care seamănă cu foi de hârtie plutesc în acest acvariu și sunt distribuite pe toată grosimea acvariului în straturi. Și, la fel ca și locuitorii subacvatici, aceste carduri de suprafață sunt complet supuse legilor fizice - uneori se pare că sunt mai mult decât reale, închise între spatele smartphone-ului și sticla display-ului.

Cutaway cu design material

AxăZin lumematerial proiecta responsabil pentru volumul interfeței

În lumea designului materialelor, suprafețele se află la diferite niveluri de adâncime. Și dacă în designul plat, care este unul dintre predecesorii materialului, nu a existat nicio urmă de volum, în designul materialului, aproape imperceptibil, umbrele ușoare formează o adâncime incredibil de realistă.

Cum să afișați umbre în designul materialului

Imaginați-vă că aveți bucăți de hârtie simplă pe birou, tăiate în dreptunghiuri de diferite dimensiuni. Deplasându-le peste masă și suprapunându-le, veți vedea clar care dintre cărțile de hârtie se află deasupra celeilalte. Acest lucru se datorează umbrei ușoare aruncate de marginile hârtiei. În designul materialelor, dezvoltatorii au recreat complet acest principiu, iar distribuția cardurilor de hârtie digitale la diferite niveluri, atunci când o carte se suprapune pe alta, corespunde pe deplin ierarhiei de conținut - suprafața peste alta și aruncarea unei umbre asupra acesteia este în prezent. cea principală, asupra acesteia se concentrează atenția utilizatorului.

Suprafața prioritară iese în prim-plan, aruncând o umbră pe „frunza” de jos

Suprafața în sine este într-adevăr un plan cu o anumită formă (în cele mai multe cazuri - dreptunghiulară), care este capabil să arunce o umbră. Suprafața servește drept platformă pentru conținut, o bucată de hârtie goală pe care vor apărea mai târziu alte elemente. Nimic mai mult nu se înțelege prin suprafață în designul materialului - bucățile de „hârtie digitală” nu au și nu pot avea nicio textură sau tranziții de gradient.

Caracteristicile tipografiei în designul materialelor

După cum am menționat, tipografia în designul materialelor este la fel de „reală” ca suprafețele. Aceasta înseamnă că ea folosește aceleași reguli și abordări care sunt folosite în compoziție. În exemplele pe care Google le-a prezentat, puteți găsi cele mai bune exemple de tipografie clasică în execuție virtuală.

Exemple de tipografiedesign material

Fonturi

Fontul implicit folosit în Android pentru o lungă perioadă de timp este Roboto. În noul sistem de operare Lollipop și în Material Design, este folosit și ca font principal. Pe lângă Roboto, aplicațiile Android pot folosi și fontul Noto, care vizează limbi pentru care Roboto nu a fost dezvoltat. În ciuda stilului general al aplicațiilor Android și a recomandărilor de fonturi date în ghid, este destul de acceptabil, în unele cazuri, să utilizați propriul font de marcă în locul Roboto, conceput pentru a forma asociațiile adecvate pentru utilizator.

FontRoboto

Una dintre cele mai notabile caracteristici de tipografie din Material Design este utilizarea unor dimensiuni contrastante ale fonturilor. Această tehnică clasică poate fi văzută în multe exemple de la Google - titlurile de pe ecrane sunt tastate la dimensiuni foarte mari și, datorită acesteia, se evidențiază semnificativ de restul textului. Într-o anumită măsură, datorită titlurilor mari, vizibile de la distanță, utilizatorul poate naviga cu ușurință între ecranele aplicației și poate înțelege rapid esența conținutului curent. În plus, titluri ca acestea arată foarte bine.

Tipografia de contrast în acțiune

Locația conținutului sau principiul aspectului înmaterial proiecta

Modul în care conținutul este plasat în conceptul de design material respectă, de asemenea, principiile designului tipărit. Componenta principală și de formare a stilului a aspectului virtual în proiectarea materialelor este aranjarea câmpurilor. Marginile și umplutura sunt aranjate în așa fel încât accentul principal al utilizatorului să fie pe conținutul situat în mijloc în coloana principală, iar accesul ușor și rapid la elemente suplimentare este posibil datorită marginii largi din stânga. Un principiu similar poate fi observat pe paginile multor publicații tipărite.

Structura și aspectul marginilor în proiectarea materialelor

icoane

Iconografia folosită în Material Design este o dezvoltare logică a ideii de simplificare maximă care poate fi văzută în versiunile anterioare de Android. Google descrie pictogramele pentru material ca fiind simple, clare și prietenoase. În același timp, ideea de materialitate poate fi extinsă și la pictograme - Google însuși întruchipează în mod constant ideea de material în pictogramele produselor sale. De exemplu, pictograma plicului de hârtie Gmail provine de la omologul său real. Într-un mediu de design de materiale, plicul simplificat pare aproape la fel de real ca prototipul „adevărat” - pictograma arată umbre distinctive care reprezintă curbele și structura fizică a plicului de hârtie pliat.

Un prototip virtual al unui plic de hârtie și o pictogramă gata făcutăGmail

Este de remarcat faptul că o abordare materială a creării pictogramelor este permisă numai pentru acele pictograme care simbolizează un anumit produs - cum ar fi Gmail. Altele, pictogramele de sistem (sau pictogramele UI) care umple aplicațiile sunt de natură mai puțin materială. Sunt cu adevărat minimale, uniforme și simple. Datorită simplității și simbolismului lor, sunt lizibile chiar și atunci când sunt mult reduse. Aceste icoane sunt dominate de forme geometrice.

icoaneAndroid Acadea- ce poate fi mai minimalist și simplu?

Pentru dezvoltatori, Google oferă un set impresionant de pictograme Material Design. În această colecție puteți găsi, poate, orice pictograme necesare pentru crearea aplicațiilor cu design material. Setul de pictograme Google pentru design de materiale este disponibil pe GitHub. Aș dori să menționez, de asemenea, resursa materialdesignicons.com, unde puteți găsi nu numai icoanele altor autori, dar și propuneți dezvoltate independent.

Filosofia culorii

Culoarea joacă un rol mai important în noul design Lollipop decât în ​​versiunile anterioare de Android. Chiar și în acest aspect al designului, materialitatea despre care vorbim pe parcursul articolului este remarcabilă. Google însuși manifestă separat o nouă politică de culoare, evidențiind surse de inspirație precum arhitectura modernă, indicatoarele rutiere și chiar bandă pentru trotuar. În același timp, combinații luminoase de culori create de om în designul materialului coexistă cu nuanțe naturale, atenuate. În multe privințe, această abordare este din nou de acord cu canoanele de tipărire, conform cărora culoarea are un efect special asupra percepției informației de către cititor.

Ideea principală de a lucra cu culoarea în designul materialului este separarea nuanțelor în principal și accent. Google sugerează utilizarea a 500 de nuanțe diferite ca culori primare, alcătuind împreună paleta Primară. Toate celelalte culori care nu sunt incluse în această paletă pot fi folosite ca culori de accent.

Exemple de culori primare dinPrimarpalete și culori de accent aferente (afișate în casetele de jos, etichetate ca „A„Înainte de numărul umbrei)

La proiectarea interfeței, Google sugerează limitarea acesteia la maximum trei culori din paleta principală și o culoare de accent. Culorile primare sunt aplicate elementelor precum bara de acțiuni, precum și (ca și în cazul albului) aplicate pe suprafața care conține conținutul textului principal. Este de remarcat faptul că, colorând bara de acțiuni a aplicației cu una dintre culori, trebuie să colorăm bara de stare cu o nuanță mai închisă de aceeași culoare:

stare baria culoareacțiune bardar se remarcă totuși printr-o nuanță mai bogată, mai închisă

Culorile cu adevărat vibrante și atrăgătoare în designul materialului sunt folosite pentru a crea accente. Elementele active ale aplicațiilor au nevoie de astfel de accente de culoare, în primul rând, desigur, butonul de acțiune plutitor. În plus, este necesar să pictați diverse glisoare și comutatoare în culori de accent strălucitoare.

Elementele de acțiune, cum ar fi butonul plutitor și glisoarele, sunt extrem de intuitive datorită în mare parte utilizării culorilor de accent care determină utilizatorul să ia măsuri

Animaţie

Mișcarea pătrată suprematistă, Kazimir Malevici (1920) șiPlin de înțeles Mişcare, Google Material Proiecta (2014)

Animația în designul materialelor este unul dintre cele mai interesante aspecte ale acesteia. Datorită animației detaliate care respectă legile fizice ale lumii reale, dispozitivele cu Android 5 la bord sunt atât de captivante și îl fac pe utilizator să-și dorească să se joace cu ele ore în șir, mai ales în prima dată după întâlnire. Funcția animației în designul materialelor este de a arăta în mod constant utilizatorului consecințele acțiunilor sale. Animația atrage privirea și într-un mod vizual, elocvent, arată utilizatorului exact ce se întâmplă la un moment dat.

La fel ca toate celelalte componente ale designului material, animația care respectă legile fizice nu este ceva fundamental nou - dezvoltatorii tocmai au adaptat regulile animației clasice la mediul virtual al sistemului de operare.

Baza animației de design material este interacțiunea avioanelor, bucățile de „hârtie digitală” despre care am vorbit mai devreme. Aceste avioane, care se deplasează la diferite niveluri în lumea lor, limitate de peretele din spate al smartphone-ului și de sticla ecranului, se pot întâlni, deplasa și deplasa unul pe altul, ies în prim-plan la comanda utilizatorului, crescând în dimensiune și umplând ecran.

La fel ca în animația clasică, toată mișcarea avioanelor este guvernată de reguli stricte, datorită cărora are loc o imitație exactă a mișcării suprafețelor în lumea reală.

În primul rând, orice obiect din lumea reală are masă și, prin urmare, o anumită rezistență. Pentru a deplasa un obiect, trebuie aplicată forță asupra acestuia. În acest caz, obiectul (în cazul nostru, suprafața) nu va începe să se miște imediat - din cauza masei și rezistenței sale, se va accelera de ceva timp, iar apoi, după ce mișcarea principală cauzată de aplicarea forței se termină, va încetini și o vreme, mișcându-se deja datorită inerției. Prin aplicarea acestor legi simple, obținem o interfață cu mișcări de suprafață incredibil de realiste.

Suprafețele în mișcare au capacitatea de a se mișca în mod natural, cu rezistență previzibilă la mișcare.

Mutați stratul de hârtie digitală în galerie

În al doilea rând, în designul materialului, un obiect nou apare sau părăsește ecranul foarte eficient. La fel ca în lumea reală, în mediul de design material, obiectele nu apar de nicăieri și nici nu merg nicăieri. În OS Lollipop, apariția unui nou obiect în prim-plan este asociată cu metamorfoze curioase - obiectul nu apare cu adevărat dintr-o dată de nicăieri, ci alunecă, întinzându-se treptat și dobândind forma unei suprafețe. În acest caz, nu are loc respectarea proporțiilor, deoarece o creștere sau o scădere proporțională și simetrică a suprafeței va da impresia de apropiere sau îndepărtare, în timp ce trebuie să indicăm apariția pe ecran a unei noi bucăți de „hârtie digitală” , separate si independente.

Pentru a realiza acest nou efect de obiect, designul material oferă două abordări, cu grade diferite de dovezi. Cea mai vie și neechivocă desemnare a aspectului unei noi suprafețe este realizată cu ajutorul unei picături crescânde - după ce atingeți cu un deget și chemați un obiect, suprafața începe să se răspândească pe ecran ca un val.

O picurare care formează o nouă suprafață de lucru - unul dintre cele mai vizibile efecte în designul materialului

Efectul de suprafață curgătoare poate fi foarte delicat și colorat

O altă modalitate de a arăta utilizatorului principiul tranzițiilor este de a crea o creștere asimetrică, neuniformă a unei suprafețe dreptunghiulare cauzată de utilizator. Dreptunghiul de suprafață este întins disproporționat față de forma dorită. Această tehnică vă permite să atrageți atenția utilizatorului cu o mișcare activă, neliniară și să îi atrageți atenția asupra principiului apariției unor noi suprafețe.

Un exemplu de animare a pictogramelor de bază înAndroid Acadea

omniprezentClipoci-efectul

Efectul de ondulare, și anume mișcarea ondulată a umbrelor în care degetul atinge ecranul dispozitivului, este un alt aspect important al feedback-ului. În Lollipop, efectul Ripple este aplicat aproape peste tot. Când atingeți interfața unui nou sistem de operare, valurile diverg în majoritatea cazurilor, fie că este vorba de apăsarea unui buton sau de răsfoirea unei galerii de fotografii. Tehnic vorbind, de îndată ce sistemul primește informații de intrare (atingând afișajul cu degetul), sistemul confirmă imediat acceptarea acestor informații printr-o neclaritate sub formă de undă de „cerneală digitală”.

Clipoci-efectul care apare atunci când atingeți rapid ecranul cu degetul

Clipoci-efect care apare atunci când se încearcă mutarea unei imagini în interiorul galeriei

Aspectul tehnic al animațieimaterial proiecta sau plic natural

După cum am spus deja, în lumea reală, pentru a scoate un obiect dintr-o stare de repaus, trebuie să i se aplice un efort; în acest caz, faza principală a mișcării obiectului va fi precedată de accelerația sa, la fel cum o oprire completă va fi precedată de decelerare. Influențând constant lumea materială, suntem obișnuiți cu această stare de lucruri, așa că orice alte modalități de deplasare a obiectelor, precum accelerarea instantanee și oprirea bruscă fără inerție, ni se par nefirești, ciudate și, de multe ori, enervante. Având în vedere acest aspect, creatorii de material design au făcut o treabă bună pe „fizica” animației, aducând-o cât mai aproape de viața reală.

Într-un mediu de design material, obiectele scoase din starea de odihnă rapid (dar nu instantaneu!) Accelerează și încetinesc ușor. Acest tip de mișcare și animație este plăcut de interacționat, deoarece corespunde experienței noastre dezvoltate în procesul de comunicare cu lumea reală.

Graficul de mișcare al obiectelor animate: accelerare rapidă și decelerare lină

Design adaptiv

Cel mai important aspect cheie al designului materialului. Filosofia de design material presupune o unificare completă a experienței utilizatorului. Cu alte cuvinte, utilizatorul nu ar trebui să se confrunte cu versiuni diferite ale aceleiași aplicații folosind gadget-uri diferite. Experiența utilizatorului ar trebui să fie aceeași pentru un desktop și pentru un smartphone sau tabletă. Singurele diferențe acceptabile și obiective sunt dimensiunile și proporțiile diferite ale elementelor interfeței aplicației. În caz contrar, versiuni diferite ale aceleiași aplicații ar trebui să formeze o experiență de utilizator complet identică.

Google a fost unul dintre primii care au recunoscut nevoia de a unifica și de a dezvolta o experiență de utilizator consistentă. În practică, această realizare s-a transformat în așa-numitul proiect „Kennedy”, când în 2011 compania a început să dezvolte un singur tip de interfață pentru toate aplicațiile sale. Estetica Google și UX au fost bune, dar a existat încă un decalaj între versiunile desktop și mobile ale produselor lor pentru Android. De fapt, designul materialului în sine este următoarea încercare după proiectul Kennedy de a crea o interfață cu adevărat unificată.

Simplitatea vizuală a materialului ne-a permis să dezvoltăm o serie de reguli și metode care facilitează adaptarea aplicațiilor create în stilul designului materialului pentru diferite platforme.

În primul rând, aplicațiile realizate în conformitate cu conceptul de proiectare a materialelor au o structură de bloc. Analizând interfața unor astfel de aplicații, puteți observa că aceasta se caracterizează printr-o distribuție clară a blocurilor pe o grilă modulară. În loc de un design de interfață variat, nu întotdeauna evident și confuz, obținem un fel de constructor, ale cărui părți individuale pot fi relativ ușor mutate și adaptate la un anumit afișaj.

Grilă modulară și blocuri distribuite

Datorită blocurilor, fiecare dintre ele având o limită obiectivă de extindere sau contracție, putem face interfața aplicației bine lizibilă și ușor de utilizat pe orice ecran. Datorită marjei de extindere și contracție, fiecare dintre blocurile de aplicație are faptul că designul materialului oferă un instrument cu adevărat eficient pentru unificarea completă a interfețelor diferitelor produse software.

Interfață proiectată în conformitate cu principiilematerial proiecta, universal pentru orice ecran

În al doilea rând, adaptarea interfeței aplicației pentru diferite dispozitive este legată de cantitatea de informații afișate pe ecran. Evident, cu cât ecranul este mai mic, cu atât informațiile mai puțin detaliate putem demonstra în cadrul acestuia. În acest caz, trebuie să transferăm o parte din conținut pe ecrane separate sau să-l ascundem în spatele unor elemente suplimentare - această practică este tipică în special pentru aplicațiile adaptate pentru smartphone-uri.

Elementele

Buton plutitor în design normal sau mini

Plutitoare acțiune buton. Butonul plutitor este unul dintre cele mai distinctive și mai recunoscute elemente ale designului materialului. Ea este pe care utilizatorul o observă în primul rând. Butonul plutitor este o modalitate foarte bună de a împinge utilizatorul la o acțiune cheie, cu ajutorul său, o persoană are acces rapid la acele funcții care sunt cele mai relevante pentru el în acest moment. Butonul tinde să apară în diferite părți ale ecranului și, în ciuda faptului că se găsește cel mai adesea în colțul de jos, poate fi localizat oriunde pe ecran.

Trebuie reținut că un buton plutitor poate fi asociat doar cu o acțiune cheie, de bază, efectuată într-o anumită aplicație. De exemplu, în managerul de fișiere, un buton plutitor poate însemna adăugarea de fișiere sau crearea unui folder nou, într-o aplicație de mesagerie sau de e-mail - crearea unui nou mesaj sau scrisoare, într-o rețea socială - un semn „like” și așa mai departe. Acțiunea principală este întotdeauna legată de un buton plutitor, deși există unele limitări.

Nu orice ecran are nevoie de un buton plutitor. Unele acțiuni sunt mai ușor de realizat prin interacțiunea directă cu conținutul aplicației. Cel mai tipic exemplu al unei astfel de excepții este galeria foto. Prin vizualizarea fotografiilor este mai ușor să intrați imediat în contact cu imaginile, fără intermediari sub forma unui buton plutitor.

În timp ce se află în galerie, utilizatorul nu are nevoie de un buton plutitor - acțiunea principală este selectarea și vizualizarea fotografiilor

Butonul plutitor are întotdeauna forma unui cerc care aruncă o umbră mică și este aceeași bucată de hârtie digitală ca și alte suprafețe. Butonul are o culoare de accent strălucitoare care nu se suprapune cu culorile principale din primar paletă, astfel încât rămâne întotdeauna elementul principal și cel mai vizibil de pe ecran. De asemenea, dominanța sa este subliniată de poziția sa față de alte straturi ale interfeței - butonul plutitor este întotdeauna deasupra și nu poate fi suprapus de alte elemente ale aplicației.

Buton de acțiune plutitorv acțiune

Cel mai bine, un buton plutitor se caracterizează prin faptul că poate fi asociat doar cu acțiuni pozitive, cum ar fi crearea, adăugarea sau mutarea în navigare. Asocierea unui buton plutitor cu acțiuni distructive sau atipice - ștergerea, reglarea volumului sau apelarea meniului de setări - este ilogică și nerezonabilă din punct de vedere psihologic.

Acțiuni pozitive și negativeplutind acțiune buton

Și, în sfârșit, ultimul punct important - poate exista doar un singur buton plutitor pe ecran. Având mai multe butoane de acțiune plutitoare în același ecran, distruge complet întregul punct al unui buton plutitor - efectuând o acțiune cheie într-o aplicație.

App barînlocuindacțiune bar

Bara de acțiuni s-a schimbat semnificativ în comparație cu versiunile anterioare. În Android Lollipop, funcționalitatea sa a crescut semnificativ, iar acum elementul actualizat se numește bara de aplicații. Datorită modificărilor, noua bară de aplicații este un instrument pentru controlul complet al utilizatorului asupra aplicației și, așa cum este cazul altor aspecte ale designului materialului și în special al noului sistem de operare Lollipop, bara de aplicații este complet intuitivă și ușor de înțeles.

Bara de aplicații nu este limitată la o dimensiune fixă ​​- acum poate fi mărită proporțional, plasând pe ea tot conținutul necesar și controalele aplicației, cum ar fi meniuri derulante, filtre, un formular de căutare și așa mai departe.

Versiunea de bază a actualizatăacțiune barconţinând elementele necesare controlului aplicaţiei

Nuanțeaplicația barpropus deGoogle

Starea actuală a dezvoltării aplicației Android Lollipop și AppCompat v21

Principala problemă a trecerii la Material Design este compatibilitatea slabă a interfețelor noi cu versiunile mai vechi de Android. Există atât de mulți dezvoltatori care sunt reticenți în a sacrifica această compatibilitate și, din acest motiv, distribuția aplicațiilor bazate pe principiile designului materialului rămâne destul de limitată. Această stare de lucruri va persista ceva timp, în timp ce majoritatea covârșitoare a dispozitivelor Android rulează pe versiuni mai vechi ale acestuia.

Cu toate acestea, pentru acei dezvoltatori care doresc să-și păstreze aplicațiile compatibile cu versiunile mai vechi de Android, Google oferă un set de instrumente care le permit să utilizeze elemente de design material în aplicațiile pentru predecesorii lui Lollipop. În blogul aferent, dezvoltatorii sunt încurajați să se familiarizeze cu biblioteca AppCombat, cu care puteți adăuga elemente materiale la versiunile mai vechi de Android.

Una dintre caracteristicile mai interesante este echiparea unei aplicații care rulează pe versiunile anterioare de Android cu o bară completă de aplicații, care este un element de design esențial în Lollipop. Împreună cu noul widget, aplicațiile vechi primesc toată funcționalitatea avansată care distinge bara de aplicații de bara de acțiuni anterioară.

Widgetaplicația bar

O privire critică asupra Material Designului

Cu toată noutatea evidentă și implementarea cu succes, există câteva dezavantaje ale designului materialului (dacă se dorește). Deși, ca în toate problemele similare, fiecare decide singur dacă punctele enumerate sunt dezavantaje. Trebuie remarcat faptul că, în prezent, susținătorii conceptului de design material reprezintă în continuare majoritatea celor care continuă să discute energic despre cea mai recentă creație a Google. Cu toate acestea, publicul mai sceptic face următoarele plângeri cu privire la interfața Lollipop.

Microsoft Apartament Proiectaa fost mult mai practic și mai reușitmaterial proiecta. După cum am spus mai înainte, designul materialului nu este altceva decât o compilație de succes de abordări și tehnici care au fost deja dezvoltate și utilizate de altcineva. Un concept care a fost adoptat de dezvoltatorii de design de materiale este așa-numitul design plat al Microsoft. Însăși ideea de a abandona bibelourile în favoarea unui spațiu digital plat a apărut pentru prima dată în produsele Microsoft. Designul plat a reprezentat o respingere completă a skeomorfismului în toate formele sale. Designul materialului este o versiune atenuată a acestui concept prin simularea hârtiei digitale și a cernelii digitale. Designul material a încorporat tot ce este mai bun din ambele lumi - spații plate și minimaliste din design plat și un anumit volum animat din skeomorfism.

Microsoft Flat Design

Cu toate acestea, nu toată lumea vede designul material ca fiind o versiune mai bună și mai prietenoasă a designului plat. Mulți utilizatori și dezvoltatori consideră că animația și volumul suficient de bogate în designul materialelor sunt o exagerare, distragând atenția utilizatorului și încărcându-l cu informații vizuale inutile. De asemenea, designul materialului este acuzat de exigențele mari la resursele care sunt folosite pentru a anima toate elementele.

Utilizarea ineficientă a zonei ecranului, prea mult spațiu alb. Abundența notoriului „aer” în designul materialelor (precum și în designul modern în general) este subiectul celor mai aprinse dezbateri între designeri, dezvoltatori și utilizatori obișnuiți. Problema spațiilor goale în interfețele moderne este într-adevăr destul de controversată, deoarece atitudinea față de cantitatea de spațiu liber de pe ecran depinde, totuși, de preferințele individuale. Mulți utilizatori doresc să vadă toate (sau majoritatea) informațiilor necesare în fața lor, încercând să nu recurgă la derulare și întoarcere. Astfel de utilizatori sunt sincer enervați de indentări mari și decalaje dintre conținut, precum și de necesitatea de a utiliza în mod constant derularea. Conținut grupat, dispersat inteligent pe întreaga zonă a ecranului - alegerea lor.

Un alt tip de utilizator, în schimb, salută conținutul rar, prezența „aerului” și spațiul liber curat. Nu sunt împovărați de necesitatea de a folosi mai des derularea și de a întoarce paginile virtuale și consideră prezența indentărilor mari ca o condiție necesară pentru evidențierea rapidă și ușoară a elementului dorit din masa generală de conținut. În plus, acești utilizatori consideră „aerul” justificat și plăcut din punct de vedere estetic.

De exemplu, să comparăm interfața meniului Setări pe Android și iOS:

Comparația interfețeloriOSșiAndroid- triumful percepției subiective. Unii utilizatori iau în considerare locația conținutului îniOSmai rațional și mai justificat - totul este la îndemână, în timp ce înAndroideste nevoie de un efort suplimentar pentru a găsi elementul de meniu dorit. La rândul său, o altă parte a utilizatorilor găsește interfațaiOS prea aglomerat și greu de înțeles, iar interfațaAndroid- mai ușor și mai accesibil.

Discuția despre meritele și dezavantajele designului de materiale este încă în desfășurare, utilizatorii și dezvoltatorii acordând atenție punctelor controversate și deficiențelor și căutând modalități de a folosi cât mai eficient conceptul de proiectare a materialelor. În viitorul foarte apropiat, vom vedea ce soartă așteaptă designul material - va rămâne un mod ambiguu impus pentru o vreme de gigantul Google, va deveni doar un alt mare experiment în domeniul interfețelor sau va fi un noua etapă care va ridica arta UI la un nou nivel.

Concluzie

Dacă intenționați să vă implicați serios în designul materialelor și doriți să vedeți întregul concept de material în întregime, atunci trebuie să studiați un aspect simplu, accesibil și vizual. Ghidul Google... Sperăm că scurta noastră prezentare generală va oferi cititorilor interesați o introducere într-un domeniu atât de promițător precum designul materialelor. Înțelegând filozofia noului proiect Google, nu numai că vă puteți implementa ideile în acest format proaspăt și practic, ci și, probabil, să rafinați și să îmbunătățiți însuși conceptul de material, dezvoltându-vă propriile „cipuri” și îmbunătățind relația utilizatorului cu interfata digitala.

Evanghelistul Google Design Mustafa Kurtuldu despre aplicarea 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 linii directoare pentru a vă ajuta să realizați un design UX conștient atunci când creați o interfață de aplicație.

Dar dacă aceste principii nu funcționează pentru un anumit produs? Și ce fac designerii Google atunci când proiectează un produs care depășește regulile clasice?

Orientările materiale sunt receptive. În acest articol, vom arunca o privire la două aplicații Google, Keep și Inbox, pentru a înțelege cum acestea nu numai că se abate de la anumite reguli, ci și modelează noi principii de Material Design.

Inbox: Grilă modulară

Dezvoltarea unui nou serviciu de e-mail este o sarcină foarte ambițioasă pentru Google, având în vedere piața Gmail deja înrădăcinată. Scopul Inbox a fost să aprofundeze designul interfeței și să creeze o experiență unică de utilizator și o identitate corporativă, jucându-se după noile reguli de Material Design.

Când echipa Inbox pregătea proiecte preliminare, conceptul de Material Design era încă în dezvoltare. Acest lucru a oferit Inbox o oportunitate excelentă de a stabili standardele de design material, abordând în același timp problema profunzimii și volumului în interfața de utilizare.

Adâncime

Designul original al Inbox-ului nu a fost suficient de flexibil - spațiul din grilă permitea doar șapte litere să se potrivească pe un ecran de 13 inchi. A fost prea puțin, mai ales în comparație cu Gmail, care poate conține 16-20 de e-mailuri.

Dacă deschideți Gmail și Inbox în ferestre adiacente, puteți vedea o mare diferență de greutate vizuală. Și una dintre cele mai mari provocări a fost găsirea echilibrului potrivit între conținut și spațiul alb.

Tim Smith

Designer șef 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ă a interfeței în timp ce afișează 12-17 e-mailuri, fiecare în interiorul unui card Material Design. Interfața aplicației se adaptează la dispozitivul utilizatorului. De exemplu, fontul din „linia Subiect” se modifică în funcție de dimensiunea ecranului.

Culori, imagini și pictograme

Utilizarea imaginilor contextuale în grupuri de litere este o altă caracteristică distinctivă a serviciului. De exemplu, dacă un utilizator 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 pe butonul verde Terminat, fundalul barei de sus devine și el verde, indicând faptul că contextul s-a schimbat.

Panoul de sus

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

Am lucrat la aproximativ o duzină de variante diferite ale acestui concept până când în cele din urmă am venit cu modul ecran complet pe care îl vedeți acum. De asemenea, am creat câteva concepte de bară de căutare înainte de a alege cel mai bun stil.

Tim Smith

Designer șef Inbox

Cardurile din Inbox se extind și se micșorează, ceea ce înseamnă că formatul antetului se modifică în funcție de modul în care utilizatorul interacționează cu e-mailul. Bara de sus afișează, de asemenea, o bară de căutare și meniuri cu alte aplicații Google. Această abordare permite Inbox să rămână receptivă fără a complica interfața.

Păstrați: mostre de navigare receptive

Keep este o aplicație de luare de note multiplatformă care extinde și restrânge cardurile pe ecran, menținând atenția utilizatorului concentrată atunci când adaugă o nouă notă. Bara de navigare de jos 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, ecranul arată ca o pânză goală în care utilizatorul își poate nota rapid ideile.

Spațiul alb încurajează utilizatorul să exploreze elementele de meniu de pe panou, care se extinde pentru a afișa diverse filtre prezentate ca pictograme; meniul de marcare, pe care îl puteți folosi pentru a comuta între listă și grilă, și bara de navigare din stânga, unde puteți modifica setările de bază ale aplicației.

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

Genevieve Cuevas

Selectarea corectă a elementelor de material: navigare în jos sau buton de acțiune plutitor

Concizia și ușurința în utilizare sunt caracteristicile cheie ale Keep. În timpul reproiectării aplicației, dezvoltatorii au studiat șabloanele Material Design și au ajuns să aleagă carduri care ajută la distingerea notelor unele de altele, o bară de navigare din stânga care face mai ușoară personalizarea aplicației și un meniu contextual care se modifică în funcție de tipul de notă. - ca notele cu casete de selectare care afișează meniuri pentru a verifica și modifica elementele din listă.

Împreună, aceste elemente creează o interfață clară și funcțională, adaptându-se la o situație specifică. În timp ce reluau Keep, creatorii au experimentat cu câteva elemente de bază ale navigației aplicației - în special, au încercat să înlocuiască navigarea existentă cu un buton de acțiune plutitor.

Navigarea originală 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țiuni și unul 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 atât de convenabilă.

Genevieve Cuevas

Inginer software Google Keep

Mulți utilizatori care au folosit aplicația înainte și sunt obișnuiți să navigheze cu un singur clic nu au aprobat această modificare. După ce au testat și în cele din urmă au abandonat butonul plutitor, dezvoltatorii Keep au putut alege soluția care se potrivește cel mai bine intereselor lor de produs.

Leadership, nu un set de reguli

Echipele Keep și Inbox au folosit ghiduri ca bază pentru aplicațiile lor. Când au întâlnit un script personalizat 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 este imposibil să rezolvi absolut orice problemă cu acesta. Exemplele Keep și Inbox arată că puteți utiliza liniile directoare Material Design și le puteți modifica pentru a se potrivi cu produsul dvs.

Ce este designul materialului? Acesta este un set de stiluri și grafice dezvoltate de Google, precum și linii directoare și reguli pentru aderarea la aceste stiluri. Designul materialului a fost prezentat pentru prima dată la o conferință pentru dezvoltatori, Google I/O, în vara anului 2014. Stilul se bazează pe formatul de „cărți” și „blocuri” - forme simple și laconice și elemente grafice, precum și simplitatea generală și prospețimea designului - culori calme, plictisitoare, lipsă de volum, detalii mici și detalii în general. Prima „apariție” pentru design de materiale a avut loc odată cu lansarea serviciului Google Now, iar stilul a devenit oficial baza pentru sistemul de operare Android destul de recent, în versiunea 5.0, cunoscută și sub numele de Android Lollipop.

În opinia mea, designul materialului are câteva avantaje foarte importante față de toate încercările anterioare ale Google de a aduce designul sistemului său de operare și a programelor pentru acesta într-o singură formă, dar și unele dezavantaje. În acest scurt articol voi încerca să prezint punctul meu de vedere asupra noului limbaj de design de la Google.

Design material - profesioniști

Primul și cel mai important argument în favoarea noului stil, în opinia mea, este execuția acestuia. Nu vreau să par ca un urător al tehnologiei Apple și să abordez din nou, dar în acest caz nu este înfricoșător, pentru că îmi exprim doar punctul de vedere. Deci, în opinia mea, actualizarea iOS la versiunea a șaptea și actualizarea Android la versiunea a cincea sunt, după cum se spune, două diferențe mari.

În cazul Apple, am văzut transferul obișnuit al graficii anterioare într-o vedere plată, nicio idee nouă, nicio dorință de a aduce ceva proaspăt - am luat doar interfața existentă, am stors-o cu o apăsare, am redesenat pictogramele și am adăugat curcubeu imagini de fundal. Imaginile de fundal din noul iOS 7 și efectele de transparență ale meniului sunt un indicator al lipsei de gust și lipsei de dorință a designerilor de a face ceva bun și amabil, așa cum mi se pare. În cei „șapte” toată lumea a fost pur și simplu șocată de efectele frumoase de animație și de luminozitatea generală a noii interfețe. Mi se pare că nimeni nu s-a gândit cu adevărat dacă ar fi convenabil, pentru că altfel designerii Apple ar fi acordat mai multă atenție aspectelor funcționale, și nu designului curcubeu.

Nuanța de notificare, numită de sus, și panoul de control, se numește de jos, sunt exemple ilustrative ale unui „upgrade” inutil în iOS7. Prima nu a fost clarificată - toate notificările sunt aglomerate și sunt prea multe, a doua se face la jumătate, comutatoarele vă permit să porniți / opriți interfețele, dar nu mergeți la configurația lor și la alegerea retelelor

Android 5.0 a fost actualizat foarte serios și în ceea ce privește grafica față de 4.x tocmai datorită transferului sistemului de operare la material design. Și, la prima vedere, schimbările de aici sunt similare cu cele care au avut loc în iOS - schimbarea finală de stil la un design general plat, mai ușor, simplitate externă. Dar apoi încep diferențele. În Android 5.0, interfața este mai holistică datorită designului materialului - totul este realizat într-un stil calm, nimic nu iese în evidență și nu arată colorat sau prea luminos. Principiul principal al designului materialului exclude prioritatea efectelor grafice în interfață față de caracterul practic al acesteia? si e foarte misto.

Pentru a rezuma primul argument - designul materialului pare deja foarte holistic, tocmai asta i-a lipsit sistemului de operare de la Google și KO - integritate și comunitate. Când, deschizând fiecare program individual, fie că este vorba de contacte, browser, client de e-mail sau altceva, vezi aceeași animație, aceeași paletă de culori și elemente pur și simplu recunoscute. Datorită acestui fapt, noul sistem de operare este mai ușor de obișnuit și este doar plăcut să lucrezi cu el.

Al doilea argument este că dacă ați folosit deja un smartphone pe Lollipop sau ați văzut capturi de ecran, atunci probabil ați observat că interfața s-a mărit vizual. Mărirea interfeței are loc în dispozitivele tactile de mult timp. Dacă comparăm primele versiuni de Android cu „atunci” Windows Mobile, este evident că Android era mai mare și mai simplu, pe ecran erau mai puține informații, dar era și mai convenabil operarea smartphone-ului. În designul materialului, unele elemente au fost înlocuite cu „carduri”, fonturile, dimensiunile pictogramelor și liniilor au fost ușor mărite, interfața în ansamblu a devenit mai mare. Îmi place, probabil, pentru că îmbătrânesc, glumesc cu glume, dar cu cât sunt mai în vârstă, cu atât mai puțină dorință de a privi icoanele și elementele „corp la corp”, chiar și cu o vedere bună. Apropo, de aceea nu-mi place iPhone 5 și nimic mai puțin. Compactitate Compactitate, dar chiar și pe un ecran cu o diagonală de 4,5 "" vrei să vezi elemente de dimensiuni normale și nu să le studiezi cu lupa. Acest lucru este mai convenabil în multe situații, mai ales atunci când lucrați cu un smartphone din mers, de exemplu. Prin urmare, consolidarea generală a interfeței în Android 5.0 pe baza designului materialului mi se pare un pas bun.

Al treilea argument este pentru - Google nu numai că a transferat Android la un nou design, ci a pregătit imediat ghidurile vizuale necesare, cu o demonstrație a implementării principalelor elemente pentru dezvoltatorii de software. Mai simplu spus, dacă faci un program nou sau vrei să traduci unul vechi într-un design nou, tu site-ulși studiați recomandările Google.

De exemplu, spune ce culori să folosești. arată fonturile și cum să le folosiți. Și recomandări pentru utilizarea graficelor corecte în program.

Design material – argumente CONTRA

Cu toate acestea, al treilea argument în favoarea designului material este, de asemenea, un argument împotriva acestuia. Da, Google este grozav pentru a nu abandona dezvoltatorii și pentru a le oferi îndrumări cuprinzătoare cu privire la utilizarea corectă a noului limbaj de design, dar în acest caz, să spunem, nu a funcționat să se gândească la utilizatori. Programele scrise conform tuturor regulilor de proiectare a materialelor sau schimbate extern conform ghidurilor Google vor arăta foarte armonios în Android 5.0 și nu foarte bine în versiunile anterioare ale sistemului. Și invers - toate aplicațiile care nu respectă regulile de proiectare a materialelor vor arăta oarecum străine pe un smartphone cu Android Lollipop. Și vor exista o mulțime de astfel de programe în următoarele șase luni, m-aș aventura să sugerez. Totuși, nu toți dezvoltatorii unui program solicitat, mai ales dacă acesta este complex și necesită actualizări și îmbunătățiri constante, va renunța la totul și va începe să-l transpună în design material.

Un bun exemplu de design vechi într-un program foarte actualizat este WhatsApp. Cât timp nu va fi tradusă aplicația în md? Buna intrebare

Se pare că unii dintre dezvoltatori vor renunța cu adevărat la tot și își vor transfera programele în designul materialelor, în timp ce alții nu o vor face. Și tot în Google Play există programe într-un design mai vechi, să zicem, dar și uneori necesare pentru muncă. Drept urmare, se dovedește că dorința Google (fără îndoială corectă!) de a aduce Android la o formă comună nu este suficientă, trebuie să faceți ceva cu sute de mii de programe. Întrebarea este ce?

Dragi cititori, ce părere aveți despre ideea Google de a aduce toate serviciile și aplicațiile sale într-o formă comună, folosind designul material ca bază?

• Tutorial

Butoanele pot fi hexagonale?

Google I / O 2018 a lăsat o cantitate imensă de material la care să se gândească. 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? Este mai plăcut de înțeles încet și în porții mici. Această porțiune este despre design.

De patru ani, Material Design s-a săturat de el. Potrivit Google, 1,5 milioane de aplicații au fost construite în jurul acestui sistem de design. De ce? La urma urmei, a fost creat inițial pentru nevoile interne ale Google.

Ea a rezolvat problemele designului eterogen pentru Android și lipsa oricărui sistem.
- Era universal pentru diferite dispozitive: tablete, smartphone-uri, web.
- Este gandita din punctul de vedere al utilizatorului si este intuitiva.

Sistemul a fost acuzat de inflexibilitate și, ca urmare, a obținut un proiect de proiect. Dacă proiectați serviciul urmând strict ghidurile, atunci din punct de vedere vizual aplicațiile s-au dovedit cu adevărat lipsite de caracter. Pe de altă parte, de ce să dai vina pe sistem? Ghidurile nu au fost niciodată biblie, te puteai abate de la ele. Poate ai ales totuși o culoare pentru aplicația ta doar în paleta Google Color? Sper ca nu.

Pe de altă parte, adăugând elemente personalizate, riscați să vă întâlniți cu dezvoltatorii Android pe o alee întunecată și să ascultați un discurs lung despre motivul și cât de greșiți. Erau vremuri periculoase.

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

Acum este clar că Google dorește 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ă studiați sistemul de design de pe site - nu numai 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ărcare din biblioteca Google.

Rezultatul nu este încă impresionant. Cel mai mare plus ar fi trebuit să fie codul gata făcut pentru elementele native, dar linkul GitHub nu este chiar atât de grozav. 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 marcajul, dar nu veți putea obține pictogramele tăiate. Deci este prea devreme să vorbim despre înlocuirea lui Zeplin.

Pe 25 iunie 2014, Google a prezentat publicului noua sa viziune asupra designului interfeței viitorului - un întreg set de reguli și condiții, conform cărora interfețele tuturor produselor corporative vor fi construite de acum înainte. De ce a fost nevoie de toate acestea? Până acum cinci ani, toate produsele Google erau foarte diferite unele de altele, inclusiv versiuni diferite ale aceleiași aplicații pe dispozitive diferite. Dezvoltatorii s-au gândit să creeze reguli speciale pentru construirea și unificarea tuturor aplicațiilor și serviciilor dezvoltate, care ulterior au fost unite sub denumirea generală „The Kennedy Project”. Acest proiect s-a dezvoltat ulterior în Design material (design material).

Filosofia materială

Datorită proiectului Kennedy, toate serviciile și serviciile Google majore au primit caracteristici comune de proiectare și creare a interfeței. Acest lucru a făcut posibilă unificarea abordărilor pentru crearea interfețelor web și, mai târziu, a interfețelor aplicațiilor mobile.

Una dintre caracteristicile designului unificat au fost cardurile cu informații care puteau fi plasate oriunde în spațiul de lucru. Examinându-i în aplicația Google Now, dezvoltatorii și-au pus întrebarea: „Ce se află sub aceste carduri?” Potrivit vicepreședintelui Google Design Matias Duarte, această „întrebare inocentă a stârnit o scânteie puternică”.

Echipa de proiectare a început să vadă designul nu ca pe o colecție de avioane și pixeli, ci ca pe un obiect fizic real. Au vrut să transmită același lucru utilizatorului, astfel încât să aibă un sentiment al tangibilității interfeței, că ceea ce se întâmplă pe ecran pare cât se poate de credibil și logic.

După dominație totală skeuomorfism(o imitație exactă a obiectelor reale ale lumii fizice în design) totul s-a mișcat brusc în direcția opusă -. El a fost cel care a luat ca bază Google, inventând „ material". În același timp, făcând un mic pas înapoi la realism.

Hârtie cuantică

Elementul principal al designului materialului este metafora unui obiect fizic prin proprietățile sale asemănătoare hârtiei și care posedă majoritatea proprietăților sale - dimensiune, culoare, grosime. Fiecare strat al acestui material metaforic este situat în spațiul tridimensional și se supune tuturor legilor fizice, prin urmare, spre deosebire de stilul clasic plat, poate arunca o umbră asupra straturilor inferioare. Toate straturile sunt plasate pe materialul de bază principal.

Datorită proprietăților sale asemănătoare hârtiei, materialul a fost inițial numit „hârtie cuantică”. Aceasta este aceeași hârtie ca și în lumea fizică, dar are o serie de proprietăți „magice”, de exemplu, își poate schimba dimensiunea și se poate mișca fără probleme în spațiu, îmbinându-se cu alte „frunze” sau rupându-se în mai multe. Hârtia cuantică se află chiar deasupra fundalului, care este cel mai adesea alb. Umbra se misca in functie de miscarea materialului in sine, scade sau creste in functie de inaltimea materialului deasupra fundalului.

Cerneală digitală

Dacă „hârtia cuantică” este menită să reflecte proprietățile fizice ale unui obiect, atunci tot ceea ce se află pe suprafața acestei hârtie - culori, imagini, text, icoane - este format folosind " cerneală digitală„- un alt obiect unic de design material.

Material Design folosește toate cele mai bune practici de imprimare în proiectarea interfeței. Dar și aici există funcții proprietare ale Google. De exemplu, fontul principal pentru utilizare în Material Design este Roboto. Cu toate acestea, nimic nu împiedică companiile să-și folosească fontul de marcă pentru a-și menține identitatea. Ghidurile de proiectare a materialelor oferă exemple de utilizare a diferitelor greutăți și dimensiuni de font în interfețe.

Dar cel mai important lucru despre grafica de design material este culoare... Culoarea este mijlocul principal de exprimare pe hârtie cuantică și, prin urmare, joacă un rol foarte important. Este obișnuit ca designul materialului să fie utilizat de bazăși culori de accent... Și, de asemenea, mai multe nuanțe ale acestora pentru diferite situații.

De obicei culori primare folosit pentru a picta suprafețe mari, cum ar fi anteturi, bare de acțiune, bare de stare. Pentru a evidenția elementele importante, utilizați culoare de accent... De exemplu, pentru o carte de vizită cu design material - butoane de acțiune plutitoare.

Principiile de bază ale designului materialului dictează utilizarea imaginilor. Acesta este un element atât de important încât se recomandă utilizarea unei imagini de dimensiune maximă fără margini. Mai mult, barele de acțiune devin transparente pentru a maximiza vizualizarea imaginii.

Android menține o bibliotecă dedicată Paletă, care este capabil să extragă culorile principale și de accent din imagine și să modifice dinamic designul aplicației, ajustându-se la imaginea activă (exemplul de mai sus).

Semnificația animației

Continuând să tragem analogii cu lumea naturală, trebuie remarcat că nimic nu dispare în nicăieri, la fel cum nimic nu este luat de nicăieri. Astfel, în proiectarea materialelor, este necesar să se schimbe fără probleme interfața existentă ca răspuns la toate acțiunile utilizatorului, astfel încât toate tranzițiile să fie logice și evidente. Astfel, în designul materialelor, animația este o consecință a interacțiunii dintre utilizator și interfață.

Mișcarea activă atrage atenția utilizatorului, prin urmare, pentru a obține efectul de realism, este necesar să folosiți câteva reguli:

• Asimetrie
  De obicei, dimensiunea obiectelor este limitată de lățimea dispozitivului, astfel încât pentru a face redimensionarea hârtiei cuantice realistă, lățimea și înălțimea obiectului trebuie schimbate independent asimetric, evitând astfel iluzia de a crește sau scădea obiect.
• Răspuns
  Orice acțiune utilizator trebuie să aibă un răspuns adecvat. De exemplu, Google oferă un efect ondulatoriu al obiectelor de interfață cu epicentrul în punctul de interacțiune.
• Mișcare naturală autentică
  În natură, atunci când se mișcă, obiectele nu pot lua instantaneu viteză sau nu se pot opri, așa că pentru a le face să pară realiste, toate animațiile nu ar trebui să fie liniare, ci cu decelerații și accelerații.

Concluzie

Design material Este un mod complet nou de a interacționa și de a construi interfețe, care este încă în dezvoltare și poate fi adăugat în orice moment. Cu toate acestea, este deja posibil să-i preziceți perspectivele. Cel puțin în dezvoltarea de aplicații pentru Android, va domina, deoarece unificarea tuturor interfețelor va afecta în mod pozitiv gradul de utilizare.

La Google, designul materialului este clasat alături de evoluții semnificative precum controlul ferestrelor și cursorului (Xerox PARC) și ecranelor tactile (Apple). Ei bine, să vedem ce se întâmplă.

Noul logo și identitate Google promovează ideile de design materiale

Ghidurile detaliate de la un dezvoltator de design de materiale pot fi găsite aici -