Googles gränssnitt för materialdesign håller på att förnyas med nya färger, ikonografi och fokus på beröring

Nya commits i Chromium Gerrit verkar referera till "Material Design 2", som kan vara en ny och förbättrad version av Googles materialdesignspråk.

Material Design, det enhetliga designspråket som lanserades tillsammans med Android Lollipop, har platta, pastellfärgade färgpaletter, djup, mjuk belysning och realistisk fysik. Det är tänkt att efterlikna taktiliteten hos verkliga objekt utan att tillgripa skeuomorfism; Google beskriver det som en syntes av "klassiska principer" med "[den] innovationen och möjligheten" av teknologi.

Sedan Material Design debuterade 2014 har den spridits över Androids ekosystem som en löpeld – för att inte tala om Google-appar som YouTube, Chrome, Gmail, Hangouts och Google Kalender. Flytande actionknappar, behagliga färger och höjdtekniker har gjorts tillgängliga som en del av Materialkomponentbibliotek på GitHub (uppföljningen till Androids Design Support Library och Googles webfokuserade Material Design Lite), som ger Materials godhet till Android i form av anpassade vyer och till webben i form av paket som kan importeras och användas som standard HTML taggar.

Nu, på tröskeln till Material Designs fyraårsjubileum, verkar Google förbereda nästa generation av sin papper-och-bläck-inspirerade estetisk: Materialdesign 2. Lite värdefull information är allmänt tillgänglig om Material Design 2, vars existens vi avslöjade denna vecka i nya commits i Chromium Gerrit. Vi gör inga påståenden om att det är en rätt efterföljare till det senaste Material Design-ramverket, men åtagandena pekar på märkbara, om än subtila, förändringar i färgpaletter, ikonografi och pekskärmsbeteende.


Material Design 2 dyker upp i Chromium Gerrit

I början av februari implementerade nya commits på Chromium Gerrit "Material Design 2" UI i Chromes tabstrip – de dragbara flikarna som innehåller webbsidestitlar, favoritikoner och knappen "stäng flik" ovanför Chromes adressfält.

Åtagandena är inte drastiska, men gör ändringar i utseendet på Chromes flikar. De ökar höjden på tabsremsan; göra ospecificerade justeringar av flikarnas innehållslayout, specifikt till titlar och varningsindikatorer; och minska flikens tryckbredd samtidigt som flikens standardbredd ökar. De uttryckligen gör det inte ändra flikvarningsindikatorfärger, flikavgränsarfärger, knappen "ny flik" eller valfri fliktypografi.

En samling Chrome-flikar.

Avslöjande nog hänvisar åtagandena till en stängningsknappikon för "Material Design 2"-fliken och "grundläggande färgkonstanter som krävs för Google Material Design 2".

Att gräva djupare i commit-koden visar nya "Material Design 2"-färgpaletter för grå, röda och röd-mörka Chromium-teman, och nya färger för standardverktygsfältet i Chrome och inkognitoverktygsfältet. Vi använde en hexadecimal uppslagstabell för att generera RGB-rutorna:

Material Design 2:s röda är något mörkare än den nuvarande materialdesignen Röd 800 (#C62828) och Röd 600 (#E53935), medan de nya nyanserna av grått (#3C4043, #5F6368, #BDC1C6, #F1F3F4) har en ljusare, blåaktig nyans. Materialdesignen har traditionella gråtoner, där R=G=B, medan här B>G>R vid varje nyans (men bara med 1-4 av 255).

Materialdesign 2-kompatibla versioner Chrome kommer också att ha ett mycket ljusare verktygsfält än nuvarande konstruktioner – det är nästan vitt jämfört med det nuvarande gråaktiga färgschemat.

Här är en snabb modell av hur verktygsfältet kommer att se ut med de nya färgerna:

Slutligen lägger commit till en ny IsTouchOptimizedMaterial() flagga till MaterialDesignController, vilket kan hänvisa till beröringsoptimerade Material Design 2-element. Vi skrev i början av januari om Googles försök att förbättra Chrome-webbläsarens pekskärmsstöd på Chrome OS-enheter, och det verkar vara en fortsättning på det.

Till exempel visar commit att på enheter med pekskärm kommer Chromes SetStackedLayout alltid att vara aktiverad.' Som standard, när du öppnar många flikar, krymper bredden på de andra flikarna för att passa nya flikar. Chromes staplade layout behåller de ursprungliga flikarnas bredd och lägger till nya flikar bakom dem.


Färgens betydelse i materialdesign

Så vad betyder de nya färgerna i det bredare sammanhanget av materialdesign?

Materialdesign handlar mer än bara om lager, komponenter och element, och hur de beter sig i förhållande till varandra. Centralt för Googles designmotiv är teman med hög kontrast, ljusa färger och djärva höjdpunkter – det är de som gör att appar som är kompatibla med materialdesign sticker ut från mängden.

Google tillhandahåller exempel färgpaletter utformad för att "fungera bra tillsammans" över plattformar, och uppmuntrar utvecklare som utnyttjar källan en primär appfärg -- även känd som en "dominant" färg -- från en samling på 500 olika swatches. (Tänk "blått", "grönt" eller "lila" och andra grundfärger.) Om det behövs hämtar de en sekundärfärg från en utökad samling med 700 färger (kompletterande färger för de viktigaste användargränssnittselementen, och analoga för mindre viktiga användargränssnittselement, och en tertiär färg från en delmängd av 300).

Färg spelar en viktig roll i materialdesignhierarkin. Ljusa färger tyder på betydelse -- de är reserverade för framträdande knappar och andra interaktiva element. Subtilare färger, å andra sidan, lägger till visuellt intresse genom att accentuera textfält, förloppsindikatorer, länkar och andra delar av användargränssnittet.

Från vad vi vet om Material Design 2:s färgpalett är åtminstone några av proverna i Googles "primary 500", som Red 600 och 800, mörkare än deras Material Design-föregångare. Men andra, som grå, får motsatt behandling -- både de grå och vita färgrutorna som visas i Chrome-flikens mockup har en kallare gråskala och högre blåvärden.


Just nu är det allt vi egentligen vet om Material Design 2. Men åtagandena kan vara ett tecken på att något händer bakom kulisserna, och om det är sant kan vi lära oss mer förr än senare. Google förväntas ta bort Android P, nästa stora version av Android, så snart som i mars, och Google I/O 2018 drar igång den 8 maj. Båda är utmärkta möjligheter att ta av sig materialdesign 2.

Uppdatering 2018-02-04: Kort efter den här artikelns publicering gjordes åtagandet privat, vilket potentiellt betyder att det var tänkt att hållas hemligt. Vi kommer att fortsätta att kontrollera Chromium Gerrit för ändringar, och uppdatera den här artikeln om vi hittar några.