الـ Layout guides ونظام الـ 8 نقاط

اطلب من ثلاثة مصمّمين ضبط المسافات في بطاقة العادة نفسها، وستحصل على padding بمقدار 14 و15 و16 px. لا أحد منهم مخطئ بمفرده. لكن معًا، عبر أربعين شاشة، يصنعون تطبيقًا يبدو غير ثابت قليلًا، المقابل البصري لطاولة إحدى أرجلها أقصر.

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

الـ Layout guides

وقت كتابة هذا الدرس، يسمّيها Figma ‏layout guides؛ والشروحات القديمة تسمّيها layout grids. إنها أدوات بصرية مساعدة مرتبطة بالـ frame: تراها أثناء التصميم، ولا تظهر أبدًا في الملفات المُصدَّرة، ولا تحرّك شيئًا من تلقاء نفسها. حدّد frame وأضف واحدًا من قسم الـ Layout guide في الشريط الجانبي الأيمن.

هناك ثلاثة أنواع:

• Columns (أعمدة): أشرطة عمودية تمتدّ على ارتفاع الـ frame. الأداة الأساسية لتخطيط الشاشات.
• Rows (صفوف): أشرطة أفقية، مفيدة لضبط الإيقاع في المحتوى الطويل القابل للتمرير.
• Uniform grid (شبكة منتظمة): شبكة مربّعات، مفيدة لرسم الأيقونات وفحص المحاذاة الدقيقة.

للأعمدة والصفوف أربع خصائص. Count هو العدد. وType يحدّد طريقة توزّعها: Stretch يجعلها تكبر مع الـ frame، بينما Left وCenter وRight تُبقي الأعمدة بعرض ثابت ومثبّتة في تلك الجهة. وMargin هو المسافة بين الأعمدة الخارجية وحوافّ الـ frame. وGutter هو المسافة بين الأعمدة.

لشاشات الهاتف في Steady، استخدم guide من 4 أعمدة من نوع Stretch بهامش 20 px وgutter بمقدار 16 px.

معظم محتوى الهاتف يمتدّ على الأعمدة الأربعة؛ ويثبت الـ guide قيمته حين تقسم العرض، مثل بطاقتي إحصاءات متجاورتين في شاشة Habit detail، تمتدّ كلٌّ منهما على عمودين. وعلى الجهاز اللوحي ستنتقل إلى 8 أو 12 عمودًا بهوامش أعرض. ويمكنك حفظ الـ guide كـ style لتستخدم كل الشاشات الـ guide نفسه.

نظام الـ 8 نقاط

نظام الـ 8 نقاط (8-point system) يقول: المسافات وأحجام الـ components مضاعفات للرقم 8، مع السماح بـ 4 كنصف خطوة للتفاصيل الصغيرة. الأسباب عملية، لا غامضة:

• تدرّج نظيف. الهواتف ترسم بكثافة 2× أو 3×، وبعض أجهزة Android بكثافة 1.5×. مضاعفات 8 تبقى بكسلات كاملة في كل كثافة: 8 × 1.5 = 12. أما فجوة بمقدار 5 px فتصبح 7.5، فتُطمس الحوافّ.
• قرارات أقل. الاختيار بين 16 و24 سريع. أما الاختيار بين 14 و15 و16 و17 و18 فنقاش طويل.
• مفردات مشتركة. يقرأ المطوّر “16” في Dev Mode، ويطابقها مع token للمسافات، ولا يتساءل أحد هل كانت 15 مقصودة.

سلّم المسافات في Steady قصير ومسمّى:

space-1    4   icon-to-label, name-to-streak
space-2    8   between habit rows, between chips
space-3   12   inside rows, gap between row elements
space-4   16   card padding, gutter
space-5   20   screen side margin
space-6   24   between blocks on a screen
space-8   32   between the header and the content
space-12  48   tap height of the Save habit button

ربما لاحظت أن 12 و20 ليستا من مضاعفات 8. هذه قاعدة نصف الخطوة: الزيادات بمقدار 4 نقاط مسموحة حيث تكون خطوة 8 كبيرة أكثر من اللازم، وتعمل فرق كثيرة بهذه الطريقة، منها الفريق الذي يقف وراء Material Design. ما يهمّ أن تكون القائمة قصيرة وأن يستخدمها الجميع. والأسماء (space-4 تعني 16) ستصبح variables في القسم 3، فيعيش السلّم في الملف لا في ذاكرة أحدهم.

والنص يُعامَل بالطريقة نفسها: ارتفاعات الأسطر في سلّم أحجام الخط الخاص بـ Steady (24 و20 و16) مضاعفات للرقم 4، فيقع ارتفاع أي كتلة نص دائمًا على الشبكة ويتناغم مع الـ padding المحيط بها.

الشبكة في خدمتك، لا العكس. أيقونة التشغيل داخل دائرة تبدو منحرفة عن المركز حين تكون متوسّطة رياضيًا، لأن ثقلها البصري يميل إلى اليسار؛ فيحرّكها المصمّمون 1 أو 2 px إلى اليمين عن قصد. هذا تصحيح بصري له سبب، وهو بالضبط ما يسمح به النظام.

في الدرس التالي تجمع الـ Layout guides والـ Auto layout والـ constraints معًا، وتجعل شاشة واحدة تعمل على الهواتف من الصغيرة إلى الكبيرة.