Wie heißt das Webdesignmuster, das die Form des Inhalts anzeigt, während der tatsächliche Inhalt geladen wird?

12

Es ist üblich, dass Single Page Application-Websites (SPA-Websites) das Website-Layout laden und anzeigen, bevor der Inhalt geladen wird. In letzter Zeit ist mir aufgefallen, dass auf vielen Websites nicht mehr nur eine Warteschleife oder die Meldung "Laden ..." angezeigt wird, sondern die Vorlage bzw. das Layout, die bzw. das der Inhalt ausfüllt, wobei der Text und die Bilder mit flachen geometrischen Elementen ausgefüllt werden Formen.

Beispiel aus Slack

Es scheint ein gutes Muster zu sein, weil es weniger nervt, als wenn eine kleine Zeile Wartetext durch eine große Ansammlung von Nachrichten oder was auch immer ersetzt wird. Ich möchte das Muster nachlesen, vielleicht eine Bibliothek finden, um es auf meiner Site einfacher zu machen, aber ich habe keine Ahnung, wie ich es nennen soll, und ich habe Probleme, es auch nur kurz genug zu beschreiben, um das Web effektiv zu durchsuchen . Das nächste Beispiel, das ich finden konnte, war dieser alte Artikel, der der Praxis keinen bestimmten Namen gibt.

"Platzhalter" ist das erste, woran ich denken könnte, aber natürlich haben <input>Tags jetzt ein tatsächliches placeholdlerAttribut, und viele Leute fragen nach Fülltext oder anderem Inhalt (Lorem Ipsum, Kitten Ipsum und dergleichen), sodass die Ergebnisse in der Regel nicht hilfreich sind . Ich hoffe, dass sich die Branche auf einen eindeutigen, aussagekräftigen Namen für diese Praxis geeinigt hat, den ich aber noch nicht gefunden habe.

Coderer
quelle
2
Ihr Artikel sagt "Inhaltsplatzhalter"; Was ist los mit diesem Namen? Ich bin mir nicht sicher, ob es einen "offiziellen Namen" dafür gibt
Luciano
Ich sehe ein paar Erwähnungen (die normalerweise Facebook mit Namen aufrufen), die diese bestimmte Zeichenfolge verwenden. Der beste Hinweis ist diese Bibliothek, aber ich glaube nicht, dass sie gut zum deklarativen / reaktiven Angular-Modell passt. Ich werde weiter graben, danke.
Coderer
1
@Luciano Das Problem ist, dass "Content Placeholder" auch Lorem Ipsum und ähnliches sein könnte. Dies ist auch nützlich in Grafik - Design, so dass der Begriff ist nicht eindeutig.
Du

Antworten:

18

Das erste, was mir einfiel , war, dass der in Ihrem Beispiel gezeigte Typvorschlag mit Sicherheit als griechisch bezeichnet wird .

Durch die Suche nach "greeking in Ladebildschirmen" bin ich zu mehreren Artikeln über diese UX-Technik gekommen, insbesondere zu diesem, der sich auf das Konzept als Inhaltsplatzhalter bezieht .

So gut wie jeder andere Begriff, denke ich.

Speziell hier gibt es also Platzhalter für Griechenland und Bilder, und zusammen kann das Ganze als Inhaltsplatzhalter bezeichnet werden.

mayersdesign
quelle
2
Interessant, ich frage mich, was der Ursprung des Begriffs "Greeking" ist ...
Digital Lightcraft
1
@DigitalLightcraft Hat vielleicht etwas mit dem Ausdruck "Es ist alles Griechisch für mich" zu tun. Für weitere Informationen,
Vincent
Ich bin froh, dass ich helfen konnte, ja, die Ursprünge von "griechen" sind mir unbekannt, ich wette, es ist interessant.
Mayersdesign
2
Interessantes Stück über die Entstehung von Lorem Ipsum: "Die Verwendung von Greeking (auch als Dummy-Text bezeichnet) ermöglicht es Seitendesignern, Text auf einer Seite zu platzieren, ohne dass der tatsächliche Inhalt als Ablenkung fungiert. Die Geschichte von Greeking ist unklar, aber es war Der Text wurde erstmals Mitte des 20. Jahrhunderts verwendet und basierte auf den Worten von Cicero, einem römischen Führer, dessen Schriften bewundert werden. Die Sprache, die er sprach und schrieb, war eher lateinisch als griechisch, weshalb die Benennung dieses Dummy-Textes irreführend ist. " Quelle
Jamie Bull
2

Einige Ihrer Entwicklerfreunde sprechen möglicherweise von Facebooks Schimmereffekt , da Facebook die Inhaltsplatzhaltertechnik mit einem leichten Schimmereffekt populär machte und den Code mit Open-Sourcing-Funktionen bereitstellte .

Der Schimmer-Effekt soll anzeigen, dass der eigentliche Inhalt noch geladen wird, damit die Benutzer nicht glauben, dass die Seite hängen bleibt und aktualisiert wird.

Bildbeschreibung hier eingeben

Antoine
quelle
-1

Wenn ich dieses Muster verwendet habe, haben wir es eine Gerüstseite genannt. Super nützlich für große Seiten, die dynamischen Inhalt erzeugen.

Joe B
quelle
4
Wie ergänzt dies die vorhandenen Antworten? Es sieht so aus, als hätte Coderer den Begriff "Skelett" bereits erwähnt
Zach Saucier
Willkommen bei Graphic Design! Wenn Sie einen ausreichenden Ruf haben, können Sie die Antwort, die Sie für richtig halten , positiv bewerten . Alternativ können Sie die Frage als Favorit markieren, um über neue Antworten informiert zu werden.
Luciano
-4

Sie werden Skelettschirme genannt.

Nick
quelle
Hallo zusammen, willkommen bei GD.SE. Bitte posten Sie nicht doppelt Informationen, die bereits in anderen Antworten erwähnt wurden. Vielen Dank!
Vincent