Luurankonäytöt: Milloin niitä kannattaa käyttää kehreiden sijaan
Mitä luurankonäytöt ovat, milloin ne päihittävät spinnerit, miten ne suunnitellaan niin, että ne vastaavat todellista sisältöä, ja miten ne animoidaan suorituskykyä tai saavutettavuutta heikentämättä.
Core Takeaway
Rungonäyttö on rautalankamainen paikkamerkki, joka näyttää sisällön asettelun sen latautuessa. Käytä sitä kokonaisille sivuille ja luetteloille, joiden muoto on ennustettava. käytä spinneriä pienille alueille tai tuntemattomalle sisällölle ja todellista edistystä pitkiin tehtäviin. Varmista, että luuranko vastaa todellista asettelua, jotta mikään ei hyppää sisällön saapuessa.
Mikä luuranko näyttö on
Nielsen Norman Group määrittelee luurankonäytön lataussivun paikanvaraajaksi, joka jäljittelee asettelua rautalankamaisella visuaalisella kuvalla. Sitä käytetään koko sivun latauksiin ja se vähentää havaittua latausaikaa, koska ihmiset näkevät tulevan rakenteen tyhjän alueen sijaan.
Milloin käyttää mitä
Yhdistä ilmaisin sisältöön ja odotustilaan:
- Luuranko: latautuu sivu tai luettelo, jossa asettelu tunnetaan, kuten syötteet, kortit ja profiilit.
- Spinner: pienet alueet, painikkeet tai sisältö, jonka muotoa et voi ennustaa.
- Edistymispalkki: pitkiä tehtäviä, joita voit mitata, kuten lataukset ja viennit.
- Ei mitään: erittäin nopeat vastaukset, joissa ilmaisin vain välkkyi.
Hyvän luurangon suunnittelu
Käytä komponenttien todellisia mittoja, jotta sivu ei liiku sisällön saapuessa, mikä myös suojaa kumulatiivisen asettelun muutospisteesi. Pidä muodot yksinkertaisina (lohkot kuville, palkit tekstille), käytä matalakontrastisia harmaita ja korvaa jokainen paikkamerkki todellisella sisällöllä heti, kun se on valmis, sen sijaan, että odotat kaikkea.
Animoivia luurankoja
NN/g huomauttaa, että joissakin luurangoissa on sykkivä tai hohtava animaatio, joka ilmaisee, että järjestelmä toimii edelleen. Pidä se hitaana ja hienovaraisena, animoi läpinäkyvyyttä tai muunnos asetteluominaisuuksien sijaan ja pysäytä se, kun alennettu liike on käytössä. Anna latausalueelle helppopääsyinen tarra, kuten "Ladataan tuloksia".
Avain Principles muistettavat
- Luurankot näyttävät tulevan sisällön asettelun ja vähentävät odotettua odotusta
- Käytä niitä ennakoitavissa olevien sivujen ja luetteloiden lataamiseen; spinnerit pienille tai tuntemattomille alueille
- Yhdistä todelliset mitat välttääksesi asettelun siirtymisen
- Pidä hohto hienovaraisena ja pysäytä se vähentääksesi liikettä
- Nimeä näytönlukuohjelmien latausalueet
Usein kysytyt kysymykset
Lähteet
- Skeleton Screens 101 — Nielsen Norman Group
- Progress Indicators Make a Slow System Less Insufferable — Nielsen Norman Group
- Cumulative Layout Shift (CLS) — web.dev