Скелетные экраны: когда их использовать вместо спиннеров
Что такое скелетные экраны, когда они превосходят спиннеры, как их спроектировать так, чтобы они соответствовали реальному контенту, и как их анимировать без ущерба для производительности или доступности.
Главное
Скелет экрана — это заполнитель в виде каркаса, который показывает макет контента во время его загрузки. Используйте его для полных страниц и списков предсказуемой формы; используйте счетчик для небольших областей или неизвестного контента и реальный прогресс для длительных задач. Сделайте так, чтобы скелет соответствовал реальному макету, чтобы ничего не прыгало при поступлении контента.
Что такое скелетон-экран
Nielsen Norman Group определяет скелетный экран как заполнитель для страницы загрузки, который имитирует макет с помощью каркасного визуального элемента. Он используется для полной загрузки страницы и сокращает воспринимаемое время загрузки, поскольку люди видят структуру того, что происходит, а не пустую область.
Когда какой использовать
Сопоставьте индикатор с содержимым и ожиданием:
- Скелет: загружаются страницы или списки с известным макетом, например каналы, карточки и профили.
- Спиннер: небольшие области, кнопки или содержимое, форму которых невозможно предсказать.
- Индикатор выполнения: длинные задачи, которые вы можете измерить, например загрузка и экспорт.
- Ничего: очень быстрая реакция, индикатор только мигает.
Создание хорошего скелета
Используйте реальные размеры компонентов, чтобы страница не смещалась при появлении контента, что также защищает ваш совокупный показатель смещения макета. Сохраняйте простые формы (блоки для изображений, полосы для текста), используйте низкоконтрастные оттенки серого и заменяйте каждый заполнитель реальным контентом, как только он будет готов, вместо того, чтобы ждать всего.
Анимация скелетов
NN/g отмечает, что некоторые скелеты имеют пульсирующую или мерцающую анимацию, сигнализирующую о том, что система все еще работает. Делайте это медленно и плавно, анимируйте непрозрачность или преобразование, а не свойства макета, и останавливайте его, когда включено уменьшенное движение. Присвойте региону загрузки доступную метку, например «Результаты загрузки».
Ключевые принципы
- Скелеты показывают макет поступающего контента и уменьшают ощущение ожидания.
- Используйте их для предсказуемой загрузки страниц и списков; блесны для небольших или неизвестных территорий
- Соответствуйте реальным размерам, чтобы избежать смещения макета
- Сохраняйте мерцание тонким и остановите его, чтобы уменьшить движение.
- Отметьте области загрузки для программ чтения с экрана
Частые вопросы
Источники
- Skeleton Screens 101 — Nielsen Norman Group
- Progress Indicators Make a Slow System Less Insufferable — Nielsen Norman Group
- Cumulative Layout Shift (CLS) — web.dev