Скелетни екрани: Кога да ги използвате вместо спинери
Какво представляват скелетните екрани, кога побеждават въртящите се, как да ги проектирате така, че да съответстват на реалното съдържание, и как да ги анимирате, без да навредите на производителността или достъпността.
Ядро за вкъщи
Скелетният екран е контейнер, подобен на телена рамка, който показва оформлението на съдържанието, докато се зарежда. Използвайте го за цели страници и списъци с предвидима форма; използвайте спинер за малки области или неизвестно съдържание и реален напредък за дълги задачи. Направете така, че скелетът да съответства на реалното оформление, така че нищо да не прескача, когато съдържанието пристигне.
Какво представлява екранът скелет
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