Layar Kerangka: Kapan Menggunakannya Daripada Pemintal
Apa itu layar kerangka, kapan mengalahkan spinner, cara mendesainnya agar sesuai dengan konten sebenarnya, dan cara menganimasikannya tanpa mengganggu performa atau aksesibilitas.
Pengambilan Inti
Layar kerangka adalah placeholder seperti gambar rangka yang memperlihatkan tata letak konten saat dimuat. Gunakan untuk halaman penuh dan daftar dengan bentuk yang dapat diprediksi; gunakan pemintal untuk area kecil atau konten yang tidak diketahui, dan kemajuan nyata untuk tugas yang panjang. Buat kerangka sesuai dengan tata letak sebenarnya sehingga tidak ada yang melompat saat konten tiba.
Apa itu layar kerangka
Nielsen Norman Group mendefinisikan layar kerangka sebagai pengganti halaman pemuatan yang meniru tata letak dengan visual seperti gambar rangka. Ini digunakan untuk memuat satu halaman penuh dan mengurangi waktu pemuatan yang dirasakan, karena orang melihat struktur dari apa yang akan datang, bukan area kosong.
Kapan menggunakan yang mana
Cocokkan indikator dengan konten dan waktu tunggu:
- Kerangka: halaman atau daftar dimuat di mana tata letaknya diketahui, seperti feed, kartu, dan profil.
- Spinner: area kecil, tombol, atau konten yang bentuknya tidak dapat Anda prediksi.
- Bilah kemajuan: tugas panjang yang dapat Anda ukur, seperti mengunggah dan mengekspor.
- Tidak ada: respons sangat cepat, indikator hanya berkedip.
Merancang kerangka yang baik
Gunakan dimensi komponen sebenarnya sehingga halaman tidak bergeser saat konten tiba, yang juga melindungi skor Pergeseran Tata Letak Kumulatif Anda. Buat bentuk tetap sederhana (blok untuk gambar, batang untuk teks), gunakan warna abu-abu kontras rendah, dan ganti setiap placeholder dengan konten nyata segera setelah siap daripada menunggu semuanya.
Menganimasikan kerangka
NN/g mencatat bahwa beberapa kerangka menyertakan animasi berdenyut atau berkilauan untuk menandakan bahwa sistem masih berfungsi. Jaga agar tetap lambat dan halus, animasikan opacity atau transformasi daripada properti tata letak, dan hentikan ketika gerakan yang dikurangi aktif. Berikan label yang dapat diakses pada wilayah pemuatan seperti "Memuat hasil".
Kunci Principles untuk Diingat
- Kerangka menunjukkan tata letak konten yang akan datang dan mengurangi waktu tunggu yang dirasakan
- Gunakan mereka untuk memuat halaman dan daftar yang dapat diprediksi; pemintal untuk area kecil atau tidak dikenal
- Cocokkan dimensi sebenarnya untuk menghindari pergeseran tata letak
- Jaga agar kilau tetap halus dan hentikan untuk mengurangi gerakan
- Beri label wilayah pemuatan untuk pembaca layar
Pertanyaan yang Sering Diajukan
Sumber
- Skeleton Screens 101 — Nielsen Norman Group
- Progress Indicators Make a Slow System Less Insufferable — Nielsen Norman Group
- Cumulative Layout Shift (CLS) — web.dev