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 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 unui nou serviciu de e-mail este o sarcină foarte ambițioasă pentru Google, având în vedere Gmail deja consacrat pe piață. Scopul Inbox a fost de a adăuga profunzime designului interfeței și de a crea o experiență unică de utilizator și o identitate de marcă, jucându-se după noile reguli ale 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 o mare diferență de 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ă utilizatorul plănuiește o călătorie la New York, va vedea cerul Manhattan pe card cu litera corespunzătoare.

Există multe pictograme pe bara de navigare din stânga, culorile acestora corespund cu funcțiile lor din aplicație. Când utilizatorul face clic pe butonul verde Terminat, fundalul barei de sus devine și el verde, indicând faptul că contextul s-a schimbat.

Panoul de sus

O altă sarcină importantă pentru echipă a fost 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 la aproximativ o duzină de variante diferite ale acestui concept până când am ajuns în cele din urmă la experiența pe ecran complet 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 antetului se modifică în funcție de modul în care utilizatorul interacționează cu e-mailul. Bara de sus afișează, de asemenea, o bară de căutare și 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 de navigare receptivă

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ă. Bara de navigare de jos vă permite să creați rapid o notă nouă cu un singur clic.

Implicare, ecrane goale și animație

De obicei, utilizatorul se confruntă cu un ecran gol atunci când nu există conținut pe pagină. În Keep, 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ă.

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

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

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

Genevieve Cuevas

Inginer software Google Keep

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

Un ghid, nu un set de reguli

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

Material Design oferă îndrumări bazate pe anii de experiență Google, dar nu poate rezolva 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.

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

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

Designul materialului poate fi văzut ca primul pas serios și destul de previzibil către unificarea în masă a interfețelor și, în consecință, unificarea experienței utilizatorului ca atare. Această caracteristică este cheia designului materialului - este universală și uniformă. Ca a doua trăsătură caracteristică a designului materialului, trebuie subliniată intuitivitatea, care este următorul aspect cel mai important după unificarea cuprinzătoare. De fapt, aceste două componente - unificarea interfețelor și intuitivitatea maximă - sunt concepute pentru a face din designul materialului un fenomen cu adevărat de masă.

Google a lansat Material Design pentru publicul larg pe 25 iunie 2014, ca design pentru noul sistem de operare Android, numit ulterior Lollipop. Utilizarea completă a designului materialului poate fi făcută numai în cadrul creării de aplicații pentru Lollipop, dar unele aplicații pentru Android 4 pot fi, de asemenea, reproiectate în stilul materialului, totuși, cu anumite restricții. Principalul și probabil singurul factor care limitează semnificativ libertatea dezvoltatorilor de aplicații pentru Lollipop este compatibilitatea slabă a conceptului de design material cu versiunile anterioare de Android și prevalența încă scăzută a Android 5.1 Lollipop. În orice caz, este doar o chestiune de timp până când ultimul defect să fie eliminat.

Android Acadea

Lansarea conceptului de design material a fost asociată cu apariția unui detaliat, accesibil și minuțios ghiduri de la Google. Pe măsură ce discutăm despre designul materialelor în articolul nostru, ne vom referi în mod regulat la acest ghid cuprinzător și vibrant dezvoltat de designerii Google.

Teze principale și principii de bază ale Material Designului

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

1. Suprafețe. Încorporate sub formă de carduri create din „hârtie digitală”, astfel de suprafețe sunt complet supuse legilor lumii fizice, au un răspuns tactil și oferă un feedback puternic, împreună cu o intuitivitate ridicată.
2. Tipografie tipărită. În loc să reinventezi roata, de ce să nu profiti de mai bine de un secol de experiență în domeniul imprimării? Având în vedere că suprafața inițială este acum reprezentată de straturi de hârtie virtuală, practic tangibilă, este destul de logic să se aplice informații asupra acesteia în conformitate cu cele mai bune exemple de produse de imprimare. Pentru a spune mai exagerat, Google a adaptat regulile tipografiei „reale” pentru ecranele dispozitivelor mobile.
3. Animaţie. Animația în designul material trebuie să se supună legilor fizice și, prin urmare, așteptărilor intuitive ale utilizatorului. Relația dintre obiectele în mișcare, influența lor unele asupra altora, modul în care apar și se mișcă - toate acestea trebuie să fie reale, logice și previzibile.
4. Design adaptiv. Aspectul principal despre care am vorbit la începutul articolului. Designul responsive își propune să unifice experiența utilizatorului și să o facă consistentă pe toate platformele.

Combinând aceste principii destul de simple și evidente, Google a creat un sistem puternic și eminamente logic, pe care probabil îl vom folosi într-o formă sau alta cel puțin în următorii cinci ani. Să aruncăm o privire mai atentă asupra fiecăruia dintre cele patru aspecte ale designului materialului.

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

Însăși materialitatea conceptului Google este concentrată în proprietățile suprafețelor. Structura interfeței în sine este cât se poate de realistă - are o adâncime limitată de grosimea dispozitivului. De exemplu, un dispozitiv de 1 cm grosime conform designului materialului va conține o lume internă de aceeași grosime. Acesta este foarte asemănător cu un acvariu subțire care are un perete din spate și o sticlă frontală, dar în loc să plutească viața marina în jurul acestui acvariu, acest acvariu are suprafețe care seamănă cu bucăți de hârtie și sunt distribuite în straturi pe toată grosimea acvariului. Și, la fel ca și locuitorii subacvatici, aceste suprafețe de card sunt complet supuse legilor fizice - uneori se pare că sunt mai mult decât reale, închise între peretele din spate al smartphone-ului și sticla afișajului.

Proiectarea materialului în secțiune

AxăZîn lumematerial proiecta responsabil pentru volumul interfeței

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

Cum să afișați umbre în Material Design

Imaginează-ți că pe biroul tău există bucăți de hârtie obișnuită, tăiate în formă de dreptunghiuri de diferite dimensiuni. Deplasându-le pe suprafața mesei și suprapunându-le unele pe altele, veți vedea clar care card de hârtie este deasupra celuilalt. Acest lucru se întâmplă din cauza umbrei ușoare aruncate de marginile hârtiei. În designul materialelor, dezvoltatorii au recreat complet acest principiu, iar distribuția cardurilor de „hârtie digitală” la diferite niveluri, atunci când o carte se suprapune pe alta, corespunde pe deplin ierarhiei conținutului - suprafața situată deasupra celeilalte și aruncând o umbră. pe acesta este în prezent principalul pe care se concentrează atenția utilizatorului.

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

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

Caracteristici ale tipografiei în Material Design

După cum am menționat deja, tipografia în designul materialelor este la fel de „reală” ca suprafețele. Aceasta înseamnă că folosește toate regulile și abordările care sunt folosite în tipărire. În exemplele demonstrate de Google, puteți găsi cele mai bune exemple de tipografie clasică în execuție virtuală.

Exemple de tipografiedesign material

Fonturi

Fontul standard folosit în Android pentru o lungă perioadă de timp este Roboto. Noul sistem de operare Lollipop și Material Design îl folosesc și ca font principal. Pe lângă Roboto, aplicațiile Android pot folosi și fontul Noto, destinat acelor limbi care nu au propriile versiuni de Roboto. În ciuda stilului general al aplicațiilor Android și a recomandărilor pentru fonturi date în ghid, este destul de acceptabil în unele cazuri să folosiți propriul font proprietar în loc de Roboto, conceput pentru a forma asociații adecvate în utilizator.

FontRoboto

Una dintre cele mai vizibile caracteristici tipografice în designul materialului este utilizarea unor dimensiuni contrastante ale fonturilor. Această tehnică clasică poate fi văzută în multe exemple de la Google - titlurile de pe ecrane sunt tastate într-un font foarte mare și, datorită acestuia, ies în evidență semnificativ de restul textului. Într-o anumită măsură, datorită antetelor mari care sunt vizibile de departe, utilizatorul poate naviga cu ușurință între ecranele aplicației și poate înțelege rapid esența conținutului curent. În plus, anteturile în acest format arată foarte bine.

Tipografie cu contrast ridicat în acțiune

Aranjarea conținutului sau principiul aspectului înmaterial proiecta

Modul în care este plasat conținutul în conceptul de design material corespunde, de asemenea, principiilor designului tipărit. Componenta principală și de formare a stilului a aspectului virtual în proiectarea materialelor este locația câmpurilor. Marginile și padding-ul sunt aranjate astfel încât utilizatorul să se concentreze pe conținutul situat în mijlocul coloanei principale, iar accesul ușor și rapid la elemente suplimentare este posibil datorită marginii largi din stânga. Un principiu similar poate fi observat pe paginile multor publicații tipărite.

Structura și structura câmpurilor în proiectarea materialelor

Pictograme

Iconografia folosită în designul materialelor este o evoluție logică a ideii de simplificare maximă care ar putea fi văzută în versiunile anterioare de Android. Google descrie pictogramele pentru material ca fiind simple, clare și prietenoase. În același timp, ideea de materialitate se poate extinde și la pictograme - Google însuși întruchipează în mod constant ideea de material în pictogramele produselor sale. De exemplu, pictograma Gmail a unui plic de hârtie provine de la omologul său din viața reală. Într-un mediu de design de materiale, o imagine simplificată a unui plic pare aproape la fel de reală ca un prototip „real” – pictograma arată umbre distinctive care reprezintă curbele și structura fizică a unei bucăți de hârtie pliată în forma unui plic.

Prototip virtual al unui plic de hârtie și pictogramă terminatăGmail

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

PictogrameAndroid Acadea– ar putea fi ceva mai minimalist și mai simplu?

Pentru dezvoltatori, Google oferă un set impresionant de pictograme realizate în stilul designului materialului. În această colecție puteți găsi, poate, orice pictograme necesare pentru crearea de aplicații cu design material. Setul de pictograme de design de materiale Google este disponibil pe GitHub. Aș dori să menționez, de asemenea, resursa materialdesignicons.com, unde puteți găsi nu numai pictograme de la alți autori, ci și le oferiți pe cele pe care le-ați dezvoltat singur.

Filosofia culorii

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

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

Exemple de culori primare dinPrimarpalete și culori de accent aferente (afișate în blocurile inferioare, cu o desemnare a literei sub forma „A" înainte de numărul de nuanță)

Când proiectați o interfață, Google sugerează să vă limitați la maximum trei culori din paleta principală și o culoare de accent. Culorile primare sunt aplicate elementelor precum bara de acțiuni și, de asemenea, (ca în cazul albului) aplicate pe suprafața care conține conținutul textului principal. Este de remarcat faptul că atunci când colorăm bara de acțiune a unei aplicații cu una dintre culori, trebuie să colorăm bara de stare cu o nuanță mai închisă de aceeași culoare:

stare baria culoareacțiune bar, dar se remarcă totuși ca o nuanță mai bogată, mai închisă

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

Elementele active, cum ar fi butonul plutitor și glisoarele, sunt foarte intuitive, datorită în mare parte utilizării culorilor de accent pentru a încuraja utilizatorul să ia măsuri.

Animaţie

Mișcarea din Piața Suprematistă, Kazimir Malevici (1920) șiPlin de înțeles Mişcare, Google Material Proiecta (2014)

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

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

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

La fel ca în animația clasică, toate mișcările avioanelor sunt reglementate de reguli stricte, datorită cărora mișcarea suprafețelor în lumea reală este simulată cu acuratețe.

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

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

Mutarea stratului „hârtie digitală” în galerie

În al doilea rând, designul materialului este foarte eficient în a indica apariția sau plecarea unui nou obiect de pe ecran. La fel ca în lumea reală, în mediul designului material, obiectele nu apar de nicăieri și nici nu se duc nicăieri. În Lollipop OS, apariția unui nou obiect în prim plan este asociată cu metamorfoze curioase - obiectul, într-adevăr, nu apare brusc de nicăieri, el alunecă, întinzându-se treptat și luând forma unei suprafețe. În acest caz, nu are loc respectarea proporțiilor, deoarece o creștere sau o scădere proporțională și simetrică a suprafeței va da impresia de apropiere sau îndepărtare, în timp ce trebuie să indicăm apariția pe ecran a unei noi bucăți de „hârtie digitală” , izolat și independent.

Pentru a realiza acest efect al aspectului unui nou obiect, designul material oferă două abordări cu grade diferite de evidentitate. Cea mai vie și neechivocă indicație a apariției unei noi suprafețe se realizează cu ajutorul unei picături crescânde - după ce atingeți cu degetul și chemați obiectul, suprafața începe să se răspândească pe ecran ca un val.

O picătură răspândită care formează o nouă suprafață de lucru este unul dintre cele mai vizuale efecte în designul materialului.

Efectul unei suprafețe de răspândire poate fi foarte elegant și colorat.

O altă modalitate de a arăta utilizatorului principiul tranzițiilor este mărirea asimetrică, neuniformă a unei suprafețe dreptunghiulare cauzată de utilizator. Dreptunghiul de suprafață este întins disproporționat până când capătă o formă dată. Această tehnică vă permite să atrageți atenția utilizatorului cu o mișcare activă, neliniară și să îi atrageți atenția asupra principiului apariției unor noi suprafețe.

Exemplu de animație a pictogramelor de bază înAndroid Acadea

OmniprezentăClipoci-Efect

Efectul Ripple, și anume mișcarea ondulată a umbrelor în care un deget atinge ecranul dispozitivului, este un alt aspect important al feedback-ului. În Lollipop, efectul Ripple este aplicat aproape peste tot. Când atingeți interfața noului sistem de operare, valurile diverg în cele mai multe cazuri, fie că este vorba de apăsarea unui buton sau de vizualizarea unei galerii de fotografii. În termeni tehnici, de îndată ce sistemul primește informații de intrare (atingând afișajul cu degetul), sistemul confirmă imediat acceptarea acestor informații prin răspândirea sub formă de undă a „cernelii digitale”.

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

Clipoci-efect care apare atunci când încercați să mutați o imagine în interiorul galeriei

Aspectul tehnic al animațieimaterial proiecta sau plic natural

Așa cum am spus deja, în lumea reală, pentru a scoate un obiect dintr-o stare de repaus, trebuie să i se aplice o forță, în timp ce faza principală a mișcării obiectului va fi precedată de accelerația sa, la fel ca un oprirea completă va fi precedată de decelerare. Interacționând constant cu lumea materială, suntem obișnuiți cu această stare de lucruri, așa că orice alte modalități de deplasare a obiectelor, precum accelerația instantanee și o oprire bruscă fără inerție, ni se par nefiresc, ciudat și, adesea, enervant. Ținând cont de acest aspect, creatorii de material design au lucrat din greu la „fizica” animației, aducând-o cât mai aproape de viața reală.

În mediul designului de materiale, obiectele scoase dintr-o stare de odihnă rapid (dar nu instantaneu!) accelerează și încetinesc ușor, încet. Este distractiv de interacționat cu acest tip de mișcare și animație, deoarece potrivește experiențele noastre cu lumea reală.

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

Design adaptiv

Cel mai important aspect cheie al designului materialului. Filosofia de design material presupune unificarea completă a experienței utilizatorului. Cu alte cuvinte, utilizatorul nu ar trebui să întâlnească versiuni diferite ale aceleiași aplicații atunci când folosește gadgeturi diferite. Experiența utilizatorului ar trebui să fie aceeași atât pentru desktop, cât și pentru smartphone sau tabletă. Singurele diferențe acceptabile și obiective sunt dimensiunile și proporțiile diferite ale elementelor interfeței aplicației. În toate celelalte privințe, versiuni diferite ale aceleiași aplicații ar trebui să ofere o experiență de utilizator complet identică.

Google a fost unul dintre primii care au realizat nevoia de a unifica și dezvolta o experiență uniformă a utilizatorului. În practică, această realizare s-a transformat în așa-numitul Proiect Kennedy, când în 2011 compania a început să dezvolte un singur tip de interfață pentru toate aplicațiile sale. Google obținuse rezultate bune în ceea ce privește estetica și UX, dar mai exista un decalaj real între versiunile produselor lor pentru desktop și cele pentru gadgeturi mobile care rulează Android. De fapt, designul materialului în sine este următoarea încercare după proiectul Kennedy de a crea o interfață cu adevărat unificată.

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

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

Grilă modulară și blocuri distribuite

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

Interfață proiectată conform principiilormaterial proiecta, universal pentru orice ecran

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

Elemente

Buton plutitor în versiune normală sau mini

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

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

Nu orice ecran are nevoie de un buton plutitor. Unele acțiuni sunt mai ușor de realizat prin interacțiunea directă cu conținutul aplicației. Cel mai tipic exemplu al unei astfel de excepții este o galerie de fotografii. La vizualizarea fotografiilor, este mai ușor să interacționezi direct cu imaginile, fără intermediarul unui buton plutitor.

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

Un buton plutitor are întotdeauna forma unui cerc, aruncând o umbră mică și fiind același fragment de „hârtie digitală” ca și alte suprafețe. Butonul are o culoare de accent strălucitoare care nu se intersectează cu culorile principale din primar paletă, datorită căreia rămâne întotdeauna elementul principal și cel mai vizibil de pe ecran. Dominanța sa este subliniată și de poziția sa față de alte straturi ale interfeței - butonul plutitor este întotdeauna deasupra și nu poate fi suprapus de alte elemente ale aplicației.

Buton de acțiune plutitorV acțiune

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

Acțiuni pozitive și negativeplutitoare acțiune buton

Și, în sfârșit, ultimul punct important este că nu poate exista decât un singur buton plutitor pe ecran. Prezența mai multor butoane de acțiune plutitoare într-un singur ecran distruge complet întregul punct al unui buton plutitor - implementarea unei acțiuni cheie în aplicație.

App barcare a înlocuitacțiune bar

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

Bara de aplicații nu se limitează la o dimensiune fixă ​​- acum poate fi mărită proporțional, plasând pe ea toate controalele necesare pentru conținut și aplicații, cum ar fi meniuri derulante, filtre, formular de căutare și așa mai departe.

Versiunea de bază a actualizatăacțiune bar, conținând elementele necesare controlului aplicației

Nuanțeaplicația bar, propusGoogle

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

Principala problemă asociată cu trecerea la designul materialelor este compatibilitatea slabă a interfețelor noi cu versiunile mai vechi de Android. Mulți dezvoltatori sunt reticenți în a sacrifica această compatibilitate și, din acest motiv, adoptarea aplicațiilor de proiectare a materialelor este încă destul de limitată. Această stare de lucruri va continua o perioadă de timp, atâta timp cât numărul copleșitor de dispozitive Android rulează pe versiunile sale mai vechi.

Cu toate acestea, pentru acei dezvoltatori care doresc să-și păstreze aplicațiile compatibile cu versiunile mai vechi de Android, Google oferă un set de instrumente care vă permit să utilizați elemente de design material în aplicațiile pentru predecesorii lui Lollipop. În blogul corespunzător, dezvoltatorii sunt invitați să se familiarizeze cu biblioteca AppCombat, care poate fi folosită pentru a introduce elemente materiale în versiunile mai vechi de Android.

Una dintre cele mai interesante caracteristici este echiparea unei aplicații care rulează sub versiunile anterioare de Android cu o bară de aplicații cu drepturi depline, care este un element critic de design în Lollipop. Alături de noul widget, aplicațiile vechi primesc toată funcționalitatea avansată care distinge bara de aplicații de bara de acțiuni anterioară.

Widgetaplicația bar

O privire critică asupra designului materialului

În ciuda tuturor noutăților evidente și implementării cu succes, designul materialului (dacă se dorește) poate avea unele deficiențe. Deși, ca în toate astfel de probleme, fiecare decide singur dacă punctele enumerate sunt dezavantaje. Este demn de remarcat faptul că, în acest moment, susținătorii conceptului de design material reprezintă în continuare majoritatea celor care continuă să discute energic despre cea mai recentă creație a Google. Cu toate acestea, publicul mai sceptic are următoarele plângeri cu privire la interfața Lollipop.

Microsoft Apartament Proiectaa fost mult mai practic și de succesmaterial proiecta. După cum am spus deja, designul materialului nu este altceva decât o compilație de succes de abordări și tehnici care au fost deja dezvoltate și utilizate de altcineva înainte. Unul dintre conceptele care a fost adoptat de dezvoltatorii de design de materiale este așa-numitul „design plat” de la Microsoft. Însuși ideea de a abandona excesele în favoarea unui spațiu digital plat a apărut pentru prima dată în produsele Microsoft. Designul plat a reprezentat o respingere completă a skeomorfismului în oricare dintre manifestările sale. Designul materialului este o versiune atenuată a acestui concept prin simularea „hârtiei digitale” și „cerneală digitală”. Designul material încorporează tot ce este mai bun din ambele lumi - spații plate și minimaliste din design plat și un anumit volum animat din skeomorfism.

Microsoft Flat Design

Cu toate acestea, nu toată lumea consideră că designul materialului este calea de mijloc și o versiune mai prietenoasă a designului plat. Animația destul de bogată și volumul în designul materialelor sunt considerate de mulți utilizatori și dezvoltatori a fi un exces care distrage atenția utilizatorului și îl încarcă cu informații vizuale inutile. Designul material este, de asemenea, învinovățit pentru cerințele sale mari asupra resurselor care sunt folosite pentru a anima toate elementele.

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

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

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

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

Discuțiile despre avantajele și dezavantajele designului materialelor sunt încă în desfășurare, utilizatorii și dezvoltatorii acordând atenție problemelor și neajunsurilor controversate și, de asemenea, căutând modalități de a utiliza cel mai eficient conceptul de proiectare a materialelor. În viitorul foarte apropiat, vom vedea ce soartă așteaptă designul material - va rămâne un mod ambiguu impus de ceva vreme de gigantul Google, va deveni doar un alt mare experiment în domeniul interfețelor sau va fi un o nouă etapă care duce arta UI la un nou nivel?

Concluzie

Dacă intenționați să vă angajați serios în designul materialelor și doriți să vedeți întregul concept de material în întregime, atunci trebuie să studiați un aspect simplu, accesibil și vizual. Ghidul Google. Sperăm că scurta noastră recenzie va deveni o introducere într-o direcție atât de promițătoare precum designul de materiale pentru cititorii interesați. Înțelegând filozofia noului proiect Google, veți putea nu numai să vă implementați ideile în acest format proaspăt și practic, ci și, poate, să rafinați și să îmbunătățiți conceptul de material în sine, dezvoltându-vă propriile „trucuri” și îmbunătățind relația utilizatorului cu interfața digitală.

Material Design este un concept de design creat pentru a unifica servicii, interfețe și alte produse. Conceptul a fost dezvoltat de Google și prezentat unui public larg pe 25 iunie 2014 la convenția Google I/O. 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 designul software este încă un produs în curs de dezvoltare și în curs de dezvoltare sistematic. Privind-o complet, ne-am întrebat: în ce constă?

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

Principii principale

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

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

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

Animație semnificativă. Claritatea și înțelegerea animației aplicației determină în mod direct timpul petrecut de utilizatorul unui computer personal pentru înțelegerea rezultatelor acțiunilor utilizate în acest program. Animația este un fel de indiciu pentru gestionarea interfeței Material Design.

Design adaptiv. Una dintre caracteristicile Material Design este versatilitatea sa, adică 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, umbrele definesc o anumită ierarhie și structură a elementelor de interfață. Umbra adâncă evidențiază subiectul cheie și concentrează atenția asupra acestuia într-un mod subtil și elegant.

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

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

• Amintiți-vă de logistică. Diverse casete de dialog, ferestre plutitoare, bare de instrumente au o anumită înălțime. Pentru a evita coliziunile, trebuie să se deplaseze periodic de-a lungul axei Z.
• Nu forțați butoanele. Ar trebui să utilizați un buton plutitor numai în caz de nevoie urgentă, deoarece utilizarea lui aduce imediat efectul Material Design în design. Nu ar trebui să-l utilizați pentru a confirma orice acțiune sau pentru a închide ferestrele.
• Nu trebuie să fie totul 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ărit. 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ă

Un alt principiu important al tipăririi este contrastul tipografiei. 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.

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

Iconografia geometrică

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

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

Descărcați pictograme pe acest subiect:

Culoare

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

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

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ă evidențiați culorile principale din fotografia de ansamblu.

Fotografii frumoase

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

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

Animație semnificativă

Material Design, ca și lumea fizică, folosește o animație semnificativă pentru a arăta utilizatorului ce s-a întâmplat î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, când a fost dat clic, a ajuns în prim-plan, s-a deschis și mai multe informații au devenit vizibile.

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

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

Reacţie

Un alt punct cheie al animației în Material Design este reacția 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 responsive design. Aceasta înseamnă opțiuni pentru aplicarea celorlalte trei aspecte pe diferite ecrane ale dispozitivului (telefon, PC, TV 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- 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.

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

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

Dezvoltarea designului digital

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

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

Vizibilitatea ca bază fundamentală

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

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

Fundamentele designului materialelor includ, de asemenea, principiile designului de imprimare. Accentul se pune nu numai pe estetică, ci și pe crearea unei structuri speciale, a ierarhiei și a unui sistem de management simplu.

Componenta vizuală a Material Design se bazează pe culori bogate, margini clare, tipografie mare și 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 și 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 designerii echipei Google, a explicat cum s-a schimbat aplicația I/O 2014 în timpul procesului de dezvoltare pentru a se conforma cu principiile Material Design. Am tradus videoclipul lui special pentru tine.

Video de pe canalul Google Design.

Google Images vă permite să găsiți informații pe Internet care sunt prezentate vizual. Noile funcții, cum ar fi legendele imaginilor, pictogramele foarte vizibile și paginile AMP din rezultatele căutării, vor ajuta utilizatorii să găsească rapid ceea ce au nevoie.

Prin furnizarea de imagini cu informații suplimentare, veți obține o mai mare acuratețe a căutării și veți atrage mai mulți utilizatori interesați pe site-ul dvs. Optimizați-vă paginile și imaginile de pe ele, astfel încât să fie mai probabil să fie găsite în Google Images. Pentru a face acest lucru, urmați recomandările de mai jos.

Interzicerea linkurilor pe care se poate face clic în rezultatele căutării de imagini

Dacă doriți, puteți împiedica apariția linkurilor pe care se poate face clic în rezultatele căutării Google Imagini, astfel încât imaginile la dimensiune completă nu vor fi afișate pe pagina cu rezultate.

Instrucțiuni

1. Când solicitați imaginea dvs., verificați antetul HTTP Referer.
2. Dacă solicitarea provine de la un domeniu Google, trimiteți un răspuns cu codul HTTP 200 (OK) sau 204 (Fără conținut).

Google va putea în continuare să detecteze imaginea atunci când accesează cu crawlere pagina, dar rezultatele căutării vor afișa imaginea în miniatură creată în timpul accesării cu crawlere. La o astfel de interdicție se poate recurge oricând, iar reprocesarea imaginilor de pe site nu va fi necesară. Acest lucru nu este considerat camuflaj și nu va duce la sancțiuni.

Faceți site-ul ușor de utilizat

Pentru a îmbunătăți clasarea conținutului dvs. în rezultatele căutării de imagini, creați pagini în primul rând pentru utilizatori, nu pentru motoarele de căutare. Iată câteva sfaturi:

• Amintiți-vă că contextul este important. Asigurați-vă că conținutul dvs. vizual este relevant pentru subiectul despre care se referă pagina. Este recomandabil să folosiți doar acele imagini care completează restul conținutului în sens. Este foarte descurajat să afișați text cu imagini pe o pagină, cu excepția cazului în care conținutul fiecărei tipuri este original.
• Fiți inteligent în ceea ce privește plasarea dvs. Ori de câte ori este posibil, plasați imagini lângă textul pe care îl ilustrează. Uneori este logic să plasați o imagine cheie în partea de sus a paginii.
• Nu plasați text important direct pe imagini.Încercați să nu utilizați text pe imagini, deoarece nu este accesibil tuturor utilizatorilor din acest formular. Acest lucru se aplică în primul rând elementelor de text atât de importante, cum ar fi titlurile de pagină și elementele de meniu. Printre altele, textul din imagini nu este recunoscut de instrumentele folosite pentru a traduce pagini în alte limbi. Pentru a asigura o ușurință maximă de percepere și căutare a conținutului dvs., adăugați text în pagină numai în markup HTML și, de asemenea, nu uitați să introduceți descrieri pentru imagini în atributele alt.
• Creați site-uri web bune, informative. Conținutul paginii în ansamblu este la fel de important atunci când căutați în Google Images ca și conținutul vizual în sine, deoarece vă permite să îl procesați mai eficient. De exemplu, fragmente de text dintr-o anumită pagină pot fi folosite ca descrieri pentru un astfel de conținut. Google ține cont și de calitatea informațiilor prezentate pe site la clasarea imaginilor.
• Creați site-uri optimizate pentru dispozitive mobile. Este mai probabil ca utilizatorii să caute Google Images pe dispozitive mobile decât pe desktop. Prin urmare, este important să vă faceți site-ul ușor de vizualizat pe dispozitive de toate tipurile și dimensiunile. Verificarea ușurinței de vizualizare pe dispozitivele mobile vă va ajuta să aflați dacă paginile sunt afișate corect și dacă există erori în ele.
• Aveți grijă la structura URL a imaginilor dvs. Pe lângă numele fișierelor, Google ia în considerare căile URL atunci când procesează conținut vizual. Încercați să veniți cu un design logic pentru adresele URL ale imaginilor dvs.

Atenție la titlul și descrierea paginii

Google Images creează automat titluri și descrieri pentru imagini, astfel încât utilizatorul să înțeleagă modul în care un anumit rezultat se referă la interogarea sa. Acest lucru îi ajută pe utilizatori să decidă dacă să facă clic pe un rezultat sau nu.

Obținem informațiile necesare din diverse surse, inclusiv titlul și metaetichetele fiecărei pagini.

Pentru a vă asigura că titlurile și descrierile pe care le creăm sunt descriptive, urmați instrucțiunile prezentate în acest articol.

Adăugați date structurate

Dacă adăugați date structurate, imaginile dvs. vor apărea în Google Images ca rezultate bogate (inclusiv pictograme foarte vizibile). Acest lucru va oferi utilizatorilor o mai bună înțelegere a site-ului dvs., asigurându-vă că cei care sunt cel mai interesați să vă viziteze site-ul îl vor vizita. Datele structurate sunt acceptate pentru următoarele tipuri de conținut:

În Google Images, sigla AMP îi ajută pe utilizatori să aleagă pagini care se încarcă mai repede. Încercați să convertiți pagina în care se află imaginile dvs. în format AMP. Rețineți că pagina de destinație este cea pe care aterizează utilizatorul după ce face clic pe un rezultat al căutării.

Adăugați fotografii de înaltă calitate

Utilizatorii preferă fotografii de bună calitate. De asemenea, imaginile în miniatură clare din rezultatele căutării au mai multe șanse să atragă vizitatori pe site-ul dvs.

Plasați corect imaginile printre text și alegeți titluri semnificative, nume de fișiere și subtitrări pentru ele

Google extrage informații despre subiectul unei imagini din alt conținut de pe pagină, inclusiv titlurile și legendele imaginilor. Ori de câte ori este posibil, plasați imagini pe paginile dedicate subiectului relevant și lângă textul la care se referă.

Numele fișierului poate îndeplini aceeași funcție ca anteturile cu subtitrări. De aceea câine.jpg ca nume de preferat IMG00023.JPG.

Adăugați descrieri de imagini la atributele alte

Textul alternativ din atributele alt face conținutul accesibil utilizatorilor care nu pot vedea imaginile pe pagini (de exemplu, deoarece folosesc cititoare de ecran sau au o conexiune lentă la Internet).

Atunci când determină subiectul unei imagini, Google ia în considerare descrierile din atributele alt, precum și rezultatele recunoașterii imaginii și conținutul paginii. În plus, textul alternativ poate fi transformat în text link dacă decideți să utilizați o imagine în acest scop.

Încercați să veniți cu o descriere cât mai informativă posibil, care să se potrivească cu conținutul paginii. Nu folosiți în exces cuvintele cheie, deoarece acest lucru creează o impresie proastă asupra utilizatorilor și poate fi perceput ca spam.

• Opțiune nereușită (atributul alt nu este completat):
• Opțiune greșită (abuz de cuvinte cheie):
• O varianta mai buna:
• Cea mai bună opțiune:

Utilizați Sitemaps pentru imagini

Imaginile sunt o sursă importantă de informații despre conținutul general al unui site web. Puteți furniza informații suplimentare despre imagini și puteți furniza Google adresele imaginilor care altfel nu ar putea fi descoperite în fișierul Sitemap.

Sitemapurile imagine, spre deosebire de sitemapurile imagine obișnuite, pot conține adrese URL din alte domenii. Acest lucru permite webmasterilor să folosească CDN (rețea de livrare de conținut) pentru a găzdui fișiere grafice. Vă recomandăm să verificați numele domeniului SDK în Search Console, astfel încât să vă putem anunța când sunt detectate erori de accesare cu crawlere.

Formate grafice acceptate

Google Images acceptă următoarele formate: BMP, GIF, JPEG, PNG, WebP, SVG și imagini încorporate.

Imaginile în linie sunt o colecție de octeți de date grafice într-o etichetă . Exemplu de cod pentru o astfel de imagine:

date de imagine...">

În loc de date de imagine, ar trebui să înlocuiți un șir codificat Base64.

Deși imaginile inline pot reduce numărul de solicitări HTTP, webmasterii ar trebui să ia în considerare cu atenție deciziile lor, deoarece acestea pot duce la o supraîncărcare semnificativă a paginii. Puteți afla mai multe despre avantajele și dezavantajele imaginilor încorporate pe site-ul Web Design Fundamentals.

Imagini receptive

Paginile web responsive sunt în general mai ușor de utilizat, deoarece pot fi vizualizate pe o varietate de dispozitive. Sfaturi despre cum să lucrați cu imagini pe un site web responsive sunt prezentate în secțiunea corespunzătoare a resursei noastre „Noțiuni fundamentale ale designului web”.

Imaginile sunt plasate pe o pagină receptivă folosind etichete sau Cu toate acestea, nu toate browserele și roboții de căutare recunosc aceste etichete, așa că vă recomandăm să specificați și o adresă URL alternativă ca valoare de atribut în .

Folosind o etichetă

Atributul srcset vă permite să specificați într-un element versiuni multiple ale aceleiași imagini pentru diferite dimensiuni de ecran.

Exemplu

Folosind o etichetă

Element Este un container cu care sunt grupate etichetele cu valori diferite pentru aceeași imagine. Ca rezultat, browserul poate alege opțiunea de imagine adecvată în funcție de caracteristicile dispozitivului, cum ar fi densitatea pixelilor și dimensiunea ecranului. În plus, elementul de imagine face convenabilă utilizarea de noi formate grafice pe pagini, care pot fi afișate într-o formă simplificată dacă un anumit client nu acceptă încă astfel de formate.

Optimizați-vă imaginile pentru Căutare sigură

SafeSearch este o funcție care vă permite să blocați sau să permiteți imagini, videoclipuri și site-uri cu conținut sexual explicit în rezultatele căutării Google. Pentru ca aceste setări să fie aplicate corect, trebuie să furnizați Google informații despre tipul de conținut al imaginilor dvs.

Postați imagini destinate doar adulților la o adresă separată

Dacă site-ul dvs. conține conținut vizual destinat numai adulților, noi recomand cu caldura așezați-l separat. Exemplu: http//www.example.com/adult/image.jpg.

Adăugați metadate la paginile de conținut pentru adulți

Dacă un utilizator a aplicat filtrul SafeSearch, algoritmii Google folosesc o varietate de date pentru a determina ce rezultate nu trebuie afișate. În cazul imaginilor, învățarea automată joacă un rol, dar sunt luați în considerare și factori destul de simpli, cum ar fi locul și în ce context o anumită imagine a fost folosită înainte.

Cel mai util mod de a diferenția conținutul destinat exclusiv adulților este marcajul special. Dacă publicați un astfel de conținut, vă recomandăm să adăugați următoarele metaetichete la codul paginilor dvs.:

Mulți utilizatori nu doresc să apară conținut pentru adulți în rezultatele căutării, mai ales dacă copiii au acces la același dispozitiv. Prin urmare, prin utilizarea uneia dintre aceste metaetichete, vă asigurați că utilizatorii nu vor fi nevoiți să vadă conținut neadecvat.

Ca orice alt algoritm, SafeSearch poate face greșeli. Dacă credeți că imaginile sau paginile dvs. sunt excluse din rezultatele căutării din greșeală, .

Și, în sfârșit

A fost de ajutor articolul?

Cum poate fi îmbunătățit acest articol?

• 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 singur produs părea inconsecvent pe diferite platforme.

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.

Î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 este o evoluție a limbajului vizual și a liniilor directoare de design ale Holo. Î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

1. 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.
2. 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.
3. 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.
4. 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

Suprafaţă

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

Adâncime

Profunzimea oferă, de asemenea, indicii despre interacțiune. Aici, pe măsură ce utilizatorul derulează, bara verde se lipește de stratul superior și se adaugă o umbră. Acest lucru arată că nu doar „cerneala” 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!

1. 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.
2. Ai grijă de logistică. Butoanele plutitoare, barele de instrumente și casetele 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.
3. 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 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 un buton plutitor. Există și alte elemente pentru asta.
4. Nu trebuie să fie totul pe card. Dacă un obiect are multe forme și conține o mulțime de conținut diferit, atunci un card este potrivit. Și dacă nu, atunci poate că ar fi mai bine să o faci cu text simplu sau cu o listă de text?
5. Este cu adevărat necesar acest dialog plictisitor? Designerii Google au încercat să îmbunătățească casetele de dialog, dar Foile de jos sunt încă 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 un Material și rezolvă bine problema.

Design tipărit

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ă

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, fonturile OTF au rezultate mai bune 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

Dar principala trăsătură distinctivă a plasării conținutului în conformitate cu principiile designului material este 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 lăsarea elementelor de susținere în margini.

Iconografia geometrică

Culoare

Ca și în designul de imprimare, culoarea este un mijloc important de exprimare în designul interfeței. În vechiul Android, culoarea era ceva în plus, 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țiuni, iar bara de stare este pictată în variația sa mai întunecată. 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? Accentele sunt puse punctual, în cantități mici. Există o regulă de bază simplă 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 o dimensiune standard și să o colorați pentru a permite utilizatorului să se concentreze asupra conținutului. Dacă nu există prea mult conținut, de exemplu, o vedere detaliată a unui singur element, o fotografie sau un calculator, atunci aceasta este o oportunitate excelentă de a folosi plăci colorate mari - de 2 sau 3 ori înălțimea 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 decor.

NB!

1. Brand cu placere. Google se află într-o poziție mai bună de a folosi culori strălucitoare ca branding, dar acest lucru nu ar trebui să fie văzut ca o problemă. Puteți alege culorile din cartea mărcii corporative și puteți utiliza sigla în general.
2. 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.
3. Fotografiile expresive fac diferența. Fotografiile și ilustrațiile sunt alegerea noastră ca mijloace de exprimare.

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, când a fost dat clic, a ajuns în prim-plan, s-a deschis și mai multe informații au devenit vizibile.

Exemplul 2. După ce faceți clic, un eveniment din calendar iese de la suprafață, se transformă într-un strat separat de „hârtie”, începe să se transforme și este dezvăluit sub formă de informații detaliate despre eveniment.

Punctul interesant este că mișcarea activă atrage privirea - acest lucru este natural pentru vederea noastră. Folosind animația, 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ă. Altfel, apare iluzia de a te apropia sau mai departe 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.

Microanimatii

Î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 multe detalii și capacitate de răspuns la fiecare acțiune a utilizatorului.

Claritate și claritate

Ș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!

1. Nu lăsa animația pentru final. Animația nu trebuie lăsată până la sfârșit - poate fi un factor cheie în experiența utilizatorului și trebuie gândită în prealabil.
2. 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

De la general la specific

Indentări

Rame albe

Ghiduri

Dimensiuni

Blocuri

Bara de instrumente

NB!

1. 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ă.
2. Fii mai îndrăzneț și mai inteligent cu barele de instrumente. Capacitatea de a schimba dimensiunea barei de instrumente în mod dinamic, făcând-o dimensiune dublă sau triplă este foarte cool și convenabilă. Majoritatea designerilor se tem să se ocupe de 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 un ghetou din colțul de jos pentru un buton plutitor. Un buton plutitor poate fi oriunde: jos, sus, dreapta, stânga. Desigur, poate fi convenabil să ajungi la el într-un colț, dar aceasta nu este singura opțiune. Butonul poate fi mutat din loc în loc în funcție de sarcină.
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 întorc în altul și în altul (chiar dacă vorbim de smartphone-uri). Acest moment trebuie rezolvat.

Etichete: Adăugați etichete

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...