Csontváz képernyők: Mikor használjuk őket pörgettyűk helyett
Mik azok a képernyővázak, mikor győzik le a pörgetőket, hogyan kell megtervezni őket úgy, hogy igazodjanak a valódi tartalomhoz, és hogyan lehet animálni őket anélkül, hogy a teljesítmény vagy a hozzáférhetőség sérülne.
Core Takeaway
A képernyőváz egy drótvázszerű helyőrző, amely betöltés közben mutatja a tartalom elrendezését. Használja teljes oldalakhoz és kiszámítható alakú listákhoz; kis területekhez vagy ismeretlen tartalmakhoz használjon pörgettyűt, hosszú feladatokhoz pedig valódi előrelépést. Állítsa a csontvázat a valódi elrendezéshez, hogy semmi se ugrik meg, amikor tartalom érkezik.
Milyen egy csontváz képernyő
A Nielsen Norman Group egy képernyővázat definiál a betöltési oldal helyőrzőjeként, amely az elrendezést drótváz-szerű vizualitással utánozza. Teljes oldalas betöltésekhez használják, és csökkenti a betöltési időt, mivel az emberek az üres terület helyett az érkezők szerkezetét látják.
Mikor melyiket kell használni
Párosítsa a mutatót a tartalommal és a várakozással:
- Csontváz: olyan oldal vagy lista betöltődik, ahol az elrendezés ismert, például hírcsatornák, kártyák és profilok.
- Pörgető: kis területek, gombok vagy tartalom, amelynek alakját nem tudod megjósolni.
- Folyamatjelző sáv: hosszú, mérhető feladatok, például feltöltés és exportálás.
- Semmi: nagyon gyors válaszok, ahol csak villogna egy jelző.
Jó csontváz tervezése
Használja a valós komponensméreteket, hogy az oldal ne mozduljon el a tartalom megérkezésekor, ami egyben védi a kumulatív elrendezéseltolás pontszámát is. Legyen egyszerű az alakzatok (blokkok a képekhez, sávok a szöveghez), használjon alacsony kontrasztú szürkéket, és cserélje le minden helyőrzőt valódi tartalommal, amint készen van, ahelyett, hogy mindent várna.
Csontvázak animálása
A NN/g megjegyzi, hogy egyes csontvázak pulzáló vagy csillogó animációt tartalmaznak, jelezve, hogy a rendszer még mindig működik. Tartsa lassú és finom, animálja az átlátszatlanságot vagy transzformációt az elrendezés tulajdonságai helyett, és állítsa le, ha a csökkentett mozgás be van kapcsolva. Adjon a betöltési régiónak egy hozzáférhető címkét, például "Betöltési eredmények".
Kulcs Principle, amit meg kell jegyezni
- A csontvázak megmutatják az érkező tartalom elrendezését, és csökkentik az észlelt várakozást
- Használja őket kiszámítható oldal- és listabetöltésekhez; fonók kicsi vagy ismeretlen területekhez
- Igazítsa a valós méreteket az elrendezés eltolódásának elkerülése érdekében
- Tartsa finoman a csillogást, és állítsa le a mozgás csökkentése érdekében
- Címkebetöltési régiók képernyőolvasók számára
Gyakran Ismételt Kérdések
Források
- Skeleton Screens 101 — Nielsen Norman Group
- Progress Indicators Make a Slow System Less Insufferable — Nielsen Norman Group
- Cumulative Layout Shift (CLS) — web.dev