إعداد نظام المسافات
ما هو نظام المسافات
نظام المسافات قائمة قصيرة من الفراغات والحشوات والهوامش المسموح بها. يختار المصمم كل مسافة من هذه القائمة بدل التقدير بالعين. فتكتسب الواجهة إيقاعًا ثابتًا، ويستطيع المطور ربط كل قيمة برمز.
سلّما 4 و8 نقاط
تبني معظم الأنظمة على وحدة 4 بكسل أو 8 بكسل. وكل قيمة مضاعف للوحدة، فتبقى التخطيطات متحاذية والقرارات سريعة. يشيع سلّم 8 نقاط للفراغات الكبيرة، وتفيد خطوة 4 نقاط في التفاصيل الصغيرة مثل حشوة الأيقونات.
قائمة رموز نموذجية:
- space-1: 4 بكسل، space-2: 8 بكسل، space-3: 12 بكسل
- space-4: 16 بكسل، space-5: 24 بكسل، space-6: 32 بكسل
- space-7: 48 بكسل، space-8: 64 بكسل
الرموز المسماة بالدرجة لا بقيمة البكسل يمكن تغيير قيمها لاحقًا دون إعادة تسميتها.
استخدم المسافة لإظهار العلاقات
ينص مبدأ التقارب على أن العناصر المتقاربة تُرى مترابطة. طبّقه عن قصد: تقترب التسمية من حقلها أكثر من الحقل الذي فوقه، ويقترب العنوان من الفقرة التي يقدّمها أكثر من القسم السابق.
- داخل المكوّن: خطوات صغيرة، مثل 4 إلى 16 بكسل.
- بين المكوّنات: خطوات متوسطة، مثل 16 إلى 32 بكسل.
- بين أقسام الصفحة: خطوات كبيرة، مثل 48 إلى 64 بكسل.
خيارات الكثافة ومثال تطبيقي
تقدم بعض المنتجات كثافات مدمجة وافتراضية ومريحة. وتستفيد الأدوات الكثيفة بالبيانات مثل الجداول ولوحات المتابعة من خيار مدمج، بينما تحتاج صفحات المحتوى إلى مساحة أكبر. ابنِ الكثافة بتبديل الرموز التي يستخدمها المكوّن، لا بإعادة تصميمه.
- اختر وحدة أساسية مقدارها 4 أو 8 بكسل.
- عرّف نحو ثمانية رموز.
- حدّد الحشوة داخل المكوّنات أولًا.
- ثم حدّد الفراغات بين المكوّنات والأقسام.
- راجع كل شاشة: هل العناصر المترابطة أقرب من غير المترابطة؟
لنأخذ بطاقة بسيطة فيها عنوان ووصف قصير وزر. يمكن أن تكون مجموعة قيم متسقة كما يلي:
- حشوة البطاقة: 24 بكسل من كل جهة.
- الفراغ بين العنوان والوصف: 8 بكسل لأنهما مترابطان.
- الفراغ بين الوصف والزر: 16 بكسل للفصل بين القراءة والإجراء.
- الفراغ بين البطاقات في الشبكة: 24 بكسل.
كل رقم هنا مأخوذ من قائمة الرموز، فيستطيع مصمم آخر أو مطور إعادة بناء البطاقة دون قياس أي شيء. تجنّب القيم الخارجة عن السلّم مثل 13 أو 22 بكسل. فإذا بدا أن التصميم يحتاج إلى واحدة منها، فالمشكلة غالبًا في التخطيط نفسه.
استخدم السلّم نفسه للمسافات الأفقية والرأسية، وفضّل الخصائص المنطقية مثل padding-inline لتنعكس التخطيطات من اليمين إلى اليسار بشكل صحيح.
المصادر
- MDN Web Docs. CSS logical properties and values. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values
صيغ هذا الدليل بمساعدة الذكاء الاصطناعي اعتمادًا على معايير ومراجع عامة. وللنص الدقيق لأي معيار، ارجع إلى المصادر المذكورة أعلاه.