Ecrane schelet: când să le folosiți în loc de spinner
Ce sunt ecranele schelete, când îi înving pe spinneri, cum să le proiectați astfel încât să se potrivească cu conținutul real și cum să le animați fără a afecta performanța sau accesibilitatea.
Core Takeaway
Un ecran schelet este un substituent asemănător unui cadru fir care arată aspectul conținutului în timp ce acesta se încarcă. Folosiți-l pentru pagini întregi și liste cu o formă previzibilă; folosește un spinner pentru zone mici sau conținut necunoscut și progres real pentru sarcini lungi. Faceți ca scheletul să se potrivească cu aspectul real, astfel încât nimic să nu sară când sosește conținutul.
Ce este un ecran schelet
Nielsen Norman Group definește un ecran schelet ca un substituent pentru o pagină de încărcare care imită aspectul cu o imagine de tip wireframe. Este folosit pentru încărcări de pagini întregi și reduce timpul de încărcare perceput, deoarece oamenii văd structura a ceea ce urmează în loc de o zonă goală.
Când să folosiți care
Potriviți indicatorul cu conținutul și așteptarea:
- Schelet: se încarcă pagini sau liste în care aspectul este cunoscut, cum ar fi fluxuri, carduri și profiluri.
- Spinner: zone mici, butoane sau conținut a căror formă nu o puteți prevedea.
- Bara de progres: sarcini lungi pe care le puteți măsura, cum ar fi încărcările și exporturile.
- Nimic: răspunsuri foarte rapide, unde un indicator ar pâlpâi doar.
Proiectarea unui schelet bun
Folosiți dimensiunile componente reale, astfel încât pagina să nu se schimbe când sosește conținutul, ceea ce vă protejează și scorul cumulativ de schimbare a aspectului. Păstrați formele simple (blocuri pentru imagini, bare pentru text), utilizați gri cu contrast scăzut și înlocuiți fiecare substituent cu conținut real de îndată ce este gata, în loc să așteptați totul.
Animarea scheletelor
NN/g observă că unele schelete includ o animație pulsatorie sau strălucitoare pentru a semnala că sistemul încă funcționează. Păstrați-l lent și subtil, animați opacitatea sau o transformare mai degrabă decât proprietățile aspectului și opriți-l când este activată mișcarea redusă. Dați regiunii de încărcare o etichetă accesibilă, cum ar fi „Rezultatele de încărcare”.
Cheie Principles de reținut
- Scheletele arată aspectul conținutului viitor și reduc așteptarea percepută
- Folosiți-le pentru încărcări previzibile de pagini și liste; spinners pentru zone mici sau necunoscute
- Potriviți dimensiunile reale pentru a evita schimbarea aspectului
- Păstrați strălucirea subtilă și opriți-l pentru a reduce mișcarea
- Etichetați regiunile de încărcare pentru cititoarele de ecran
Întrebări frecvente
Surse
- Skeleton Screens 101 — Nielsen Norman Group
- Progress Indicators Make a Slow System Less Insufferable — Nielsen Norman Group
- Cumulative Layout Shift (CLS) — web.dev