Skjelettskjermer: Når du skal bruke dem i stedet for spinnere
Hva skjelettskjermer er, når de slår spinnere, hvordan designe dem slik at de matcher ekte innhold, og hvordan animere dem uten å skade ytelsen eller tilgjengeligheten.
Kjerne takeaway
En skjelettskjerm er en wireframe-lignende plassholder som viser utformingen av innholdet mens det lastes inn. Bruk den for hele sider og lister med en forutsigbar form; bruk en spinner for små områder eller ukjent innhold, og reell fremgang for lange oppgaver. Få skjelettet til å matche den virkelige layouten, slik at ingenting hopper når innholdet kommer.
Hva en skjelettskjerm er
Nielsen Norman Group definerer en skjelettskjerm som en plassholder for en lasteside som etterligner oppsettet med en wireframe-lignende visuell. Den brukes til helsideinnlastinger og reduserer opplevd lastetid, fordi folk ser strukturen på det som kommer i stedet for et tomt område.
Når du skal bruke hvilken
Tilpass indikatoren til innholdet og ventetiden:
- Skjelett: side eller liste lastes inn der layouten er kjent, for eksempel feeds, kort og profiler.
- Spinner: små områder, knapper eller innhold hvis form du ikke kan forutsi.
- Fremdriftslinje: lange oppgaver du kan måle, for eksempel opplastinger og eksporter.
- Ingenting: veldig raske svar, der en indikator bare vil flimre.
Designe et godt skjelett
Bruk de reelle komponentdimensjonene slik at siden ikke forskyver seg når innholdet ankommer, noe som også beskytter din kumulative layoutforskyvningspoengsum. Hold former enkle (blokker for bilder, stolper for tekst), bruk gråtoner med lav kontrast, og bytt ut hver plassholder med ekte innhold så snart den er klar i stedet for å vente på alt.
Animere skjeletter
NN/g bemerker at noen skjeletter inkluderer en pulserende eller skimrende animasjon for å signalisere at systemet fortsatt fungerer. Hold den sakte og subtil, animer opasitet eller en transformasjon i stedet for layoutegenskaper, og stopp den når redusert bevegelse er på. Gi lasteregionen en tilgjengelig etikett som "Laster resultater".
Tast Principles å huske
- Skjeletter viser utformingen av kommende innhold og reduserer opplevd ventetid
- Bruk dem for forutsigbare side- og listeinnlastinger; spinnere for små eller ukjente områder
- Match reelle dimensjoner for å unngå layoutskifte
- Hold shimmer subtil og stopp den for redusert bevegelse
- Merk innlastingsområder for skjermlesere
Ofte stilte spørsmå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