Was sind die relativen Vorteile von flachem Design, Materialdesign und Skeuomorphismus?


8

Ich habe mir die Richtlinien von Google für dieses Ding namens "Materialdesign" angesehen und einige davon befolgt. Ich sehe jedoch auch viele Websites mit flachem Design: Twitter , Codecademy und Gitter - und das sind nur einige davon. Dann gibt es solche, die CSS3-Verläufe, Schatten usw. und detaillierte Bilder verwenden, um eine Site zu entwerfen, die echt aussieht (korrigieren Sie mich, wenn ich falsch liege, aber ist das nicht Skeuomorphismus?), Wie die Homepage für Twitter Bootstrap 2 .

Soweit ich weiß, reduziert flaches Design die Belastung des mobilen Verkehrs.

Welche Vorteile (insbesondere in Bezug auf Geschwindigkeit / UX / etc.) Bieten sie sich gegenseitig?


Ich denke, das ist eine interessante Frage. Meine ersten Gedanken sind, dass skeuomorphe Designs einen Geschwindigkeitsnachteil haben könnten, wenn sie stark auf Bildern beruhen. Ich nehme an, das ist es, was Sie unter flachen Designs verstehen, die die mobile Verkehrslast reduzieren. Aber als Kontrapunkt könnte ein skeuomorphes Design mit den vielen in CSS3 verfügbaren Funktionen immer noch erreicht werden. Ich befürchte daher, dass die Antwort darauf, ob das eine oder das andere hinsichtlich der Geschwindigkeit vorteilhaft ist oder nicht, "manchmal ja, manchmal nein" lautet.
JohnB

@ JohnB Kann nicht einmal auf die Website zugreifen. In Chrome wird der Fehler "Umleitungsschleife" angezeigt. Am besten tauchen Sie hier jedoch nicht in eine OT-Diskussion ein.

Antworten:


11

Skeuomorphismus ist wirklich das Gegenteil von flachem Design . Googles "Material Design" ist lediglich der Markenname für die spezifische Interpretation des flachen Designs. Es ist immer noch flaches Design. "FLat Design" wurde von Apple geprägt, als sie iOS7 veröffentlichten. Es hat sich durchgesetzt, weil es der erste verwendete Begriff war. Es hätte einfach als "Material Design" bezeichnet werden können, wenn Google es zuerst getan hätte.

Die Praxis des Skeuomorphismus besteht darin, visuelle Elemente hinzuzufügen, die Sie erwarten würden, wenn das Objekt physisch real wäre und nicht auf eine Leinwand projiziert würde. Ein Beispiel wären Schatten und Lichter. Sie existieren auf allem in der realen Welt, aber auf nichts in der digitalen Welt. Durch Hinzufügen dieser skeuomorphen Elemente soll sich der Mensch mit den digitalen Elementen besser vertraut fühlen.

Flaches Design ist das Gegenteil davon. Bei "flachem Design" wird die Physik und Beleuchtung der "realen Welt" nicht berücksichtigt. Digitale Elemente werden hergestellt, der Designer möchte sie jedoch ohne Rücksicht darauf herstellen, was "Realität" mit dem Element tun würde, wenn das Objekt physisch wäre.

Die Bootstrap-Homepage ist kein Beispiel für Skeuomorphismus. Es ist ein Beispiel für flaches Design im Allgemeinen. Obwohl argumentiert werden könnte, dass das eingefügte Rechteck in der Mitte mit dem eingefügten "Präge" -Effekt auch skeuomorph ist. Vielleicht ist ein "Hybrid" die beste Beschreibung.

In Bezug auf die technischen Vor- und Nachteile gibt es keine soliden Gründe, sich für eine andere zu entscheiden.

Oft werden glaubwürdige skeuomorphe Effektbilder benötigt, um qualitativ hochwertige Bilder zu erzielen. Bilder erhöhen natürlich die HTTP-Anforderungen und das Laden des Browsers. Wenn Sie zugunsten von skeuomorphem CSS auf Bilder verzichten, kann das CSS äußerst kompliziert und groß sein. Während das Verringern von HTTP-Anforderungsbildern erforderlich wäre, kann die zusätzliche Größe (kb) einer CSS-Datei mit skeuomorphen Elementen die Verringerung der HTTP-Anforderungen (aus Sicht des Benutzers) überwiegen.

Flaches Design lässt sich mit einfachem CSS3 im Allgemeinen leicht abziehen. Wenn ein Bild wird in einem flachen Design des gleiche Bild benötigt würde höchstwahrscheinlich auch in einem skeuomorphic Design benötigt. Sie gleichen sich also in Bezug auf Vor- und Nachteile aus. Flache Design - CSS ist üblicherweise weniger komplex und leichter zu bearbeiten, aber es nicht haben zu sein. Es ist durchaus möglich, ein flaches Design mit sehr komplexen CSS-Eigenschaften zu erstellen. Die meisten flachen Designs enthalten Farbverläufe - nur keine "realen" Farbverläufe, die darauf basieren, was Licht tun würde, wenn das Objekt real wäre. Jedes der iOS7-8- oder Windows 8-Symbole von Apple verwendet Farbverläufe. Nur sehr subtile Verläufe im Gegensatz zu Verläufen, die "so aussehen, als ob sie hervorstehen".

Am Ende gibt es keinen harten Grund, warum flaches Design technisch besser oder schlechter sein kann als Skeuomorphismus. Es kommt alles auf eine Frage der unten bevorzugt auf Seiten des Designers. Sowohl skeuomorphism und flache Bauweise sind nur Designtrends ohne jede Grundlage in technischen Überlegungen.

Es ist vergleichbar mit der Frage: "Was ist technisch besser eine rote oder eine blaue Website?" - Es gibt keine andere Antwort als "Was auch immer Sie bevorzugen."


1
Eine Anmerkung ist, dass skeuomorphe Effekte, die rein in CSS erzeugt werden, einen enormen Leistungsabfall verursachen würden, nachdem nur die Datei geladen wurde, da Farbverläufe, Boxschatten usw. sehr intensiv sind
Zach Saucier

Ich entziehe mich dem in der Antwort @ZachSaucier :)
Scott
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.