Apa nama dari pola desain web yang menunjukkan bentuk konten saat konten aktual dimuat?

12

Cukup umum untuk situs Aplikasi Halaman Tunggal (SPA) memuat dan menampilkan tata letak situs sebelum memuat kontennya. Akhir-akhir ini, saya perhatikan bahwa alih-alih hanya menampilkan pesan menunggu-pemintal atau "Memuat ...", banyak situs tesis ini menunjukkan templat / tata letak yang akan diisi oleh konten, dengan teks dan gambar yang diisi dengan geometrik datar bentuk.

Contoh dari Slack

Sepertinya pola yang baik karena kurang menggelegar daripada memiliki satu baris kecil teks tunggu digantikan oleh banyak pesan atau apa pun. Saya ingin membaca tentang polanya, mungkin menemukan perpustakaan untuk melakukannya dengan lebih mudah di situs saya, tetapi saya tidak tahu harus menyebutnya apa, dan saya mengalami kesulitan bahkan menggambarkannya secara ringkas untuk mencari web secara efektif . Contoh terdekat yang bisa saya temukan adalah artikel lama ini yang tidak memberikan nama spesifik pada latihan itu.

"Placeholder" adalah hal pertama yang dapat saya pikirkan, tetapi tentu saja <input>tag sekarang memiliki placeholdleratribut aktual dan banyak orang bertanya tentang teks pengisi atau konten lainnya (Lorem Ipsum, Kitten Ipsum, dan sejenisnya) sehingga hasilnya cenderung tidak membantu . Saya berharap bahwa industri telah menyetujui nama yang unik dan deskriptif untuk praktik ini dan saya belum menemukannya.

Pembuat kode
sumber
2
artikel Anda mengatakan "placeholder konten"; apa yang salah dengan nama itu? Saya tidak yakin ada "nama resmi" untuk ini
Luciano
Saya memang melihat beberapa menyebutkan (biasanya memanggil Facebook dengan nama) menggunakan string tertentu. Pimpinan terbaik adalah perpustakaan ini tetapi saya tidak berpikir itu akan cocok dengan model deklaratif / reaktif Angular. Saya akan terus menggali, terima kasih.
Coderer
1
@Luciano Masalahnya adalah "placeholder konten" juga bisa dengan mudah menjadi Lorem Ipsum dan hal serupa. Hal ini juga berguna dalam desain grafis, sehingga istilah ini ambigu.
yo

Jawaban:

18

Hal pertama yang terpikir oleh saya adalah bahwa saran tipe yang ditunjukkan dalam contoh Anda tentu disebut sebagai bahasa Yunani .

Mencari “greeking digunakan dalam layar loading” membawa saya ke beberapa artikel tentang teknik UX ini, dan secara khusus ini salah satu yang mengacu pada konsep sebagai Placeholder Konten .

Sebagus istilah yang saya pikir.

Jadi secara khusus di sini Anda memiliki penampung Yunani dan gambar dan bersama-sama semuanya dapat disebut sebagai Penampung Konten.

mayersdesign
sumber
2
menarik, saya ingin tahu apa asal usul istilah "Greeking" adalah ...
Digital Lightcraft
1
@DigitalLightcraft Mungkin ada hubungannya dengan ungkapan 'itu semua bahasa Yunani untuk saya'. Untuk info lebih lanjut, jangan ragu untuk mengirimkan pertanyaan ke Bahasa Inggris.SE : P
Vincent
Senang saya bisa membantu, ya asal "Yunani" tidak saya kenal, saya yakin ini menarik.
mayersdesign
2
Sedikit menarik tentang asal terkait dengan lorem ipsum: "Penggunaan bahasa Yunani (juga disebut teks dummy) memungkinkan perancang halaman untuk menempatkan teks pada halaman tanpa konten yang sebenarnya bertindak sebagai selingan. Sejarah Yunani tidak jelas, tetapi itu adalah pertama kali digunakan pada pertengahan abad 20. Naskah ini didasarkan pada kata-kata Cicero, seorang pemimpin Romawi yang tulisannya dikagumi. Bahasa yang ia gunakan berbicara dan menulis adalah bahasa Latin daripada bahasa Yunani, sehingga penamaan teks boneka ini menyesatkan. " sumber
Jamie Bull
4

Kata ajaibnya tampaknya adalah bahasa Yunani (terima kasih!), Tetapi itu membantu saya menemukan istilah "Skeleton Screen", yang sepertinya merujuk pada praktik yang sangat spesifik dalam menyusun konten tiruan untuk mendapatkan bentuk umum dari aplikasi tersebut. Saya kira teorinya adalah dapat mengurangi kecemasan tentang waktu pemuatan .

Pembuat kode
sumber
2

Beberapa teman pengembang Anda mungkin menyebutnya sebagai efek kilau Facebook , karena Facebook mempopulerkan teknik placeholder konten dengan efek sedikit berkilauan, dan membuka kode mereka .

Titik efek kilau adalah untuk menunjukkan bahwa konten yang sebenarnya masih memuat, sehingga pengguna tidak berpikir halaman tersebut macet dan menyegarkan.

masukkan deskripsi gambar di sini

antoine
sumber
-1

Ketika saya menggunakan pola ini, kami menyebutnya halaman kerangka. Sangat berguna untuk halaman besar yang menghasilkan konten dinamis.

Joe B
sumber
4
Bagaimana ini menambah jawaban yang ada? Sepertinya Coderer sudah menyebut istilah "kerangka"
Zach Saucier
Selamat Datang di Desain Grafis! Jika Anda memiliki reputasi yang cukup, Anda dapat memilih jawaban yang Anda pikir itu benar. Atau, "beri bintang" pada pertanyaan sebagai favorit dan Anda akan diberi tahu tentang jawaban baru.
Luciano
-4

Mereka disebut layar kerangka.

Nick
sumber
Halo, selamat datang di GD.SE. Tolong jangan gandakan informasi yang telah disebutkan dalam jawaban lain. Terima kasih!
Vincent