شاشات الهيكل العظمي: متى يتم استخدامها بدلاً من المغازل
ما هي الشاشات الهيكلية، عندما تتغلب على الدوارات، وكيفية تصميمها بحيث تتطابق مع المحتوى الحقيقي، وكيفية تحريكها دون الإضرار بالأداء أو إمكانية الوصول.
الوجبات الجاهزة الأساسية
الشاشة الهيكلية عبارة عن عنصر نائب يشبه الإطار السلكي يُظهر تخطيط المحتوى أثناء تحميله. استخدمه للصفحات الكاملة والقوائم ذات الشكل المتوقع؛ استخدم الدوار للمساحات الصغيرة أو المحتوى غير المعروف، والتقدم الحقيقي للمهام الطويلة. اجعل الهيكل العظمي مطابقًا للتخطيط الحقيقي حتى لا يقفز أي شيء عند وصول المحتوى.
ما هي شاشة الهيكل العظمي
يعرّف Nielsen Norman Group الشاشة الهيكلية كعنصر نائب لصفحة التحميل التي تحاكي التخطيط بمرئية تشبه الإطار السلكي. يتم استخدامه لعمليات تحميل الصفحة الكاملة ويقلل وقت التحميل المتوقع، لأن الأشخاص يرون بنية ما يأتي بدلاً من المساحة الفارغة.
متى تستخدم أي
قم بمطابقة المؤشر بالمحتوى وانتظر:
- الهيكل العظمي: يتم تحميل الصفحة أو القائمة حيث يكون التخطيط معروفًا، مثل الخلاصات والبطاقات وملفات التعريف.
- الدوار: مساحات صغيرة أو أزرار أو محتوى لا يمكنك التنبؤ بشكله.
- شريط التقدم: المهام الطويلة التي يمكنك قياسها، مثل عمليات التحميل والتصدير.
- لا شيء: استجابات سريعة جدًا، حيث يومض المؤشر فقط.
تصميم هيكل عظمي جيد
استخدم أبعاد المكونات الحقيقية حتى لا تتغير الصفحة عند وصول المحتوى، مما يحمي أيضًا نقاط التحول التراكمي للتخطيط الخاص بك. اجعل الأشكال بسيطة (كتل للصور، وأشرطة للنص)، واستخدم الألوان الرمادية منخفضة التباين، واستبدل كل عنصر نائب بمحتوى حقيقي بمجرد أن يصبح جاهزًا بدلاً من انتظار كل شيء.
تحريك الهياكل العظمية
يلاحظ NN/g أن بعض الهياكل العظمية تتضمن رسومًا متحركة نابضة أو متلألئة للإشارة إلى أن النظام لا يزال يعمل. اجعلها بطيئة ودقيقة، وحرك العتامة أو التحويل بدلاً من خصائص التخطيط، وأوقفها عند تشغيل الحركة المنخفضة. امنح منطقة التحميل تسمية يمكن الوصول إليها مثل "تحميل النتائج".
مفتاح Principle للتذكر
- تُظهر الهياكل العظمية تخطيط المحتوى القادم وتقلل من الانتظار الملحوظ
- استخدمها لتحميلات الصفحات والقوائم التي يمكن التنبؤ بها؛ المغازل للمناطق الصغيرة أو غير المعروفة
- قم بمطابقة الأبعاد الحقيقية لتجنب تغيير التخطيط
- حافظ على اللمعان بشكل خفيف وأوقفه لتقليل الحركة
- تسمية مناطق التحميل لقارئات الشاشة
الأسئلة المتداولة
المصادر
- Skeleton Screens 101 — Nielsen Norman Group
- Progress Indicators Make a Slow System Less Insufferable — Nielsen Norman Group
- Cumulative Layout Shift (CLS) — web.dev