Skeleton Screens: Kedy ich použiť namiesto Spinnerov
Čo sú to skeletové obrazovky, kedy porazia spinnery, ako ich navrhnúť tak, aby zodpovedali skutočnému obsahu, a ako ich animovať bez toho, aby sa znížil výkon alebo dostupnosť.
Core Takeaway
Základná obrazovka je zástupný symbol podobný drôtovému modelu, ktorý zobrazuje rozloženie obsahu počas načítavania. Použite ho pre celé strany a zoznamy s predvídateľným tvarom; používajte spinner pre malé oblasti alebo neznámy obsah a skutočný pokrok pri dlhých úlohách. Aby kostra zodpovedala skutočnému rozloženiu, aby pri príchode obsahu nič neskočilo.
Čo je to skeletová obrazovka
Nielsen Norman Group definuje kostru obrazovky ako zástupný symbol pre načítavaciu stránku, ktorý napodobňuje rozloženie s vizuálom podobným drôtovému modelu. Používa sa na načítanie celej stránky a znižuje vnímaný čas načítania, pretože ľudia namiesto prázdnej oblasti vidia štruktúru toho, čo prichádza.
Kedy použiť ktoré
Priraďte indikátor k obsahu a čakaniu:
- Kostra: načíta sa stránka alebo zoznam, kde je známe rozloženie, ako sú informačné kanály, karty a profily.
- Spinner: malé oblasti, tlačidlá alebo obsah, ktorých tvar nemôžete predvídať.
- Ukazovateľ priebehu: dlhé úlohy, ktoré môžete merať, ako sú nahrávania a exporty.
- Nič: veľmi rýchle reakcie, pri ktorých by indikátor iba blikal.
Navrhnutie dobrej kostry
Použite skutočné rozmery komponentov, aby sa stránka pri príchode obsahu neposunula, čo tiež chráni vaše skóre Kumulatívneho posunu rozloženia. Udržujte tvary jednoduché (bloky pre obrázky, pruhy pre text), používajte šedej farby s nízkym kontrastom a nahraďte každý zástupný symbol skutočným obsahom hneď, ako bude pripravený, namiesto čakania na všetko.
Animujúce kostry
NN/g poznamenáva, že niektoré kostry obsahujú pulzujúcu alebo blikajúcu animáciu, ktorá signalizuje, že systém stále funguje. Udržujte ho pomalý a jemný, animujte nepriehľadnosť alebo transformujte radšej vlastnosti rozloženia a zastavte ho, keď je zapnutý redukovaný pohyb. Označte oblasť načítania prístupným štítkom, napríklad „Načítava sa výsledky“.
Kľúč Principle na zapamätanie
- Kostry zobrazujú rozloženie prichádzajúceho obsahu a znižujú vnímané čakanie
- Použite ich na predvídateľné načítanie stránok a zoznamov; rotačky pre malé alebo neznáme oblasti
- Priraďte skutočné rozmery, aby ste sa vyhli posunu rozloženia
- Udržujte jemný lesk a zastavte ho, aby ste znížili pohyb
- Označte oblasti načítania pre čítač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