المسافات العشوائية أول ما يلاحظه المصمم الخبير في ملف المبتدئ. هذا مقياس بسيط مبني على 4 بكسل، وكيف تحوله إلى variables وتستخدمه مع الـ auto layout.
افتح ملفًا من سنتك الأولى في التصميم وانظر إلى المسافات: 13 و17 و22 و9. كل قيمة اخترتها بالعين، والشاشة تبدو غير مضبوطة دون أن يعرف أحد السبب. نظام المسافات يحل هذا في ساعات قليلة.
1. اختر وحدة أساس ومقياسًا قصيرًا
استخدم 4 بكسل كوحدة أساس. كل مسافة في الملف من مضاعفات 4. ثم احتفظ بقائمة قصيرة من الخطوات التي تستخدمها فعلًا:
- 4 و8 للمسافات داخل العناصر الصغيرة
- 12 و16 داخل الكروت وبين العناصر المرتبطة
- 24 و32 بين المجموعات
- 48 و64 و96 بين الأقسام
2. حوّل المقياس إلى variables
- 01افتح لوحة الـ Variables وأنشئ مجموعة باسم Spacing.
- 02أضف variables رقمية بأسماء حسب الحجم مثل space-4 وspace-8، أو حسب الدور مثل gap-sm وpad-card.
- 03اضبط الـ scope على Gap وPadding حتى تظهر فقط في مكانها الصحيح.
3. استخدمه مع الـ auto layout
كل frame فيه auto layout يأخذ الآن الـ padding والـ gap من variable بدل رقم مكتوب. غيّر variable واحدًا وستتحدث كل الكروت في الملف. والمطورون يقرأون الأسماء نفسها في Dev Mode، فتتطابق المسافات في الكود مع التصميم.
4. راجع الشاشات القديمة
مر على الشاشات الأساسية واستبدل كل قيمة غريبة بأقرب خطوة في المقياس. ستلاحظ أن العناصر المتشابهة بدأت تبدو متشابهة، وأن التصميم أصبح مقصودًا فجأة. وهذا الإحساس هو الهدف كله.