سلّم أحجام الخط والألوان بتباين كافٍ

افتح الـ text styles في ملف نما بلا خطة، وستجد نصوصًا بأحجام 13 px و14 px و14.5 px و15 px و16 px، كلٌّ منها مستخدم مرة أو مرتين. لم يخترها أحد؛ تسرّبت وحدها. والنتيجة شاشة يبدو فيها التسلسل البصري مختلًّا قليلًا في كل مكان، ولا أحد يستطيع أن يقول لماذا.

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

سلّم أحجام بوظائف محدّدة

سلّم أحجام الخط (type scale) قائمة قصيرة من أحجام النص، كل حجم مقترن بارتفاع سطر ووزن. في تطبيق الهاتف، من المفيد أن تبدأ بأحجام مقاربة للأحجام الافتراضية للمنصّة لأن عيون الناس معتادة عليها أصلًا. يستعير سلّم Steady معظم أحجامه من أنماط النص الافتراضية لدى Apple، ويقرّب ارتفاعات الأسطر إلى مضاعفات 4، ويستخدم 13 px (حجم footnote لدى Apple) للتعليقات الصغيرة (Caption):

لاحظ ما يفعله الجدول. كل خطوة كبيرة بما يكفي لتُقرأ كرتبة مختلفة. Headline وBody يتشاركان الحجم ويختلفان في الوزن فقط، وهكذا ترتّب النص دون إضافة حجم آخر. ارتفاعات الأسطر نحو 1.4 ضعف للنص المتّصل وأضيق للعناوين الكبيرة، لأن النص الكبير مع ارتفاع سطر واسع يتفكّك إلى أسطر منفصلة.

وزنان أو ثلاثة تكفي: Regular وSemibold وBold هنا. كل وزن إضافي شيء آخر عليك الحفاظ على اتّساقه، والقرّاء لا يميّزون Medium من Semibold من نظرة على أي حال.

في Figma تحفظ كل صف من الجدول كـ text style (الدرس 3.3 يقارن الـ styles بالـ variables). سمِّ الـ styles حسب الدور، مثل Headline أو Caption، لا حسب القيمة مثل 17 Semibold، حتى تستطيع تعديل الحجم لاحقًا دون أن يصبح الاسم كاذبًا.

الألوان من الأدوار لا من التفضيلات

اختيار الألوان التي تعجبك ينتج لوحة إلهام (mood board). اختيار الألوان حسب الأدوار ينتج لوحة ألوان قابلة للاستخدام. ابدأ من الوظائف التي يؤدّيها اللون في الشاشة:

• النص: النص الأساسي (قريب من الأسود، #1A1A1A) والنص الثانوي (رمادي، #6B7280).
• الأسطح: الصفحة (#FFFFFF) والمساحات المرتفعة مثل البطاقات أو اللوحات.
• الحدود والفواصل: رمادي فاتح (#E5E7EB).
• الإجراء الأساسي: تركوازي Steady (#0F766E). يظهر على أزرار التعليم والزر الرئيسي، ولا يكاد يظهر في أي مكان آخر.
• الحالة: الأخضر للنجاح والأحمر للأخطاء، ولا يُستخدمان إلا لهذين المعنيين.

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

التباين: الأرقام التي تهمّ

نسبة التباين (contrast ratio) تقارن السطوع النسبي للونين، من 1:1 (متطابقان) إلى 21:1 (أسود على أبيض). إرشادات إمكانية الوصول إلى محتوى الويب (WCAG) 2.2 تضع العتبات التي تصمّم معظم الفرق وفقها، وهي المستوى AA:

• 4.5:1 للنص العادي.
• 3:1 للنص الكبير: 24 px على الأقل بوزن عادي، أو نحو 18.66 px بخط عريض (أي 18 pt و14 pt).
• 3:1 للأجزاء المرئية من عناصر التحكم والرسومات ذات المعنى، مثل إطار خانة الاختيار أو حلقة التقدّم مقابل خلفيتها.

المستوى AAA يرفع النص العادي إلى 7:1. عادةً تستهدف الفرق AA في كل مكان وAAA للنصوص الطويلة المخصّصة للقراءة.

ألوان Steady مقيسة مقابل الأبيض: النص الأساسي #1A1A1A يعطي 17.40:1، والرمادي الثانوي #6B7280 يعطي 4.83:1 (ينجح بفارق ضئيل)، والتركوازي #0F766E يعطي 5.47:1، لذا تنجح التسمية البيضاء على الزر التركوازي أيضًا.

في Figma أداة لفحص التباين مدمجة في منتقي الألوان. وقت كتابة هذا الدرس، تحدّد طبقة نص، وتفتح لون التعبئة، وتنقر Check color contrast، فيعرض Figma النسبة مقابل ما يقع خلف الطبقة، مع علامات AA وAAA وإصلاح بنقرة واحدة إلى أقرب لون ناجح. استخدمها أثناء اختيار الألوان، لا كتدقيق في النهاية.

لديك الآن قواعد للرتبة (الخط)، وللمعنى (اللون)، ولسهولة القراءة (التباين). في الدرس التالي تضعها على لوحة العمل (canvas): الـ frames والـ groups والطبقات والـ constraints، المادة الخام لكل شاشة في Figma.