Skip to main content
ExodeUI

EXODEUI DESKTOP

A little space for good ideas.

Choose your platform to get the official ExodeUI installer.

Looking for Intel Mac or other builds? Explore the web studio or check all download options.

Prefer the browser? Try for free in your browser →
أنماط تجربة المستخدم6 دقائق قراءة·Updated أكتوبر 2026·بواسطة فريق ExodeUI

شاشات الهيكل العظمي: متى يتم استخدامها بدلاً من المغازل

ما هي الشاشات الهيكلية، عندما تتغلب على الدوارات، وكيفية تصميمها بحيث تتطابق مع المحتوى الحقيقي، وكيفية تحريكها دون الإضرار بالأداء أو إمكانية الوصول.

ملخص وتعريف مباشر

الوجبات الجاهزة الأساسية

الشاشة الهيكلية عبارة عن عنصر نائب يشبه الإطار السلكي يُظهر تخطيط المحتوى أثناء تحميله. استخدمه للصفحات الكاملة والقوائم ذات الشكل المتوقع؛ استخدم الدوار للمساحات الصغيرة أو المحتوى غير المعروف، والتقدم الحقيقي للمهام الطويلة. اجعل الهيكل العظمي مطابقًا للتخطيط الحقيقي حتى لا يقفز أي شيء عند وصول المحتوى.

ما هي شاشة الهيكل العظمي

يعرّف Nielsen Norman Group الشاشة الهيكلية كعنصر نائب لصفحة التحميل التي تحاكي التخطيط بمرئية تشبه الإطار السلكي. يتم استخدامه لعمليات تحميل الصفحة الكاملة ويقلل وقت التحميل المتوقع، لأن الأشخاص يرون بنية ما يأتي بدلاً من المساحة الفارغة.

قرص دوار مقارنةً بشاشة هيكلية تعرض عناصر نائبة رمادية لثلاثة عناصر قائمة
الدوار يقول أن شيئًا ما يحدث؛ يُظهر الهيكل العظمي أيضًا ما سيأتي وأين.

متى تستخدم أي

قم بمطابقة المؤشر بالمحتوى وانتظر:

  • الهيكل العظمي: يتم تحميل الصفحة أو القائمة حيث يكون التخطيط معروفًا، مثل الخلاصات والبطاقات وملفات التعريف.
  • الدوار: مساحات صغيرة أو أزرار أو محتوى لا يمكنك التنبؤ بشكله.
  • شريط التقدم: المهام الطويلة التي يمكنك قياسها، مثل عمليات التحميل والتصدير.
  • لا شيء: استجابات سريعة جدًا، حيث يومض المؤشر فقط.

تصميم هيكل عظمي جيد

استخدم أبعاد المكونات الحقيقية حتى لا تتغير الصفحة عند وصول المحتوى، مما يحمي أيضًا نقاط التحول التراكمي للتخطيط الخاص بك. اجعل الأشكال بسيطة (كتل للصور، وأشرطة للنص)، واستخدم الألوان الرمادية منخفضة التباين، واستبدل كل عنصر نائب بمحتوى حقيقي بمجرد أن يصبح جاهزًا بدلاً من انتظار كل شيء.

تحريك الهياكل العظمية

يلاحظ NN/g أن بعض الهياكل العظمية تتضمن رسومًا متحركة نابضة أو متلألئة للإشارة إلى أن النظام لا يزال يعمل. اجعلها بطيئة ودقيقة، وحرك العتامة أو التحويل بدلاً من خصائص التخطيط، وأوقفها عند تشغيل الحركة المنخفضة. امنح منطقة التحميل تسمية يمكن الوصول إليها مثل "تحميل النتائج".

مفتاح Principle للتذكر

  • تُظهر الهياكل العظمية تخطيط المحتوى القادم وتقلل من الانتظار الملحوظ
  • استخدمها لتحميلات الصفحات والقوائم التي يمكن التنبؤ بها؛ المغازل للمناطق الصغيرة أو غير المعروفة
  • قم بمطابقة الأبعاد الحقيقية لتجنب تغيير التخطيط
  • حافظ على اللمعان بشكل خفيف وأوقفه لتقليل الحركة
  • تسمية مناطق التحميل لقارئات الشاشة

الأسئلة المتداولة

المصادر

  1. Skeleton Screens 101 — Nielsen Norman Group
  2. Progress Indicators Make a Slow System Less Insufferable — Nielsen Norman Group
  3. Cumulative Layout Shift (CLS) — web.dev

الأدلة والأمثلة ذات الصلة

تحميل كحالة حقيقية

تصفح المكونات المجانية حيث يتم تصميم حالات التحميل والنجاح والخطأ، وليس الأفكار اللاحقة.

تصفح المكونات الحية
حاول مجانا