واجهة الطباعة

1) دور الطباعة في المنتج

• تسريع المسح الضوئي وتقليل الحمل المعرفي،
• يشكل تسلسلاً هرميًا ويساعد في التنقل في الدولة،
• زيادة التحويل (CTA، النماذج) وتقليل الأخطاء،
• تجعل الواجهة متاحة ومقاومة للتوطين.

2) البارامترات الأساسية

الدبوس (نص الجسم): 16-18 px على سطح المكتب، 15-16 px على الهاتف المحمول.
ارتفاع الخط: 1. 45–1. 6 للنص، 1. 2–1. 35 للعناوين.
طول الخط (قياس): 45-80 حرفا ؛ في الشريط الجانبي - 36-60.
التتبع: 0-1٪ للنص العادي ؛ للكبسولات - + 2-4٪.
التباين (WCAG) - النص العادي ≥ 4. 5:1، خشن/دهني ≥ 3:1.
التسجيل: تجنب ALL CAPS الدائم ؛ تستخدم للعلامات/الرقائق، والتعويض عن التتبع.

3) التسلسل الهرمي ومقياس الحجم

نوصي بنهج معياري: 8-pt شبكة + مقياس مطبعي.

• العرض: 40/48 (LH 1. 15)
• H1: 32/40 (1. 25)
• H2: 24/32 (1. 25)
• H3: 20/28 (1. 3)
• H4: 18/26 (1. 4)
• الجسم/لتر: 18/28 (1. 55)
• الجسم/م: 16/26 (1. 55)
• الجسم/S: 14/22 (1. 5)
• التسمية التوضيحية: 12/18 (1. 5)
• Mono/UI: 12-14/18-20

• بين المستويات المجاورة - خطوة ملحوظة (12-16٪ على الأقل).
• يتم بناء التسلسل الهرمي من خلال مزيج من الحجم والوزن والقيادة واللون (مع الأخذ في الاعتبار التباين) والمسافات إلى الكتل المجاورة.

4) ارتفاع الغطاء وخط الأساس والبصريات

قم بمحاذاة العناصر مع ارتفاع الغطاء للرؤوس (مناسب مع الأيقونات).
حافظ على خط أساس 4/8 نقطة - حتى الإيقاعات تجعل القراءة أسهل.
المسافات البصرية: العناوين فوق الكتلة أكبر من أسفلها (على سبيل المثال، + 4-8 px أعلاه).

5) الأنماط والخطوط المتغيرة

المجموعة الدنيا: عادي، متوسط، شبه جريء (اختياري جريء).
لا تستخدم فائق الضوء/رقيق في واجهة المستخدم.

• الجسم: 420-470 (أكثر تسطيحًا بصريًا من 400).
• ملصقات واجهة المستخدم: 500-550.
• الرؤوس/CTA: 600-650.
• إذا انخفض الحجم، زاد الوزن (التعويض) قليلاً.
• تعطيل الأربطة الزخرفية بأرقام واجهة المستخدم ؛ يحمل أربطة سيريلية/لاتينية قياسية.

6) الأرقام والجداول والتواريخ

تضمين الأرقام الجدولية للمبالغ والمعاملات وأجهزة التوقيت والتصنيفات.
+/ − العلامات مرئية دائما وبتباين كاف ؛ يسلط الضوء على القيم السلبية ليس فقط في اللون (أيقونة/سهم/جريء).
بالنسبة للقيم النقدية، استخدم مساحة ضيقة كفاصل بت رقيق (أو تنسيق محلي).
في الجداول، محاذاة النقطة العشرية ؛ للأعمدة الأحادية - خط أحادي الخطى.
الرسوم البيانية لتوقيع المحور ≥ 12 px (متنقل) و ≥ 13-14 px (سطح المكتب)، LH 1. 3; الأساطير ≥ 4. 5:1 إلى الخلفية.

7) النماذج والمدخلات والرسائل

ملصقات 12-14 px، LH 1. 3–1. 4، عادي أو متوسط.
لا ينبغي أن يكون العنصر المساعد «الهواء الرمادي» - الهدف هو 3:1 للخلفية، ويمكن تمييزه بصريًا عن النص.
الأخطاء/النجاح/المساعدة في النص 12-14 px ؛ لا تعتمد فقط على اللون (أيقونة/نص).

8) الموضوعات المظلمة/الخفيفة

في موضوع مظلم، تجنب # FFF على # 000: ارفع الخلفية إلى L≈0. 14–0. 18، وخفض النص إلى L≈0. 9 - وهج أقل.
يمكن أن يكون القيادة في الظلام + 0. 05 أعلاه للراحة.
الروابط/اللهجات في الظلام - تقليل التشبع وزيادة الخفة بمقدار 0. 02–0. 04.

9) التوطين وتعدد اللغات

اختر العائلات ذات اللغة السيريلية/اللاتينية/اليونانية الكاملة، وعلامة اللهجة ودعم العملة.
RTL: أيقونات/محاذاة المرآة، ولكن ليس الأرقام واللاتينية ؛ اختبار التحويلات.
التحويلات التلقائية ('الواصلات: تلقائية') لتشمل مناطق المحتوى الطويلة فقط ؛ في أزرار واجهة المستخدم - حظر النقل.
بالنسبة للتركية/الأذربيجانية، تحقق من استمارات «İ/ı».
بالنسبة للجورجية والتايلاندية، ارفع الدبوس الأساسي بمقدار 1 px (ميزات النمط).

10) التوافر (A11y)

تباين النص: انظر الفقرة 2.
أنماط التركيز - مرئية بدون لون: خط الأساس، الحدود، الظل، التعويض.
يتم قياس حجم الخط بشكل منهجي (دعم حجم نص نظام التشغيل).
لا تشفر المعنى فقط من خلال اللون/الوزن - أضف تعليقات توضيحية وأيقونات.

11) تحميل الخط والأداء

الأهداف: التقليل إلى أدنى حد من العوائق، وتوفير معلومات مستغرقة يمكن التنبؤ بها، ونظام مستقر للبيانات المدنية.

المجموعات الفرعية: اللاتينية، السيريلية، الأرقام/الرموز - الملفات الفردية.
التنسيقات: «woff2» (الرئيسي)، «woff» كاحتياطي.
«عرض الخط: مبادلة» (أو «اختياري» للعائلات الثانوية).

html
<link rel="preload" as="font" type="font/woff2" crossorigin href="/fonts/Inter-UI-subset. woff2">

خط متغير بدلاً من 3-4 statics - غالبًا ما يكون أكثر ربحية في الوزن.
الميزانية: ≤ 150-200 كيلوبايت في المجموع للمسار الحرج (بعد gzip/brotli).
تقديم: تجنب الظلال/الأقنعة المتعددة على النص ؛ استخدام تأثيرات النظام باعتدال.

12) رموز الطباعة (نظام التصميم)

type. scale.{role}     # h1, h2, body, caption, mono type. weight.{role}    # regular, medium, semibold type. leading.{role}    # line-height type. tracking.{role}   # letter-spacing type. feature. numeric   # tabular, lining

json
{
"type": {
"family": { "ui": "InterVariable", "mono": "JetBrainsMonoVariable" },
"scale": { "h1": 32, "h2": 24, "h3": 20, "body": 16, "caption": 12 },
"leading": { "h1": 40, "h2": 32, "h3": 28, "body": 26, "caption": 18 },
"weight": { "body": 450, "label": 520, "cta": 620 },
"numeric": { "figures": "tabular", "zeros": "slashed" }
}
}

css
:root {
--font-ui: "InterVariable", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
--font-mono: "JetBrainsMonoVariable", ui-monospace, SFMono-Regular, Menlo, monospace;

--fs-h1: 32px; --lh-h1: 40px; --w-h1: 600;
--fs-h2: 24px; --lh-h2: 32px; --w-h2: 600;
--fs-h3: 20px; --lh-h3: 28px; --w-h3: 550;
--fs-body: 16px; --lh-body: 26px; --w-body: 450;
--fs-caption: 12px; --lh-caption: 18px; --w-caption: 450;

--tracking-caps: 0. 04em;
--tracking-default: 0em;
}
.u-num {
font-variant-numeric: tabular-nums lining-nums slashed-zero;
}

13) التخطيط والإيقاع

وحدة عمودية 8-pt ؛ المسافة بين الفقرات = 1 × خطوة الأساس.
تتماشى المسافة الفاصلة بين المؤشر وخط الأساس للنص.
الأزرار والحقول - المرتفعات هي مضاعفات لخط الشبكة الأساسي (على سبيل المثال، 40/48/56 px).

14) خصوصية iGaming (ورشة عمل)

الاحتمالات/الاحتمالات، التوازنات، المؤقتات - استخدم الأرقام المجدولة، أحادية الخطى في الأعمدة الحرجة.
القادة/التصنيفات: التسوية حسب الفئة، تنسيق العملة الموحد، «↑/↓» الصريح.
الإشعارات الحرجة (18 +، الحدود، المخاطر) - الحد الأدنى AAA في المقابل، لا تستخدم ALL CAPS.
اللافتات الترويجية: أرسل رسالة نصية فقط على الانزلاقات/التراكبات التي يتم التحكم فيها بالتباين.

15) الأنماط المضادة

ضوء/رقيق على دبابيس صغيرة.
نص رمادي على خلفية ملونة دون التحقق من التباين.
سماعتان أو أكثر «للجمال».
خطوط طويلة (أقل من 90 حرفًا) وارتفاع خط كثيف <1. 35.
أرقام العرض النسبية في الجداول/مبالغ» القفز «.
ادفع عمليات النقل في الأزرار/الملصقات.

16) مراجعة القائمة المرجعية

سهولة القراءة

• ملابس 16-18 بكسل ؛ LH ≥ 1. 45.
• طول الخيط 45-80 حرفًا.

التسلسل الهرمي

• الجدول بالزيادات ≥ 12٪ ؛ تتفق مع الشبكة.

الأرقام/الجداول

• جدول الأصوات للمبالغ/المعاملات ؛ المحاذاة العشرية.

توافر

• تحقق التباين بين WCAG ؛ أنماط التركيز مرئية بدون لون.

الأداء

• Subset/woff2 ؛ 'عرض الخط: مبادلة' ؛ ≤ الميزانية 200 كيلوبايت.

التوطين

• الدعم السيريلي/اللاتيني/RTL ؛ فحص الواصلة/التشكيل.

17) A/B والمقاييس

الاختبار: الجسم ± 1 px pin، رأس الملعب، وزن CTA، قيادة.
القياس: وقت القراءة، عمق التمرير، CTR CTA، أخطاء النموذج، CLS (استقرار النص).

موجز موجز

الطباعة هي الهيكل العظمي للواجهة. ضع مقياسًا يمكن التنبؤ به، وحافظ على التباين والإيقاع، واستخدم خطوطًا متغيرة وأرقامًا مجدولة، وتحسين التحميل. ثم سيتم قراءة واجهة المستخدم بسرعة، والعمل بثبات وتوسيع نطاق الموضوعات واللغات.