Как называется шаблон веб-дизайна, показывающий форму контента во время загрузки реального контента?

12

Сайты с одностраничным приложением (SPA) довольно часто загружают и отображают макет сайта перед загрузкой его контента. В последнее время я заметил, что вместо того, чтобы просто показывать ожидание или сообщение «Загрузка ...», на многих сайтах этих тезисов показывается шаблон / макет, который будет заполнять контент, с текстом и изображениями, заполненными плоской геометрической структурой. формы.

Пример из Slack

Это кажется хорошим шаблоном, потому что он менее неприятен, чем замена одной маленькой строки текста ожидания большим дампом сообщений или чем-то еще. Я хотел бы ознакомиться с шаблоном, возможно, найти библиотеку для более легкой работы на моем сайте, но я понятия не имею, как это назвать, и у меня возникают проблемы, даже если описать его достаточно кратко для эффективного поиска в Интернете , Самый близкий пример, который я мог найти, была эта старая статья, которая не дает практике конкретного названия.

«Заполнитель» - это первое, что я могу придумать, но, конечно, у <input>тегов теперь есть фактический placeholdlerатрибут, и многие люди спрашивают о тексте наполнителя или другом контенте (Lorem Ipsum, Kitten Ipsum и т. П.), Поэтому результаты, как правило, оказываются бесполезными. , Я надеюсь, что индустрия согласилась с уникальным, описательным названием для этой практики, и я просто еще не нашел его.

Coderer
источник
2
в вашей статье написано "заполнитель контента"; что не так с этим именем? Я не уверен, что есть «официальное имя» для этого
Лучано
Я вижу несколько упоминаний (обычно называю Facebook по имени), используя эту конкретную строку. Лучшим лидером является эта библиотека, но я не думаю, что она бы хорошо подходила для декларативной / реактивной модели Angular. Я буду копать, спасибо.
Coderer
1
@Luciano Проблема в том, что «заполнителем контента» также может быть Lorem Ipsum и подобные вещи. Это также полезно в области графического дизайна, так что термин является неоднозначным.
лет»
связанные: graphicdesign.stackexchange.com/questions/70003/…
Винсент

Ответы:

18

Первое, что пришло мне в голову, было то, что предложение типа, показанное в вашем примере, безусловно, называется грикингом .

Поиск «greeking, используемый в загрузочных экранах» привел меня к нескольким статьям об этой технике UX, и в частности этой, которая упоминает концепцию как заполнитель содержимого .

Такой хороший термин, как я думаю.

В частности, здесь у вас есть грики и имиджевые заполнители, и вместе все это можно назвать заполнителем содержимого.

mayersdesign
источник
2
Интересно, интересно, каково происхождение термина "Greeking" ...
Digital Lightcraft
1
@DigitalLightcraft Может быть, что-то связано с выражением «это все греческое для меня». Для получения дополнительной информации, не стесняйтесь отправить вопрос на английском языке .
Vincent
Рад, что смог помочь, да, происхождение «кричащих» мне неизвестно, держу пари, это интересно.
Mayersdesign
2
Интересная информация о происхождении, связанном с lorem ipsum: «Использование грикинга (также называемого фиктивным текстом) позволяет дизайнерам страниц размещать текст на странице без фактического содержания, действующего как отвлечение. История грикирования неясна, но это было Впервые использованный в середине 20-го века. Текст был основан на словах Цицерона, римского лидера, чьи произведения вызывают восхищение. Язык, на котором он говорил и писал, был латынь, а не греческий, поэтому наименование этого фиктивного текста вводит в заблуждение. " источник
Джейми Булл,
4

Волшебное слово, кажется, кричит (спасибо!), Но это помогло мне найти термин «Экран скелета», который, похоже, относится к очень специфической практике размещения макета контента, чтобы получить общую форму приложения. Я предполагаю, что теория заключается в том, что это может уменьшить беспокойство по поводу времени загрузки .

Coderer
источник
2

Некоторые из ваших друзей-разработчиков могут называть это эффектом мерцания Facebook, поскольку Facebook популяризировал технику заполнителя контента с небольшим эффектом мерцания и открывал свой код .

Смысл эффекта мерцания состоит в том, чтобы указать, что фактический контент все еще загружается, чтобы пользователи не думали, что страница застряла и обновилась.

введите описание изображения здесь

Антуан
источник
-1

Когда я использовал этот шаблон, мы назвали его страницей скелета. Супер полезно для больших страниц, которые генерируют динамический контент.

Джо Б
источник
4
Как это добавляет к существующим ответам? Похоже, Кодерер уже упомянул термин «скелет»
Зак
Добро пожаловать в графический дизайн! Если у вас достаточно репутации, вы можете проголосовать за правильный ответ. В качестве альтернативы, «пометить» вопрос в качестве избранного, и вы будете получать уведомления о новых ответах.
Лучано
-4

Их называют скелетными экранами.

Ник
источник
Привет NIck, добро пожаловать в GD.SE. Пожалуйста, не публикуйте информацию, которая уже упоминалась в других ответах. Благодарность!
Винсент