Share
Lassen Sie uns darüber sprechen, was es Neues gibt, was sich geändert hat und was im neuesten Materialdesign von Google verbessert wurde.
Material Design ist eine visuelle Designsprache, die erstmals 2014 von Google entwickelt wurde. Sie entstand aus dem Bedürfnis nach mehr Konsistenz zwischen Google-Produkten und plattformübergreifend. Im Laufe der Zeit wurde es als Open Source veröffentlicht und seine Ideen wachsen dank einer großen Anzahl von Mitarbeitern weiter.
material.ioAnfang des Jahres kündigten sie auf der I / O-Entwicklerkonferenz von 2018 eine aktualisierte Version von Material Design an. Laut dem Team dahinter ist Material jetzt:
„Ein anpassungsfähiges Design-System, das durch Open-Source-Code unterstützt wird und das Teams dabei unterstützt, qualitativ hochwertige, digitale Erlebnisse zu schaffen“
Material Design ist nicht mehr nur eine Designsprache. Es entwickelt sich zu einer Reihe von Tools, die den Design- und Entwicklungsworkflow verbessern sollen. Beginnen wir mit einem Blick auf „Material Theming“..
„Material Theme Editor“ ist ein Plugin für Sketch und gibt Ihnen (vorausgesetzt, Sie sind ein Sketch- und damit auch Mac OS-Benutzer) die vollständige Kontrolle über Farben, Typografie, Komponenten und mehr. Um es herunterzuladen, gehen Sie zur Material-Site und drücken Sie die hervorgehobene Schaltfläche. Doppelklicken Sie auf das Paket, das Sie installieren möchten. In Sketch können Sie darauf über zugreifen Plugins> Material> Theme Editor öffnen…
Klicken Neues Thema erstellen In dem sich öffnenden Dialog können Sie aus einer Auswahl vordefinierter Themen auswählen und auf klicken sparen.
Ein neues Thema auswählenDas Speichern dauert einen Moment, da Sketch im Wesentlichen ein neues Dokument für Sie erstellt und es mit den Materialdesign-Elementen und -Komponenten füllt, die übersichtlich in Seiten, Symbolen, Stile und Farbfelder angeordnet sind.
Die umfangreiche Liste der Symbole ist perfekt organisiertGalerie ist eine weitere neue Materialfunktion, mit der Sie Ihre Entwürfe gemeinsam nutzen können. Dies ist eine Online-Plattform, auf die Sie unter https://gallery.io zugreifen können. Melden Sie sich mit Ihrem Google-Konto an:
Um Ihrer Galerie Projekte hinzuzufügen, gehen Sie zurück zu Skizze und navigieren Sie zu Plugins> Material> In Galerie hochladen… Sie werden aufgefordert, ein Projekt auszuwählen oder ein neues hinzuzufügen. Gleiches gilt für die Sammlung, der Sie es hinzufügen möchten. Das ist es! Ihr Projekt ist jetzt für andere verfügbar. Mitbearbeiter können Kommentare hinterlassen und sogar Elemente in Ihren Entwürfen inspizieren, wodurch sie auf Dimensionen und Details zugreifen können, ohne selbst Sketch zu benötigen.
Die Benutzer erhalten außerdem einen Verweis auf die Dokumente für die Komponente, die sie prüfen. Jetzt ist das nützlich!
Das Farbwerkzeug ist das Angebot von Material Design, mit dem Sie mit Farbkombinationen und -paletten in einer intuitiven Umgebung experimentieren können. Besuchen Sie https://material.io/tools/color/, um darauf zuzugreifen.
Klicken Sie sich auf der Benutzeroberfläche um, um eine Primärfarbe, eine Sekundärfarbe und zusätzliche Details wie Text auf Ihrer Primärfarbe und Text auf Ihrer Sekundärfarbe festzulegen. In den Vorschauen erhalten Sie Echtzeit-Updates, um zu sehen, wie es aussieht.
Es gibt auch eine Registerkarte "Barrierefreiheit", die Sie vor Farbkombinationen warnt, die den empfohlenen Lesbarkeitsrichtlinien nicht entsprechen.
Wenn Sie mit Ihrer Farbkombination zufrieden sind, können Sie auf Android, iOS oder das Web (in Form eines CodePen) exportieren:
Material Design Color Werkzeug-ExportoptionenEine vollständige Liste aller neuen Komponenten, die Material anbietet, ist auf der Website verfügbar. Hier einige, die ich für besonders interessant halte:
Diese werden zur Anzeige von Navigation und Tastenaktionen unten auf mobilen Bildschirmen verwendet.
Backdrops sind für Komponenten, die hinter anderen Oberflächen erscheinen - nützlich für die Anzeige von kontextuellem Inhalt.
Dann haben wir Banner. Dies sind neue Komponenten, die Meldungen und verwandte Aktionen anzeigen.
Bilderlisten sind ebenfalls neu, obwohl sie früher als etwas weniger vielseitige "Rasterlisten" bezeichnet wurden..
Schließlich haben wir Textfelder. Nicht gerade neu, aber ein Ersatz für die vorherige Generation, jetzt in beiden Versionen erhältlich gefüllt und umrissen Aromen.
Nun da haben wir es; Ein kurzer Überblick über die Neuerungen in der neuesten Version von Google's Material Design. Es muss kaum gesagt werden, aber es gibt noch viel mehr zu lernen und an Bord zu nehmen. Schauen Sie sich also um, tauchen Sie tief ein und lassen Sie uns wissen, was Sie an den Neuerungen am meisten beeindruckt.
Accentsconagua