Skeleton Screens: Kdy je použít místo Spinnerů
Co jsou to skeletové obrazovky, kdy porážejí spinnery, jak je navrhnout tak, aby odpovídaly skutečnému obsahu, a jak je animovat, aniž by se snížil výkon nebo dostupnost.
Core Takeaway
Skeletová obrazovka je zástupný symbol podobný drátovému modelu, který při načítání zobrazuje rozložení obsahu. Použijte jej pro celé stránky a seznamy s předvídatelným tvarem; použijte spinner pro malé oblasti nebo neznámý obsah a skutečný pokrok pro dlouhé úkoly. Aby kostra odpovídala skutečnému rozvržení, aby při příchodu obsahu nic neskočilo.
Co je to kostra obrazovky
Nielsen Norman Group definuje kostru obrazovky jako zástupný symbol pro načítání stránky, který napodobuje rozvržení s vizuálem podobným drátěnému modelu. Používá se pro načtení celé stránky a snižuje vnímanou dobu načítání, protože lidé místo prázdné oblasti vidí strukturu toho, co přichází.
Kdy použít který
Přiřaďte indikátor k obsahu a čekání:
- Kostra: Načte se stránka nebo seznam, kde je známé rozložení, jako jsou zdroje, karty a profily.
- Spinner: malé oblasti, tlačítka nebo obsah, jehož tvar nelze předvídat.
- Ukazatel průběhu: dlouhé úkoly, které můžete měřit, jako jsou nahrávání a exporty.
- Nic: velmi rychlé reakce, kde by indikátor pouze blikal.
Navrhování dobré kostry
Použijte skutečné rozměry komponent, aby se stránka při příchodu obsahu neposouvala, což také chrání vaše skóre Kumulativního posunu rozvržení. Udržujte tvary jednoduché (bloky pro obrázky, pruhy pro text), používejte šedou barvu s nízkým kontrastem a nahraďte každý zástupný symbol skutečným obsahem, jakmile bude připraven, namísto čekání na vše.
Animace kostlivců
NN/g poznamenává, že některé kostry obsahují pulzující nebo mihotavou animaci, která signalizuje, že systém stále funguje. Udržujte jej pomalý a jemný, animujte neprůhlednost nebo transformaci spíše než vlastnosti rozvržení a zastavte jej, když je zapnutý omezený pohyb. Dejte oblasti načítání přístupný štítek, například „Načítání výsledků“.
Klíč Principle k zapamatování
- Kostry ukazují rozložení přicházejícího obsahu a snižují vnímané čekání
- Použijte je pro předvídatelné načítání stránek a seznamů; spinnery pro malé nebo neznámé oblasti
- Přizpůsobte skutečné rozměry, abyste zabránili posunu rozvržení
- Udržujte jemný třpyt a zastavte jej pro omezení pohybu
- Označte oblasti načítání pro čtečky obrazovky
Často kladené otázky
Zdroje
- Skeleton Screens 101 — Nielsen Norman Group
- Progress Indicators Make a Slow System Less Insufferable — Nielsen Norman Group
- Cumulative Layout Shift (CLS) — web.dev