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

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

Пример из Slack

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

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

в вашей статье написано «заполнитель контента»; что не так с этим именем? Я не уверен, что для этого есть «официальное название».
Я вижу несколько упоминаний (обычно называющих Facebook по имени) с использованием этой конкретной строки. Лучший лидер — это эта библиотека , но я не думаю, что она хорошо впишется в декларативную/реактивную модель Angular. Буду копать, спасибо.
@Luciano Проблема в том, что «заполнитель контента» также может легко быть Lorem Ipsum и подобными вещами. Это также полезно в графическом дизайне, поэтому этот термин неоднозначен .

Ответы (5)

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

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

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

Так что конкретно здесь у вас есть заполнители greeking и image , и вместе все это можно назвать заполнителем контента.

интересно, интересно, каково происхождение термина "греки"...
@DigitalLightcraft Возможно, это как-то связано с выражением «для меня это все по-гречески». Для получения дополнительной информации задайте вопрос на English.SE :P
Рад, что смог помочь, да, происхождение «греческого» мне неизвестно, держу пари, это интересно.
Интересный момент о происхождении, связанном с lorem ipsum: «Использование греческого языка (также называемого фиктивным текстом) позволяет дизайнерам страниц размещать текст на странице без фактического содержания, отвлекающего внимание. История греческого языка неясна, но это было впервые использован в середине 20-го века. Текст был основан на словах Цицерона, римского лидера, произведения которого вызывают восхищение. Язык, на котором он говорил и писал, был латинским, а не греческим, поэтому название этого фиктивного текста вводит в заблуждение. " источник

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

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

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

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

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

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

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

Привет, Ник, добро пожаловать в GD.SE. Пожалуйста, не публикуйте дважды информацию, которая уже упоминалась в других ответах. Спасибо!
Как называется шаблон веб-дизайна, показывающий форму контента во время загрузки фактического контента?
СпросиСетьПолитика конфиденциальности1y, 0v