Was ist der Unterschied zwischen „Flat Style“ und „Material Design“?
20
Nach dem Erscheinen von Windows 8 sprachen alle über "Metro UI" und später über das "Flat Design". Jetzt, nachdem Android Lollipop herauskam, sprachen alle über "Material Design". Kann jemand den Unterschied zwischen "Material Design" und "Flat Style" erklären?
Materialdesign hat in seinen Grundsätzen nichts mit flachem Design zu tun. Das Materialdesign ist insofern skeuomorph , als es versucht, das Webdesign realistischer zu gestalten, indem Elemente mithilfe von Ebenen und Animationen auf eine Weise dargestellt werden, die außerhalb des Browsers sinnvoll ist. Visuell flaches Design und Materialdesign sind im Moment ähnlich, aber Materialdesign kann auf andere Designs als flache Designs angewendet werden.
Es folgt 3 Prinzipien
Material ist die Metapher
Seien Sie mutig, grafisch, absichtlich
Mit Bewegung Sinn geben
Die Schichtung im Materialdesign erfolgt, indem Elemente entlang der z-Achse vorwärts oder rückwärts zum und vom Benutzer bewegt werden und realistische Schatten hinzugefügt werden, um mehr Bedeutung zu vermitteln. Das Animieren von Elementen, z. B. eine Animation, die sich auf die Position auswirkt, wenn ein Listenelement entfernt wird, soll den Benutzerfluss und das Verständnis verbessern und die Benutzererfahrung reibungsloser gestalten. Dabei kann durch Materialdesign mehr Bedeutung dargestellt werden als durch flaches Design
Google-Designer erstellten Papiermodelle, um Ebenen und Schatten für ihr Materialdesign zu ermitteln.
Weitere Gestaltungsrichtlinien zu Abstand, Farbe, Benutzerfreundlichkeit und weiteren Details zu Positionierung und Animation finden Sie auf der Google- Website zu diesem Thema .
Eine gute Möglichkeit, mehr über Materialdesign und dessen Implementierung zu erfahren, ist die Verwendung der von Google mithilfe von Materialdesign erstellten Apps und das Lesen der Designdetails . Diese App wurde von Brian Lovin in der Inbox-App erstellt.
Die Leute mögen annehmen, dass Materialdesign eine Art Erweiterung des flachen Designs ist, aber in Wirklichkeit sind die Prinzipien unterschiedlich. Der aktuelle Trend geht dahin, sauberes, flaches Design zu schaffen, das Google derzeit verwendet. Die Prinzipien des Materialdesigns gehen jedoch über diese Grenzen hinaus und können auch auf andere Designmethoden angewendet werden.
In diesem Materialdesign werden visuell viele flache Designikonen und -stile verwendet. Ich würde sagen, dass sie in diesem Sinne sicherlich miteinander verwandt sind. Material Design ist natürlich mehr als das visuelle Erscheinungsbild, wie Sie bereits betont haben.
DA01
@ DA01 Danke, ich habe versucht, meinen Standpunkt in der letzten Bearbeitung klarer zu machen
Flaches Design = Ein Oberbegriff, der sich auf die trendige, moderne Benutzeroberflächenästhetik von blockartigen flachen Symbolen und Farbblöcken bezieht.
Metro Design = Microsofts neues UI-Design (jetzt Microsoft Design Language ) für Windows 8, das die flache visuelle Ästhetik nutzt .
Material Design = Google neues UI-Design für Android, das die flache visuelle Ästhetik nutzt .
(Beachten Sie, dass sowohl Metro als auch Material viel mehr sind als nur die flache Designästhetik. Sie sprechen auch über Interaktionsdesign, Flows, Musterbibliotheken usw.)
Vielen Dank an Johannes, der die Namensänderung für die Benutzeroberfläche von Microsoft zur Kenntnis genommen hat.
Ich denke, das geht nicht genug ins Detail, was sie tatsächlich sind . Es scheint eher das
Zach Saucier
@ZachSaucier richtig. Das OP fragte hauptsächlich nach dem Unterschied. Ich würde sagen, der Unterschied ist, dass einer ein Oberbegriff für einen visuellen Stil ist, die anderen beiden sind spezifische Begriffe für Richtlinien für Marken-Benutzeroberflächen.
DA01
1
@ DA01, möchte nur darauf hinweisen, dass die Benutzeroberfläche von Microsoft seit 2012 nicht mehr als "Metro" bezeichnet wird. Stattdessen wird sie als "Microsoft Design Language" -Quelle bezeichnet . Mir ist klar, dass die Frage von OPs auch diesen Namen erwähnte, aber das ist falsch.
Hanna
@ Johannes yep, das ist eine gute Anmerkung.
DA01
Material Design kann nicht nur mit Android, sondern auch mit Webdesign und Desktop-App-Design verwendet werden.
Vovahost
3
Das Materialdesign ist nicht flach, sondern besteht aus einer Reihe flacher Schichten "Material", die auf der Z-Achse etwas voneinander beabstandet sind. Dies bedeutet, dass diese Objekte Schatten haben und von irgendwoher kommen sollen, wenn sie auf dem Bildschirm erscheinen, und irgendwohin gehen sollen, wo sie nicht mehr gebraucht werden. Das bedeutet, dass sie nicht nur ein- und ausgeblendet werden.
Es gibt auch eine Reihe von Gestaltungsrichtlinien, die die Farbe, den Abstand und viele andere Aspekte Ihres Layouts festlegen.
Hier sind einige davon, aber mit ein paar Google-Suchanfragen können Sie noch viel mehr finden.
"Flaches Design" ist, wie Sie dort oben erklärt haben, und "Material Design" ist nicht wirklich "skeuomorph", sondern "Skeuomorphed Flat Design". "Material Design" verwendet flache Dinge und richtet sie in der Z-Achse aus, um ein "3D Flat Design" zu erhalten. Ich hoffe es hat geholfen.
Tatsächlich erscheint flaches Design auf dem Hintergrund des Materials einfacher, außerdem zielen all diese Animationen eher auf die Interaktion der Benutzer mit mobilen Geräten als auf die Website. Darüber hinaus verbietet niemand die Verwendung dieser beiden Ansätze in einem einzigen Produkt, wenn er die Arbeit am Design bewusster und philosophischer angeht. Beim Skeuomorphismus wurde versucht, Elemente der Benutzeroberfläche auf eine vertrautere und benutzerfreundlichere Art und Weise darzustellen: Wie dieses oder jenes Objekt in der realen Welt aussehen würde, aber viele Menschen haben unterschiedliche Ansichten der umgebenden Dinge, so dass eine einzige erstellt wird Der Stil eines solchen Ansatzes war fast unmöglich. Einige Informationen zum Hinzufügen Was ist der Unterschied: Flaches Design vs. Materialdesign
Flaches Design = Ein Oberbegriff, der sich auf die trendige, moderne Benutzeroberflächenästhetik von blockartigen flachen Symbolen und Farbblöcken bezieht.
Metro Design = Microsofts neues UI-Design (jetzt Microsoft Design Language ) für Windows 8, das die flache visuelle Ästhetik nutzt .
Material Design = Google neues UI-Design für Android, das die flache visuelle Ästhetik nutzt .
(Beachten Sie, dass sowohl Metro als auch Material viel mehr sind als nur die flache Designästhetik. Sie sprechen auch über Interaktionsdesign, Flows, Musterbibliotheken usw.)
Vielen Dank an Johannes, der die Namensänderung für die Benutzeroberfläche von Microsoft zur Kenntnis genommen hat.
quelle
Das Materialdesign ist nicht flach, sondern besteht aus einer Reihe flacher Schichten "Material", die auf der Z-Achse etwas voneinander beabstandet sind. Dies bedeutet, dass diese Objekte Schatten haben und von irgendwoher kommen sollen, wenn sie auf dem Bildschirm erscheinen, und irgendwohin gehen sollen, wo sie nicht mehr gebraucht werden. Das bedeutet, dass sie nicht nur ein- und ausgeblendet werden.
Es gibt auch eine Reihe von Gestaltungsrichtlinien, die die Farbe, den Abstand und viele andere Aspekte Ihres Layouts festlegen.
Hier sind einige davon, aber mit ein paar Google-Suchanfragen können Sie noch viel mehr finden.
http://www.google.com/design/spec/material-design/introduction.html#
quelle
"Flaches Design" ist, wie Sie dort oben erklärt haben, und "Material Design" ist nicht wirklich "skeuomorph", sondern "Skeuomorphed Flat Design". "Material Design" verwendet flache Dinge und richtet sie in der Z-Achse aus, um ein "3D Flat Design" zu erhalten. Ich hoffe es hat geholfen.
quelle
Tatsächlich erscheint flaches Design auf dem Hintergrund des Materials einfacher, außerdem zielen all diese Animationen eher auf die Interaktion der Benutzer mit mobilen Geräten als auf die Website. Darüber hinaus verbietet niemand die Verwendung dieser beiden Ansätze in einem einzigen Produkt, wenn er die Arbeit am Design bewusster und philosophischer angeht. Beim Skeuomorphismus wurde versucht, Elemente der Benutzeroberfläche auf eine vertrautere und benutzerfreundlichere Art und Weise darzustellen: Wie dieses oder jenes Objekt in der realen Welt aussehen würde, aber viele Menschen haben unterschiedliche Ansichten der umgebenden Dinge, so dass eine einzige erstellt wird Der Stil eines solchen Ansatzes war fast unmöglich. Einige Informationen zum Hinzufügen Was ist der Unterschied: Flaches Design vs. Materialdesign
quelle