Interfejs użytkownika Google Material Design zostanie unowocześniony dzięki nowym kolorom, ikonografii i naciskowi na dotyk

Nowe zatwierdzenia w Chromium Gerrit wydają się odnosić do „Material Design 2”, który może być nową i ulepszoną wersją języka Google Material Design.

Material Design, ujednolicony język projektowania wprowadzony na rynek wraz z Androidem Lollipop, oferuje płaskie, pastelowe palety kolorów, głębię, miękkie oświetlenie i realistyczną fizykę. Ma naśladować dotyk obiektów ze świata rzeczywistego bez uciekania się do skeuomorfizmu; Google opisuje to jako syntezę „klasycznych zasad” z „[innowacjami] i możliwościami” technologii.

Od debiutu Material Design w 2014 r. rozprzestrzenia się on błyskawicznie po całym ekosystemie Androida — nie wspominając o aplikacjach Google, takich jak YouTube, Chrome, Gmail, Hangouts i Kalendarz Google. W ramach pakietu udostępniono pływające przyciski akcji, przyjemne kolory i techniki unoszenia Biblioteka komponentów materiałowych na GitHubie (następca Biblioteki wsparcia projektowania systemu Android i internetowego narzędzia Material Design Lite firmy Google), który udostępnia materiały Material dobroć dla Androida w postaci niestandardowych widoków oraz dla Internetu w postaci pakietów, które można importować i używać jak standardowy HTML tagi.

Teraz, w przeddzień czwartej rocznicy Material Design, Google wydaje się przygotowywać następną generację swojego narzędzia inspirowane papierem i tuszem estetyka: Projektowanie materiałów 2. Niewiele cennych informacji jest publicznie dostępnych na temat Material Design 2, którego istnienie odkryliśmy w tym tygodniu w nowych zatwierdzeniach w Chromium Gerrit. Nie twierdzimy, że jest to a właściwy następca najnowszego frameworka Material Design, ale zobowiązania wskazują na zauważalne, choć subtelne, zmiany w paletach kolorów, ikonografii i zachowaniu ekranu dotykowego.


Material Design 2 pojawia się w Chromium Gerrit

Na początku lutego nowe zmiany w Chromium Gerrit zaimplementowały interfejs użytkownika „Material Design 2” w przeglądarce Chrome pasek kart — przeciągane karty zawierające tytuły stron internetowych, ikony ulubionych i przycisk „zamknij kartę” nad ikoną przeglądarki Chrome pasek adresu.

Zatwierdzenia nie są drastyczne, ale wprowadzają zmiany w wyglądzie kart Chrome. Zwiększają wysokość paska zakładek; wprowadzać nieokreślone poprawki w układzie zawartości zakładek, w szczególności w tytułach i wskaźnikach alertów; i zmniejsz szerokość dotykową zakładki, zwiększając jednocześnie standardową szerokość zakładki. Oni wyraźnie nie modyfikować kolory wskaźników alertów zakładek, kolory separatorów tabulatorów, przycisk „nowa karta” lub dowolną typografię zakładek.

Zbiór zakładek Chrome.

Co ciekawe, zatwierdzenia odnoszą się do ikony przycisku zamykania karty „Material Design 2” i „podstawowych stałych kolorów wymaganych w Google Material Design 2”.

Głębsze zagłębienie się w kod zatwierdzenia pokazuje nowe palety kolorów „Material Design 2” dla szarych, czerwonych i czerwono-ciemnych motywów Chromium oraz nowe kolory dla standardowego paska narzędzi Chrome i paska narzędzi incognito. Do wygenerowania próbek RGB użyliśmy szesnastkowej tabeli przeglądowej:

Kolor czerwony Material Design 2 jest taki nieco ciemniejszy niż obecny Material Design Czerwony 800 (#C62828) i Czerwony 600 (#E53935), natomiast nowe odcienie szarości (#3C4043, #5F6368, #BDC1C6, #F1F3F4) mają jaśniejszy, niebieskawy odcień. Material design charakteryzuje się tradycyjnymi szarościami, gdzie R=G=B, natomiast tutaj B>G>R w każdym odcieniu (ale tylko w 1-4 z 255).

Wersje przeglądarki Chrome zgodne z Material Design 2 będą również wyposażone w znacznie jaśniejszy pasek narzędzi niż obecne wersje — jest prawie biały w porównaniu z obecną szarą kolorystyką.

Oto krótka makieta wyglądu paska narzędzi po zastosowaniu nowych kolorów:

Na koniec zatwierdzenie dodaje nowy IsTouchOptimizedMaterial() flaga do Kontroler MaterialDesign, co może odnosić się do zoptymalizowanych pod kątem dotyku elementów Material Design 2. Na początku stycznia pisaliśmy o wysiłkach Google mających na celu ulepszenie Obsługa ekranu dotykowego przeglądarki internetowej Chrome na urządzeniach z systemem operacyjnym Chrome i wydaje się być jej kontynuacją.

Na przykład zatwierdzenie pokazuje, że na urządzeniach z ekranem dotykowym SetStackedLayout przeglądarki Chrome będzie mieć wartość „always włączony.' Domyślnie, gdy otwierasz wiele kart, szerokość pozostałych kart zmniejsza się, aby dostosować się do nich nowe zakładki. Układ skumulowany przeglądarki Chrome zachowuje oryginalne szerokości kart i dodaje za nimi nowe karty.


Znaczenie koloru w projektowaniu materiałów

Co więc oznaczają nowe kolory w szerszym kontekście Material Design?

Material Design to coś więcej niż tylko warstwy, komponenty i elementy oraz to, jak zachowują się one względem siebie. Głównym motywem projektowym Google są motywy o wysokim kontraście, jasne kolory i odważne akcenty – to one sprawiają, że aplikacje zgodne z Material Design wyróżniają się z tłumu.

Google udostępnia próbkę palety kolorów zaprojektowany tak, aby „dobrze współpracować” na różnych platformach i zachęca programistów, którzy korzystają z tego, do pozyskiwania źródeł podstawowy kolor aplikacji – zwany także kolorem „dominującym” – z kolekcji 500 różnych próbki. (Pomyśl o „niebieskim”, „zielonym” lub „fioletowym” i innych podstawowych kolorach.) W razie potrzeby pozyskują kolor dodatkowy z rozszerzonej kolekcji 700 kolorów (kolory uzupełniające dla najważniejszych elementów interfejsu użytkownika i analogiczne dla mniej ważnych elementów interfejsu użytkownika oraz kolor trzeciorzędny z podzbioru 300).

Kolor odgrywa ważną rolę w hierarchii Material Design. Jasne kolory sugerują znaczenie — są zarezerwowane dla widocznych przycisków i innych interaktywnych elementów. Z drugiej strony subtelniejsze kolory zwiększają atrakcyjność wizualną, akcentując pola tekstowe, paski postępu, łącza i inne części interfejsu użytkownika.

Z tego, co wiemy o palecie kolorów Material Design 2, co najmniej kilka próbek w „podstawowej 500” Google, takich jak Red 600 i 800, jest ciemniejszych niż ich poprzednicy z Material Design. Ale inne, jak szary, są traktowane w odwrotny sposób... zarówno szare, jak i białe próbki pokazane na makiecie karty Chrome mają zimniejszą skalę szarości i wyższe wartości niebieskiego.


W tej chwili to wszystko, co naprawdę wiemy o Material Design 2. Ale zatwierdzenia mogą być oznaką, że coś dzieje się za kulisami, a jeśli to prawda, możemy dowiedzieć się więcej wcześniej niż później. Oczekuje się, że Google opublikuje pełną wersję Androida P, kolejnej głównej wersji Androida, już w marcu, a Google I/O 2018 rozpocznie się 8 maja. Obie są doskonałą okazją do podsumowania Material Design 2.

Aktualizacja 2.04.2018: Wkrótce po opublikowaniu tego artykułu zatwierdzenie zostało uznane za prywatne, co potencjalnie oznacza, że ​​miało pozostać tajne. Będziemy na bieżąco sprawdzać Chromium Gerrit pod kątem zmian i aktualizować ten artykuł, jeśli jakieś znajdziemy.