รูปแบบการออกแบบเว็บชื่อการแสดงรูปร่างของเนื้อหาในขณะที่กำลังโหลดเนื้อหาจริงคืออะไร

เป็นเรื่องปกติที่ไซต์ Single Page Application (SPA) จะโหลดและแสดงเค้าโครงไซต์ก่อนที่จะโหลดเนื้อหา เมื่อเร็ว ๆ นี้ฉันสังเกตเห็นว่าแทนที่จะแสดงข้อความรอสปินเนอร์หรือ "กำลังโหลด ... " ไซต์เหล่านี้จำนวนมากแสดงเทมเพลต / เลย์เอาต์ที่เนื้อหาจะเติมด้วยข้อความและรูปภาพที่เต็มไปด้วยเรขาคณิตแบน รูปร่าง

ดูเหมือนว่าจะเป็นรูปแบบที่ดีเพราะมันสั่นสะเทือนน้อยกว่าการมีข้อความรอสายเล็ก ๆ หนึ่งบรรทัดที่ถูกแทนที่ด้วยข้อความขนาดใหญ่หรืออะไรก็ตาม ฉันต้องการอ่านในรูปแบบอาจจะหาห้องสมุดที่ทำมันได้ง่ายกว่าบนเว็บไซต์ของฉัน แต่ฉันไม่รู้ว่าจะเรียกมันอย่างไรและฉันมีปัญหาแม้จะอธิบายอย่างสังเขปพอที่จะค้นหาเว็บได้อย่างมีประสิทธิภาพ . ตัวอย่างที่ใกล้เคียงที่สุดที่ฉันสามารถหาได้คือบทความเก่านี้ซึ่งไม่ได้ให้ชื่อเฉพาะในการฝึกฝน

"ตัวยึด" เป็นสิ่งแรกที่ฉันนึกออก แต่แน่นอนว่า<input>ตอนนี้แท็กมีplaceholdlerคุณสมบัติจริงและผู้คนจำนวนมากถามเกี่ยวกับข้อความตัวเติมหรือเนื้อหาอื่น ๆ (Lorem Ipsum, Kitten Ipsum และอื่น ๆ ) ดังนั้นผลลัพธ์มักจะไม่ช่วยเหลือ . ฉันหวังว่าอุตสาหกรรมจะเห็นด้วยกับชื่อที่เป็นเอกลักษณ์และเป็นคำอธิบายสำหรับการปฏิบัตินี้และฉันก็ยังไม่พบมัน

สิ่งแรกที่เกิดขึ้นกับผมก็คือว่าข้อเสนอแนะจากประเภทที่มีการแสดงให้เห็นในตัวอย่างของคุณอย่างแน่นอนเรียกว่าgreeking

การค้นหา“greeking ใช้ในการโหลดหน้าจอ” นำฉันไปหลายบทความเกี่ยวกับเทคนิค UX นี้และโดยเฉพาะอย่างใดอย่างหนึ่งซึ่งหมายถึงแนวความคิดเป็นตัวยึดเนื้อหา

เป็นคำที่ดีเท่าที่ฉันคิด

ดังนั้นที่นี่โดยเฉพาะคุณมีgreekingและimage Placeholderและด้วยกันสิ่งทั้งหมดสามารถเรียกว่าContent Placeholder

คำวิเศษดูเหมือนจะgreeking (ขอบคุณ!) แต่ที่ช่วยให้ฉันค้นหาคำว่า "Skeleton Screen" ซึ่งดูเหมือนว่ามันหมายถึงการปฏิบัติที่เฉพาะเจาะจงมากของการวางเนื้อหาเยาะเย้ยเพื่อให้ได้รูปร่างทั่วไปของแอปพลิเคชัน ผมคิดว่าทฤษฎีก็คือว่ามันสามารถลดความวิตกกังวลเกี่ยวกับเวลาในการโหลด

เพื่อนบางคนของนักพัฒนาซอฟต์แวร์ของคุณอาจเรียกมันว่าผลระยับของ Facebookตั้งแต่ Facebook นิยมเทคนิคยึดเนื้อหาที่มีผลกระทบเล็กน้อยส่องแสงและโอเพนซอร์สรหัสของพวกเขา

จุดของเอฟเฟกต์ชิมเมอร์คือการระบุว่าเนื้อหาที่แท้จริงยังคงโหลดอยู่ดังนั้นผู้ใช้จึงไม่คิดว่าหน้าเว็บนั้นค้างและรีเฟรช

เมื่อฉันใช้รูปแบบนี้เราเรียกมันว่าหน้าโครงกระดูก มีประโยชน์อย่างยิ่งสำหรับหน้าใหญ่ที่กำลังสร้างเนื้อหาแบบไดนามิก

พวกเขาเรียกว่าหน้าจอโครงกระดูก