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