Meniul
AcasăiOS

Google Material Design - un aspect posibil pentru o nouă eră. Recomandări pentru lucrul cu Google Images

  • Tutorial
„Este cu adevărat necesar 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 în urma 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 rău în moduri diferite. Chiar și un produs per platforme diferite părea inconsecvent.

Totul a început să se schimbe în 2011, când Google a început să lucreze 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 aceasta: președintele Kennedy a inițiat programul de a zbura un om pe Lună (dacă crezi că acest zbor s-a întâmplat vreodată). Iar marele șef de la Google, Larry Page, susține 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ă intenționați să lansați un produs, atunci mergeți direct pe Lună. Și aici s-a decis să se refacă radical totul.



Rezultatul a afectat în primul rând web-ul, dar a afectat și unele produse mobile. În același timp, se desfășurau lucrări separate Design 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 noua interfata când comutați, obișnuiți-vă aspect, locația 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ă se 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ă o evoluție limbaj vizual Holo și linii directoare de proiectare. În multe privințe, este un sistem mai flexibil, conceput cu așteptarea ca alți designeri să-l folosească - Google a fost doar primul utilizator.

Material Design vă permite să luați o abordare mai obiectivă a deciziilor de proiectare: cum arată ceva, cum funcționează ceva, cum se realizează animația și așa mai departe. Stabilește limite rezonabile, dar nu restricții inutile.

4 Principii de proiectare a materialelor

Designul materialului se bazează pe patru principii principale:
  • Suprafețe tactile.
  • În Material Design, interfața este formată din straturi tangibile de așa-numita „hârtie digitală”. Aceste straturi sunt situate la diferite înălțimi și aruncă umbre unele pe altele, ceea ce ajută utilizatorii să înțeleagă mai bine anatomia interfeței și modul în care interacționează cu aceasta.
  • Design tipărit.
  • Dacă ne gândim la straturi ca bucăți de „hârtie digitală”, atunci când vine vorba de „cerneală digitală” (tot ceea ce este descris pe „hârtie digitală”), se folosește abordarea din designul grafic tradițional: de exemplu, revistă și poster proiecta.

    • Animație semnificativă.

    În lumea reală, obiectele nu apar de nicăieri și nu dispar în nicăieri - acest lucru se întâmplă doar în filme. De aceea, la Material Design ne gândim în mod constant la cum să folosim animația în straturi și cerneala digitală pentru a oferi utilizatorilor indicii despre cum funcționează interfața.

    Design adaptiv. Este vorba despre modul în care aplicăm cele trei concepte anterioare pe dispozitive diferite cu rezoluții și dimensiuni de ecran diferite. Deci, să ne mișcăm în ordine.

    Suprafețe tactile

    Să începem cu suprafețele tactile. Acestea sunt aceleași bucăți 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ţă

    În „designul plat” tradițional, astfel de umbre sunt evitate ca orice manifestare a volumului, dar îndeplinesc 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 este mai mare. Această adâncime sporită ajută la concentrarea atenției utilizatorului asupra lucrurilor critice și face acest lucru cu grație.

    Profunzimea oferă, de asemenea, indicii despre interacțiune. Aici, pe măsură ce utilizatorul derulează, patch-ul verde se lipește de stratul superior și se adaugă o umbră. Acest lucru arată că nu doar „cerneala” este cea care se mișcă, ci fundalul alb este dedesubt și se mișcă complet.

    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ă la peretele din spate și aveți un card de credit în interfață, atunci nu îl puteți întoarce pur și simplu - se va sprijini pe sticlă și pe peretele din spate.

    NB!
  • Adâncimea trebuie 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. Ai grijă de logistică. Butoane plutitoare, bare de instrumente și
  • casete de dialog sunt 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. Nu este nevoie să forțați butonul.
  • Butonul plutitor este un element foarte distinctiv. Mulți oameni cred că merită să îl adăugați la interfață: acesta devine imediat Material Design. Dar ar trebui folosit doar pentru 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 un buton plutitor. Există și alte elemente pentru asta.
  • Nu totul trebuie să fie pe card.
  • Dacă un obiect are multe forme și conține multe
    • continut diferit

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

    Tipografie elegantă În designul tipărit, tipografia joacă un rol fundamental. Luați orice revistă și veți observa că tipografia face două lucruri: funcții importante. În primul rând, alegerea și compoziția fontului este un element care formează stilul mărcii publicației. În al doilea rând, tipografia stabilește structura conținutului.


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

    Avem un antet mare și un set de elemente mai mici care se disting prin saturația lor - cele mai importante sunt mai întunecate. În același timp, distingem clar gruparea datorită faptului că unele dreptunghiuri sunt situate aproape și există o indentare semnificativă între blocuri. În general, totul este în cele mai bune tradiții!

    Marimea fontului

    Site-ul web google.com/design/spec are o paletă standard de fonturi pe care o puteți utiliza în siguranță. Paleta folosește fontul Roboto, dar poate fi înlocuită cu propriul font de semnătură 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 Fonturi OTF funcționează mai bine decât TTF.

    Tipografie contrastantă

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

    Grilă modulară și ghidaje

    Acum, la locația conținutului de pe ecran. În designul de imprimare, în designul ecranelor sunt folosite grile modulare, acestea sunt grile mai de bază cu module foarte mici. Astfel, Material Design folosește o grilă cu un pas de 8dp. DP este un pixel independent de densitate, o unitate asemănătoare unității de puncte din iOS.

    Dar principalul lucru trăsătură distinctivă plasarea conținutului în conformitate cu principiile Material Design - plasarea ghidurilor cheie. Ei stabilesc indentări 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 de unde vin picioarele.

    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 de susținere în margini.

    Iconografia geometrică

    Apropo de iconografie, 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 pot contribui acolo unde este posibil.

    Ca și în designul de imprimare, culoarea este un mijloc important de exprimare în designul interfeței. În fosta Culoarea Android a fost ceva suplimentar, dar acum joacă un rol mai proeminent. În Material Design, paleta standard de culori a aplicației constă dintr-o culoare primară și o culoare de accent.

    Cea principală este folosită pentru zone mari, cum ar fi bara de acțiune, iar variația sa mai întunecată este pictată bara de stare. O culoare de accent mai strălucitoare este utilizată în punctele de pe comenzi, butoane, dungi, indicatoare etc. O culoare de accent este concepută pentru a atrage atenția utilizatorului asupra elementelor cheie, cum ar fi un buton plutitor.

    Câtă culoare să folosești? Accentuările sunt puse punctual, în cantitate mica. Pentru a colora restul interfeței există un simplu regula de baza. Când există mult text, de exemplu, aceasta este o listă de e-mail, ar trebui să părăsiți bara de aplicații marimea standardși colorează-l pentru a permite utilizatorului să se concentreze asupra conținutului. Dacă nu există prea mult conținut, de exemplu, o vizualizare detaliată a unui singur element, o fotografie sau un calculator, atunci aceasta este o oportunitate excelentă de a folosi plăci colorate mari - 2x sau 3x înălțimi a barei de aplicație.

    Android acceptă o bibliotecă numită Palette care vă permite să extrageți culoarea din fotografii. Adică, este posibilă colorarea dinamică a interfeței pe baza ilustrațiilor foto din aplicație.

    Am făcut o fotografie, iar algoritmul a identificat 6 culori cu caracteristici diferite de la aceasta:
    - sunt 3 culori bogate si 3 dezactivate;
    - se impart in tonuri deschise, standard si inchise;
    - fiecare culoare de fundal are propria culoare de text, care poate fi, de asemenea, folosită.

    Fotografii frumoase

    În cele din urmă, la fel ca designul 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 special făcută transparentă pentru a nu interfera. Mai mult, fiecare picătură de „cerneală digitală” de pe ecran are o funcție, aproape nimic nu este doar pentru decorare.

    NB!
  • Brand cu placere. Google este într-o poziție mai bună cu ceea ce poate folosi culori deschise
  • ca cele de marcă, dar acest lucru nu trebuie luat ca o problemă. Puteți alege culorile din cartea mărcii corporative și puteți utiliza logo-ul cu totul.
  • Nu uitați de indentări și „dați puțin aer”. O grilă de bază de 8 dp și o marjă din stânga de 72 dp este aproape regula. Lăsați conținutul să fie bun și gratuit. Fotografiile expresive fac diferența.
    • Fotografii și ilustrații de calitate

    mijloace expresive

    - alegerea noastră.

    Animație semnificativă În lumea reală, obiectele nu pot să apară din senin sau să dispară în neant. Acest lucru ar provoca confuzie și ar deruta oamenii. De aceea, Material Design folosește o animație semnificativă pentru a arăta exact ceea ce tocmai sa întâmplat. Exemplul 1. Animația arată că acest card special, după ce a fost dat clic, a ajuns în prim-plan, s-a deschis și au devenit vizibile mai multe informații.

    Exemplul 2. După apăsare, un eveniment din calendar iese de pe suprafață, se transformă într-un strat separat de „hârtie”, începe să se transforme și se deschide ca

    informatii detaliate

    despre eveniment.

    Punctul 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 duce și la faptul că animația de transformare trebuie să fie asimetrică - adică modificarea lățimii și înălțimii obiectului trebuie să fie independentă. În caz contrar, există 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 răspunsul la acțiunile utilizatorului. Acolo unde este posibil, epicentrul modificărilor interfeței ar trebui să fie atingerea ecranului dispozitivului. De exemplu, o undă care apare și merge din punctul de contact cu un deget. Acest efect este implementat fără probleme în Android L.

    Și ultimul, principiu cheie al animației: mișcarea ar trebui să fie rapidă și clară. Spre deosebire de banala accelerare de la început și de încetinire 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 repede, dar durează puțin mai mult pentru a ajunge la starea de repaus la sfârșit. Ca urmare, utilizatorul trebuie să aștepte mai puțin (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!
  • Nu lăsa animația pentru final. Nu ar trebui să lăsați animația până la sfârșit - poate servi factorul cheie
  • experiența utilizatorului și trebuie gândită în prealabil.
    • Cunoaște-ți limitele.

    Prea multă animație este de asemenea rău. Controlează-te și amintește-ți că trebuie să aibă sens. Design adaptiv Ultimul aspect major al Material Design-ului este conceptul

    design adaptiv . 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 micșorarea ecranului. Dacă este pornit ecran mare ne putem permite să arătăm atât lista cât şi

    informatii detaliate în funcție de elementul selectat, apoi pe smartphone-uri este afișată mai întâi o listă, iar pentru detalii este nevoie de un ecran separat. În cazul tabletelor, bara de aplicații poate fi uneori mărită pentru a face față cel puțin puțin spațiului liber Plasarea conținutului folosind blocuri simplifică foarte mult munca cu spațiul liber activat 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

    ecrane late blocurile sunt întinse la limitele lor de lizibilitate, iar apoi sunt adăugate margini de la margini, care pot fi foarte mari. Ele pot fi umplute cu un buton plutitor și plăci colorate. Rame albe Idei de organizare a spatiului si spatii pt diferite ecrane poate fi vizualizat pe site-ul web google.com/design/spec în secțiunea Whiteframes. Acest

    locul perfect pentru a începe, înțelegeți ideea generală și apoi continuați cu propriile dvs. experimente"hârtii". Pe un smartphone avem o coală și o indentație bună în stânga, dar pe o tabletă sunt două și în ambele cazuri există o indentație. Este important ca indentarea să fie diferită pentru acești doi factori de formă. Pe o tabletă este 80 dp, iar pe un smartphone este 72 dp. Marginile de la marginile ecranului sunt, de asemenea, diferite

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

    Gândirea în blocuri poate fi, în general, utilă. Dacă setați o astfel de grilă modulară de blocuri divizibile cu 8dp, veți obține un ritm vizual excelent și va fi mai convenabil să luați decizii. Accesați site-ul cu cadre albe și uitați-vă la materiale.Bara de instrumente

    Bara de acțiune este una dintre cele mai multe părți importante interfata. Conține antetul, butoanele de acțiune și navigarea. ÎN Android Lollipop Bara de acțiuni s-a transformat dintr-o bandă restrânsă în partea de sus într-un widget cu drepturi depline - funcțional și bloc frumos managementul aplicațiilor. Acest lucru a devenit posibil datorită faptului că acum bara de instrumente poate găzdui o mulțime de elemente functionale, la care nu visasem niciodată:
    - câmpuri de intrare, formulare;
    - buton principal de acțiune plutitor;
    - bara de instrumente este ascunsă de navigarea extinsă, dar aici vedem un widget complet funcțional;
    - bara de instrumente este convenabilă de gestionat dacă este necesar.NB!
  • Un sertar de navigare nu este întotdeauna necesar.
  • Google folosește foarte des navigarea glisantă în aplicațiile sale, așa că o puteți vedea în diverse exemple. Dar Google are o mulțime de probleme care pot fi rezolvate cu ajutorul său: ajutor pentru postare, 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ă.
  • Fii mai îndrăzneț și mai inteligent cu barele de instrumente.
  • 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 întorc într-un loc și altul (chiar dacă despre care vorbim

    • despre 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 de a copia solutii existente

    . Incearca-l!

    Etichete: Adăugați etichete Etichetați publicația cu propriile etichete 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.

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

    Nota autorului: în 2014, Google a publicat specificația pentru Material Design, un limbaj vizual care își propune să reunească principiile de design consacrate, experiențe de utilizator fără întreruperi pe platforme și dispozitive și inovație tehnologică și științifică.

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

    Dacă utilizați npm, pentru a instala MDL în folderul node_modules trebuie să introduceți următoarea comandă: npm install material-design-lite –save Google recomandă utilizarea fișierelor CSS și JS aflate pe un CDN. Aceasta este metoda pe care am folosit-o în demonstrație. În primul rând, în antet document HTML

    < link rel = "stylesheet"

    trebuie să conectați fișierul MDL CSS, pictogramele Material Design și stilurile de proiect, în care puteți face propriile modificări:

    < link rel = "stylesheet"

    href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css" >

    < link rel = "stylesheet" href = "css/styles.css" >

    href = "https://fonts.googleapis.com/icon?family=Material+Icons" >

    Tipografie în Material Design Lite

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

    < link rel = "stylesheet"

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

    href = "http://fonts.googleapis.com/css?family=Roboto:400,100,500,300italic,500italic,700italic,900,300" > Pentru latină, greacă și Specificația Material Design recomandă scale tipografice de 12, 14, 16, 20 și 34. Puteți aplica principiile tipografice MDL adăugând un set de clase speciale la marcaj. De exemplu, .mdl-typography—display-2 pentru h1 și .mdl-typography—display-1 pentru

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

    Titlu

    Subtitlu

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

    < p class = "mdl-typography--display-1" >

    Subtitlu

    < / p >

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

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

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

    Principii pentru alegerea culorilor în Material Design

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

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

    Atunci când vă dezvoltați propria paletă, Material Design recomandă utilizarea a trei nuanțe din paleta principală și o culoare de accent din paleta secundară. Exemplu:

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

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

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

    Setați adresa URL la fișierul stil MDL în atributul href al linkului din antetul documentului dvs. HTML.

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

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

    < link rel = "stylesheet"

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

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

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

    Stratul de componente MDL

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

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

    Stratul de navigare

    Cum să utilizați filele pentru navigare

    Puteți crea un meniu utilizând una dintre următoarele: următoarele metode:

    Antet transparent

    Bară laterală fixă ​​fără antet

    Antet fix

    Antet și bară laterală fixe

    Antet derulant

    Antet în cascadă

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

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

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

    < div class = "mdl-layout

    Mdl-js-layout mdl-layout--antet-fix

    Mdl-layout--fixed-files" >

    < / div >

    Observați cum MDL utilizează clase CSS din spațiul de nume BEM.

    Titlul dvs. Fila 1 Fila 2

    < header class = "mdl-layout__header" >

    < div class = "mdl-layout__header-row" >

    < ! -- Title -- >

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

    < / div >

    < ! -- Tabs -- >

    < div class = "mdl-layout__tab-bar mdl-js-ripple-effect" >

    < a href = "#fixed-tab-1" class = "mdl-layout__tab is-active" >Fila 1< / a >

    < a href = "#fixed-tab-2" class = "mdl-layout__tab" >Fila 2< / a >

    < / div >

    < / header >

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

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

    < main class = "mdl-layout__content" >

    < ! -- Panel 1 -- >

    < section class = "mdl-layout__tab-panel is-active" id = "fixed-tab-1" >

    < div class = "page-content" >

    < ! -- контентпанели1 -- >

    panoul de conținut 1

    < / div >

    < / section >

    < ! -- Panel 2 -- >

    < section class = "mdl-layout__tab-panel" id = "fixed-tab-2" >

    < div class = "page-content" >

    < ! -- контентпанели2 -- >

    panoul de conținut 2

    < / div >

    < / section >

    < / main >

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

    Cum să postezi continut suplimentarîn bara laterală

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

    Titlul tau

    < div class = "mdl-layout__drawer" >

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

    < / div >

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

    Grilă în Material Design Lite

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

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

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

    < div class = "mdl-grid intro-section" >

    < ! -- контентненавесьэкран-- >

    < / div >

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

    Introducere - secțiune (

    max - latime : 960px ;

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

    < div class = "mdl-grid mdl-grid--no-spacing" >

    < ! -- контент-- >

    < / div >

    Veți obține ceva de genul:

    < div class = "content-grid mdl-grid" >

    < div class = "mdl-cell" >

    < ! -- контент-- >

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

    La marcaje

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

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

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

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

    Inbox: Grilă modulară

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

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

    Adâncime

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

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

    Tim Smith

    Designer șef la Inbox

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

    Culori, imagini și pictograme

    Utilizarea imaginilor contextuale în 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 o cartelă cu litera corespunzătoare.

    Există multe pictograme pe bara de navigare din stânga, culorile acestora corespund cu funcțiile lor din aplicație. Când utilizatorul face clic butonul verde„Finalizat”, 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 dezvoltarea barei de sus a aplicației. Ideea inițială a fost de a crea un panou transformabil care să nu se întindă pe lățimea ferestrei browserului, ci să se schimbe în funcție de conținut.

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

    Tim Smith

    Designer șef la Inbox

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

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

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

    Implicare, ecrane goale și animație

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

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

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

    Genevieve Cuevas

    Selectarea elementelor de material potrivite: 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 modelele Material Design și, în cele din urmă, au ales carduri care ajută la diferențierea notelor unele de altele, o bară de navigare din stânga care face ușoară personalizarea aplicației și un meniu contextual care se modifică în funcție de tipul de notă - cum ar fi note cu casete de selectare care afișează un meniu pentru a verifica și modifica elementele din listă.

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

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

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

    Genevieve Cuevas

    Inginer software Google Keep

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

    Un ghid, nu un set de reguli

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

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

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

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

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

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

    Principii principale

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

    Suprafețe tactile.

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

    , puncte cheie ale managementului produselor sau serviciilor. Animație semnificativă. Claritatea și înțelegerea animației aplicației afectează direct timpul petrecut de utilizator calculator personal.

    pentru a înțelege rezultatele acțiunilor utilizate în acest program. Animația este un fel de indiciu pentru gestionarea interfeței

    Design material

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

    Suprafețe tactile

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

    Suprafaţă

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

    Designul „pur” se numește de obicei capacitatea de a transmite proprietățile unui obiect printr-un gradient sau umbră, fără a utiliza structura. Toate suprafețele au propria umbră și o anumită înălțime. AdâncimeÎn „design plat” ei încearcă să nu folosească umbre care arată volum. În același timp, sunt stabilite umbre

    o anumită ierarhie

    și structura elementelor de interfață. Umbra adâncă evidențiază subiectul cheie și concentrează atenția asupra acestuia într-un mod subtil și elegant.

    • Adâncimea este un indiciu despre modul în care obiectele interacționează. În momentul derulării utilizatorului, placa verde este atașată la stratul superior și formează o umbră. Acest lucru demonstrează în mod clar nu numai mișcarea „cernelii”, ci și mișcarea fundalului alb situat dedesubt.
    • Nu forțați butoanele.
    • Ar trebui să utilizați un buton plutitor numai în caz de nevoie urgentă, deoarece utilizarea lui aduce imediat efectul Material Design în design. Nu ar trebui să-l utilizați pentru a confirma orice acțiune sau pentru a închide ferestrele.
    • Nu totul trebuie să fie pe card.
    Este indicat să folosiți un card numai atunci când obiectul conține multe forme și o cantitate mare de conținut. Pentru alte opțiuni, este mai logic să folosiți text sau liste tradiționale.

    Minimalism în casetele de dialog.

    Casetele de dialog ar trebui folosite numai pentru a confirma acțiunile utilizatorului atunci când apar întrebări.

    Design tipărit

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

    Tipografie elegantă

    Tipografia este importantă în designul tipăritului. Stabilește structura conținutului și influențează formarea stilului unui anumit brand. Tipografia formează o structură de elemente care au propria lor dimensiune, font, ierarhie Cu ajutorul lor, înțelegem vizual care elemente sunt mai semnificative și de ce unele dintre ele sunt cheie, iar altele sunt secundare. Tipografie contrastantă

    Încă una

    principiu important

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

    Grilă modulară și ghidaje

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

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

    Descărcați pictograme pe acest subiect:

    Culoare

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

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

    Accentele sunt plasate punctual și în cantități mici. Pentru restul interfeței, culorile sunt folosite în conformitate cu regula: o cantitate mare de text (o listă de litere de e-mail) este lăsată la o dimensiune standard și se adaugă culoare pentru a atrage atenția utilizatorului de PC; o cantitate mică de text (calculator, fotografie) este mărită de 2-3 ori și se adaugă matrițe colorate.

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

    Fotografii frumoase

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

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

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

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

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

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

    Reacţie

    Tipografia este importantă în designul tipăritului. Stabilește structura conținutului și influențează formarea stilului unui anumit brand. punct-cheie animația în Material Design este considerată a fi o reacție la anumite acțiuni ale utilizatorului de PC. Modificările în interfața Android L apar după ce vă atingeți degetele. Aceste schimbări se reflectă într-o acțiune de tip val.

    Microanimatii

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

    Claritate și claritate

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

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

    Ultimul aspect cheie al Material Design-ului este conceptul de design responsive. Aceasta înseamnă opțiuni pentru aplicarea celorlalte trei aspecte diverse ecrane dispozitive (telefon, PC, televizor etc.).

    De la general la specific


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

    Indentări

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

    Ghiduri


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

    Dimensiuni

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

    Blocuri

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

    Bara de instrumente

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

    • Nu ar trebui să utilizați sertarul de navigare pentru instrumente simple. Este recomandat să utilizați navigarea numai pentru mai multe sarcini din aplicație.
    • Fii îndrăzneț cu barele de instrumente.
    • Plasați butonul plutitor în locația cea mai optimă. Nu vă fixați strict în colțul de jos.
    • Exersați elementele de interfață pentru ecranele dispozitivelor verticale și orizontale.
    Materialul ca metaforă

    Dezvoltatorii Google au reușit să combine un design bun și atractiv cu inovațiile tehnologiei și științei moderne.

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

    Un bun exemplu în acest sens este aplicația Chioșc de ziare. Aici am vizualizat obiecte cunoscute nouă: ziare, reviste care stau pe rafturi. Răsfoind aceste reviste, simulăm răsfoirea reală a unei cărți obișnuite din Viata de zi cu zi. Astfel, viața reală tradițională este duplicată în „digital”.

    Dezvoltarea designului digital

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

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

    Vizibilitatea ca bază fundamentală

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

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

    Bazele Design material include, de asemenea, principiile de design de imprimare. Accentul este pus nu numai pentru estetică, ci și pentru a crea o structură specială, ierarhie și pentru a crea un sistem de management simplu.

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

    Dinamica semnificativă

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

    Exemple de site-uri web în stilul Material Design

    De îndată ce conceptul a fost lansat online, mulți reprezentanți ai Material Design au apărut online.

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



    Videoclipuri

    Material Design a atras un public uriaș. El demonstrează cum să creați corect o interfață de utilizare, astfel încât să fie absolut de înțeles și clar pentru utilizator, la fel ca un obiect familiar din lumea reală pe care îl puteți atinge cu mâinile.

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

    Videoclip de pe canalul Google Design.

    Ce este designul materialului? Este un set de stiluri și grafică dezvoltat de Google, împreună cu 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 concise și elemente grafice, precum și simplitatea generală și prospețimea designului - culori calme, moi, lipsă de volum, mici detalii și detalii în general. Prima „publicare” pentru designul materialelor a avut loc odată cu lansarea serviciu Google Acum, 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 formă unificată, dar și unele dezavantaje. În acest scurt articol voi încerca să prezint punctul meu de vedere asupra Limba noua; limbaj nou design de la Google.

    Design material – argumente PENTRU

    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, Actualizare iOS până la a șaptea versiune și Actualizare Android până la a cincea versiune - acestea sunt, după cum se spune, două diferențe mari.

    În cazul Apple am văzut transfer normal grafica anterioară în vedere plată, nicio idee nouă, nicio dorință de a aduce ceva proaspăt - au luat doar interfața existentă, au zdrobit-o, au redesenat pictogramele și au adăugat cele curcubeu imagini de fundal. Exact imagini de fundalîn noul iOS 7, efectele de transparență a meniului sunt un indicator al prost-gustului și al nedorinței designerilor de a face ceva bun și amabil, așa cum mi se pare. În cei „șapte” au aruncat pur și simplu praf în ochii tuturor efecte frumoase animații și luminozitatea generală a noii interfețe. Mi se pare că nimeni nu s-a gândit cu adevărat dacă acest lucru ar fi convenabil, pentru că altfel designerii Apple ar fi acordat mai multă atenție aspectelor funcționale decât designului curcubeu.

    Nuanța de notificare, apelată de sus, și panoul de control, apelat de jos, sunt exemple clare de „upgrade” inutil în iOS7. Prima nu a fost niciodată mai clară - toate notificările sunt îngrămădite într-o mizerie și sunt prea multe, a doua a fost făcută la jumătate, comutatoarele vă permit să activați/dezactivați interfețele, dar nu continuați la configurarea lor și selectarea rețelelor

    Android 5.0 a fost actualizat foarte serios și în ceea ce privește grafica față de 4.x tocmai în legătură cu transferul sistemului de operare la material design. Și, la prima vedere, schimbările de aici sunt similare cu cele care au avut loc în iOS - o schimbare finală de stil într-unul plat, un design general 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 de bază al designului materialului exclude prioritatea efecte graficeîn interfață înainte de caracterul său practic? si asta e foarte tare.

    Pentru a rezuma primul argument - designul materialului pare deja foarte holistic, acesta este exact ceea ce lipsea sistem de operare de la Google și CO - integritate și comunitate. Când, deschiderea fiecărui program individual, fie că este vorba de contacte, browser, client de mail sau altceva, vezi aceeași animație, aceeași paletă de culori și elemente pur și simplu recunoscute. Din acest motiv, este mai ușor să te obișnuiești cu noul sistem de operare și este pur și simplu 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, probabil ați observat că interfața a devenit vizual mai mare. Consolidarea interfeței are loc în dispozitivele tactile de mult timp. Dacă comparăm primele versiuni de Android cu „pe atunci” Windows Mobile– evident, Android era mai mare și mai simplu, mai puține informații se potriveau pe ecran, dar era și mai convenabil să controlezi smartphone-ul. În designul materialelor, unele elemente au fost înlocuite cu „cărți”, fonturile, pictogramele și dimensiunile liniilor au fost ușor mărite, iar interfața în ansamblu a devenit mai mare. Îmi place asta, probabil pentru că îmbătrânesc, glumele deoparte, dar cu cât îmbătrânesc, cu atât am mai puțină dorință de a mă uita la icoane și elemente „milizate”, chiar dacă viziune buna. Apropo, de aceea nu-mi place iPhone 5 și nimic mai mic. Compactitatea este compactă, dar chiar și pe un ecran cu diagonala de 4,5 inchi, vrei să vezi elemente de dimensiuni normale și nu să le studiezi cu lupa. Acest lucru este pur și simplu mai convenabil în multe situații, mai ales atunci când lucrați cu un smartphone din mers, de exemplu. Prin urmare, extinderea generală a interfeței în Android 5.0 pe baza designului materialului mi se pare un pas bun.

    Al treilea argument în favoarea este că Google nu numai că a trecut Android la un nou design, ci a pregătit imediat ghidurile vizuale necesare care demonstrează implementarea principalelor elemente pentru dezvoltatorii de software. Pur și simplu, dacă o faci program nou sau vrei să-l transformi pe cel vechi într-un design nou, tu site-ul webși studiați recomandările Google.

    De exemplu, spune ce culori să folosești. sunt afișate fonturile și modul de utilizare. Și recomandări pentru utilizarea corectă imagini graficeîntr-un 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 a le oferi ghid cuprinzător De utilizarea corectă un nou limbaj de design, dar în acest caz, să spunem, nu ne-am putut gândi la utilizatori. Programe scrise conform tuturor regulilor de proiectare a materialelor sau modificate extern conform managementul Google, va arăta foarte armonios în Android 5.0 și nu atât de mult în altele versiuni anterioare sisteme. Și invers - toate aplicațiile care nu respectă regulile designului materialului vor arăta oarecum străine pe un smartphone cu Android Lollipop. Și în următoarele șase luni vor fi multe astfel de programe, m-aș aventura să ghicesc. Totuși, nu toți dezvoltatorii unui program popular, 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 convertească în design material.

    Un exemplu bun design vechi într-un program foarte actual - WhatsApp. Cât timp aplicația nu va fi transferată la md? Buna intrebare

    Se pare că unii dezvoltatori vor renunța cu adevărat la tot și își vor transfera programele către designul materialelor, în timp ce alții nu o vor face. Și pe Google Play există programe cu un design mai vechi, să zicem, dar și uneori necesare pentru muncă. Ca urmare, se dovedește că dorința Google (fără îndoială corectă!) de a aduce Android într-o formă comună nu este suficientă cu sute de mii de programe. Întrebare - 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 de materiale ca bază?