Articol de design de materiale Google în limba rusă. Google Material Design - un aspect posibil pentru o nouă eră. Optimizați-vă imaginile pentru Căutare sigură

• Tutorial

Butoanele pot fi hexagonale?

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

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

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

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

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

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

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

material.io – Proiectare, Dezvoltare, Instrumente

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

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

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

Acest articol este pentru cei care plănuiesc să înceapă dezvoltare mobilă. Profesioniștii în dezvoltare știu deja toate acestea.

Măr

Să începem cu poate cel mai elaborat ghid de la Apple. La prima vedere, totul pare oarecum zgârcit, pentru fiecare instrument sau secțiune sunt 2-3 imagini și câteva paragrafe: ghidul este foarte bine dezvoltat în ceea ce privește prezentarea informațiilor pe unitate de text. Puteți înțelege pe deplin toate recomandările în doar câteva ore.

Dintre minusuri, merită remarcată lipsa limbii ruse, dar există o traducere de amatori. Citiți: medium.com/ios-guidelines-in-russian.

Aruncă o privire la ghidul pas cu pas pentru dezvoltarea aplicațiilor iOS: https://developer.apple.com/library/ios/referencelibrary/GettingStarted/DevelopiOSAppsSwift/index.html. Ghidul va ajuta o persoană, chiar și puțin familiarizată cu dezvoltarea aplicațiilor, să se familiarizeze cu etapele dezvoltării. Pentru a face acest lucru, mai întâi trebuie să descărcați instrumentul principal de dezvoltare Xcode și apoi să creați prima dvs. mini-capodopera cu instrucțiuni pas cu pas.

Combinând ghidul cu ghidul dezvoltatorului, puteți obține o înțelegere inițială a dezvoltării unei aplicații iOS. Pentru orice altceva, inclusiv pentru a mesteca ceea ce citiți, există o profesie - „”.

Google

Material Design de la Android este o expresie des întâlnită pe internet, dar, din păcate, mulți îl înțeleg doar ca pe un set de suplimente grafice Google, nimic mai mult. De fapt, aceasta este o recomandare destul de strictă, care este concepută pentru a face aplicația dvs. clară și ușor de învățat de către utilizator.

Ghidul variază de la o introducere generală până la utilizarea unor instrumente specifice. Elementele de bază și primii pași ai dezvoltatorului sunt însoțite de imagini și videoclipuri: este imediat clar că Google a lucrat destul de mult la acest manual.

Din punct de vedere al utilităţii conţinutului prezentat, se poate vorbi şi numai într-un mod pozitiv: fiecare proprietate a instrumentului, fiecare acţiune este prevăzută cu text şi descriere grafică, de asemenea, link-uri către manualul de dezvoltare. Prin urmare, chiar și fără instrucțiuni specifice de acțiune, atât un începător, cât și un specialist gata făcut pot crea o aplicație serioasă de Material Design.

Windows Phone

După ce am studiat cu atenție și am lucrat cu ghiduri similare de la Google și Apple, nu pot să nu simt că ghidul este oarecum „neîndemânatic” Windows Phone. Se pare că creatorii chiar nu au vrut să adere la politica corporativă de pregătire a unei astfel de documentații, dar șefii au insistat.

Principalul avantaj al ghidului este limba rusă. Informațiile sunt prezentate în detaliu, dar nu sunt structurate convenabil, există prea multă „apă” pentru un astfel de ghid. Totuși, dacă considerăm ghidul nu ca pe un manual pe care trebuie să îl citiți mai întâi și apoi să începeți să îl dezvoltați, ci ca ghid de buzunar- atunci putem admite că un asemenea exces este util.

Toți producătorii de platforme mobile populare au adoptat o abordare responsabilă și inteligentă a dezvoltării ghidului principal de design. Lucrul cu fiecare dintre ele este convenabil, plăcut și, cel mai important, util. Tot ce trebuie să faceți este să învățați cum să creați aplicații, apoi ghidurile vă vor veni cu siguranță la îndemână.

Ce părere aveți despre ghiduri? Spune-ne.

Instruire după Orientări: Profesie.

Î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 utilizatori 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ța utilizatorului ca atare. Această caracteristică este cheia designului materialului - este universală și uniformă. Ca o secundă trăsătură caracteristicăÎn proiectarea materialelor, 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 dezvăluit publicului larg designul materialului pe 25 iunie 2014 ca design pentru noua sală de operație sisteme Android, care mai târziu a devenit cunoscut sub numele de Lollipop. Este posibil să utilizați pe deplin designul materialului 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, eliminarea ultimului neajuns este doar o chestiune de timp.

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 fundamentale și principii clare:

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 ecrane dispozitive 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, felul î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, unul sau altul dintre care probabil îl vom folosi 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 și distribuirea cardurilor de „hârtie digitală”. diferite niveluri, atunci când o carte se suprapune pe alta, corespunde pe deplin ierarhiei conținutului - o suprafață situată peste alta și care aruncă o umbră asupra acesteia este în acest moment principala, atenția utilizatorului este concentrată asupra acesteia.

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

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

font standard, pentru o lungă perioadă de timp folosit în Android - 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 stilul general aplicații pentru Android și recomandările de 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 umplutura sunt aranjate în așa fel încât atenția utilizatorului să fie concentrată asupra conținutului situat în mijloc în coloana principală, iar lumina și acces 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

icoane

Iconografia folosită în designul materialelor este o dezvoltare logică a ideii de simplificare maximă care ar putea fi văzută în mai multe versiuni anterioare 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 foi de hârtie pliate î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.

icoaneAndroid 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 demonstrează separat noua politică de culoare, menționând astfel de surse de inspirație precum arhitectura moderna, indicatoare rutiere și chiar benzi de marcare a trotuarului. În același timp, combinații de culori strălucitoare 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 (prezentate în blocurile inferioare, cu desemnarea literei la fel de "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ă colorarea acțiunii aplicații de bare una dintre culorile pe care trebuie să le pictăm bara de stare 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 reguli stricte, datorită căruia 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. Aplicând acestea 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 mai clară indicație a apariției unei noi suprafețe este realizată folosind o picătură în expansiune - după ce atingeți cu un deget și apelați un obiect, 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. Vorbitor limbaj tehnic, 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 metode de mișcare a obiectelor, precum accelerarea instantanee și oprirea bruscă fără inerție, ni se par nefiresc, ciudat și, de multe ori, 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. În ceea ce privește estetica și UX, Google a obținut rezultate bune, totuși, între versiunile desktop și desktop ale produselor lor. gadgeturi mobile mai era o adevărată prăpastie sub 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, ce ecran mai mic, cu atât informațiile mai puțin detaliate le 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ă ajungă în diverse părți ecran ș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țiunea principală efectuată în aplicație specifică. De exemplu, în manager de fișiere un buton plutitor poate însemna adăugarea de fișiere sau crearea unui folder nou, în messenger sau aplicație de e-mail– crearea unui nou mesaj sau scrisoare, în rețea socială– marcați „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– 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 - implementare acțiune-cheie in aplicatie.

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 considerabil și acum elementul actualizat se numește bara de aplicații. Datorită modificărilor, noua bară de aplicații este un instrument control total utilizator peste aplicație și, așa cum este cazul altor aspecte ale designului materialului și în special al noului sistem de operare Lollipop, bara de aplicații este complet intuitivă și ușor de înțeles.

Bara de aplicații nu se limitează la o dimensiune fixă ​​- acum poate fi mărită proporțional, plasând întregul continutul cerutși controale ale aplicațiilor, 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

Nuanteaplicaț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 Material Design rămâne 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ții 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ă pe 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 Design plat

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 împovărează cu lucruri inutile. informatii vizuale. 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 „aerului” proverbial în designul materialelor (ca și în designul modern în general) este subiectul celei mai aprinse dezbateri între designeri, dezvoltatori și utilizatorii 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) informatie necesaraîn fața ta, încercând să nu recurgi la defilare și răsturnare. Astfel de utilizatori sunt sincer enervanti liniuțe mariși decalajele dintre conținut, precum și necesitatea de a derula 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 nevoia de a derula și de a răsturna mai des pagini virtuale, iar ei consideră prezența indentărilor mari ca o condiție necesară pentru rapid și descărcare ușoară elementul 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ția despre avantajele și dezavantajele designului materialelor este încă în desfășurare, utilizatorii și dezvoltatorii acordă atenție problemelor și neajunsurilor controversate și caută, de asemenea, modalități de a utilizare eficientă concepte de design material. În viitorul foarte apropiat vom vedea ce soartă așteaptă designul material - va rămâne un moft ambiguu impus de ceva timp? gigantul Google, va fi doar un alt experiment mare în domeniul interfețelor sau va fi o nouă etapă care duce arta UI la nivelul următor? nou nivel.

Concluzie

Dacă intenționați să vă implicați serios în designul materialelor și doriți să vedeți întregul concept de material, 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, probabil, să perfecționaț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. În centrul dezvoltării schema de culori, proprietăți și elemente ale obiectelor de design. Material Design este completat și actualizat în mod regulat de către dezvoltatori. În termeni simpli, ideea de bază este un design bloc care se deschide și se pliază în cuburi precum cărțile, 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 în cele mai multe servicii zone diferite activitatea de viață a 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. 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 folosește 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, 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 fundal alb situat mai jos.

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

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

Design tipărit

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

Tipografie elegantă

Tipografia este importantă în design de imprimare. 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

Dacă în proiectarea ecranului sunt utilizate grile de bază, atunci în proiectarea tipăririi - 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 este atribuită una dintre roluri 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: este lăsată o cantitate mare de text (o listă de scrisori de e-mail) marimea standardși adăugați culoare pentru a atrage atenția utilizatorului de computer; o cantitate mică de text (calculator, fotografie) este mărită de 2-3 ori și se adaugă matrițe colorate.

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

Fotografii frumoase

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

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

Animație semnificativă

Material Design, ca și lumea fizică, folosește o animație semnificativă pentru a arăta utilizatorului ce s-a întâmplat î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

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

Microanimatii

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

Claritate și claritate

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

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

Design adaptiv

Final aspect cheie Designul material este un concept de design receptiv. 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. Acestea 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ță atât pe verticală, cât și pe verticală ecran orizontal dispozitive.

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 deschiseși efecte vizuale, navigare lină. Toate acestea se adaugă la o experiență excelentă pentru utilizator.

Videoclipuri

Material Design a atras un public uriaș. El demonstrează cum să 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.

La conferința pentru dezvoltatori Google I/O 2018, pe lângă Android actualizat și o integrare mai profundă inteligenţă artificială la serviciile dvs., Compania Google a introdus un nou standard în proiectarea sistemului și a aplicațiilor mobile - Material Design 2.0. Ce mai e nou?

Spațiu alb și transluciditate

Una dintre cele mai schimbări notabile Noul design al materialului are o cantitate minimă de culori saturate și fundaluri gri, doar spațiu alb solid și transluciditate. În opinia mea, acest lucru pare foarte proaspăt, aducând astfel sistemul de operare și software-ul la un nou nivel de percepție vizuală. De acum stoc Android P, fără suplimente grafice de la producători terți, o consider pe bună dreptate cea mai frumoasă soluție dintre interfețe. DIN PUNCTUL MEU DE VEDERE.

Instrumente noi pentru dezvoltatori:

Tema materială

Pluginul Material Theme pentru Sketch este în esență o bibliotecă de fonturi, pictograme și culori corporative oferite de noile ghiduri Google în Android P. De asemenea, atunci când dezvoltați cu ajutorul acestuia, puteți edita forma componentelor și tipografia din proiectul dvs. într-un cuplu de clicuri.

Mai multe rotunjiri și minimalism

După cum mulți au observat, aspect a devenit foarte asemănător cu Apple iOS 10 și 11, dar cu siguranță acest pas a fost făcut de companie special pentru producătorii și proprietarii de smartphone-uri fără cadru, al căror număr crește inexorabil în fiecare an, deoarece acest aspect al sistemului și software-ului merge mult mai bine. cu afișajele lor rotunjite.

Fonturi noi

În noul design de logo-uri și servicii de marcă Dezvoltatorii și designerii Google au folosit caracterul Product Sans. Pentru ei a fost creată o ramură specială a Google Sans. Se bazează pe fontul menționat mai sus, care a înlocuit standardul Roboto.

Așadar, în curând ne putem aștepta la o reproiectare la scară largă a întregului web și mobil servicii Google. În acest moment, unul dintre acești primii născuți din magazinul de aplicații este Google Joaca jocuri, Google Tasks și o aplicație pentru participanții la conferința Google I/O 2018.

• Stilul actualizat al ilustrațiilor corporative

• Folosind cele patru culori primare ale logo-ului ca limbaj vizual

Exemplu, versiune nouă de Gmail:

Concepte Material Design 2.0

Desigur, comunitatea de design a răspuns la schimbările viitoare de design de la Google, iar în urmă cu exact o lună, un utilizator Reddit sub porecla Morphicsn0w și-a prezentat viziunea despre site-ul Google Play.

Pe lângă modificările vizuale sub formă de carduri rotunjite care prezintă aplicații, autorul a abandonat, în opinia sa, secțiunile inutile, cum ar fi aplicațiile descărcate recent, făcând astfel interfața magazinului mai simplă și mai informativă.

Pe ecranele de descriere a aplicațiilor, Morphicsn0w s-a concentrat pe descrierile aplicațiilor, deplasând atenția de la informațiile despre numerele de descărcare și evaluările utilizatorilor.

Designerul a reproiectat și sistemul de căutare în Google Play, adăugând sortarea rezultatelor găsite în funcție de preț, data actualizării, evaluare și numărul de descărcări. Prezența unei astfel de sortări ar simplifica foarte mult căutarea software-ului necesar în magazin, aștept și sper implementarea acestuia de la Google.

Îndrăgitul YouTube, autorul portalului 9to5Google și bunul designer cu normă parțială Alex Brooks, au fanteziat și ei cu ce ar putea fi schimbat în clientul de găzduire video existent, nu a fost lăsat afară. Rezultatul m-a inspirat personal foarte, foarte mult.

Primul lucru pe care Alex l-a reproiectat a fost bara de navigare a ecranului de pornire, pictând-o în culori strălucitoare și vesele. După primul punct există o linie de căutare reproiectată, acum nu este afișată buton separat, dar ocupă întreaga zonă utilă a părții superioare a aplicației, simplificând astfel accesul la aceasta. Și bara cu numărul de abonați, un buton pentru a te abona la canal și a reveni la nivelul anterior în viziunea autorului este situată în partea de jos, ceea ce este și o soluție utilă din punct de vedere al ușurinței în utilizare.

Designerul a combinat secțiunea bibliotecă (istoricul videoclipurilor vizionate, gestionarea videoclipurilor descărcate, videoclipurile apreciate etc.) cu secțiunea de setări profilul utilizatorului, acum ambii parametri pot fi accesați făcând clic pe imaginea utilizatorului. În opinia mea, deși acest lucru este controversat, este încă într-o oarecare măsură decizia corectă, deoarece simplifică interacțiunea utilizatorului cu serviciul și face aplicația mai ușor de înțeles pentru noii utilizatori care tocmai se familiarizează cu lumea. tehnologii mobile.

Pentru mai multe informații despre conceptul YouTube al lui Alex, citiți articolul original.

Conceptul Muzică Google Play în Material Design 2.0

Inspirat de prezentare și de zeci de lucrări ale altor designeri, am decis să încerc să fac ceva propriu, folosind ca bază unul dintre serviciile Google actuale, alegerea mea a căzut pe Play Music. Nu mai lucrasem niciodată cu acest serviciu, mai ales ca platformă de streaming, dar din datorie a trebuit să o fac. Serviciul a generat impresii extrem de pozitive, fie și doar pentru că aplicația în sine funcționează adecvat și nu se blochează, spre deosebire de aceasta Apple Music, pe care îl folosesc de la lansarea sa pe Android.

În general, serviciile sunt similare și ambele își îndeplinesc sarcina principală - redarea muzicii. Și amândoi au plângeri în ceea ce privește interfața, dar întrucât astăzi vorbim despre Google, vom lua în considerare serviciul lor în consecință.

Ecranul principal

Prima plângere despre ecranul principal este că nu îmi place ceea ce este spatiu imens, ocupat exclusiv bara de căutareși coperți ale listelor de redare cu selecții. De fapt, în primul rând, am decis să repar asta.

În conceptul meu ecranul principal este același, dar ușor regândit feed cu selecții de albume, melodii, playlisturi în funcție de gusturile utilizatorului, abia acum pentru a vizualiza conținutul și a merge să redați piesa dorită, nu este nevoie să faceți un clic în plus și să părăsiți principalul ecran, același lucru este valabil și pentru tranziția între secțiuni (acasă, recent, hit parade etc.), care acum se poate face folosind glisări pe ecran.

Jucător

Al doilea punct care nu are succes în design, după părerea mea, este jucătorul. ÎN cerere oficială Coperta melodiilor Google Play Music se întinde pe întreaga diagonală a ecranului smartphone-ului, motiv pentru care arată foarte neglijent și neclar pe dispozitivele cu afișaje de înaltă rezoluție. Am prezentat soluția problemei astfel:

Acum copertele sunt bine plasate în mijloc, iar o previzualizare a pieselor anterioare și următoare este afișată pe marginile din stânga și din dreapta, ca și cum ar sugera posibilitatea de a le comuta cu o glisare.

Biblioteca media

Al treilea lucru care nu-mi place la Play Music este aspectul și decorarea bibliotecii media. După părerea mea, structura sa este prea complicată. De exemplu, pentru a accesa această secțiune din ecranul principal, trebuie să efectuați până la patru acțiuni: glisați pentru a apela bara laterală; faceți clic pentru a selecta secțiunea „Biblioteca muzicală”; glisați prin listă pentru a selecta fila dorită (liste de redare, posturi de radio, artiști, albume).

Prin urmare, am mutat butonul cu acces la melodiile adăugate în dock-ul inferior, iar când se deschide, în mod implicit va fi afișată fila albume cu posibilitatea de a le sorta după data lansării, adăugare și alfabet.

Meniu/Bară laterală

În conformitate cu noile principii ale designului aplicației Google, am mutat meniul obișnuit cu acces la setări în colțul din dreapta sus.

Prezentarea conceptului Muzică Google Play pe Behance

Concluzie

Pentru a rezuma, vreau să spun că sunt foarte mulțumit de calea pe care Google încearcă să o urmeze. Pe lângă un salt major în dezvoltarea și comoditatea serviciilor sale, compania avansează cu codul său de design. Am scris un articol despre experiență în urmă cu șase luni folosind iOS 6 în 2018, m-am surprins gândindu-mă că de-a lungul anilor, sistemele de operare mobile Android și iOS nu au evoluat prea mult în ceea ce privește designul vizual și conceptual al interfeței, dar acum sunt complet neconvins de poziția mea, cel puțin în raport cu Android .

Vă mulțumim pentru atenție!