Skelettskärmar: När ska man använda dem istället för spinnare
Vilka skelettskärmar är, när de slår spinnare, hur man designar dem så att de matchar verkligt innehåll och hur man animerar dem utan att skada prestanda eller tillgänglighet.
Core Takeaway
En skelettskärm är en wireframe-liknande platshållare som visar layouten på innehållet medan det laddas. Använd den för hela sidor och listor med en förutsägbar form; använd en spinner för små ytor eller okänt innehåll, och verkliga framsteg för långa uppgifter. Få skelettet att matcha den verkliga layouten så att ingenting hoppar när innehållet kommer.
Vilken skelettskärm är
Nielsen Norman Group definierar en skelettskärm som en platshållare för en laddningssida som efterliknar layouten med en trådramsliknande bild. Det används för helsidesladdningar och minskar upplevd laddningstid, eftersom folk ser strukturen på det som kommer istället för ett tomt område.
När ska man använda vilken
Matcha indikatorn med innehållet och väntan:
- Skelett: sida eller lista laddas där layouten är känd, såsom flöden, kort och profiler.
- Spinner: små områden, knappar eller innehåll vars form du inte kan förutsäga.
- Förloppsindikator: långa uppgifter du kan mäta, till exempel uppladdningar och exporter.
- Ingenting: mycket snabba svar, där en indikator bara flimrar.
Designa ett bra skelett
Använd de verkliga komponentdimensionerna så att sidan inte ändras när innehållet kommer, vilket också skyddar din kumulativa layoutförskjutningspoäng. Håll former enkla (block för bilder, staplar för text), använd gråtoner med låg kontrast och ersätt varje platshållare med riktigt innehåll så fort den är klar istället för att vänta på allt.
Animerande skelett
NN/g noterar att vissa skelett inkluderar en pulserande eller skimrande animation för att signalera att systemet fortfarande fungerar. Håll det långsamt och subtilt, animera opacitet eller en transformation snarare än layoutegenskaper, och stoppa det när reducerad rörelse är på. Ge lastningsområdet en tillgänglig etikett som "Laddar in resultat".
Nyckel Principles att komma ihåg
- Skelett visar layouten för kommande innehåll och minskar upplevd väntan
- Använd dem för förutsägbara sid- och listladdningar; spinnare för små eller okända områden
- Matcha verkliga dimensioner för att undvika layoutförskjutningar
- Håll skimret subtilt och stoppa det för minskad rörelse
- Etikettladdningsområden för skärmläsare
Vanliga frågor
Källor
- Skeleton Screens 101 — Nielsen Norman Group
- Progress Indicators Make a Slow System Less Insufferable — Nielsen Norman Group
- Cumulative Layout Shift (CLS) — web.dev