المعرض

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

الغرض من الاستخدام

  • عرض المحتوى المرئي مثل الفعاليات، والمبادرات، والمرافق.
  • عرض مجموعات الوسائط بأحجام وأبعاد صور متنوعة.
  • دعم السرد البصري من خلال الجمع بين الصور الرأسية، والأفقية، وصور معاينة مقاطع الفيديو.
  • إنشاء أقسام مرئية جذابة دون الاعتماد على عارض الوسائط الدوار.

يُعد معرض الوسائط مناسبًا للصفحات التعريفية، وصفحات الوسائط، والحملات، والصفحات الغنية بالمحتوى.

مكونات معرض الوسائط

أنواع التخطيطات المدعومة

  • العناصر البارزة الكبيرة
    عناصر كبيرة تُستخدم لإبراز الوسائط الرئيسية ضمن التخطيط.
  • بطاقات الصور القياسية
    تُستخدم لعرض الصور الداعمة أو المحتوى الثانوي.
  • مزيج الصور الرأسية والأفقية
    يتيح الجمع بين الصور الرأسية والأفقية ضمن تخطيط متوازن.
  • بطاقات معاينة الفيديو (اختياري)
    تتضمن مؤشر تشغيل لتمييز مقاطع الفيديو عن الصور الثابتة.

تلتزم جميع العناصر بمعايير موحدة للمسافات، واستدارة الزوايا، والمحاذاة، لضمان الاتساق البصري.


السلوك التفاعلي

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

إرشادات إمكانية الوصول

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

السلوك الموصى به في التصميم المتجاوب

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