Interfața de utilizare Google Material Design este reînnoită cu noi culori, iconografie și un accent pe atingere

Noile comite din Chromium Gerrit par să facă referire la „Material Design 2”, care ar putea fi o versiune nouă și îmbunătățită a limbajului Google Material Design.

Material Design, limbajul de design unificat care a fost lansat alături de Android Lollipop, oferă palete plate, pastelate, adâncime, iluminare slabă și fizică realistă. Este menit să imite tactilitatea obiectelor din lumea reală fără a recurge la skeuomorfism; Google îl descrie ca pe o sinteză a „principiilor clasice” cu „[inovația] și posibilitatea” tehnologiei.

De la debutul Material Design în 2014, acesta s-a răspândit în ecosistemul Android ca un incendiu – ca să nu mai vorbim de aplicațiile Google precum YouTube, Chrome, Gmail, Hangouts și Google Calendar. Butoanele de acțiune plutitoare, culorile plăcute și tehnicile de elevație au fost puse la dispoziție ca parte a Biblioteca de componente materiale pe GitHub (urmărirea Bibliotecii de asistență pentru design pentru Android și Material Design Lite axat pe web de la Google), care aduce materialele bunătate pentru Android sub formă de vizualizări personalizate și pentru web sub formă de pachete care pot fi importate și utilizate ca HTML standard Etichete.

Acum, în ajunul celei de-a patra aniversări a Material Design, Google pare să pregătească următoarea generație de inspirat de hârtie și cerneală estetic: Designul materialului 2. Puține informații prețioase sunt disponibile public despre Material Design 2, a cărei existență am descoperit-o săptămâna aceasta în noi comisii în Chromium Gerrit. Nu pretindem că este o potrivit succesorul celui mai nou cadru Material Design, dar angajamentele indică schimbări vizibile, chiar dacă subtile, în paletele de culori, iconografie și comportamentul ecranului tactil.


Material Design 2 apare în Chromium Gerrit

La începutul lunii februarie, noi angajamente privind Chromium Gerrit au implementat interfața de utilizare „Material Design 2” în Chrome tabstrip — filele care se pot glisa care conțin titluri ale paginilor web, favicon-uri și butonul „închidere filă” de deasupra browserului Chrome bara de adresa.

Comiterile nu sunt drastice, dar fac modificări aspectului filelor Chrome. Acestea măresc înălțimea benzii cu filet; faceți ajustări nespecificate la aspectul conținutului filelor, în special la titluri și indicatorii de alertă; și micșorați lățimea de atingere a filei în timp ce crește lățimea standard a filei. Ei în mod explicit nu modificați culorile indicatorului de alertă de filă, culorile separatorului de file, butonul „filă nouă” sau orice tipografie de file.

O colecție de file Chrome.

În mod revelator, commit-urile fac referire la pictograma butonului de închidere a filei „Material Design 2” și „constantele de culoare de bază necesare pentru Google Material Design 2”.

Explorarea mai adânc în codul de comitere arată noi palete de culori „Material Design 2” pentru temele Chromium gri, roșu și roșu-întunecat și culori noi pentru bara de instrumente standard Chrome și bara de instrumente incognito. Am folosit un tabel de căutare hexazecimal pentru a genera mostrele RGB:

Roșul lui Material Design 2 este ceva mai întunecat decât designul material actual Roșu 800 (#C62828) și Roșu 600 (#E53935), în timp ce noile nuanțe de gri (#3C4043, #5F6368, #BDC1C6, #F1F3F4) au o nuanță mai deschisă, albăstruie. Designul materialului prezintă gri tradițional, unde R=G=B, în timp ce aici, B>G>R la fiecare nuanță (dar doar cu 1-4 din 255).

Versiunile compatibile cu Material Design 2 Chrome vor avea, de asemenea, o bară de instrumente mult mai strălucitoare decât versiunile actuale – este aproape albă în comparație cu schema de culori gri actuală.

Iată o machetă rapidă a modului în care va arăta bara de instrumente cu noile culori aplicate:

În cele din urmă, commit-ul adaugă un nou IsTouchOptimizedMaterial() steag la MaterialDesignController, care s-ar putea referi la elementele Material Design 2 optimizate la atingere. Am scris la începutul lunii ianuarie despre efortul Google de a îmbunătăți Suportul pentru ecranul tactil al browserului web Chrome pe dispozitivele cu sistem de operare Chrome și pare a fi o continuare a acestuia.

De exemplu, commit-ul arată că pe dispozitivele cu ecran tactil, SetStackedLayout din Chrome va fi „întotdeauna activat.' În mod implicit, când deschideți o mulțime de file, lățimea celorlalte file se micșorează pentru a se adapta file noi. Aspectul stivuit al Chrome păstrează lățimea filelor originale și adaugă file noi în spatele lor.


Importanța culorii în designul materialelor

Deci, ce înseamnă noile culori în contextul mai larg al Material Design-ului?

Material Design înseamnă mai mult decât doar straturi, componente și elemente și modul în care acestea se comportă unul în raport cu celălalt. În centrul motivului de design Google sunt temele cu contrast ridicat, culorile strălucitoare și evidențierile îndrăznețe -- ele fac ca aplicațiile conforme cu Material Design să iasă în evidență din mulțime.

Google oferă eșantion palete de culori conceput pentru a „funcționa bine împreună” pe toate platformele și încurajează dezvoltatorii care profită de sursă o culoare primară a aplicației -- cunoscută și sub numele de culoare „dominantă” -- dintr-o colecție de 500 de diferite mostre. (Gândiți-vă la „albastru”, „verde” sau „violet” și la alte culori de bază.) Dacă este necesar, ele au o culoare secundară dintr-o colecție extinsă de 700 de culori. (culori complementare pentru cele mai importante elemente UI și analog pentru elementele UI mai puțin importante și o culoare terțiară dintr-un subset de 300).

Culoarea joacă un rol important în ierarhia Material Design. Culorile strălucitoare sugerează importanță - sunt rezervate pentru butoanele proeminente și alte elemente interactive. Culorile mai subtile, pe de altă parte, adaugă interes vizual prin accentuarea câmpurilor de text, a barelor de progres, a linkurilor și a altor părți ale interfeței de utilizare.

Din ceea ce știm despre paleta de culori a Material Design 2, cel puțin câteva dintre mostrele din „500 primar” Google, cum ar fi Red 600 și 800, sunt mai întunecate decât predecesorii lor Material Design. Dar alții, precum gri, primesc tratamentul opus -- atât mostrele gri, cât și cele albe afișate în macheta filei Chrome au o scală de gri mai rece și valori mai mari de albastru.


În acest moment, asta este tot ce știm cu adevărat despre Material Design 2. Dar comiterile ar putea fi un semn că ceva se întâmplă în culise și, dacă este adevărat, s-ar putea să aflăm mai devreme decât mai târziu. Se așteaptă ca Google să dezvăluie Android P, următoarea versiune majoră de Android, de îndată ce martie, iar Google I/O 2018 începe pe 8 mai. Ambele sunt oportunități principale de a elimina materialele Design 2.

Actualizare 04.02.2018: La scurt timp după publicarea acestui articol, commit-ul a fost făcut privat, ceea ce înseamnă că ar fi fost menit să fie păstrat secret. Vom continua să verificăm Chromium Gerrit pentru modificări și vom actualiza acest articol dacă găsim vreuna.