หน้าจอโครงกระดูก: เมื่อใดจึงควรใช้แทนสปินเนอร์

หน้าจอโครงกระดูกคืออะไร

Nielsen Norman Group กำหนดหน้าจอโครงกระดูกเป็นตัวยึดตำแหน่งสำหรับหน้าการโหลดที่เลียนแบบเค้าโครงด้วยภาพที่เหมือนโครงลวด ใช้สำหรับการโหลดแบบเต็มหน้าและลดเวลาในการโหลด เนื่องจากผู้คนมองเห็นโครงสร้างของสิ่งที่กำลังมาแทนที่จะเป็นพื้นที่ว่าง

เมื่อไหร่จะใช้อันไหน.

จับคู่ตัวบ่งชี้กับเนื้อหาและการรอ:

• Skeleton: โหลดหน้าหรือรายการโดยที่ทราบเค้าโครง เช่น ฟีด การ์ด และโปรไฟล์
• สปินเนอร์: พื้นที่เล็กๆ ปุ่ม หรือเนื้อหาที่คุณไม่สามารถคาดเดารูปร่างได้
• แถบความคืบหน้า: งานที่มีความยาวที่คุณสามารถวัดได้ เช่น การอัปโหลดและการส่งออก
• ไม่มีอะไร: ตอบสนองเร็วมาก โดยที่ตัวบ่งชี้จะกะพริบเท่านั้น

การออกแบบโครงกระดูกที่ดี

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

โครงกระดูกเคลื่อนไหว

NN/g ตั้งข้อสังเกตว่าโครงกระดูกบางตัวมีภาพเคลื่อนไหวเป็นจังหวะหรือส่องแสงเพื่อส่งสัญญาณว่าระบบยังคงทำงานอยู่ ทำให้มันช้าและละเอียดอ่อน สร้างความทึบของภาพเคลื่อนไหวหรือการแปลงแทนคุณสมบัติเค้าโครง และหยุดมันเมื่อเปิดใช้งานการลดการเคลื่อนไหว กำหนดป้ายกำกับที่เข้าถึงได้ให้กับพื้นที่การโหลด เช่น "กำลังโหลดผลลัพธ์"