{"id":"l-fig-1-3","courseId":"figma-ui-design","lang":"ar","kind":"lesson","summary":"عرّف سلّمًا صغيرًا لأحجام الخط يكون لكل حجم فيه وظيفة، وابنِ لوحة ألوان من الأدوار لا من الألوان المفضّلة، وافحص كل زوج من النص وعناصر التحكم مقابل نسب التباين في WCAG.","html":"

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

\n

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

\n

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

\n

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

\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
الدورالحجم / ارتفاع السطرالوزنالاستخدام
Large title34 / 40Boldعنوان شاشة Today
Title28 / 36Semiboldعنوان شاشة تفاصيل العادة
Headline17 / 24Semiboldأسماء العادات وتسميات الأزرار
Body17 / 24Regularالأوصاف ومدخلات النماذج
Subhead15 / 20Regularسطر التقدّم والمعلومات الثانوية
Caption13 / 16Regularأعداد الـ streak في سطر واحد، وتسميات التبويبات

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

\n
\n ستة أسطر نموذجية من الأكبر إلى الأصغر: Large title بحجم 34، وTitle بحجم 28، وHeadline بحجم 17 بوزن semibold، وBody بحجم 17 بوزن regular، وSubhead بحجم 15، وCaption بحجم 13، وبجانب كلٍّ منها حجمه.\n Today\n Large title 34/40\n Read 20 pages\n Title 28/36\n Drink water\n Headline 17/24 semibold\n Two glasses before lunch\n Body 17/24 regular\n 3 of 5 done\n Subhead 15/20\n 12-day streak\n Caption 13/16\n \n
سلّم أحجام الخط في Steady: الحجم والوزن كلاهما يحمل الرتبة
\n

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

\n

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

\n

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

\n

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

\n\n

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

\n

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

\n

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

\n\n

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

\n

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

\n\n

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

\n\n

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

\n","toc":[{"id":"sec-1","text":"سلّم أحجام بوظائف محدّدة","level":2},{"id":"sec-2","text":"الألوان من الأدوار لا من التفضيلات","level":2},{"id":"sec-3","text":"التباين: الأرقام التي تهمّ","level":2}],"takeaways":["سلّم أحجام الخط (type scale) قائمة قصيرة وثابتة من الأحجام وارتفاعات الأسطر، لكل منها وظيفة مسمّاة؛ تختار من القائمة بدل أن تخترع أحجامًا جديدة.","وزنان أو ثلاثة أوزان للخط تكفي لتطبيق كامل؛ الأوزان الإضافية تضيف ضجيجًا لا تسلسلًا بصريًا.","ابنِ الألوان من الأدوار (النص، الأسطح، الحدود، الإجراء الأساسي، النجاح، الخطر) واستخدم اللون المميّز باقتصاد ليحتفظ بمعناه.","مستوى AA في WCAG يتطلّب 4.5:1 للنص العادي، و3:1 للنص الكبير، و3:1 للحدود المرئية لعناصر التحكم والرسومات ذات المعنى.","افحص التباين أثناء التصميم بمنتقي الألوان في Figma، لا بعد أن يشتكي أحد أصحاب المصلحة."],"further":[{"title":"Understanding SC 1.4.3 Contrast (Minimum)","url":"https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html"},{"title":"Understanding SC 1.4.11 Non-text Contrast","url":"https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html"},{"title":"Update fills using the color picker (Figma)","url":"https://help.figma.com/hc/en-us/articles/360041003774-Update-fills-using-the-color-picker"},{"title":"WebAIM Contrast Checker","url":"https://webaim.org/resources/contrastchecker/"}],"quiz":[{"q":"

الزر الأساسي في Steady بلون تركوازي ساطع #14B8A6 مع تسمية بيضاء بحجم 17 px. نسبة التباين 2.49:1. ماذا تفعل؟

","options":[{"text":"تُبقيه، لأن الأزرار تحتاج 3:1 فقط.","why":"قاعدة 3:1 تخصّ شكل الزر مقابل خلفيته. التسمية نص، فتحتاج 4.5:1 بهذا الحجم."},{"text":"تجعل التسمية بخط عريض، فتصبح نصًا كبيرًا.","why":"النص العريض يُعدّ كبيرًا ابتداءً من نحو 18.66 px (14 pt). عند 17 px ما زال نصًا عاديًا، و2.49:1 تفشل حتى في معيار النص الكبير."},{"text":"تُغمّق التركوازي، مثلًا إلى","why":"صحيح. تغميق التعبئة يحافظ على درجة لون العلامة التجارية ويرفع التسمية فوق 4.5:1 بفارق مريح."},{"text":"تضيف ظلًا خلف التسمية.","why":"الظلال تطمس حوافّ الحروف ولا تُحسب في نسبة التباين. أصلح الألوان نفسها."}],"answer":2},{"q":"

لماذا يستخدم سلّم أحجام الخط مجموعة صغيرة ثابتة من الأحجام بدل ما يبدو مناسبًا في كل شاشة؟

","options":[{"text":"لأن Figma لا يستطيع تخزين أكثر من ستة text styles في الملف.","why":"لا يوجد حدّ كهذا في Figma. القيد قرار تصميمي، لا حدّ في الأداة."},{"text":"لأن تكرار الأحجام يجعل رتبة كل نص متوقّعة عبر الشاشات، ويستطيع المطوّرون ربطها بـ styles مسمّاة.","why":"صحيح. الاتّساق هو ما يتيح للناس تعلّم التسلسل البصري مرة واحدة وإعادة استخدامه في كل مكان."},{"text":"لأن الأحجام الأقل تجعل التطبيق يُحمَّل أسرع.","why":"أحجام الخط ليس لها أثر يُذكر على الأداء. الفائدة هي الاتّساق."},{"text":"لأن قواعد إمكانية الوصول تمنع أكثر من ستة أحجام.","why":"لا تقول WCAG شيئًا عن عدد الأحجام. ما يهمّها هو التباين وتغيير الحجم وسهولة القراءة."}],"answer":1},{"q":"

يعرض حقل النص الفارغ في لوحة New habit نصًا إرشاديًا بلون

","options":[{"text":"النص الإرشادي زخرفي، لذا يجب أن يكون أفتح من ذلك.","why":"النص الإرشادي كثيرًا ما يحمل تعليمات يحتاج الناس إلى قراءتها، فيجب أن يبقى مقروءًا."},{"text":"ليست مشكلة، لأن حدود الحقل تحقّق 3:1 بالفعل.","why":"تباين الحدود يساعد الناس على إيجاد الحقل، لكنه لا يفعل شيئًا لقراءة النص داخله."},{"text":"لا يهمّ ذلك إلا في الوضع الداكن.","why":"النسبة هنا مقيسة في الوضع الفاتح، وهي تفشل بالفعل."},{"text":"كثيرون لا يستطيعون قراءة نص بنسبة 2.54:1، فالنص الإرشادي الذي يحمل معنى يصبح غير مرئي لهم عمليًا.","why":"صحيح. النص الذي يحمل معنى يحتاج 4.5:1. إن كان النص الإرشادي مهمًا فغمّقه؛ والأفضل أن تضع التعليمات في تسمية (label) ظاهرة."}],"answer":3},{"q":"

أيّ خطة ألوان تدعم تسلسلًا بصريًا واضحًا في شاشة Today على أفضل وجه؟

","options":[{"text":"ألوان محايدة للنص والأسطح، وتركوازي واحد للإجراءات الأساسية، والأخضر والأحمر محجوزان للنجاح والأخطاء.","why":"صحيح. حين لا يُستخدم اللون المميّز إلا للإجراءات، تتعلّم العين أن التركوازي يعني «انقر هنا»."},{"text":"لون مختلف لكل صف عادة لتبدو القائمة حيوية.","why":"الصفوف بألوان قوس قزح تنافس أزرار التعليم، ولا تترك لونًا متاحًا للدلالة على الحالة."},{"text":"التركوازي للعناوين والأزرار والأيقونات والحدود والروابط لتظهر العلامة التجارية في كل مكان.","why":"حين يصبح كل شيء تركوازيًا، يفقد التركوازي معناه. ويخسر اللون المميّز قدرته على الإشارة إلى الإجراءات."}],"answer":0}],"exercise":{"kind":"fill","language":"text","template":"Steady contrast checklist (WCAG 2.2, level AA)\n\nHabit name, 17 px semibold, on white needs at least {{0}}:1\nLarge title, 34 px bold, on white needs at least {{1}}:1\nCheckbox outline against the row surface needs at least {{2}}:1\nLong-form help text if we aim for AAA needs at least {{3}}:1\n\nLarge text starts at {{4}} px regular (18 pt).","blanks":[{"answers":["4.5"]},{"answers":["3","3.0"]},{"answers":["3","3.0"]},{"answers":["7","7.0"]},{"answers":["24"]}],"title":"أكمل عتبات التباين","prompt":"

تحتفظ صوفيا بقائمة فحص للتباين مثبّتة بجانب كل شاشة تصمّمها. أكمل نسخة Steady منها بأدنى النسب في WCAG 2.2 وبحجم النص الكبير. اكتب أرقامًا فقط (مثلًا 4.5).

\n","hints":["النص بالحجم العادي له أشدّ متطلّبات المستوى AA؛ أما النص الكبير وحدود عناصر الواجهة فيتشاركان متطلّبًا أقل.","النص الكبير هو 18 pt بوزن عادي أو 14 pt بخط عريض. وبوحدات CSS pixels، فإن 18 pt تساوي 18 × 4/3.","AA: ‏4.5 للنص العادي، و3 للنص الكبير وللرسومات غير النصية. وAAA للنص العادي: 7."],"explanation":"

اسم العادة بحجم 17 px نص عادي، فيحتاج 4.5:1 حتى لو كان بوزن semibold (الخط العريض لا يُعدّ كبيرًا إلا ابتداءً من نحو 18.66 px). العنوان بحجم 34 px نص كبير، فالحد الأدنى 3:1، وإن كنت ستتجاوزه عادةً. إطار خانة الاختيار حدّ مرئي لعنصر تحكم، يغطّيه المعيار SC 1.4.11 Non-text Contrast بنسبة 3:1. والمستوى AAA يرفع النص العادي إلى 7:1. ويبدأ النص الكبير من 24 px بوزن عادي (18 pt × 4/3).

\n","checkLabels":{}},"words":744,"readMinutes":4}