المحتوى

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

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

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

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

أنواع كتل المحتوى

1. كتلة المحتوى النصي

تُستخدم لعرض العناوين، والفقرات، والنصوص التوضيحية.

الاستخدامات الشائعة:

  • مقدمات الصفحات.
  • المحتوى الوصفي.
  • محتوى السياسات أو المعلومات.

أفضل الممارسات:

  • اجعل الفقرات مختصرة وسهلة القراءة.
  • استخدم العناوين لتنظيم المحتوى وإبراز تسلسله.
  • حافظ على اتساق المسافات بين العناصر.

2. كتلة محتوى الوسائط

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

الاستخدامات الشائعة:

  • إبراز المبادرات أو الحملات الرئيسية.
  • عرض الوسائط مع معلومات توضيحية مرتبطة بها.

أفضل الممارسات:

  • احرص على أن تدعم الوسائط الرسالة ولا تشتت انتباه المستخدم.
  • وفّر نصوصًا بديلة للوسائط لدعم إمكانية الوصول.
  • حافظ على نسب أبعاد موحدة للوسائط.

3. كتل المحتوى المختلطة

تتيح دمج النصوص والوسائط والأيقونات والإجراءات داخل كتلة واحدة بطريقة مرنة.

الاستخدامات الشائعة:

  • أقسام إبراز المزايا.
  • إبراز الخدمات.
  • المحتوى الترويجي.

أفضل الممارسات:

  • حافظ على توازن بصري واضح بين العناصر.
  • تجنب إضافة عدد كبير من العناصر داخل الكتلة الواحدة.
  • اجعل إجراءات الدعوة إلى التفاعل واضحة ومحددة.

4. كتلة المحتوى الموجهة للإجراء

صُممت لتشجيع المستخدم على التفاعل من خلال الأزرار أو الروابط.

الاستخدامات الشائعة:

  • أقسام الدعوة إلى الإجراء.
  • إبراز عناصر التنقل.
  • توجيه المستخدم إلى الخطوة التالية.

أفضل الممارسات:

  • استخدم تسميات واضحة تدل على الإجراء المطلوب.
  • تجنب إرباك المستخدم بعدد كبير من الإجراءات.
  • حافظ على موضع ثابت للإجراءات داخل الكتلة.

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

  • استخدم عناصر HTML الدلالية لضمان التوافق مع برامج قراءة الشاشة.
  • احرص على توفير تباين لوني كافٍ بين النصوص والخلفيات.
  • لا تعتمد على اللون وحده لنقل المعنى.
  • حافظ على ترتيب منطقي للمحتوى لتسهيل القراءة والتنقل.

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

تتكيف كتل المحتوى بسلاسة مع مختلف أحجام الشاشات:

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