الشبكات وأنظمة التخطيط

ما هو نظام الشبكة ولماذا نحتاجه؟

تخيل إنك بتبني بيت من غير مسطرة أو أبعاد — كل حاجة هتبقى مايلة وغير متناسقة. نظام الشبكة (Grid System) هو المسطرة والأبعاد بتاعة المصمم الرقمي.

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

فوائد استخدام الشبكة:

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

نظام الـ 8-Point Grid

نظام الـ 8-Point Grid هو المعيار الحالي في تصميم الواجهات الرقمية. الفكرة بسيطة: كل الأبعاد في تصميمك لازم تكون مضاعفات الـ ٨.

ليه ٨ بالذات؟

• الرقم ٨ بيتقسم بسهولة: ٨ ÷ ٢ = ٤، ٨ ÷ ٤ = ٢
• أغلب أحجام الشاشات بتتقسم على ٨ بالتساوي
• Google Material Design و Apple HIG بيستخدموا نظام مبني على ٨

التطبيق العملي

كل القيم دي لازم تكون مضاعفات ٨:

• Padding: ٨، ١٦، ٢٤، ٣٢، ٤٠، ٤٨
• Margin: ٨، ١٦، ٢٤، ٣٢
• Gap بين العناصر: ٨، ١٦، ٢٤
• أحجام الأيقونات: ١٦، ٢٤، ٣٢
• ارتفاع الأزرار: ٣٢ (صغير)، ٤٠ (متوسط)، ٤٨ (كبير)

استثناء: أحجام الخطوط والـ Line Height مش لازم تتبع نظام الـ ٨ — الأرقام دي بتتحدد بناءً على التسلسل البصري.

الشبكة في Figma

في Figma، تقدر تفعّل الشبكة بسهولة:

1. اختار الـ Frame
2. في خصائص Layout Grid، أضف شبكة
3. اختار Grid بحجم ٨px
4. لون الشبكة اعمله بلون فاتح مع opacity قليل

النقط الحمراء اللي بتظهر هي خطوط الشبكة — كل عنصر لازم يتمحور عليها.

شبكة الأعمدة (Column Grid)

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

مكونات شبكة الأعمدة

• Columns (أعمدة): المساحات اللي المحتوى بيتحط فيها
• Gutters (فواصل): المسافات بين الأعمدة
• Margins (هوامش): المسافة بين حافة الشاشة وأول عمود

الشبكة الـ 12-Column

أشهر شبكة في تصميم الويب هي شبكة ١٢ عمود. ليه ١٢؟ لأن الرقم بيتقسم على:

• ٢ (٦ + ٦) — نصين متساويين
• ٣ (٤ + ٤ + ٤) — ثلاث أعمدة
• ٤ (٣ + ٣ + ٣ + ٣) — أربع أعمدة
• ٦ (٢ × ٦) — ست أعمدة
• تقسيمات غير متساوية: ٣ + ٩، ٤ + ٨، ٥ + ٧

المرونة دي بتخلي الشبكة تناسب أي تخطيط تقريبًا.

إعدادات شائعة للـ 12-Column Grid

ديسكتوب (١٤٤٠px):

• أعمدة: ١٢
• عرض العمود: ٧٢px
• Gutter: ٢٤px
• Margin: ١٠٠px من كل جانب

تابلت (٧٦٨px):

• أعمدة: ٨
• Gutter: ١٦px
• Margin: ٣٢px

موبايل (٣٧٥px):

• أعمدة: ٤
• Gutter: ١٦px
• Margin: ١٦px

المسافات والتباعد (Spacing System)

المسافات البيضاء (White Space) مش مساحة فاضية — هي عنصر تصميمي فعّال بيحسّن القابلية للقراءة ويبني التسلسل البصري.

سلم المسافات

بناءً على نظام الـ 8-Point، إليك سلم المسافات المُوصى به:

الاسم	القيمة	الاستخدام
2xs	٤px	مسافة ضيقة جدًا (بين أيقونة ونص)
xs	٨px	مسافة ضيقة (داخل الأزرار)
sm	١٢px	مسافة صغيرة
md	١٦px	مسافة متوسطة (padding أساسي)
lg	٢٤px	مسافة كبيرة (بين العناصر)
xl	٣٢px	مسافة أكبر (بين الأقسام الفرعية)
2xl	٤٨px	مسافة كبيرة جدًا
3xl	٦٤px	بين الأقسام الرئيسية
4xl	٩٦px	بين أقسام الصفحة

قاعدة القُرب (Law of Proximity)

العناصر القريبة من بعض بتبان مرتبطة والعناصر البعيدة بتبان منفصلة. استخدم ده لتنظيم المعلومات:

• المسافة بين عنوان ومحتواه: صغيرة (٨-١٦px)
• المسافة بين قسمين مختلفين: كبيرة (٣٢-٤٨px)
• المسافة بين أقسام الصفحة: كبيرة جدًا (٦٤-٩٦px)

الفرق الواضح في المسافات بيخلي المستخدم يفهم هيكل الصفحة بدون ما يقرأ حرف واحد.

المحاذاة (Alignment)

المحاذاة هي أول حاجة العين بتلاحظها — حتى لو المستخدم مش واعي بيها. عنصر واحد مش متمحور بيحسس إن فيه حاجة غلط.

أنواع المحاذاة

• محاذاة يسار/يمين: الأكتر شيوعًا للنصوص. في العربي، المحاذاة لليمين هي الافتراضية
• محاذاة وسط: للعناوين الرئيسية و Hero sections. ما تستخدمهاش للنصوص الطويلة
• محاذاة على الشبكة: كل العناصر لازم تتمحور على خطوط الشبكة

المحاذاة في تصميم RTL

في التصميم العربي:

• النص بيتمحور يمين
• القوائم بتبدأ من اليمين
• الأزرار الرئيسية بتكون على اليسار (عكس LTR)
• التقدم (Progress) بيمشي من اليمين لليسار

نصيحة: لما تصمم لـ RTL، فكر كأنك بتشوف التصميم في المراية — مش كل حاجة بتتعكس، بس الاتجاه العام بيتغير.

أنماط التخطيط الشائعة (Common Layout Patterns)

١. التخطيط ذو العمود الواحد (Single Column)

أبسط تخطيط — كل المحتوى في عمود واحد وسط الصفحة. مناسب لـ:

• صفحات المقالات والمدونات
• صفحات تسجيل الدخول
• الموبايل

عرض المحتوى: ٦٠٠-٨٠٠px عادةً

٢. التخطيط ثنائي الأعمدة

عمود رئيسي للمحتوى وعمود جانبي (Sidebar). مناسب لـ:

• لوحات التحكم (Dashboard)
• البريد الإلكتروني
• تطبيقات الملاحظات

النسبة الشائعة: ٨ أعمدة محتوى + ٤ أعمدة Sidebar (أو ٩ + ٣)

٣. تخطيط الكروت (Card Grid)

كروت متساوية في شبكة. مناسب لـ:

• صفحات المنتجات
• معرض الأعمال
• نتائج البحث

الإعدادات: ٣-٤ كروت في الصف على الديسكتوب، ٢ على التابلت، ١ على الموبايل.

٤. التخطيط المُكسّر (Broken Grid)

تخطيط إبداعي بيكسر قواعد الشبكة عمدًا. العناصر بتتداخل وبتبقى في أحجام مختلفة. مناسب لـ:

• المواقع الإبداعية
• صفحات الهبوط (Landing Pages)

تحذير: صعب في التنفيذ والتجاوب. استخدمه بس لما يكون مناسب للمحتوى.

٥. التخطيط بـ F-Pattern

مبني على طريقة المستخدم في مسح الصفحة — العين بتمسح أفقيًا في الأعلى ثم تنزل عموديًا. مناسب لـ:

• الصفحات الرئيسية
• صفحات الأخبار
• محركات البحث

Auto Layout في Figma

Auto Layout هو أقوى ميزة في Figma للمصممين. بيخليك تبني مكونات مرنة بتتكيف مع المحتوى تلقائيًا — زي ما بيشتغل CSS Flexbox في الويب.

المفاهيم الأساسية

• Direction: الاتجاه — أفقي (Horizontal) أو عمودي (Vertical)
• Gap: المسافة بين العناصر الداخلية
• Padding: المسافة بين المحتوى وحافة الإطار
• Alignment: محاذاة العناصر داخل الإطار

استخدامات عملية

زر بسيط: Auto Layout أفقي + Padding ١٢ أعلى/أسفل و٢٤ يمين/يسار + Gap ٨ بين الأيقونة والنص

كارد: Auto Layout عمودي + Padding ١٦ من كل الجوانب + Gap ١٢ بين العناصر

قائمة عناصر: Auto Layout عمودي + Gap ٠ + Padding ٠ (كل عنصر فيه padding خاص بيه)

شريط التنقل: Auto Layout أفقي + Space Between + Padding ١٦

Fill Container و Hug Contents

• Hug Contents: العنصر بياخد حجم المحتوى بالظبط — مناسب للأزرار والتسميات
• Fill Container: العنصر بيملا المساحة المتاحة — مناسب للحقول والأعمدة المرنة
• Fixed: عرض أو ارتفاع ثابت — للصور والأيقونات

التعامل مع القيود (Constraints)

Max Width و Min Width

• Max Width: حد أقصى لعرض المحتوى. مهم جدًا لقابلية القراءة — النص اللي بيمتد لعرض شاشة كبيرة مستحيل يُقرأ
• Min Width: حد أدنى للعرض. مهم للأزرار — ما تخليش زر يصغر لدرجة إن النص فيه يتقطع

المحتوى المتغير

صمّم دايمًا للمحتوى الأطول والأقصر:

• أيه شكل الكارد لو العنوان سطر واحد؟ ولو ثلاث سطور؟
• أيه شكل القائمة لو فيها ٣ عناصر؟ ولو ٣٠ عنصر؟
• أيه شكل الجدول لو العمود فيه رقم من خانة واحدة؟ ولو من ١٠ خانات؟

ده اسمه Edge Cases وهو اللي بيفرق التصميم المتين من التصميم الهش.

أخطاء شائعة في التخطيط

١. شبكة مش متسقة

لما المسافات بتتغير من صفحة لصفحة أو حتى من قسم لقسم في نفس الصفحة. حدد سلم مسافات واتبعه.

٢. هوامش صغيرة جدًا على الموبايل

المحتوى اللي بيلمس حافة الشاشة بيحسس بالزحمة. ١٦px هامش هو الحد الأدنى على الموبايل.

٣. عدم استخدام Auto Layout

كل إطار في Figma لازم يكون Auto Layout إلا لو فيه سبب محدد. التصميم بدون Auto Layout مش قابل للتطوير.

٤. تجاهل المسافات البيضاء

المساحة الفاضية مش هدر — هي تنفس بصري. التصميم المزدحم بيخلي المستخدم يحس بالإرهاق.

٥. تصميم لحجم واحد بس

لو صممت للديسكتوب بس، لما المطور يحوّل التصميم للموبايل هيحتاج يختار اختيارات تصميمية من عنده — وده مش وظيفته.

تمرين عملي

صمّم صفحة رئيسية لتطبيق أخبار:

1. ابني الشبكة: ١٢ عمود، Gutter ٢٤px، Margin ١٠٠px (ديسكتوب)
2. Header: شريط تنقل بعرض الصفحة
3. Hero Section: خبر رئيسي يحتل ٨ أعمدة + أخبار جانبية في ٤ أعمدة
4. Content Grid: كروت أخبار في شبكة ٣ × ٣
5. Footer: معلومات وروابط في ٤ أعمدة

بعد ما تخلص الديسكتوب، اعمل نسخة تابلت (٨ أعمدة) وموبايل (٤ أعمدة). لاحظ كيف المحتوى بيتكيف مع تغيير عدد الأعمدة — ده جوهر التصميم المتجاوب.