desyatykh 11 martie 2015 la 17:08

Design material: până la lună și înapoi

• Blogul Redmadrobot,
• Dezvoltarea aplicatiilor mobile,
• Dezvoltare pentru Android

• Tutorial

„Este cu adevărat nevoie de acest dialog plictisitor?”

În acest articol, am subliniat principalele principii ale Material Designului și am dat sfaturi despre cum să le implementez. Textul a fost scris pe urmele unei clase de master pentru dezvoltatori, pe care noi, Roboții, am organizat-o împreună cu biroul rus al Google (Think Mobile).

Cândva, toate produsele Google arătau diferit diferit. Chiar și un produs de pe platforme diferite părea inconsecvent.

Totul a început să se schimbe în 2011, când Google a început să muncească din greu pentru a unifica partea vizuală a ecosistemului produselor sale și a numit-o Project Kennedy.

Ce legătură are Kennedy cu asta?

Legenda este următoarea: președintele Kennedy a inițiat un program de zbor cu echipaj uman către Lună (dacă credeți că acest zbor a fost vreodată). Iar marele șef de la Google, Larry Page, aderă la principiul că nu are rost să îmbunătățim produsele cu 10% - ar trebui să fie de 10 ori mai bune decât cele ale concurenților. Dacă e să lansăm un produs, atunci imediat pe lună. Așa că aici s-a decis să se refacă totul brusc.

Rezultatul a afectat în primul rând web-ul, dar a afectat și unele produse mobile. În același timp, a existat o lucrare separată privind designul Android - Holo, care a înlocuit interfețele nu foarte plăcute din punct de vedere estetic ale vechiului Android.
Dar a existat o problemă: Holo era încă diferit de Proiectul Kennedy.


Utilizatorii au trebuit să se adapteze la noua interfață la comutare, să se obișnuiască cu aspectul, aspectul comenzilor și așa mai departe.
Prin urmare, la un moment dat, un grup de designeri din diferite părți ale Google s-au reunit și au început să lupte cu această problemă pentru a o rezolva odată pentru totdeauna.

În 2014, la conferința I/O, a fost prezentat un nou sistem de design, o abordare numită Material Design. Noul sistem de design vă permite să creați o experiență de utilizator consistentă pe toate ecranele: desktop, smartphone, tablete, ceasuri, televizoare, mașini. Pentru aplicațiile Android, Material Design reprezintă evoluția limbajului vizual și a liniilor directoare de design ale Holo. În multe privințe, este un sistem mai flexibil, care a fost creat cu presupunerea că alți designeri l-ar folosi - Google a fost doar primul utilizator.

Material Design vă permite să abordați mai obiectiv deciziile de proiectare: cum arată ceva, cum funcționează ceva, cum este realizată animația și așa mai departe. Oferă un cadru rezonabil, dar nu restricții inutile.

4 principii ale designului materialului

Designul materialului se bazează pe patru principii principale:

1. Suprafețe tactile.În Material Design, interfața este formată din straturi tangibile din așa-numita „hârtie digitală”. Aceste straturi sunt situate la diferite înălțimi și aruncă umbre unele peste altele, ceea ce ajută utilizatorii să înțeleagă mai bine anatomia interfeței și cum să interacționeze cu ea.
2. Design de imprimare. Gândindu-ne la straturi ca bucăți de „hârtie digitală”, apoi pentru „cerneală digitală” (tot ce este descris pe „hârtie digitală”), abordarea este luată din designul grafic tradițional: de exemplu, reviste și afișe.
3. Animație semnificativă.În lumea reală, obiectele nu apar din senin și nu dispar în nicăieri - acest lucru se întâmplă doar în filme. De aceea, la Material Design ne gândim mereu la cum să folosim animația în straturi și în cerneală digitală pentru a oferi utilizatorilor indicii despre cum funcționează interfața.
4. Design adaptiv. Este vorba despre modul în care aplicăm cele trei concepte anterioare pe dispozitive cu rezoluții și dimensiuni diferite de ecran.

Deci, să ne mișcăm în ordine.

Suprafețe tactile

Să începem cu suprafețele tactile. Acestea sunt chiar bucățile de „hârtie digitală” care, spre deosebire de hârtia obișnuită, au superputeri - își pot întinde, conecta și schimba forma. În caz contrar, ei se comportă în deplină conformitate cu legile fizicii și cu legislația Federației Ruse.

Suprafaţă

Ce este o suprafață? Practic este un „container” cu umbră și nimic altceva. Dar acest lucru este suficient pentru a distinge un obiect de altul și pentru a arăta cum sunt situate unul față de celălalt. Filosofia Material Design urmărește simplitate și design curat.

Nu este nevoie să mergeți prea departe și să folosiți o textură, aplicați degrade pentru a reprezenta clarobscurul. Nu este nevoie să oferiți proprietățile vizuale ale pielii ca la ușa bunicii către apartament - o umbră îngrijită poate exprima multe. Dar fiecare suprafață are propria înălțime - locația pe axa Z. Și fiecare dintre suprafețe aruncă o umbră în partea de jos, la fel ca în lumea reală.

Adâncime

În designul plat tradițional, umbrele sunt evitate ca orice formă de volum, dar au o funcție importantă de a indica structura și ierarhia elementelor de pe ecran. De exemplu, dacă ridicarea unui element este mai mare, atunci umbra acestuia va fi mai mare. Această profunzime sporită ajută la concentrarea atenției utilizatorului asupra chestiunilor critice și face acest lucru cu grație.

Profunzimea definește, de asemenea, indicii de interacțiune. Aici, pe măsură ce utilizatorul derulează, solidul verde se lipește de stratul superior și se adaugă o umbră. Acest lucru arată că nu numai „cerneala” se mișcă, dar fundalul alb este dedesubt și se mișcă în întregime.

Este important să rețineți că adâncimea are un „fund”. Se presupune că este limitat de grosimea dispozitivului mobil în sine. Adică, dacă pe un smartphone este la un centimetru de la sticlă până la peretele din spate și aveți un card de credit în interfață, atunci nu îl puteți întoarce - se va sprijini pe sticlă și pe peretele din spate.

NB!

1. Adâncimea ar trebui să aibă sens. Pune-ți întrebarea: „De ce este asta și nu altfel?” Dacă nu există răspuns, este logic să cauți o altă soluție.
2. Ai grijă de logistică. Butoanele plutitoare, barele de instrumente și casetele de dialog se află la o anumită înălțime. Uneori trebuie să se deplaseze de-a lungul axei Z pentru a evita coliziunile atunci când se întâmplă ceva. Trebuie să fii extrem de atent cu această coregrafie.
3. Nu forțați butonul. Butonul plutitor este un element foarte distinctiv. Mulți oameni cred că merită adăugat la interfață: devine imediat Material Design. Dar ar trebui să fie folosit doar pentru o acțiune cheie în aplicația dvs. Dacă trebuie să închideți o fereastră sau să confirmați o acțiune, atunci nu trebuie să utilizați butonul plutitor. Există și alte elemente pentru asta.
4. Nu totul ar trebui să fie pe card. Dacă un obiect are multe forme și conține o mulțime de conținut diferit, atunci cardul este potrivit. Și dacă nu, atunci poate că este mai bine să o faci în text simplu sau o listă de text?
5. Este cu adevărat nevoie de acest dialog plictisitor? Designerii Google au încercat să îmbunătățească casetele de dialog, dar totuși foile de jos sunt mai potrivite pentru majoritatea sarcinilor. Există și Snackbar-uri. Casetele de dialog sunt necesare doar pentru a adresa o întrebare utilizatorului.
6. Utilizați extinderea listei. Acesta este un model subestimat, dar este destul de material și face o treabă bună.

Design tipărit

Deoarece suprafețele în Material Design le numim „hârtie digitală”, atunci tot ceea ce este plasat pe ea - text, imagini, pictograme - este aplicat cu „cerneală digitală”. Și Material Design folosește principiile clasice ale designului de imprimare în proiectarea interfețelor.

Tipografie elegantă

Tipografia joacă un rol esențial în designul tipăritului. Ridică orice revistă și vei observa că tipografia îndeplinește două funcții importante acolo. În primul rând, alegerea și compoziția fontului este elementul care formează stilul mărcii publicației. În al doilea rând, tipografia definește structura conținutului.


Există destul de mult text pe acest ecran. Dar dacă aruncăm pictogramele și transformăm textul în blocuri gri, devine evident că structura este destul de distinsă.

În fața noastră este un titlu mare și un set de elemente mai mici care diferă în saturația lor - cele mai importante sunt mai întunecate. În același timp, distingem clar gruparea datorită faptului că unele dreptunghiuri sunt apropiate și există o indențiune semnificativă între blocuri. În general, totul este în cele mai bune tradiții!

Marimea fontului

Google.com/design/spec are o paletă standard de fonturi pe care o puteți utiliza în siguranță. Paleta folosește fontul Roboto, dar îl puteți înlocui cu propriul font de marcă pentru a susține marca. Este important să testați totul cu atenție, deoarece redarea fonturilor poate funcționa diferit pe diferite dispozitive. De obicei, fonturile OTF au rezultate mai bune decât fonturile TTF.

Tipografie de contrast

Un alt principiu din lumea tipăririi care se înțelege bine în Material Design este tipografia de contrast - un contrast cu adevărat vizibil între dimensiunile fontului titlului și textul de tipar. Acest lucru evidențiază frumos și bine principalul lucru.

Grilă și ghidaje modulare

Acum, la aspectul conținutului de pe ecran. În proiectarea tipăririi, sunt utilizate grile modulare; în proiectarea ecranului, acestea sunt grile mai de bază cu module foarte mici. De exemplu, Material Design folosește o grilă de 8 dp. DP înseamnă un pixel independent de densitate, o unitate foarte asemănătoare cu unitatea de puncte din iOS.

Dar principala trăsătură distinctivă a plasării conținutului în conformitate cu principiile Designului Materialului este locația ghidurilor cheie. Aceștia stabilesc umplutura de la marginile ecranului, structurând informațiile și controlând privirea utilizatorului. Dacă sunteți familiarizat cu designul publicațiilor cu mai multe pagini sau ați citit Tschichold, atunci probabil că știți multe despre grilă și margini și înțelegeți unde cresc picioarele de aici.

De fapt, vedem o coloană de text în mijloc și o marjă mare în stânga, ceea ce face posibilă concentrarea asupra conținutului principal și oferind elemente auxiliare în margini.

Iconografia geometrică

În ceea ce privește iconografia, pictogramele simple sunt folosite de ceva timp în Android, dar în Material Design au devenit și mai simple și mai prietenoase. Pe resursa neoficială materialdesignicons.com, designerii pot găsi pictograme pentru scopurile lor și, dacă este posibil, pot contribui.

Culoare

Ca și în cazul designului de imprimare, culoarea este un mijloc important de exprimare în designul interfeței. În vechiul Android, culoarea era complementară, dar acum joacă un rol mai proeminent. În Material Design, paleta de culori implicită pentru o aplicație constă dintr-o culoare principală și o culoare de accent.

Cea principală este folosită pentru zone mari, cum ar fi bara de acțiuni, iar bara de stare este colorată în variația sa mai întunecată. O culoare de accent mai strălucitoare este folosită în puncte de pe comenzi, butoane, dungi, indicatori și multe altele. Culoarea de accent este concepută pentru a atrage atenția utilizatorului asupra elementelor cheie, cum ar fi un buton plutitor.

Câtă culoare ar trebui să folosești? Accentele sunt puse punctual, în cantități mici. Există o regulă simplă de bază pentru colorarea restului interfeței. Când există mult text, cum ar fi o listă de e-mail, merită să lăsați bara de aplicație la dimensiunea implicită și să o colorați pentru a permite utilizatorului să se concentreze asupra conținutului. Dacă nu există atât de mult conținut, de exemplu, o vizualizare detaliată a unui element separat, o fotografie sau un calculator, atunci aceasta este o oportunitate excelentă pentru utilizarea matrițelor colorate mari - 2x sau 3x înălțimi a barei de aplicație.

Android menține o bibliotecă numită Palette care vă permite să extrageți culoarea din fotografii. Adică, este posibil să pictezi dinamic interfața pe baza ilustrațiilor foto din aplicație.

Am făcut o fotografie, iar algoritmul a extras din ea 6 culori cu diferite caracteristici:
- există 3 culori suculente și 3 decolorate;
- se impart in tonuri deschise, standard si inchise;
- pentru fiecare culoare de fundal este definită propria culoare a textului, care poate fi și folosită.

Dragute poze

În cele din urmă, ca și în cazul designului tipărit, Material Design încurajează utilizarea fotografiei și ilustrației în toată gloria. Imaginile sunt plasate de cele mai multe ori fără rame, deseori „direct”. Chiar și bara de stare este făcută în mod deliberat transparentă pentru a nu interfera. Mai mult, fiecare picătură de „cerneală digitală” de pe ecran are o funcție, nu există aproape nimic doar pentru decor.

NB!

1. Bucurați-vă de branding. Google este într-o poziție mai bună de a folosi culori strălucitoare ca nume de marcă, dar asta nu ar trebui să fie văzut ca o problemă. Culorile pot fi alese din cartea mărcii corporative și folosesc în general sigla.
2. Nu uitați de căptușeală și „hai să luăm puțin aer”. O linie de bază de 8 dp și o marjă stângă de 72 dp este practic regula. Păstrați conținutul bun și gratuit.
3. Fotografiile expresive fac vremea. Fotografiile și ilustrațiile ca mijloace expresive sunt alegerea noastră.

Animație semnificativă

În lumea reală, obiectele nu pot să apară pur și simplu din neant sau să dispară în neant. Acest lucru ar provoca confuzie și confuzie. Prin urmare, în Material Design, animația semnificativă este folosită pentru a arăta exact ceea ce tocmai sa întâmplat.

Exemplul 1. Animația arată că acest card special, după ce a făcut clic, a venit în față, s-a extins și au devenit vizibile mai multe informații.

Exemplul 2. Evenimentul din calendar, după apăsare, se desprinde de la suprafață, se transformă într-un strat separat de „hârtie”, începe să se transforme și se dezvăluie sub formă de informații detaliate despre eveniment.

Un punct interesant este că mișcarea activă atrage privirea - acest lucru este natural pentru vederea noastră. Cu ajutorul animației, controlăm atenția utilizatorului.

Asimetrie

Deoarece adâncimea interfeței este limitată de grosimea dispozitivului, toate transformările obiectelor trebuie făcute în plan. Acest lucru face, de asemenea, ca animația de transformare să fie asimetrică - adică modificarea lățimii și înălțimii obiectului ar trebui să fie independentă. Altfel, apare iluzia de a se apropia sau de a se îndepărta de privitor, și la o distanță foarte mare.

Reacţie

Un alt principiu foarte important al animației în Material Design este reacția la acțiunile utilizatorului. Acolo unde este posibil, atingerea ecranului dispozitivului ar trebui să fie epicentrul modificărilor interfeței. De exemplu, un val care apare și merge din punctul de contact cu degetul. Acest efect este ușor de implementat în Android L.

Microanimație

În Android L, putem anima fiecare element al aplicației, fie că este vorba de tranziții între conținut sau pictograme mici de acțiune. Fiecare detaliu al unei aplicații este important, iar micro-animațiile adaugă mai multă granularitate și receptivitate aplicației pentru fiecare acțiune a utilizatorului.

Claritate și claritate

Și ultimul, principiu cheie al animației: mișcarea trebuie să fie rapidă și clară. Spre deosebire de accelerația banală de la început și decelerația de la sfârșit, curba de animație din Material Design este mai naturală și mai interesantă. Obiectele reacționează mai repede și ajung la starea țintă, revin mai brusc, dar trec puțin mai mult la o stare de repaus la sfârșit. Drept urmare, utilizatorul trebuie să aștepte mai puțin (acest lucru este mai puțin enervant). În același timp, acolo unde obiectul a părăsit deja sfera de interese a utilizatorilor, își permite să se comporte mai natural.

NB!

1. Nu lăsa animația pentru final. Nu lăsați animația până la sfârșit - poate fi un factor cheie pentru experiența utilizatorului și trebuie gândită în avans.
2. Aflați când să vă opriți. Prea multă animație este de asemenea rău. Controlează-te și amintește-ți că trebuie să fie semnificativ.

Design adaptiv

Ultimul aspect major al Material Design-ului este conceptul de design responsive. Adică, cum putem aplica toate primele trei concepte pe diferite dispozitive și ecrane în diferiți factori de formă.

De la general la specific

Cea mai comună tehnică este reducerea cantității de informații afișate pe ecran împreună cu un ecran mai mic. Dacă pe un ecran mare ne putem permite să arătăm atât o listă, cât și informații detaliate despre un articol selectat, atunci pe smartphone-uri, este afișată mai întâi o listă și este necesar un ecran separat pentru detalii. În cazul tabletelor, bara de aplicații poate fi mărită uneori pentru a face față măcar puțin spațiului liber surplus.

Indentare

Plasarea conținutului folosind blocuri face mult mai ușor să lucrezi cu spațiu liber pe ecrane mari. Cunoaștem conținutul fiecărui bloc, înțelegem cât de larg poate fi, pentru a nu pierde lizibilitatea și, de asemenea, cât de îngust, pentru a nu fi prea aglomerat. Pe ecranele late, blocurile sunt întinse până la limitele lor de lizibilitate, iar apoi se adaugă umplutură de la margini, care poate fi foarte mare. Ele pot fi umplute cu un buton plutitor și blocuri colorate.

Rame albe

Idei pentru organizarea spațiului și umplutura pentru diferite ecrane pot fi găsite la google.com/design/spec sub Whiteframes. Acesta este un loc minunat pentru a începe, a înțelege sensul general și apoi a continua propriile experimente.

Ghiduri

Ghidurile ne oferă marginile pentru „cerneală” pe foi separate de „hârtie”. Pe un smartphone avem o coală și o indentă bună în stânga, iar pe o tabletă sunt două, iar în ambele cazuri există o indentă. Este important ca indentarea să fie diferită pentru acești doi factori de formă. Pe o tabletă este 80 dp și pe un smartphone este 72 dp. Decalajele de la marginile ecranului sunt, de asemenea, diferite.

Dimensiuni (editare)

Se recomandă să luați mai multe proporții pentru toate elementele. În special, este mult mai convenabil să alegeți dimensiunea barei de aplicație dacă o faceți un multiplu de: 1x, 2x, 3x. Această dimensiune este diferită pe smartphone-uri și tablete, dar aplicația se adaptează fără probleme.

Blocuri

Gândirea în blocuri poate fi, în general, utilă. Dacă configurați o astfel de grilă modulară de blocuri care sunt multipli de 8dp, obțineți un ritm vizual excelent și luați decizii mai convenabile. Accesați site-ul cu cadre albe și uitați-vă la materiale.

Bara de instrumente

Bara de acțiuni este una dintre cele mai importante părți ale interfeței. Acesta găzduiește titlul, butoanele de acțiune și navigarea. În Android Lollipop, bara de acțiune s-a transformat dintr-o bandă înlănțuită deasupra într-un widget cu drepturi depline - o unitate de control funcțională și frumoasă a aplicației. Acest lucru a devenit posibil datorită faptului că acum puteți pune multe elemente funcționale în bara de instrumente, la care nici nu le puteai visa înainte:
- câmpuri de intrare, formulare;
- butonul plutitor al acțiunii principale;
- bara de instrumente este ascunsă de navigarea extinsă, dar și aici vedem un widget complet funcțional;
- este convenabil să operați bara de instrumente dacă este necesar.

NB!

1. Nu întotdeauna aveți nevoie de un sertar de navigare. Google folosește foarte mult navigarea slide-out în aplicațiile sale, așa că o puteți vedea în diferite exemple. Dar Google are o mulțime de sarcini care pot fi rezolvate cu ajutorul său: post ajutor, setări, autentificare / deconectare, informații despre utilizator și așa mai departe. Dacă aveți sarcini similare, atunci totul este în regulă, dar dacă faceți un instrument simplu, atunci nu merită.
2. Din ce în ce mai inteligent cu barele de instrumente. Capacitatea de a schimba dimensiunea barei de instrumente în mod dinamic, pentru a o face dublă și triplă este foarte cool și convenabilă. Majoritatea designerilor se tem să se implice în asta și să aleagă o singură mărime odată pentru totdeauna, dar aici poți și ar trebui să fii mai îndrăzneț.
3. Nu este nevoie să faci din colțul de jos al ghetouului pentru un buton plutitor. Butonul plutitor poate fi oriunde: jos, sus, dreapta, stânga. Desigur, poate fi convenabil să ajungi la el în colț, dar aceasta nu este singura opțiune. Butonul se poate muta din loc în loc în funcție de sarcini.
4. Atât smartphone-uri cât și tablete; atât pe verticală cât și pe orizontală. Gama de dispozitive Android este mare, iar acest lucru nu ușurează viața dezvoltatorilor. Dar adevărul este că utilizatorii au toate aceste dispozitive pe care le transformă într-un loc și în altul (chiar și când vine vorba de smartphone-uri). Acest moment trebuie rezolvat.

Acesta este Material Design. Nu vă fie frică să experimentați și să faceți greșeli: nu vă agățați să copiați soluțiile existente. Incearca-l!

Etichete:

• design material
• android
• proiectarea interfeței

Adaugă etichete

Etichetează-ți postarea Este mai bine să separați etichetele cu o virgulă. De exemplu: programare, algoritmi

Comentarii 121

• • • • • • • • • • Tu, ca Google, ții telefonul doar orizontal?
                    

                    În verticală este folosit doar 50-70% din ecran

                    
                    

                    • Există destul de mult text pe acest ecran.

                      Este mult text? Ce le-a făcut Twitter oamenilor...

Ce se va întâmpla dacă copilăria unei persoane este petrecută în filme, în care computerele care au devenit mai înțelepte ucid în mod inevitabil întreaga umanitate și, după ce s-a maturizat puțin, aceeași persoană va citi despre NSA și alți răufăcători care îi citesc SMS-urile non-stop și le trimiți în Statele Unite? El va avea grijă de Google.

Nu cu mult timp în urmă, Corporația Dobra a arătat lumii viziunea sa asupra interfețelor de utilizator ale viitorului. Material Design este un concept unificat de construire a logicii muncii și a aspectului serviciilor și aplicațiilor, unificând toate produsele Google pentru a le face cât mai ușor și intuitiv pentru utilizatori.

Ideea este atât de mare încât va transforma mai mult decât aspectul tuturor produselor Google. Odată cu apariția unui nou concept, rolul companiei în sine în viața oamenilor se va schimba.

Ce va deveni Google?

Da, până acum Google este doar o grămadă de servicii. Cu toate acestea, cu designul materialului, compania creează de fapt o a doua realitate în interiorul computerelor și dispozitivelor noastre mobile. Cu propria sa logică, cu propriile reguli și legi, cu propria fizică.

Când creați lucruri fizice, vă bazați pe mii de ani de experiență umană. Dar designul software este încă la început. Ne-am uitat la toate software-urile noastre și ne-am întrebat, din ce este făcut? John Wiley, responsabil de proiectare Căutare Google

Ce sunt serviciile Google pentru oameni acum? Acesta este șirul de căutare care locuiește în browser? Sau este dispozitivul tău mobil Android?

Există multe definiții pentru Google și multe dintre ele vor fi corecte. Această companie a creat un sistem de servicii care a devenit fundamentul infrastructurii noastre digitale.

Dar, în viitorul apropiat, Google nu va mai fi perceput doar ca Chrome sau Android.

Serviciile și produsele Google individuale evoluează într-un singur canal de informare, în care datele relevante pentru o persoană apar pur și simplu pe ecranul potrivit la momentul potrivit.

Când te uiți la ceas în timp ce stai la o gară, vezi ora de sosire a următorului tău tren pe ecran. Cu toate acestea, același ceas vă va informa despre o scrisoare importantă din partea conducerii dacă vă uitați la el la serviciu. Acest ceas vă va înlocui parola pentru a vă conecta la contul dvs. de pe computer, al cărui ecran va afișa imediat corpul acelei scrisori importante de la șef. Ai nevoie urgent să pleci și nu ai timp să închei textul răspunsului? Nicio problemă, deoarece interfața de e-mail cu text neimprimat s-a deschis deja pe smartphone sau tabletă și chiar și cursorul se află în locul de unde ai rămas.

Ziua de muncă s-a încheiat și ești pe drum spre casă. Aceleași ecrane îndeplinesc acum funcții complet diferite. Îți vor aminti să ridici copiii, să cumperi alimente pentru cină și să te informeze despre lansarea unui nou episod din serialul tău preferat.

O astfel de varietate incredibilă de funcții și sarcini efectuate va funcționa într-un singur mediu digital intuitiv care se îmbină treptat cu lumea reală.

Una dintre ideile cheie ale Material Design este de a crea un sentiment intuitiv pentru utilizator de a lucra cu obiecte fizice reale în mediul digital. De fapt, aceasta este o emulare a spațiului tridimensional pe planul ecranului, dar cu toate avantajele pe care le poate oferi un mediu virtual. Butoanele și ferestrele, similare cardurilor de carton, pot crește și micșora, se pot dezintegra și se pot reconstrui.

Cel mai impresionant lucru despre acest concept este că proprietățile și comportamentul obiectelor de pe ecran vor fi la fel de previzibile și de înțeles pentru oameni ca orice eveniment simplu din lumea fizică. Spre deosebire de interfețele existente, în care a face clic pe un buton nu provoacă modificări în restul ecranului, orice acțiune în Android L provoacă un efect corespunzător care afectează întreaga interfață. Atingeți o anumită zi din calendar și aceasta va crește, împingând restul zilelor cu volumul și masa în creștere. Apăsați butonul de redare din player și acesta, ca un ambalaj de bomboane, se va extinde în panoul de control.

Acest concept este rezultatul studiului atent al unei companii asupra modului în care hârtia este manipulată în realitate. Echipa de proiect a creat pictograme fizice pentru aplicații din hârtie reală. Au vrut să vadă cum pot interacționa lumina și umbra cu un material plat (ca un ecran), dar real.

Mediul virtual, la rândul său, permite încălcarea regulilor. Aproape nimeni a văzut hârtia împărțită în părți, ale căror bucăți sunt rearanjate și din nou îmbinate într-un singur obiect. Acest lucru oferă oportunități suplimentare, dar există riscul de a crea un sistem prea nerealist, prea departe de legile fizice. Pentru a menține o intuitivitate naturală, toate tipografiile, imaginile și culorile au fost aruncate în timpul procesului de dezvoltare. Echipa s-a concentrat exclusiv pe lucrarea lucrării minune.

Nu trebuie să fii designer pentru a observa o încălcare a regulilor din lumea reală. Hârtia cade pe masă ca o bucată de piatră? Evident, ceva nu este în regulă aici și va fi clar pentru oricine.

Pe baza unor legi atât de evidente și de înțeles, echipa Google a decis să folosească lumea reală ca bază pentru conceptele lor.

Cu un sistem de reguli suficient de clar, devine posibilă adăugarea de noi materiale. Hârtia a fost alegerea evidentă datorită ușurinței sale de afișare pe ecran. Fără textură pronunțată, practic fără volum. Dar încearcă să-ți imaginezi, de exemplu, o cârpă sau un lichid.

Imediat îmi vine în minte filosofia skeuomorfismului, pe care Apple a folosit-o în mod activ și, în cele din urmă, a abandonat-o, nu? Abordarea Apple a fost, de asemenea, menită să facă lumea digitală mai ușor de înțeles pentru utilizator, dar în comparație cu decizia Google, pare destul de superficială. Skeuomorfismul Apple a sugerat doar asemănarea aplicației cu omologul său real.

Google nu vrea doar să tragă niște analogii pentru o mai bună percepție. Scopul lor este de a explica utilizatorilor ce se întâmplă atunci când acest sau acel element de interfață apare sau dispare de pe ecran.

Material Design nu înseamnă doar încercarea de a crea servicii similare pentru diferite dispozitive. Google creează o lume paralelă, a cărei particulă este un fragment din ceva material. Când primiți un mesaj pe ceasul inteligent de pe smartphone, vedeți mai mult decât un text mort. Aceasta este o bucată de carton cu un mesaj pe ea, iar acest mesaj a venit de pe smartphone la încheietura mâinii.

Interacțiunea cu lumea digitală este posibilă în moduri complet diferite. Ar putea fi ceva rotund la încheietura mâinii sau ceva dreptunghiular în mână. Material Design, pe de altă parte, urmărește să garanteze accesul la datele corecte și relevante, indiferent de combinația de dispozitive folosite de oameni.

Așa se face că, fără a impune și a presă, compania creează pur și simplu tehnologie, bazându-se pe principiul cheie „concentrați-vă pe utilizator, iar totul va veni de la sine”.

Ne interesează opinia dumneavoastră. Considerați un astfel de concept rău sau vedeți astfel de inițiative ca pe o modalitate promițătoare de a interacționa cu mediul informațional în viitor?

Dezvoltatorul de aplicații mobile și site-uri web a scris o coloană pentru noi și a pus totul în ordine în ceea ce privește designul plan și material.

În general, diferența dintre designul plat și designul material este subtilă. Pentru o persoană care nu are cunoștințe profunde de design grafic, acestea pot părea într-adevăr foarte asemănătoare. În acest articol voi încerca să „fac lumină” asupra unora dintre diferențele dintre cele două. Veți dobândi cunoștințe suplimentare atât de necesare pentru a nu răni accidental natura delicată a designerului.

Un pic de istorie

Înainte de a începe să vorbim despre diferențele dintre cele mai populare două tendințe de design, haideți să aflăm de unde provin. Se crede că designul materialului se bazează pe un design plat. Atunci de unde a venit designul plat?

Skeuomorfism

Dacă vorbim despre interfața cu utilizatorul și designul web, atunci conceptul de skeuomorfism înseamnă o abordare, a cărei idee principală este imitația. Fără a intra în detalii, gândiți-vă la interfețele Apple pre-iOS 7, cu „texturile, iluminarea și efectele pretențioase” lor realiste.

Încercarea de a face obiectele digitale să semene cu omologii lor din lumea reală a fost justificată de necesitatea de a facilita interacțiunea utilizatorului cu dispozitivul. De fapt, tocmai din acest motiv toate interfețele cu texturi realiste au dominat lumea digitală de mulți ani. Designul skeuomorphic a făcut o treabă excelentă de a ajuta utilizatorii să tranziți fără probleme de la lumea reală la cea digitală.

Cu toate acestea, odată cu creșterea tehnologiei mobile, devine treptat necesar să se concentreze în primul rând pe uzabilitate. De acord, în acest domeniu, nevoia de a crea soluții mobile disponibile de pe diferite dispozitive este în creștere semnificativă. Și chiar în acest moment, simplitatea devine noul standard de design.

Notă: Nu presupuneți niciodată că skeuomorfismul a dispărut complet. Este utilizat pe scară largă în jocurile în care este necesar să se creeze o lume realistă și să-i ajute pe jucători să-și simtă caracterul pentru a se cufunda profund în procesul de joc.

Design plat

Acest stil este complet lipsit de orice obiect tridimensional. În linii mari, designului plat îi lipsesc elementele stilistice, cum ar fi umbrele, texturile, degradeurile, dar se acordă atenție jocului de fonturi, culori și pictograme. Dar de ce erau necesare toate acestea? Răspunsul este simplu.

În primul rând, designul plat reduce dramatic timpul de încărcare a paginii. Lipsa detaliilor skeuomorfe „grele” (imaginați-vă: straturi, fonturi serif, gradienți) face ca elementele de design plate să fie „mai ușoare”, ceea ce, la rândul său, accelerează semnificativ timpii de încărcare. În plus, elementele plate arată la fel de atractiv atât pe ecranele de înaltă rezoluție, cât și pe ecranele cu rezoluție joasă.

În al doilea rând, imaginile simple pot transmite mesajul dvs. către utilizatori mai repede decât ilustrațiile detaliate: sunt incomplete și, prin urmare, ușor de înțeles.

Și, desigur, pictogramele plate cu un font relativ simplu pot îndrepta atenția utilizatorilor către conținut cu adevărat important.

Astăzi, designul plat a primit o recunoaștere binemeritată, dar totuși nu a fost fără probleme. Cel mai evident exemplu de astfel de probleme a fost lansarea Windows 8 de către Microsoft. Acest sistem de operare este considerat pionierul designului plat și susține conceptul de design Metro. Problemele au fost cauzate de faptul că compania a considerat necesar să acorde mai multă atenție tipografiei decât graficii propriu-zise.

Testul de utilizare Windows 8 al NN Group a arătat că utilizatorilor le este greu să distingă între obiectele pe care se poate face clic și cele care nu se pot face clic. Utilizatorii s-au plâns că obiectele care păreau statice pot fi de fapt clicabile. Ca urmare, misiunea principală a companiei - de a ajuta utilizatorii să interpreteze corect sistemul - a eșuat.

O altă companie asociată adesea cu designul plat este Apple. S-au îndepărtat de elementele de design skeuomorfe din sistemul de operare mobil iOS 7, lansat în 2013. De data aceasta, tranziția a fost percepută puțin mai bine, în principal pentru că compania nu încerca să reînnoiască complet conceptul UI, ci pur și simplu a adăugat câteva modificări către designul plat. Acest lucru a permis utilizatorilor să utilizeze produsul bazându-se pe experiența lor anterioară cu sistemele de operare și site-urile web.

Design material

Să fim clari chiar acum: designul materialelor este mai mult un produs de marcă decât o tendință de design care a apărut spontan și care a câștigat o acceptare pe scară largă. Acesta este ceea ce îl deosebește practic de designul său plat.

Numind materialul de design „corporat”, vreau să spun că are un întreg set de recomandări și principii clar definite pe care le urmează fiecare designer care se respectă. Este destul de evident de ce Google și-a introdus Material Design: a fost nevoie de unificarea designului, astfel încât aplicațiile să arate la fel pe oricare dintre multele dispozitive Android.

Deși este destul de funcțional, designul plat este considerat greu de înțeles. Adevărul este că obiectele plate de pe ecran pot fi confuze pentru utilizatori (în special cei fără experiență web sau mobilă). Prin urmare, materialul de design încearcă să readucă elementele de skeuomorfism, dar într-o formă foarte simplificată. Imaginile arată plate, mai ales când vine vorba de culori, dar sunt totuși multidimensionale datorită axei Z.

Cu alte cuvinte, designul material poate fi numit o versiune îmbunătățită a designului plat cu elemente skeuomorfe - animație, umbre și straturi. Astfel, puteți face produsul mai intuitiv în ceea ce privește navigarea și evitați complexitatea inutilă în stilul în general.

Avantaje și dezavantaje ale designului plat

Să lăsăm în urmă istoria evoluției stilului și să trecem la ceva mai semnificativ - iată care sunt punctele forte și punctele slabe ale designului plat.

• Minimalism și stil
• Intuitivitatea. Vă va fi mai ușor să transmiteți ideea dvs. utilizatorilor.
• Economisirea de timp și resurse. Paginile se încarcă mult mai repede cu un consum mai mic de lățime de bandă.
• Concentrați-vă pe conținut. O interfață fără detalii inutile care poate distrage atenția de la informații cu adevărat valoroase.
• Arată la fel de bine pe diverse dispozitive, fie că este vorba de un browser de PC sau de un smartphone.
• Accelerează procesul de proiectare al unui site web sau al unei aplicații eliminând atingerile inutile de design.

• Stilul minimalist.
• Ușor de înțeles la nivel intuitiv. Designul materialului va fi la fel de ușor pentru utilizatorii experimentați și pentru începători.
• Skeuomorfism moderat. Totul pare mai realist datorită utilizării axei Z (un concept unic Google).
• Există un set de ghiduri care sunt actualizate constant. Prin urmare, orice designer poate apela întotdeauna la ei dacă apar dificultăți în procesul de lucru.
• Animația pentru soluții web este încurajată. Inutil să spun, cât de mult le place oamenilor mișcarea. În plus, animația face interfața mai clară și mai intuitivă.

• Deținut de Google. Prin urmare, orice întrebări și sugestii de îmbunătățire trebuie adresate proprietarului.
• Datorită axei Z, procesul de proiectare poate dura mai mult.
• Elementele animate necesită mai multe resurse.
• Respectarea în mod consecvent a ghidurilor poate limita originalitatea unui design.

Rezuma

De fapt, una dintre abordările de design în cauză nu ar trebui să fie presupusă a avea un avantaj clar față de cealaltă, deoarece stilurile plate și materiale merg una lângă alta. Ambii sunt nebun de populari și ambii lipsiți de realism. Designul material este succesorul designului plat, în timp ce designul plat în sine a fost o reacție la decizii prea grele și realiste. Designul material a adăugat ceva de care designul plat a încercat întotdeauna să se îndepărteze - un pic de skeuomorfism. Un lucru, totuși, va face întotdeauna diferența între aceste abordări: designul material este un produs proprietar Google, iar designul plat este fuziunea mai multor practici de design care se străduiesc în primul rând pentru simplitatea generală.

De fapt, designul plat a evoluat foarte mult în ultimii ani, de la un stil complet „plat” la unul „semi-plat”. Acum permite utilizarea straturilor și a umbrelor slabe pentru a face obiectele să pară mai adânc decât păreau anterior. Deci, tu și cu mine suntem fericiți contemporani ai designului plat 2.0.

Nu în ultimul rând, nimic nu vă împiedică să încercați să combinați aceste două abordări pentru a crea un produs cu adevărat funcțional și ușor de utilizat. Așadar, inspiră-te de la guru de design planuri și materiale și treci la treabă!

Vicepreședintele Google Design, Matias Duarte, într-un interviu pentru The Verge, vorbește despre principiile de bază ale noului design, care se numește Material. Aceasta este o abordare complet diferită, oferind un set unificat de reguli, de la tipul de software la funcții. În timp ce designul pare puțin ciudat și necesită ceva obișnuire.

Echipa de proiectare de la Google a simțit nevoia să vină cu un singur aspect și funcționalitate pentru software care ar putea fi folosit în toate produsele: Android, Chrome OS, servicii web. În loc să înceapă prin a proiecta un selector de culori, au început prin a întreba „Ce este software-ul?”

Materia si forma

Răspunsul a venit de la departamentul de design când Jon Wiley, designerul șef al motorului de căutare Google, și colegul său Nicholas Jitcoff se uitau la designul Google Now. S-au uitat la interfața cardului și s-au gândit: „Și dacă muți cardul, ce se află în spatele ei?”

„Această întrebare nevinovată a aprins o scânteie puternică!” - a spus Duarte. Întreaga echipă a început să se gândească la o nouă modalitate de a interacționa cu elementele software. În loc să folosească doar pixeli de pe ecran și straturi abstracte, echipa a început să se gândească la design ca la un obiect real tangibil. Prin urmare, cardurile trebuie să aibă proprietăți fizice. Este timpul să venim cu reguli care să definească modul în care totul ar trebui să acționeze și să se miște pe ecran. Echipa de dezvoltare a dorit să obțină efectul că utilizatorul interacționează cu obiectele fizice.

Astfel, a început lucrul pe un material metaforic asemănător hârtiei. - plat și alb cu umbre realiste. A fost sămânța din care a crescut restul designului, așa cum se vede în Android L. Material Design este totul despre culori îndrăznețe, vibrante, minimalism și un sentiment de consistență.

Wylie și Jitkoff spun că aceasta este o evoluție estetică a întregii filozofii de design a Google. În 2012 și 2013, între zidurile sediului gigantului Internet, au început lucrările la Proiectul Kennedy, care avea să unifice designul a tot.

Creativitate și limitări

Material Design reunește toate cele mai bune idei. Matthias Duarte vede noul nostru stil ca pe un set de constrângeri care, în opinia sa, fac munca designerilor de aplicații mai ușoară și mai consistentă. De exemplu, gestul de a răsturna un card pentru a vedea ce este scris pe spate. În lumea obișnuită, acest lucru nu este posibil din cauza lipsei de spațiu. Este ca și cum software-ul ar fi obiecte fizice reale în interiorul dispozitivelor. Și în mod clar nu există loc pe telefon pentru a răsturna cardul, așa că Google restricționează astfel de manipulări.

Suntem foarte dependenți de fizică, iar software-ul se comportă adesea într-un mod care ne distruge înțelegerea lumii, ca într-un fel de film SF care încalcă logica elementară. Duarte comentează direct noua filozofie de design iOS a Apple.

Nu ne grăbim prin spațiu și timp cu viteze supersonice. Proiecta este o căutare a unei soluții în cadrul unor constrângeri severe. Designul este artă.

Designerii Google refuză cu încăpățânare să numească materialul fictiv folosit. O soluție care le oferă atât mai multă flexibilitate, cât și un nivel de misticism metafizic substanței. Hârtie cuantică - așa au sunat unele scurgeri înainte de Google I/O. Acest lucru este important deoarece materialul se supune fizicii și nu va cădea în capcana skeuomorfismului. Aceasta nu este o imitație a obiectelor fizice exact așa cum a spus Duarte, este ceva „magic”.

Materialul din designul nostru poate face lucruri pe care hârtia fizică, de exemplu, nu le poate crește și micșora cu animații. Aceste animații sunt importante pentru Google, deoarece îi ajută pe utilizatori să înțeleagă că se află în interiorul software-ului. Wiley compară software-ul cu filmele, unde există salturi bruște între scene. Utilizatorul pierde simțul timpului și al spațiului. În software, este important ca utilizatorul să înțeleagă principiile trecerii de la unul la altul.

Materializa

Un alt lucru mai important pe care Material Design îl aduce este unificarea. Google a lucrat la algoritmi pentru toate produsele de ani de zile, iar acest lucru a devenit o parte integrantă a noii filozofii de design. În loc ca utilizatorul să configureze totul el însuși, Material Design îi face să creadă că pe ecran vor vedea de ce au nevoie la momentul potrivit.

Acesta este motivul pentru care Android Wear nu oferă utilizatorilor nimic mai mult decât interacțiunea cu notificările. Alex Faaborg, Platform Designer, spune:

Nu petreci mult timp interacționând cu ceasul. Vrei doar să poți să te uiți la încheietura mâinii și să obții instantaneu informațiile pe care le dorești sau să faci o acțiune folosind o comandă vocală. Am făcut o treabă extraordinară pentru întreaga platformă Google.

Google cere prea multă credibilitate în sine și în materialul său de hârtie „magic”, dar Duarte crede că există motive întemeiate pentru asta.

Am făcut asta pentru că este cea mai simplă soluție. Dorim să proiectăm un design ușor de utilizat cât mai simplu posibil.

Parc 3.0

În spatele Material Design se află mult mai mult decât doar designul Android L, Android Wear și orice altceva în care este implicat Google. Vorbim despre sentimente în relația dintre om și tehnologie.

Duarte spune că Xerox PARC a făcut o treabă genială în crearea unui mod de a lucra cu ferestrele și cursorul cu care toată lumea este familiarizată. A fost inovator deoarece compania a reușit să creeze o versiune virtuală a unui desktop real. Oamenii au înțeles cum funcționează un computer și ar putea lucra confortabil cu el. Acest lucru este valabil și pentru ceea ce a făcut Apple cu ecranele tactile.

Acum Google crede că a făcut același lucru. Wylie spune că oamenii de astăzi au o varietate de tehnologii: ecrane tactile, gesturi, comenzi vocale, algoritmi inteligenți. Material Design reunește toată această diversitate într-un singur lucru intuitiv. Acest lucru vă va ajuta să utilizați cu ușurință același lucru pe sistemul de operare Chrome, Android sau pe Internet.

9 principii

1. Materialul este o metaforă

Material Design este un sistem care raționalizează spațiul și mișcarea. Designul se bazează pe realitatea tactilă, inspirată de posibilitățile hârtiei și cernelii, dar deschisă imaginației și magiei.

2. Suprafețele sunt intuitive

Planurile și marginile transmit semnale vizuale bazate pe percepția noastră asupra realității. Utilizarea atributelor tactile familiare ne permite să ne referim la părțile primare ale creierului nostru și ajută la înțelegerea rapidă a celor „reprezentate”.

3. Dimensiunea dă naștere interacțiunii

Elementele de bază ale luminii, suprafeței și mișcării sunt cheia modului în care obiectele interacționează. Iluminarea realistă împarte spațiul și se concentrează pe părțile în mișcare.

4. Design receptiv unificat

Un design pentru orice. Fiecare dispozitiv reflectă o perspectivă diferită asupra acelorași elemente de bază. Fiecare vizualizare este adaptată la dimensiunea și interacțiunea fiecărui dispozitiv. Culorile, iconografia, ierarhia și relațiile spațiale rămân neschimbate.

5. Fonturi, grafică, culori

Un design clar creează ierarhie, perspectivă și ajută la concentrare. Culorile special selectate, utilizarea spațiului de la margine la margine, fonturile mari și utilizarea deliberată / deliberată a albului permit utilizatorului să cufunde complet utilizatorul în procesul de interacțiune, să îl facă mai clar și mai ușor de înțeles.

6. Acțiuni primare

Acțiunea utilizatorului este esența designului. Acțiunile primare transformă întregul design. Acestea se concentrează pe funcționalitatea de bază și atrag imediat atenția utilizatorului.

7. Utilizatorii inițiază modificări

Modificările în interfață provin din acțiunile utilizatorului. Mișcarea îmbunătățește experiența acțiunii primare.

8. Coregrafie de animație

Toate acțiunile au loc într-un singur mediu. Obiectele pe care le vede utilizatorul nu perturbă restul experienței utilizatorului, chiar și după transformări și reorganizări.

9. Mișcarea oferă sens

Mișcarea are sens și este necesară pentru a atrage atenția. Tranzițiile sunt eficiente.

Designul este arta de a crea. Scopul nostru este de a satisface o gamă variată de nevoi umane. Pe măsură ce aceste nevoi evoluează, același lucru ar trebui să se întâmple și cu proiectele, ideile și filozofia noastră.

Scopul nostru este de a crea un limbaj vizual pentru utilizatorii noștri care să combine principiile familiare ale designului clasic cu inovația.

Probabil că ați întâlnit de mai multe ori expresia design material. Conceptul de design de materiale nu este nou și este deja destul de bine stabilit pe piața de web design, în primul rând datorită atractiei sale pentru experiența utilizatorului. Designul materialului a fost introdus pentru prima dată în vara anului 2015 de către Google și de atunci a fost indisolubil legat de acea companie. Care sunt caracteristicile sale distinctive, principiile de bază și este la fel de bun pe cât se spune despre el? Mai multe despre asta mai târziu în articol.

Designul materialelor nu este doar o idee, ci ia făcut pe designeri să-și regândească complet opiniile asupra și asupra procesului de creare a site-urilor web și a aplicațiilor. Site-urile moderne folosesc diagramele de design de materiale și documentația Google la maximum. Dar înainte de a trece la desert, să definim conceptul de material de design, obiectivele și principalele caracteristici ale acestuia.

Ce este Material Design?

Material Design este un limbaj grafic și un stil de design creat de echipa de dezvoltare Google pentru a ajuta designerii să creeze site-uri web și aplicații care sunt accesibile, practice și utile. Conceptul se bazează pe documentație vie care este disponibilă public și poate fi folosită de oricine este interesat de conceptul de design material. Până în prezent, documentația este actualizată constant pentru a reflecta schimbările în design și dezvoltare. Datorită acestui fapt, designul materialului rămâne relevant și evoluează constant ca direcție.

Material Design are o serie de obiective și principii, așa cum au afirmat creatorii săi. Lista poate părea oarecum idealistă, dar totuși vă prezentăm ideile principale mai jos.

Obiectivele de proiectare a materialelor

1. Creați un limbaj vizual care combină principiile clasice de design bun cu inovația și puterea științei și a tehnologiei moderne.
2. Dezvoltați un singur sistem de bază care vă permite să creați modele universale pentru diferite platforme și dispozitive. Principiile mobile sunt fundamentale, dar atingerea, comenzile vocale, introducerea mouse-ului și tastatura sunt metodele principale de introducere a informațiilor și de interacțiune care vor fi luate în considerare la dezvoltarea design-urilor.

Principii de proiectare a materialelor:

1. Designul material este o metaforă: semnalele vizuale și toate elementele de design grafic ar trebui să fie bazate și interconectate cu realitatea înconjurătoare, lumea materială.
2. Grafic, claritate, scop: teoria de bază a designului (utilizarea tipurilor, grilelor, organizarea spațiului, scara, proporțiile, culoarea și imaginile) ar trebui să determine efectele vizuale și să formeze baza vizuală a materialului de proiectare.
3. Fiecare mișcare sau acțiune contează: mișcarea obiectelor sau alte acțiuni efectuate nu trebuie să interfereze cu utilizatorul, dimpotrivă, trebuie să asigure confortul și consistența acțiunilor efectuate.

Pe lângă obiectivele și principiile de mai sus, există mulți alți factori de ghidare. Asta definește designul materialului. Documentația de proiectare a materialelor se descompune în multe concepte și tehnici specifice. Deci, de exemplu, Google a dezvoltat un set de reguli specifice pentru crearea de animații, stiluri, machete, componente etc.

Toate aceste linii directoare se bazează pe proprietățile de bază ale Material Design. Cel mai important lucru este că designul materialului se bazează pe realitate, în care obiectele se află în spațiu aproape tridimensional. În ceea ce privește estetica, designul materialului se încadrează undeva între designul plat și skeuomorfism.

Design material culoare și tipografie

Culorile din designul materialului au foarte mult de-a face. Paletele de materiale sunt destul de îndrăznețe și vibrante. , la fel ca în design plat, simplu sans serif.

« Designul materialului este plin, combinat cu tonuri atenuate, această abordare își are rădăcinile în arhitectura modernă, indicatoare rutiere, bandă de marcare și terenuri de sport ”, conform documentației de proiectare a materialelor Google. „Accentuează umbrele și luminile îndrăznețe. Folosiți culori neașteptate și vibrante».

Și cel mai bun lucru despre un concept de culoare pentru designul materialului este utilizarea unui contrast puternic. Pentru confortul utilizatorilor, Google oferă o paletă completă de culori cu mostre disponibile pentru descărcare. Conceptele de culoare sunt atât de simple încât s-ar putea întreba dacă Google crede că designerii au uitat complet de teoria culorilor.

Orientările pentru alegerea și utilizarea fonturilor sunt, de asemenea, destul de simple și simple. Fontul implicit pentru toate aplicațiile - Roboto - este disponibil pentru descărcare la link, unde puteți găsi și un tabel de combinații și selecție de fonturi.

Șabloane, structură și design

Designul materialului împrumută foarte mult din conceptul de design de imprimare pentru structura și aspectul său. Material Design invită designerii să creeze și să utilizeze o grilă de bază și o structură matematică pentru a plasa elemente pe baza șabloanelor.

În plus, șablonul este împărțit în zone, pentru fiecare dintre acestea documentația oferă o serie de recomandări care au ca scop îmbunătățirea experienței utilizatorului pe site sau în aplicație (există și recomandări despre cât de important este un anumit element).

Elemente de bază ale designului materialului

Fiecare element din care poate consta un site, creat în stilul materialului, este descris în detaliu în documentație. Pornind de la cum se creează și cum ar trebui să arate, până la locul, metoda și momentul apariției sale pe ecranul utilizatorului. În general, este dificil să vii cu ceva pe care creatorii l-au ratat sau nu. Lista include 19 componente structurale principale, mai jos sunt câteva dintre ele.

• Ecran inferior (straturile inferioare ale designului)
• Butoane
• Carduri
• Dialoguri
• Separatoare
• Grile
• Liste
• Bare de progres și activitate
• Glisoare
• Subtitluri
• Comutatoare
• Filele
• Câmpuri de text
• Ferestre pop-up

Designerii cărora le place aspectul componentelor propuse își pot descărca materialele pentru sau Illustrator. Pictogramele și alte detalii sunt asociate cu stilurile și se adaptează șablonului ales.

Comoditate, accesibilitate și experiență de utilizator

„Un produs este disponibil atunci când toți oamenii - indiferent de abilitate - îl pot folosi pentru a-și atinge obiectivele. Un produs cu adevărat de succes este disponibil pentru cel mai larg public posibil.”

Documentația de proiectare a materialelor se concentrează pe accesibilitate, utilizare și experiența utilizatorului, ceea ce este foarte important. În timp ce multe dintre proprietățile estetice ale designului materialelor pot părea destul de primitive pentru designerii experimentați, unele dintre conceptele experienței utilizatorului și interacțiunii sunt implementate la cel mai înalt nivel.

Secțiunea despre modelele de interacțiune este deosebit de utilă. El dezvăluie idei care vizează universalizarea anumitor elemente de design în raport cu toate proiectele web posibile. De exemplu, formatul pentru specificarea datei și orei sau munca unei căutări. Ele pot diferi de la un site la altul, dar diferențele sunt subtile și, în general, aceste elemente sunt destul de universale. Dacă un vizitator vede o lupă, înțelege că în fața lui există o căutare, care poate fi folosită chiar dacă nu există un index de text lângă ea. Acesta este motivul pentru care Material Design conține unele dintre cele mai simple instrumente pe care utilizatorii se așteaptă să le vadă pe orice site și cu care sunt obișnuiți să lucreze.

Accesibilitatea și claritatea designului este un alt aspect acoperit pe scară largă în documentația de proiectare a materialelor. Designul materialului ar trebui să țină cont de utilizatorii care pot interacționa cu acesta nu numai prin culori și forme, ci și prin sunete și căutare vocală. De asemenea, este important să se ia în considerare posibilitatea de a vizualiza modele pe dispozitive cu contrast ridicat, ecran mare, fără ecran vizibil, folosind doar controlul vocal sau luând în considerare o combinație a tuturor acestor elemente.

10 Resurse de proiectare a materialelor

Material Design este un subiect popular de discuție și o sursă de inspirație pentru multe bloguri, forumuri și alte site-uri unde se adună designeri web. Există multe lucruri utile pe care le puteți descărca direct de pe Google, dar există și multe alte resurse care își postează munca de proiectare a materialelor. Iată câteva site-uri care vă ajută să învățați concepte de design de materiale și să descărcați materiale gratuite.

1. Seturi de elemente în stilul designului materialelor pentru smartphone-uri și alte dispozitive mobile (a se vedea mai jos).

Partea 1: Galeria de design de materiale pentru site-uri web și aplicații - conținut gratuit

Pentru a simplifica sarcina pentru acei cititori care au decis să preia un proiect în stilul de design material, am decis să creăm o galerie cu dezvoltări și soluții gata făcute. Doar luați unul sau mai multe dintre kiturile gratuite care sunt prin amabilitatea designerilor din întreaga lume. Mai jos veți găsi o colecție extinsă de astfel de articole.

Design material de către UXPin

Design material de Creative Tim

Compilare gratuită de la Designtory

UIDE - material de schiță gratuit de la Mateusz Dembek

Resursă de schiță Google pentru proiectarea materialelor

L Bootstrap Design de materiale în stil Android de Vitaly Chernega

Resursă de schiță a designului materialului de către Boilerplate

Design material pentru EL Passion

Material de stil blocuri Froala

Free Material Style Landing 1.0

Design material mobil

design material avsc

Designul materialului UI de Jakub Kośla

Design Matkrial pentru Android de Ivan Bjelajac

Design material de la Ultralinx

Design material mobil de Emma Drews

Compilare gratuită de la Adrian Goia

Design material de către UI8

Design material pentru Photoshop de către Psddd

Android Material Design PSD de Nine Hertz

Alte kituri de design de materiale pe care le puteți găsi utile

Design de material interactiv al stației de Nelson Sakwa

Widgeturi de stil material de Elad Izak

Schiță de material de Benjamin Schmidt

Color Selector Material Color Selector

Rezumând

Conceptul de design material este o soluție bine gândită pentru crearea oricărui site web modern sau design de aplicație. În plus, există un ghid de design de materiale destul de detaliat, care va fi de mare ajutor pentru designerii aspiranți, dar poate părea puțin primitiv pentru designerii experimentați.

Este posibil ca ziua de mâine să apară complet, ceea ce va șterge designul materialului din memoria dezvoltatorilor, așa cum a șters tehnologia Flash la vremea lui. Nimeni nu este imun la asta. Dar, în calitate de designeri, aveți dreptul să decideți singur cât de interesant și necesar este designul materialului pentru dvs. în următoarele proiecte, precum și să utilizați dezvoltările și elementele sale pentru propriile experimente.

Creați modele cu plăcere și, dacă aveți ceva de adăugat la articol, nu ezitați să scrieți sugestiile dvs. în comentarii.