Skeletskærme: Hvornår skal du bruge dem i stedet for spinnere
Hvad skeletskærme er, hvornår de slår spinnere, hvordan man designer dem, så de matcher ægte indhold, og hvordan man animerer dem uden at skade ydeevne eller tilgængelighed.
Core Takeaway
En skeletskærm er en wireframe-lignende pladsholder, der viser layoutet af indhold, mens det indlæses. Brug den til hele sider og lister med en forudsigelig form; brug en spinner til små områder eller ukendt indhold, og reel fremgang til lange opgaver. Få skelettet til at matche det rigtige layout, så intet springer, når indholdet ankommer.
Hvad er en skeletskærm
Nielsen Norman Group definerer en skeletskærm som en pladsholder for en indlæsningsside, der efterligner layoutet med en wireframe-lignende visualisering. Det bruges til helsidesindlæsninger og reducerer den opfattede indlæsningstid, fordi folk ser strukturen af det, der kommer, i stedet for et tomt område.
Hvornår skal man bruge hvilken
Match indikatoren med indholdet og ventetiden:
- Skelet: side eller liste indlæses, hvor layoutet er kendt, såsom feeds, kort og profiler.
- Spinner: små områder, knapper eller indhold, hvis form du ikke kan forudsige.
- Statuslinje: lange opgaver, du kan måle, såsom uploads og eksporter.
- Intet: meget hurtige svar, hvor en indikator kun vil flimre.
Design af et godt skelet
Brug de reelle komponentdimensioner, så siden ikke flytter sig, når indholdet ankommer, hvilket også beskytter din kumulative layoutskiftscore. Hold former enkle (blokke til billeder, streger til tekst), brug gråtoner med lav kontrast, og udskift hver pladsholder med ægte indhold, så snart den er klar i stedet for at vente på alt.
Animerende skeletter
NN/g bemærker, at nogle skeletter inkluderer en pulserende eller flimrende animation for at signalere, at systemet stadig fungerer. Hold det langsomt og subtilt, animer opacitet eller en transformation i stedet for layoutegenskaber, og stop det, når reduceret bevægelse er aktiveret. Giv indlæsningsområdet en tilgængelig etiket såsom "Indlæser resultater".
Tast Principles for at huske
- Skeletter viser layoutet af kommende indhold og reducerer opfattet ventetid
- Brug dem til forudsigelige side- og listeindlæsninger; spinnere til små eller ukendte områder
- Match rigtige dimensioner for at undgå layoutskift
- Hold shimmer subtil og stop den for reduceret bevægelse
- Etiketindlæsningsområder for skærmlæsere
Ofte stillede spørgsmål
Kilder
- Skeleton Screens 101 — Nielsen Norman Group
- Progress Indicators Make a Slow System Less Insufferable — Nielsen Norman Group
- Cumulative Layout Shift (CLS) — web.dev