Die analoge Ursprünge des Google Material-Design
Als Teil der i/o, Google gibt uns einen genaueren Blick auf die ziemlich oldschool-Tools und Ideen, die hinter Material Design – und für alle mit Sinn für ein gutes X-Acto-Messer, ein Farbrad oder eine scharfe Falte des Papiers, das zutiefst befriedigend sein wird.
Wie gestern ist Keynote endete, Google veröffentlicht eine Ernte von neuen Videos und Tutorials über Materialdesign, treffe zu Kompliment zu einer Reihe von I/O Sitzungen, die auf helfende Entwickler konzentrieren wird, passen sich Googles ein-Jahr-alte Designsprache. Das ist nicht wirklich ein Update, aber eher ein klarer, praktischer Satz von Richtlinien, die ausdrücklich zu erklären, wie Designer und Entwickler eigentlich Material Design nutzen können – anstatt zu versuchen, herauszufinden, was es ist.
Diese Leitlinien reichen von Farbschemata, ein interessantes Video über wie Real-World-Design Auswahl Experimente mit Papier und Schatten führte zu den physikalischen Grundlagen der Benutzeroberfläche. Werfen Sie einen Blick.
Papier-Modelle
Letztes Jahr erfuhren wir, dass Material Design ein Betriebssystem ist, basierend auf der realen Welt: Schwerkraft, Textur, Raum und Schatten. Das beste Werkzeug, um herauszufinden, wie die realen Ideen in digitale Form zu übersetzen? Etwas Papier, ein X-Acto-Messer und etwas Kleber.
"Ein Computer ist eine Lite-Brite für schlechte Ideen – sobald man es, wie das fertige Produkt sieht auf dem Computer", sagt Bethany Fong in einem neuen Tutorial-Video. Das Design-Team wieder mehr Dinge in der realen Welt zu machen, bevor man sie in Illustrator – hilft ihnen herauszufinden, genau wie jedes UI-Element im digitalen Raum handeln würde. In einem anderen hören wir über was Google nennt, "Quantum", oder die imaginären Papier jedes UI-Element im Material Design auf der Grundlage. Alles begann mit einer sehr einfachen Frage: "Was ist das Material, das unsere Software besteht?"
Klassischen Buchgestaltung
Ein richtiges Buch macht einen Cameo-Auftritt in einem anderen video über den Prozess des Aufbaus der Design-Sprache: Gestaltung von Büchern: Theorie und Praxis, einen Folianten 1997 vom Schweizer Designer Jost Hochuli. Hochuli ist bekannt für seine Buchgestaltung – nicht nur das Cover, aber die körperliche Erfahrung des wie ein Buch, von der Symmetrie der Seiten, die Dimensionierung zu lesen ist. "Es ist eine sehr deutliche Parallele zwischen dem System der Buchgestaltung und wie Menschen zu halten und verwenden Sie Geräte,", sagt Jonathan Lee.
Drucken Sie Typografie
Google veröffentlicht auch ein Update auf Roboto, der System-Schrift, und wie es im vergangenen Jahr entwickelt ist. "Wir wollten auch die typografischen Feinheiten, die wir gewohnt sind zu sehen in gedruckter Form, hinzufügen", sagt Christian Robertson. Das bedeutete verfeinern nicht nur die Zeichen, sondern die mehr Gewichte, breiten und neu raffinierten kursiv-Zeichnung aus traditioneller Typografie eine digitale Schrift Tiefe hinzu. Es ist "eine lebendige Schrift," sagt er, "einen Schritt weiter was wir sehen, mit einer Menge von Linotype-Systemen."
Schatten-Modellierung
Im gleichen Material Tutorial, wir sehen, wie Google Designer eine andere Oldschool Techniken verwendet: eine Beleuchtung-Rig, mit denen das Team Modell verschiedenen Winkeln und Intensitäten von Lichtquellen. Dies ist umso wichtiger, als es sich anhört. Material-Design gründet sich auf eine sehr einfache Idee, wie Sie in dem Video von Bethany Fong: "Innerhalb dieses Gerät gibt es eigentlich ein bisschen Platz."
Material-Design UI ist alles über die Verwendung einer winzigen Menge an Tiefe, um unsere Augen zu betrügen, zu Formen und Tiefe in der Schnittstelle zu sehen – genau die richtige Menge an Tiefe? Büste aus der Lampe. "Wir erkannten, dass es wäre viel sinnvoller, Dinge im realen Leben tatsächlich betrachten", sagt Christian Robertson.
Grundlegende Farbentheorie
Auswahl Farbe Systeme klingt wie eines der einfachsten Aspekte des Festhaltens an Material Design – aber es ist auch sehr vage. Ein weiteres Tutorial zeigt Devs wie man einen Gewinner, beginnend mit 500 Wert Farbtöne für die beherrschenden Themen und Symbolleisten, dann mit einem anderen Wert den gleichen Farbton, wie ein 300 oder 700, UI-Hauptfenster Kompliment.
Kontaktieren Sie den Autor unter [email protected].