هذه المسودة الأولى لشاشة Today في Steady، من النوع الذي يصنعه الجميع تقريبًا في يومهم الأول. العنوان “Today” بحجم 18 px، وأسماء العادات 17 px، ونص التقدّم 16 px، وأعداد الـ streak بحجم 16 px وباللون الرمادي نفسه. كل شيء موجود تقنيًا. ولا شيء يخبرك أين تنظر.
\nهذه هي المشكلة التي يحلّها التسلسل البصري (visual hierarchy): أن تقرّر ما يراه الناس أولًا وثانيًا وثالثًا، وأن تجعل الشاشة تقول ذلك دون كلمة تعليمات واحدة.
\nقبل أن تلمس حجم أي خط، اكتب الترتيب. لشاشة Today يكون كالتالي:
\nربما توقّعت أن يأتي العنوان أولًا. لا يأتي: الناس يعرفون أنهم فتحوا Steady. العنوان يوجّه؛ أما العادات فهي العمل. الآن لديك سبب لكل قرار حجم سيأتي بعد ذلك.
\nلديك خمس أدوات للتعبير عن الرتبة، ويمكن جمعها:
\nاستخدم اثنتين أو ثلاثًا من هذه الأدوات معًا، لا الخمس كلها على كل عنصر. إذا كان العنوان أكبر وأثقل وملوّنًا ومحاطًا بإطار، فسيبدأ صخبه يطغى على العادات التي تهمّ فعلًا.
\n\nكل حافّة يسرى مختلفة على الشاشة شيء على العين أن تسجّله. المسودة الأولى من Steady كان فيها خمس حوافّ: العنوان عند 20 px، ونص التقدّم في المنتصف، وأيقونات العادات عند 16 px، والأسماء عند 56 px، وزر في منتصف الأسفل. بدت مزدحمة دون أن تكون مزدحمة فعلًا.
\nالحل أن تختار عددًا قليلًا من الحوافّ المشتركة وتلتزم بها. في Steady، يُحاذى كل شيء لليسار على هامش 20 px، والنص داخل الصفوف يبدأ على خط واحد بعد الأيقونة، وعناصر التحكم على اليمين (أزرار التعليم والأسهم) تتشارك حافّة يمنى تبعد 20 px عن جانب الشاشة. حافّتان وعمود نص واحد. وتهدأ الشاشة.
\nللنص الموسّط مكانه: لحظات قصيرة من سطر واحد، مثل الحالة الفارغة (“No habits yet”) أو عنوان نافذة منبثقة (modal). لكنه لا يناسب القوائم والفقرات، لأن كل سطر يبدأ في مكان جديد وعلى العين أن تبحث عنه.
\nيقرأ الناس الأشياء المتقاربة على أنها مترابطة. هذا مبدأ القُرب (proximity) من مبادئ الجشطالت، وهو أقوى أداة تجميع لديك، أقوى من الإطارات والخطوط الفاصلة.
\nالقاعدة المستخلصة منه سهلة الصياغة وسهلة الكسر: المسافة داخل المجموعة يجب أن تكون أصغر من المسافة بين المجموعات.
\nبتطبيق ذلك على Steady: داخل صف العادة، يفصل 4 px بين الاسم والـ streak؛ وكل صف بطاقة مستقلّة تفصلها عن التي تليها 8 px؛ وبين ملخّص التقدّم والقائمة 24 px؛ وبين الترويسة وكل ما عداها 32 px. كل خطوة إلى الخارج تأخذ مساحة أكبر، فيظهر الهيكل قبل أن تقرأ كلمة واحدة.
\n\nمع ترتيب واضح، وحافّتين، ومسافات متدرّجة، يتغيّر شكل شاشة Today. يصبح العنوان واضحًا بحجم 34 px وخط عريض، ومفصولًا بالمساحة لا باللون. يجلس سطر التقدّم في كتلة خاصة به تحيط بها مساحة 24 px. أسماء العادات بحجم 17 px ووزن semibold بلون قريب من الأسود، والـ streaks بحجم 13 px برمادي هادئ تحتها مباشرة، وأزرار التعليم على اليمين دوائر بقطر 32 px مع مساحة نقر 44 px، وهي اللون المميّز الوحيد على الشاشة. حدّق وسترى قائمة مع عمود من الأهداف على اليمين. هذه هي المهمّة.
\nفي التمرين أدناه تنتقد مسودة تشبه الأولى. ثم يعطيك الدرس التالي قواعد سلّم أحجام الخط والألوان التي تجعل هذه الأحجام والرماديات متّسقة بدل أن تكون تخمينًا.
\n","toc":[{"id":"sec-1","text":"التسلسل البصري: رتّب قبل أن تنسّق","level":2},{"id":"sec-2","text":"المحاذاة: حوافّ أقل، شاشات أهدأ","level":2},{"id":"sec-3","text":"المسافات: القُرب يعني التجميع","level":2},{"id":"sec-4","text":"المسودة الثانية","level":2}],"takeaways":["التسلسل البصري ينشأ من التباين في الحجم والوزن واللون والموضع؛ وإذا أبرزت كل شيء، فلن يبرز شيء.","امنح كل شاشة عنصرًا أساسيًا واحدًا، وحدّد رتبته قبل أن تنسّق أي شيء.","حاذِ العناصر على عدد قليل من الحوافّ المشتركة؛ فكل حافّة إضافية شيء آخر على العين أن تعالجه.","المسافة داخل المجموعة يجب أن تكون أصغر من المسافة بين المجموعات، وإلا ربط الناس بين أشياء غير مترابطة.","اختبار التحديق، أي تغبيش الشاشة حتى لا يبقى إلا الأشكال، يكشف ما إذا كان تسلسلك البصري يصمد دون قراءة."],"further":[{"title":"Visual Hierarchy in UX (Nielsen Norman Group)","url":"https://www.nngroup.com/articles/visual-hierarchy-ux-definition/"},{"title":"Proximity Principle in Visual Design (Nielsen Norman Group)","url":"https://www.nngroup.com/articles/gestalt-proximity/"}],"quiz":[{"q":"في صف عادة، يفصل 16 px بين الاسم “Read 20 pages” وعدد الأيام “12-day streak”، بينما يفصل بين الصفوف نفسها 8 px فقط. ماذا سيلاحظ الناس؟
","options":[{"text":"سيبدو كل streak وكأنه يخصّ العادة في الصف الذي تحته.","why":"صحيح. القُرب يتغلّب على النيّة. الـ streak أقرب إلى الصف التالي منه إلى اسمه، فتربطه العين بالعادة الخطأ."},{"text":"لا شيء، لأن لكل صف خلفية مستقلة.","why":"الخلفيات تساعد، لكن السؤال لا يذكر خلفيات للبطاقات. وحتى معها، المسافات المعكوسة تُضعف التجميع."},{"text":"ستبدو الصفوف أكثر رحابة وأسهل في التصفّح.","why":"الفجوات الضيقة بين الصفوف مع فجوات واسعة داخلها تفعل العكس، فتطمس حدود نهاية كل صف."},{"text":"سيبدو الـ streak أهم من الاسم.","why":"المسافات تغيّر التجميع لا الرتبة. الأهمية تأتي من الحجم والوزن واللون."}],"answer":0},{"q":"أيّ تغيير يصنع أوضح تسلسل بصري بين عنوان الشاشة وأسماء العادات تحته؟
","options":[{"text":"جعل العنوان أكبر من أسماء العادات بـ 1 px.","why":"فرق 1 px أصغر من أن يُقرأ كقرار مقصود. التسلسل البصري يحتاج خطوة يلاحظها الناس من نظرة."},{"text":"جعل العنوان أكبر وأثقل، وإضافة مساحة تحته أكبر من المساحة بين الصفوف.","why":"صحيح. الحجم والوزن والمساحة حين تعمل معًا تجعل الرتبة لا تقبل اللبس."},{"text":"كتابة العنوان بحروف كبيرة كلها بالحجم نفسه.","why":"الحروف الكبيرة وحدها تضيف ملمسًا لا رتبة، والنص الطويل بالحروف الكبيرة أبطأ في القراءة."},{"text":"إعطاء كل اسم عادة لونًا مختلفًا ليبرز العنوان.","why":"كثرة الألوان تضيف ضجيجًا وتنافس العنوان بدل أن تدعمه."}],"answer":1},{"q":"شاشة تخلط عناوين في المنتصف مع قوائم محاذاة لليسار وأزرار محاذاة لليمين. ما أنفع إصلاح أوّل؟
","options":[{"text":"توسيط كل شيء لتبدو الشاشة متماثلة.","why":"القوائم الموسّطة صعبة التصفّح لأن كل سطر يبدأ من مكان مختلف."},{"text":"إضافة خطوط فاصلة بين كل كتلة للفصل بين أنواع المحاذاة.","why":"الفواصل تخفي العَرَض فقط. الحوافّ غير المنتظمة ما زالت موجودة."},{"text":"تكبير حجم الخط لتقلّ أهمية المحاذاة.","why":"النص الأكبر يجعل سوء المحاذاة أوضح، لا أخفى."},{"text":"محاذاة معظم المحتوى على حافّة يسرى مشتركة واحدة، مع إبقاء الاستثناءات مقصودة.","why":"صحيح. حافّة قوية واحدة تتيح للعين النزول في الشاشة دون البحث عن بداية كل سطر."}],"answer":3},{"q":"ماذا يخبرك اختبار التحديق (squint test)؟
","options":[{"text":"ما إذا كان نصّك يحقّق نسبة التباين في WCAG.","why":"التحديق فحص تقريبي للإبراز، لا قياس. استخدم أداة فحص التباين لمعرفة النسب."},{"text":"ما إذا كان كل عنصر محاذى على الـ Layout guide.","why":"الأشكال المغبّشة تخفي الحوافّ الدقيقة. استخدم الـ guides ولوحة الخصائص للتحقّق من المحاذاة."},{"text":"ما إذا كان أهم عنصر ما زال بارزًا حين تختفي التفاصيل.","why":"صحيح. إذا ذاب الإجراء الأساسي في الضباب، فتسلسلك البصري مسطّح أكثر من اللازم."}],"answer":2}],"exercise":{"kind":"choice","multiple":true,"options":["title-rank","regroup-streaks","one-edge","boxes-dividers","center-names","accent-streaks"],"correct":["title-rank","regroup-streaks","one-edge"],"title":"انتقد أول نسخة من شاشة Today","prompt":"تضع صوفيا هذه المسودة في جلسة النقد مع الفريق وتسأل: «أيّ التغييرات تصلح المشكلات الحقيقية، وما الـ لأنّ لكلٍّ منها؟» انظر إلى الحجم والتجميع والمحاذاة.
\n:::figure المسودة الأولى لشاشة Today في Steady\n
\nاختر كل تغيير يصلح مشكلة حقيقية دون أن يخلق مشكلة جديدة.
\n","hints":["حدّق في النموذج. ما الذي يبرز، وأيّ streak يخصّ أيّ عادة؟","قارن الفجوة بين الاسم والـ streak الخاص به بالفجوة بين ذلك الـ streak والعادة التالية.","عُدّ الحوافّ اليسرى والأسطر الموسّطة. ثم اسأل: هل إضافة الإطارات أو الألوان تزيل المشكلة أم تخفيها؟"],"explanation":"هناك ثلاثة أخطاء. العنوان بحجم أسماء العادات ووزنها نفسيهما، فلا يتقدّم شيء على شيء. كل streak يقع على بعد 40 px تحت عادته، لكن على بعد 14 px فقط فوق العادة التالية، فيربطه القُرب بالصف الخطأ؛ ضعه على بعد 4 px تحت اسمه وامنح الصفوف فجوة أكبر. وسطر التقدّم الموسّط يضيف محور محاذاة ثانيًا بلا سبب؛ حاذِه على الحافّة اليسرى المشتركة. أما الإطارات والفواصل فستزيّن المسافات المعكوسة بدل أن تصلحها، والأسماء الموسّطة تجعل القائمة أصعب في التصفّح، وتلوين الـ streaks باللون المميّز سيجعلها تنافس أزرار التعليم، وهي الشيء الوحيد الذي يجب أن يحمل ذلك اللون.
\n","checkLabels":{},"optionText":{"title-rank":{"text":"اجعل العنوان أكبر وأثقل بوضوح من أسماء العادات.","why":"صحيح. العنوان والعادات الآن بالحجم نفسه، فليس للشاشة نقطة تبدأ منها العين. والفرق الواضح في الحجم والوزن يمنحها هذه النقطة."},"regroup-streaks":{"text":"ضع كل streak على بعد بكسلات قليلة تحت اسم عادته، وكبّر الفجوة بين الصفوف.","why":"صحيح. الـ streaks الآن أقرب إلى العادة التالية منها إلى عاداتها هي. فجوات صغيرة في الداخل وأكبر بين المجموعات: هكذا يُصلَح التجميع."},"one-edge":{"text":"حاذِ سطر التقدّم لليسار على الحافّة نفسها التي تبدأ منها القائمة.","why":"صحيح. السطر الموسّط يخلق محورًا ثانيًا. حافّة يسرى مشتركة واحدة تجعل الشاشة أهدأ وأسرع في التصفّح."},"boxes-dividers":{"text":"ضع كل صف داخل إطار وأضف خطًا فاصلًا تحت كل إطار.","why":"الإطارات تخفي مشكلة المسافات بدل أن تحلّها، وتصبح الشاشة أثقل. أصلح الفجوات أولًا؛ فقد لا تحتاج إلى إطارات أصلًا."},"center-names":{"text":"وسّط أسماء العادات لتبدو القائمة متوازنة.","why":"عناصر القائمة الموسّطة تبدأ عند مواضع أفقية مختلفة، فتضطرّ العين للبحث عن كل منها. القوائم تُقرأ أفضل وهي محاذاة لليسار."},"accent-streaks":{"text":"لوّن أعداد الـ streak باللون المميّز لتبرز.","why":"الـ streaks أدنى رتبة من العادات وأزرار تعليمها. منحها اللون المميّز يجعلها تنافس الإجراء الأساسي."}}},"words":703,"readMinutes":4}