Как проектировать скелетоны

Хабр, привет, это снова я! Меня зовут Антон, я дизайнер b2b продуктов в X5 Tech. Мне нравится моя работа и я стараюсь проектировать реализуемые интерфейсы, поэтому постоянно закапываюсь в технические нюансы.

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

Введение

Мы живём в таком мире, что никто не застрахован от долгой загрузки страниц. И это может коснуться любого продукта, даже с самыми лучшими разработчиками, самым мощным серверным оборудованием и самым быстрым интернетом. Всегда есть подводные камни, вроде опроса сторонних ресурсов или оборудования, которые нельзя собрать заранее, нестабильного интернета у пользователей и многих других неприятностей. Поэтому мы вынуждены спасаться всякими хитростями, вроде экранов загрузки. И в этой статье хочу поделиться, как я думаю, самым гибким и универсальным решением — скелетонами.

Ещё нам необходимо синхронизироваться: пишу я, опираясь на современные JS-решения, хотя и для проектов-с-кучей-легаси это тоже может быть актуально.

И что ещё важно: скелетоны — это не только про визуальную составляющую, но и про техническую реализацию загрузки экранов. То есть, можно сверстать или нарисовать заглушку с серыми прямоугольниками, но она останется заглушкой, а не скелетоном.

Что такое скелетоны

Если есть желание подробнее разобраться в теме загрузочных экранов — добро пожаловать в мою предыдущую статью.

Если нет — постараюсь коротко объяснить суть скелетонов. Вы наверняка видели загружающиеся экраны, которые сначала состоят из маленьких серых прямоугольников и кругов, а потом вместо них появляется контент. Это и есть скелетон. Технически, это тот же экран загрузки, только их много, для отдельных блоков.

Важно уточнить, что скелетоны важно анимировать, без анимации любой статичный и недоступный для пользователя загрузочный экран может восприниматься пользователем как поломка. У скелетонов прижились два типа анимации: пульсация (мерцание) и волна (смещение градиента, лучше делать анимацию единой для всех косточек, так называемый background: fixed).

Плюсы скелетонов в том, что пользователь видит структуру экрана во время его загрузки, давая представление о том, что сейчас загружается. А грамотная техническая реализация скелетона позволяет открывать контент пользователю по мере его загрузки, полноценно открывая доступ к функционалу. То есть не нужно ждать загрузки всей страницы, чтобы воспользоваться панелью навигации, например. Или же можно показать пользователю часть важной информации, пока выполняется сложный запрос.

Скелетоны, структура и разработка

Технически, компонент скелетона — это компонент-обертка для контента и, по совместительству, заглушка на время загрузки. То есть, это всего лишь косточка одного большого скелета загружающегося экрана.

Максимально просто описать принцип скелетирования можно на примере атомарного дизайна. Этот подход, насколько разобрался, впервые был описан в статье за авторством Брэда Фроста.

Согласно статье, на самом низком уровне находятся атомы — самые базовые компоненты библиотеки (текстовые блоки, инпуты, иконки, кнопки и прочее). Далее следует уровень молекул, когда несколько атомов объединяются во что‑то более крупное, после чего из молекул разработчики собирают организмы → шаблоны → страницы. И если смотреть на эту иерархию, процесс скелетирования обычно проходит где‑то между атомами и молекулами или молекулами и организмами.

Но бывают и более интересные случаи — компоненты-обёртки, например, ячейки таблицы. Внутрь них можно положить что угодно, а после обернуть это что угодно компонентом скелетона.

То есть принцип проектирования скелетонов выглядит довольно просто — взяли атомы или молекулы в готовом дизайне, заменили их косточками и всё. Но есть нюансы.

Итак, нюансы

Запросы на сервер

Важной технической частью проектирования скелетонов является продумывание запросов данных с сервера. Можно получать данные не одним пакетом, а несколькими, параллельными или последовательными. То есть возможно запросить сначала обвязку страницы, а затем только данные таблицы. Или запросить сразу всё.

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

Но тут очень важно понимать: чем больше запросов на сервер, тем больше на него нагрузка, поэтому отдельно запрашивать каждую строчку таблицы будет перебором.

Масштаб скелетирования

Скелетировать можно всю страницу или только отдельные её части, чтобы не тратить бюджет проекта на ненужную работу. На своём опыте я выделяю три подхода к скелетированию.

Полное скелетирование

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

Частичное скелетирование

Выборочное скелетирование больших «тяжёлых блоков», вроде таблицы, карточек, блоков со статистикой и графиками. Тут стоит отметить, что скелетоны прекрасно показывают себя и в виртуализированных списках, и при ленивой загрузке в тех же списках.

Точечное скелетирование

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

Консистентность

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

Точность

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

Если срезаете углы использованием заглушек, то следите, чтобы заглушки были свёрстаны согласно реальному контенту, это вводит пользователей в замешательство.

А теперь подробнее

Постараюсь разобрать частные примеры поподробнее, для тех, кому эта статья нравится