Bei der letzten E / A-Veranstaltung 2014 kam Google mit neuen Überraschungen zurück. Neben der offiziellen Veröffentlichung des neuen Android-Updates mit dem Codenamen Lollipop hat Google auch die neue Designsprache Material Design eingeführt . Es ist ein Design-System, das nicht nur für die neuen Verbesserungen der Lollipop-Benutzeroberfläche gedacht ist, sondern auch für geräte- und umgebungsübergreifende.
Material Design hat einige Hauptmerkmale, die es durch seine eigenen, einzigartigen Wege von anderen Designtrends unterscheiden. Genau wie sein Name wurde er von echten Materialien inspiriert und in einem Designsystem kombiniert, um ein schlankes, intuitives, schönes und interaktives Benutzererlebnis zu schaffen. In diesem Beitrag werden wir uns mit dem Inhalt von Material Design beschäftigen und Ihnen eine kurze Anleitung zur Implementierung geben. Ich zitiere den Blog von Google und sage: "This is Material Design".
Eine Einleitung
Material Design ist ein einheitliches Konstruktionssystem, das heißt, es wurde für die Verwendung mit allen verfügbaren heutigen Geräten und Plattformen entwickelt. Von Tablet, Smartphone bis Desktop und von Android, iOS, Windows bis hin zu Web-Plattformen. Alle Design-Looks und Fills sollten überall gleich sein.
Hauptprinzipien
Es gibt drei Hauptprinzipien, die Material Design erstellen. Dies ist der grundlegendste Teil dessen, was Material im Allgemeinen bietet.
- Material ist die Metapher . Die Entwicklung von Material wurde durch das Studium taktiler Elemente, die wir täglich verwenden, Papier und Tinte, inspiriert. Dadurch wird das Objekt leichter, die Oberfläche und Bewegungen sind besser, wenn sie miteinander interagieren.
- Fett, grafisch und vorsätzlich . Typografie, Raster, Raum, Maßstab, Farbe und die Verwendung von Bildern, die in druckbasierten Designgrundlagen verwendet werden, verbessern den Inhalt des Materials.
- Bewegung liefert Bedeutung . Dies ist eines der am meisten beachteten Dinge. In Material sollten Sie eine sinnvolle und angemessene Bewegung, ein subtiles und klares Feedback sowie einen effizienten und kohärenten Übergang haben.
Die Komponenten
Material Design achtet auf jedes Detail seiner Komponenten, damit sie universell eingesetzt werden können. Diese Komponenten helfen Ihnen beim Erstellen erstaunlicher Apps und Websites. Es gibt so viele Komponenten, die von Material bereitgestellt werden, wie Schaltflächen, Schalter, Karte, Texteingabe, Fab (schwebende Aktionsschaltfläche), Dialog, Toast, Untermenü, Registerkarte und mehr. Jeder von ihnen hat seine eigenen Regeln und Anleitungen, wie man sie aufbaut, damit Sie keine inkonsequenten Elemente haben.
Muster Sache
Neben Komponenten bietet Material auch einige grundlegende Muster für zusätzliche Benutzeroberflächen. Diese Muster verbessern die Benutzeroberfläche, die Sie mit den Komponenten des Materials erstellt haben. Die Muster umfassen Datenformat, Navigationsleiste, Fehler, Gesten, Bildlauftechnik, Suche, Einstellungen, Laden von Bildern, Wischen zum Aktualisieren und mehr.
Material Design Farben
Die Farben in Material wurden so gestaltet, dass Sie sich nicht unbequem, fremd und flach fühlen. Material Design lässt sich von unseren täglichen Umgebungen wie Straßenschildern, zeitgenössischer Architektur, Straßenmarkierungsband und Sportplätzen inspirieren und bringt Ihnen unerwartete und lebendige Farben. Es gibt so viele Farbpaletten, die Sie wählen können, um Ihnen mehr Komfort bei der Entwicklung von Apps oder Websites zu bieten. Sie können auch die Farbfelder für den lokalen Gebrauch herunterladen, z. B. für Ihre Photoshop-Sammlung.
Symbol des Materials
Wenn Sie ein Android-Entwickler sind, müssen Sie mit einigen von Google bereitgestellten kostenlosen Symbolpaketen vertraut sein. Sie werden normalerweise nur für das Hauptelement und die Aktionsleiste verwendet. Während für andere Ressourcen müssen wir andere Symbole wie Ordner, Dateien, Kopieren und Einfügen usw. manuell durchsuchen. In Material Design hat Google das Problem mit einer Vielzahl von Symbolpaketen behoben, die Sie verwenden können.
Jedes der Icons hat einen Design-Ansatz durchlaufen, bei dem auch taktile Materialien untersucht werden. Sie halten auch das Materialprinzip aufrecht, das ist konsistent. Sie können diese Symbole auf GitHub herunterladen. Sie haben verschiedene Optionen für verschiedene Anwendungen, z. B. für iOs, Web, Android oder SVG. Wenn Sie eine breitere Option zur einfachen Anpassung wünschen, möchten Sie wahrscheinlich Material Design-Symbolpakete auf FlatIcon anzeigen. In der Packung finden Sie die Symbolvektor (SVG & EPS), PSD- und PNG-Version.
Animation des Materials
Dies sind die Features des Materials, die ich am meisten mag. Die Animationen in Material sind so real und intuitiv. Jede Animation hat sinnvolle, konsistente und richtige Timing-Übergänge. Die unten abgebildete GIF-Demo ist nur eine der schönen Materialanimationen. Um eine ansprechende und ansprechende Interaktion zu gewährleisten, erstellt das Google-Team auch eine Animation, die die Wellen wie ein Ripple-Effekt für die Nutzereingaben beeinflusst. Es wird meistens für Knöpfe und Karten verwendet.
Diese Funktionen, die ich erläutert habe, sind nur ein kleiner Teil des Angebots von Material Design. Um mehr über die Materialwelt zu erfahren, besuchen Sie einfach die Dokumentationsseite.
Implementierung
Material Design wird standardmäßig als neues UI-Update für Android Lollipop angeboten. Alle Richtlinien, die Material darin angewendet hat. Da sich Material auf alle Arten von Umgebungen richtet, ist die Implementierung in ein anderes System nicht schwierig. Dank der Communitys ist es mit einigen von ihnen erstellten Tools noch viel einfacher.
Dies sind mehrere Möglichkeiten, um Material Design außerhalb von Android, beispielsweise im Web, zu erreichen.
CSS-Frameworks verwenden
Dies ist der einfachste Weg, wenn Sie Material Design in eine Webplattform implementieren möchten. Mit Frameworks müssen Sie es nur initialisieren und dann die Elemente schreiben, die Sie benötigen. Es gibt viele Frameworks, die Sie wie Materialise, Material UI oder Polymer verwenden können, um nur einige zu nennen. Meine persönliche Entscheidung fällt in Materialise. Es ist einfacher zu bedienen und zu verstehen und hat eine gute Dokumentation mit schöner Demo.
Folgt den Richtlinien
Wenn Sie Material ohne die Hilfe von Framework implementieren möchten und lieber mit Codes umgehen, müssen Sie die Materialrichtlinien befolgen. Dort finden Sie alle Gebote und Gebote, die Sie beachten sollten, um materielle Prinzipien zu erreichen. Sie erhalten alle grundlegenden Anleitungen zum Erstellen von Komponenten, Layout, Animationen, Farben, Mustern und mehr. Möglicherweise möchten Sie einige Materialchecklisten für eine einfachere Entwicklung sehen.
Fazit
Material Design ist ein großartiges Design-System und hat sich zu einem der am meisten erwarteten Trends des Jahres entwickelt. In den nächsten paar Monaten sehen wir es vielleicht überall. Weitere Apps und Websites werden mit diesem neuen Design-Update von Google auf den neuesten Stand gebracht.
Und mit Material Design hat Google seine Überlegenheit als eines der größten Tech-Unternehmen unter Beweis gestellt. Damit ist Google nicht nur im Suchmaschinen- und mobilen Betriebssystembereich führend, sondern auch im Designbereich. Inzwischen gibt es kein anderes Unternehmen, das dieses große Ding entwickelt wie Google. Aber die Erfahrung sagt, es wird nicht lange dauern. Warten wir einfach, dass ein anderes Unternehmen auf das Material Design von Google eingeht.
