Jak nazywa się wzorzec projektowania stron internetowych pokazujący kształt treści podczas ładowania rzeczywistej treści?

12

Witryny z pojedynczą aplikacją (SPA) często ładują i wyświetlają układ witryny przed załadowaniem jej zawartości. Ostatnio zauważyłem, że zamiast wyświetlać komunikat „czekaj” lub komunikat „Ładowanie ...”, wiele stron z tymi tekstami pokazuje szablon / układ, w którym zawartość zostanie wypełniona, a tekst i obrazy są wypełnione płaską geometrią kształty.

Przykład ze Slacka

Wydaje się, że to dobry wzór, ponieważ jest mniej wstrząsający niż zastąpienie jednej małej linii tekstu oczekiwania przez duży zrzut wiadomości lub cokolwiek innego. Chciałbym poczytać o tym wzorze, może znajdę bibliotekę, aby łatwiej to zrobić na mojej stronie, ale nie mam pojęcia, jak to nazwać, i mam problem z opisaniem go na tyle zwięźle, by skutecznie przeszukiwać sieć . Najbliższym przykładem, jaki mogłem znaleźć, był ten stary artykuł, który nie nadaje tej praktyce konkretnej nazwy.

„Symbol zastępczy” to pierwsza rzecz, o której mogłem pomyśleć, ale oczywiście <input>tagi mają teraz rzeczywisty placeholdleratrybut, a wiele osób pyta o tekst wypełniający lub inną treść (Lorem Ipsum, Kociak Ipsum itp.), Więc wyniki wydają się nieprzydatne . Mam nadzieję, że przemysł zgodził się na unikalną, opisową nazwę tej praktyki i po prostu jej jeszcze nie znalazłem.

Coderer
źródło
2
twój artykuł mówi „symbol zastępczy zawartości”; co jest nie tak z tym imieniem? Nie jestem pewien, czy istnieje do tego „oficjalna nazwa”
Luciano,
Widzę kilka wzmianek (zwykle wywołujących Facebooka po imieniu) przy użyciu tego konkretnego ciągu. Najlepszym tropem jest ta biblioteka, ale nie sądzę, by dobrze pasowała do modelu deklaratywnego / reaktywnego Angulara. Będę dalej kopał, dzięki.
Coderer,
1
@Luciano Problem polega na tym, że „symbol zastępczy treści” może również łatwo być Lorem Ipsum i podobnymi rzeczami. Jest to również przydatne w projektowaniu graficznym, więc termin jest niejednoznaczny.
jo '11

Odpowiedzi:

18

Pierwszą rzeczą, która przyszła mi do głowy, było to, że sugestia typu pokazana w twoim przykładzie jest z pewnością określana jako grecka .

Przeszukanie „greckiego używanego podczas ładowania ekranów” doprowadziło mnie do wielu artykułów na temat tej techniki UX, a konkretnie tego, który odnosi się do koncepcji jako symbolu zastępczego treści .

Tak dobry termin, jak mi się wydaje.

Tak więc tutaj masz greckie i graficzne symbole zastępcze, a całość może być określana jako symbol zastępczy zawartości.

mayersdesign
źródło
2
ciekawe, zastanawiam się, skąd się wzięło pojęcie „greckiego” ...
Digital Lightcraft
1
@DigitalLightcraft Może mieć coś wspólnego z wyrażeniem „dla mnie to wszystko po grecku”. Aby uzyskać więcej informacji, możesz napisać pytanie w języku angielskim. SE : P
Vincent
Cieszę się, że mogłem pomóc, tak pochodzenie greckiego jest mi nieznane, założę się, że to interesujące.
mayersdesign,
2
Interesujący fragment związany z pochodzeniem związanym z lorem ipsum: „Używanie greckiego (zwanego również tekstem zastępczym) pozwala projektantom stron na umieszczanie tekstu na stronie bez faktycznej treści działającej jako rozproszenie. Historia greckiego jest niejasna, ale była po raz pierwszy użyty w połowie XX wieku. Tekst opierał się na słowach Cycerona, rzymskiego przywódcy, którego pisma są podziwiane. Językiem, który mówił i pisał, był łacina, a nie greka, więc nazwa tego fałszywego tekstu jest myląca. „ źródło
Jamie Bull,
4

Magiczne słowo wydaje się być greckie (dzięki!), Ale pomogło mi to znaleźć termin „Szkieletowy ekran”, który wygląda na to, że odnosi się do bardzo specyficznej praktyki układania fałszywej zawartości w celu uzyskania ogólnego kształtu aplikacji. Sądzę, że teoria ta może zmniejszyć niepokój związany z czasem ładowania .

Coderer
źródło
2

Niektórzy z twoich znajomych programistów mogą nazywać to efektem migotania Facebooka , ponieważ Facebook spopularyzował technikę zastępczą zawartości z lekkim efektem migotania i otworzył kod źródłowy .

Celem efektu migotania jest wskazanie, że rzeczywista treść wciąż się ładuje, aby użytkownicy nie myśleli, że strona jest zablokowana i odświeżona.

wprowadź opis zdjęcia tutaj

antoine
źródło
-1

Kiedy użyłem tego wzoru, nazwaliśmy go szkieletem strony. Bardzo przydatne w przypadku dużych stron generujących dynamiczną treść.

Joe B.
źródło
4
Jak to się dodaje do istniejących odpowiedzi? Wygląda na to, że Coderer wspomniał już o określeniu „szkielet”
Zach Saucier,
Witamy w projektowaniu graficznym! Jeśli masz wystarczającą reputację, możesz głosować na odpowiedź, którą uważasz za prawidłową. Możesz też „zaznaczyć” pytanie jako ulubione, a będziesz otrzymywać powiadomienia o wszelkich nowych odpowiedziach.
Luciano,
-4

Nazywa się je ekranami szkieletów.

Nacięcie
źródło
Cześć NIck, witamy na GD.SE. Proszę nie umieszczać podwójnie informacji, które zostały już wspomniane w innych odpowiedziach. Dzięki!
Vincent