التسلسل البصري والمحاذاة والمسافات

هذه المسودة الأولى لشاشة Today في Steady، من النوع الذي يصنعه الجميع تقريبًا في يومهم الأول. العنوان “Today” بحجم 18 px، وأسماء العادات 17 px، ونص التقدّم 16 px، وأعداد الـ streak بحجم 16 px وباللون الرمادي نفسه. كل شيء موجود تقنيًا. ولا شيء يخبرك أين تنظر.

هذه هي المشكلة التي يحلّها التسلسل البصري (visual hierarchy): أن تقرّر ما يراه الناس أولًا وثانيًا وثالثًا، وأن تجعل الشاشة تقول ذلك دون كلمة تعليمات واحدة.

التسلسل البصري: رتّب قبل أن تنسّق

قبل أن تلمس حجم أي خط، اكتب الترتيب. لشاشة Today يكون كالتالي:

1. العادات التي لم تُنجز بعد، مع أزرار تعليمها (المهمّة نفسها).
2. تقدّم اليوم (“3 of 5 done”).
3. عنوان الشاشة والتاريخ.
4. أعداد الـ streak وشريط التبويبات.

ربما توقّعت أن يأتي العنوان أولًا. لا يأتي: الناس يعرفون أنهم فتحوا Steady. العنوان يوجّه؛ أما العادات فهي العمل. الآن لديك سبب لكل قرار حجم سيأتي بعد ذلك.

لديك خمس أدوات للتعبير عن الرتبة، ويمكن جمعها:

• الحجم: الأكبر يُقرأ أولًا. يجب أن تكون الخطوات كبيرة بما يكفي لتبدو مقصودة، أي نحو 1.25 ضعفًا أو أكثر.
• الوزن: الخط العريض (bold) يجذب العين حتى بالحجم نفسه.
• اللون والتباين: النص الداكن على خلفية فاتحة يتفوّق على النص الرمادي؛ ولون مميّز (accent) واحد يتفوّق على عدّة ألوان.
• الموضع: في اللغات التي تُكتب من اليسار إلى اليمين يبدأ الناس من أعلى اليسار؛ وأسفل شاشة الهاتف هو الأسهل وصولًا بالإبهام.
• المساحة: العنصر المحاط بمساحة فارغة يبدو أهم من عنصر محشور بين جيرانه.

استخدم اثنتين أو ثلاثًا من هذه الأدوات معًا، لا الخمس كلها على كل عنصر. إذا كان العنوان أكبر وأثقل وملوّنًا ومحاطًا بإطار، فسيبدأ صخبه يطغى على العادات التي تهمّ فعلًا.

المحاذاة: حوافّ أقل، شاشات أهدأ

كل حافّة يسرى مختلفة على الشاشة شيء على العين أن تسجّله. المسودة الأولى من Steady كان فيها خمس حوافّ: العنوان عند 20 px، ونص التقدّم في المنتصف، وأيقونات العادات عند 16 px، والأسماء عند 56 px، وزر في منتصف الأسفل. بدت مزدحمة دون أن تكون مزدحمة فعلًا.

الحل أن تختار عددًا قليلًا من الحوافّ المشتركة وتلتزم بها. في Steady، يُحاذى كل شيء لليسار على هامش 20 px، والنص داخل الصفوف يبدأ على خط واحد بعد الأيقونة، وعناصر التحكم على اليمين (أزرار التعليم والأسهم) تتشارك حافّة يمنى تبعد 20 px عن جانب الشاشة. حافّتان وعمود نص واحد. وتهدأ الشاشة.

للنص الموسّط مكانه: لحظات قصيرة من سطر واحد، مثل الحالة الفارغة (“No habits yet”) أو عنوان نافذة منبثقة (modal). لكنه لا يناسب القوائم والفقرات، لأن كل سطر يبدأ في مكان جديد وعلى العين أن تبحث عنه.

المسافات: القُرب يعني التجميع

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

القاعدة المستخلصة منه سهلة الصياغة وسهلة الكسر: المسافة داخل المجموعة يجب أن تكون أصغر من المسافة بين المجموعات.

بتطبيق ذلك على Steady: داخل صف العادة، يفصل 4 px بين الاسم والـ streak؛ وكل صف بطاقة مستقلّة تفصلها عن التي تليها 8 px؛ وبين ملخّص التقدّم والقائمة 24 px؛ وبين الترويسة وكل ما عداها 32 px. كل خطوة إلى الخارج تأخذ مساحة أكبر، فيظهر الهيكل قبل أن تقرأ كلمة واحدة.

المسودة الثانية

مع ترتيب واضح، وحافّتين، ومسافات متدرّجة، يتغيّر شكل شاشة Today. يصبح العنوان واضحًا بحجم 34 px وخط عريض، ومفصولًا بالمساحة لا باللون. يجلس سطر التقدّم في كتلة خاصة به تحيط بها مساحة 24 px. أسماء العادات بحجم 17 px ووزن semibold بلون قريب من الأسود، والـ streaks بحجم 13 px برمادي هادئ تحتها مباشرة، وأزرار التعليم على اليمين دوائر بقطر 32 px مع مساحة نقر 44 px، وهي اللون المميّز الوحيد على الشاشة. حدّق وسترى قائمة مع عمود من الأهداف على اليمين. هذه هي المهمّة.

في التمرين أدناه تنتقد مسودة تشبه الأولى. ثم يعطيك الدرس التالي قواعد سلّم أحجام الخط والألوان التي تجعل هذه الأحجام والرماديات متّسقة بدل أن تكون تخمينًا.