Rechtzeitig zum Release von Android 5.0 Lollipop auf dem Nexus 9 sowie im Android Open Source Project hat Google seine Richtlinien für die neue Designsprache Material Design erweitert und verfeinert. Diese bietet nun eine ausführlichere Einleitung und legt ein für allemal einen verbindlichen Stil für die seitliche Navigationsleiste – Hamburger-Menü genannt – auf. Wir werfen einen Blick auf die Neuerungen.
Mit Material Design liefert Google eine durchweg konsistente und durchdachte Gestaltungsrichtlinie, die als Quasi-Nachfolger des Holo UI, Android 5.0 Lollipop, die Google-Apps und -Web-Apps zugänglicher machen soll. Maßgeblich orientiert sie sich dabei an den physikalischen Eigenschaften von Papier in einer dreidimensionalen Umgebung und erweitert diese um einzigartige, nur in der digitalen Welt mögliche Verhaltensmuster – insbesondere Animationen.
Schon die Vorstellung der Entwicklerversion, damals noch unter dem Codenamen L, wurde im Anschluss an die Google I/O von ausführlichen Dokumenten zum Material Design begleitet. Mit der Veröffentlichung der finalen Version von Lollipop wurde auch diese Dokumentation überarbeitet und um einige Sektionen erweitert. Da die Neuerungen nicht nur für Entwickler und Designer sehr interessant sind wollen wir sie im Folgenden beleuchten.
Was ist Material Design?
Damit Designer sich besser in der Welt der Material Design zurechtfinden, hat Google eine ausführliche Sektion der Heranführung an das Thema gewidmet. Hier werden die eingangs erwähnten Themen Materialität und Dreidimensionalität in einer zweidimensionalen Welt behandelt, um ein Gefühl für die Kohärenz des Material Design zu entwickeln.
Verknüpfung von Design und Entwicklung
Dass Software mehr ist als viele Zeilen Code, spielt für viele Entwickler erst in jüngerer Vergangenheit eine Rolle. Interface-Gestaltung, Zugänglichkeit und Ästhetik haben daher noch nicht ihren festen Platz. Um dies zu ändern und Entwicklern etwas Arbeit abzunehmen, will Google nach und nach die Design-Guideline mit relevanten Abschnitten in der Entwickler-Dokumentation verknüpfen. So sollen relevante Elemente des Material Design von vornherein Einzug in neue Apps finden.
Icon-Design
Bislang bezogen sich die Anweisungen zur Gestaltung von Icons vor allem auf einfache in Grau gehaltene Symbole, die innerhalb von Apps zum Einsatz kommen. App-Icons dagegen wurden nur grob als Flach und mit zweierlei Schatten versehen beschrieben, was zu vielen verschiedenen Interpretationen führte und die Inkonsistenz im Detail vieler Material Design-Icons erklärt.
Damit ist nun Schluss, denn die überarbeiteten Richtlinien erklären von Schattenwurf über beleuchtete und abgedunkelte Seiten bis hin zum Eckenradius der Icons jedes Detail. Es wird sogar dazu aufgefordert, sich echte Vorbilder für sein Icon zu suchen und deren Schattenwurf und Eigenschaften zu studieren.
Das Hamburger-Menü
Eine weitere, von Google selbstverschuldete Inkonsistenz wird mit der einheitlichen Vorgabe für das seitliche Navigationsmenü nun aus der Welt geschafft. Android Police dokumentierte unlängst, wie sehr sich dieses Element selbst innerhalb der Google-Apps unterscheidet, was Drittentwickler vor die Frage stellte, welche der Vorgaben nun die „richtige“ sei.
Nun steht fest: Das im Sinne des Material Design richtige Hamburger-Menü (nicht zu verwechseln übrigens mit dem beim Schnellimbiss erhältlichen) nimmt den kompletten vertikalen Platz ein – ausgenommen der Navigationsleiste – und legt sich über alle anderen Elemente der App, bleibt aber unterhalb der semitransparenten Benachrichtigungsleiste verborgen. Das ist schade, entfällt somit doch die Pfeil-Animation, die in den letzten Wochen für so viel Begeisterung gesorgt hatte. Außerdem gibt es Anweisungen zur Platzierung des Einstellungen-Menüpunktes, der bislang entweder fixiert war oder mit anderen Menüpunkten scrollte.
Navigation und Scrolling
Welches Verhalten hinter den hübschen Übergangsanimationen von Android 5.0 steckt, erklärt Google in einer Sektion zur Navigation und Übergängen. Dort wird unterschieden wie der Übergang zwischen hierarchisch gleich- und übergeordneten jeweils auszusehen hat. Ein weiteres Kapitel erklärt die verschiedenen Elemente, aus denen ein Fenster aufgebaut sein kann, und wie diese sich beim Scrollen verhalten: Die Statusleiste bleibt, Bilder werden zur Action Bar komprimiert die wiederum verschwindet, wenn weiter gescrollt wird – scrollbare Tabs dagegen bleiben sichtbar.
Zieht man die Ansicht über de eigentlichen Inhalt hinaus wird dieser aktualisiert (Pull-to-Refresh). Dabei spielt es eine Rolle, ob der zu aktualisierende Inhalt sich auf einer Ebene oder auf verschiedenen Ebenen entlang der Z-Achse befindet. Eine ausführliche Gegenüberstellung zeigt hier, wie jeweils zu verfahren ist und wie nicht.
Anordnung von Elementen bei alternativen Leserichtungen
Da Fenster im Material Design sich aus verschiedenen klar definierten Elementen zusammensetzen, fällt es nun leichter als zuvor, Apps auch für Kulturen mit alternativen Leserichtungen zu optimieren – etwa von links nach rechts wie im Arabischen. Allgemein gesprochen werden Elemente schlicht in ihrer Anordnung und Ausrichtung gespiegelt. Ausnahmen bilden etwa Kreise, die international anerkannte Bewegungen wie etwa die Drehung im Uhrzeigersinn darstellen oder sich auf andere Konventionen beziehen – eine Lupe als Zeichen für die Suche wird von der Mehrheit der Menschen mit der rechten Hand gehalten, unabhängig von ihrer Kultur.
Hier zeigt Google einerseits Verständnis für viele Kulturen, andererseits aber eine sehr große Liebe zu Detail – jedes Icon wird in seiner Bedeutung betrachtet statt einfach das komplette Interface zu spiegeln.
Zeit- und Datumsangaben
Die Vorgaben des Material Design gehen sogar soweit, dass Google Tipps zur Darstellung von Zeit und Datum gibt. So sollen etwa Monate und Tage abgekürzt werden, wenn sie in Kombination mit einer Zeitangabe dargestellt werden. Besonders zugänglich sollen sich Apps dadurch gestalten, dass Zeitangaben wenn angebracht auch in alltagssprachlicher Formulierung dargestellt werden – statt dem 5. November stünde in einer App etwa morgen, statt 7. November, 15:00 Uhr bis 18:00 Uhr Freitag Nachmittag.
Dies ist nur ein grober Überblick über die relevantesten Neuerungen der Material Design-Richtlinien, sie komplett zu besprechen würde den Rahmen des Artikels sprengen. Deshalb empfehlen wir jedem, der des Englischen mächtig ist, einen Blick in die Guideline zu werfen – es lohnt sich.
Continue reading “Material Design: Google erweitert Design-Empfehlungen, beseitigt Verwirrung um Hamburger-Menü”
Das Nexus 6 ist Googles erstes Phablet. Quelle: The Verge.