Die Materialdesign-Benutzeroberfläche von Google wird mit neuen Farben, Ikonografie und einem Fokus auf Touch überarbeitet

Neue Commits im Chromium Gerrit scheinen auf „Material Design 2“ zu verweisen, bei dem es sich möglicherweise um eine neue und verbesserte Version der Material Design-Sprache von Google handelt.

Material Design, die einheitliche Designsprache, die zusammen mit Android Lollipop eingeführt wurde, bietet flache Pastellfarbpaletten, Tiefe, sanftes Licht und realistische Physik. Es soll die Haptik realer Objekte nachahmen, ohne auf Skeuomorphismus zurückzugreifen. Google beschreibt es als eine Synthese aus „klassischen Prinzipien“ mit „[der] Innovation und Möglichkeit“ der Technologie.

Seit dem Debüt von Material Design im Jahr 2014 hat es sich wie ein Lauffeuer im Android-Ökosystem verbreitet – ganz zu schweigen von Google-Apps wie YouTube, Chrome, Gmail, Hangouts und Google Kalender. Als Teil des wurden schwebende Aktionsschaltflächen, angenehme Farben und Höhentechniken zur Verfügung gestellt Materialkomponentenbibliothek auf GitHub (der Nachfolger der Design Support Library von Android und des weborientierten Material Design Lite von Google), das Material's bringt Vorteile für Android in Form von benutzerdefinierten Ansichten und für das Web in Form von Bundles, die wie Standard-HTML importiert und verwendet werden können Stichworte.

Jetzt, am Vorabend des vierten Jubiläums von Material Design, scheint Google die nächste Generation davon vorzubereiten Von Papier und Tinte inspiriert ästhetisch: Materialdesign 2. Über Material Design 2 sind nur wenige wertvolle Informationen öffentlich verfügbar, deren Existenz wir diese Woche in neuen Commits im Chromium Gerrit aufgedeckt haben. Wir erheben keinen Anspruch darauf, dass es sich um ein handelt richtig Nachfolger des neuesten Material Design-Frameworks, aber die Commits deuten auf spürbare, wenn auch subtile Änderungen in den Farbpaletten, der Ikonographie und dem Touchscreen-Verhalten hin.


Material Design 2 wird im Chromium Gerrit angezeigt

Anfang Februar implementierten neue Commits für Chromium Gerrit die Benutzeroberfläche „Material Design 2“ in Chrome Tabstrip – die verschiebbaren Tabs mit Webseitentiteln, Favoriten und der Schaltfläche „Tab schließen“ über denen von Chrome Adressleiste.

Die Commits sind nicht drastisch, führen jedoch zu Änderungen am Erscheinungsbild der Chrome-Registerkarten. Sie erhöhen die Höhe des Tabstrips; Nehmen Sie unbestimmte Änderungen am Inhaltslayout der Registerkarten vor, insbesondere an Titeln und Warnanzeigen. und verringern Sie die Tab-Touch-Breite, während Sie die Tab-Standardbreite erhöhen. Sie ausdrücklich nicht Ändern Sie die Farben der Tab-Warnanzeige, die Farben der Tab-Trennzeichen, die Schaltfläche „Neuer Tab“ oder eine beliebige Tab-Typografie.

Eine Sammlung von Chrome-Tabs.

Aufschlussreich ist, dass sich die Commits auf ein Symbol zum Schließen der Registerkarte „Material Design 2“ und auf „für Google Material Design 2 erforderliche grundlegende Farbkonstanten“ beziehen.

Ein genauerer Blick auf den Commit-Code zeigt neue „Material Design 2“-Farbpaletten für graue, rote und rot-dunkle Chromium-Designs sowie neue Farben für die Standard-Chrome-Symbolleiste und die Inkognito-Symbolleiste. Wir haben eine hexadezimale Nachschlagetabelle verwendet, um die RGB-Farbfelder zu generieren:

Das Rot von Material Design 2 ist etwas dunkler als das aktuelle Material Design Rot 800 (#C62828) und Rot 600 (#E53935), während die neuen Grautöne (#3C4043, #5F6368, #BDC1C6, #F1F3F4) einen helleren, bläulichen Farbton haben. Das Materialdesign zeichnet sich durch traditionelle Grautöne aus, wobei R=G=B ist, während hier in jedem Farbton B>G>R gilt (jedoch nur bei 1–4 von 255).

Mit Material Design 2 kompatible Versionen von Chrome verfügen außerdem über eine viel hellere Symbolleiste als aktuelle Builds – sie ist im Vergleich zum aktuellen gräulichen Farbschema fast weiß.

Hier ist ein kurzes Modell, wie die Symbolleiste mit den neuen Farben aussehen wird:

Schließlich fügt das Commit ein neues hinzu IsTouchOptimizedMaterial() Flagge zum MaterialDesignController, was sich möglicherweise auf berührungsoptimierte Material Design 2-Elemente bezieht. Wir haben Anfang Januar über die Bemühungen von Google geschrieben, das zu verbessern Die Touchscreen-Unterstützung des Chrome-Webbrowsers auf Chrome OS-Geräten scheint eine Fortsetzung davon zu sein.

Der Commit zeigt beispielsweise, dass auf Touchscreen-Geräten das SetStackedLayout von Chrome „always“ lautet ermöglicht.' Wenn Sie viele Registerkarten öffnen, wird standardmäßig die Breite der anderen Registerkarten verkleinert, um sie anzupassen neue Registerkarten. Das gestapelte Layout von Chrome behält die Breite der ursprünglichen Tabs bei und fügt dahinter neue Tabs ein.


Die Bedeutung von Farbe im Materialdesign

Was bedeuten die neuen Farben im weiteren Kontext des Material Design?

Beim Materialdesign geht es um mehr als nur um Schichten, Komponenten und Elemente und deren Verhalten zueinander. Im Mittelpunkt des Designmotivs von Google stehen kontrastreiche Themen, leuchtende Farben und kräftige Highlights – sie sind es, die Material Design-kompatible Apps von der Masse abheben.

Google stellt ein Beispiel bereit Farbpaletten Entwickelt, um plattformübergreifend „gut zusammenzuarbeiten“ und ermutigt Entwickler, die die Vorteile nutzen, Quellen zu nutzen eine primäre App-Farbe – auch als „dominante“ Farbe bekannt – aus einer Sammlung von 500 verschiedenen Farbfelder. (Denken Sie an „Blau“, „Grün“ oder „Lila“ und andere Grundfarben.) Bei Bedarf beziehen sie eine Sekundärfarbe aus einer erweiterten Sammlung von 700 Farben (Komplementärfarben für die wichtigsten UI-Elemente und analoge Farben für weniger wichtige UI-Elemente sowie eine Tertiärfarbe aus einer Teilmenge von 300).

Farbe spielt eine wichtige Rolle in der Hierarchie des Materialdesigns. Helle Farben weisen auf Wichtigkeit hin – sie sind prominenten Schaltflächen und anderen interaktiven Elementen vorbehalten. Dezentere Farben hingegen erhöhen das visuelle Interesse, indem sie Textfelder, Fortschrittsbalken, Links und andere Teile der Benutzeroberfläche hervorheben.

Soweit wir über die Farbpalette von Material Design 2 wissen, sind zumindest einige der Farbfelder in Googles „Primary 500“, wie Red 600 und 800, dunkler als ihre Material Design-Vorgänger. Aber andere, wie Grautöne, erfahren die gegenteilige Behandlung – Sowohl die grauen als auch die weißen Farbfelder, die im Chrome-Tab-Modell angezeigt werden, weisen kältere Graustufen und höhere Blauwerte auf.


Im Moment ist das alles, was wir wirklich über Material Design 2 wissen. Aber die Commits könnten ein Zeichen dafür sein, dass etwas hinter den Kulissen passiert, und wenn das stimmt, könnten wir früher oder später mehr erfahren. Google wird voraussichtlich bereits im März Android P, die nächste Hauptversion von Android, enthüllen, und die Google I/O 2018 beginnt am 8. Mai. Beides sind erstklassige Gelegenheiten, sich mit Material Design 2 auseinanderzusetzen.

Update 04.02.2018: Kurz nach der Veröffentlichung dieses Artikels wurde der Commit privat gemacht, was möglicherweise bedeutet, dass er geheim gehalten werden sollte. Wir werden Chromium Gerrit weiterhin auf Änderungen prüfen und diesen Artikel aktualisieren, wenn wir welche finden.