لغة واجهة واحدة

1) ما هي لغة واجهة واحدة ولماذا هي مطلوبة

لغة الواجهة الموحدة (NEI) هي نظام مشترك للمفاهيم والقواعد المرئية والتفاعلات التي يشاركها المصممون والمهندسون والمحللون ومؤلفو المحتوى.

• الاتساق - نفس المكونات والمصطلحات عبر المنتجات والفرق.
• السرعة: بنى سريعة، عدد أقل من الثقوب، صعود أسرع.
• الجودة: أنماط UX المتسقة، التوافر «افتراضيًا».
• قابلية التوسع: التطور الآمن دون الانقسام إلى «حديقة حيوان مستخدم».

2) طبقات لغة واحدة

1. الرموز (اللون، الطباعة، الأبعاد، الظلال، المسافات، نصف القطر، الرسوم المتحركة).
2. المكونات (الأزرار، حقول الإدخال، الجداول، الرسوم البيانية، الوسائط، الخبز المحمص، علامات التبويب).
3. الأنماط (النماذج، التحقق، المعالجات خطوة بخطوة، القوائم/الجداول، الإخطارات).
4. المحتوى (الكتابة الدقيقة، المصطلحات، رسائل الخطأ).
5. الأيقونات والرسوم التوضيحية (الأسرة والأسلوب والأبعاد والخطوط).
6. التوافر i18n/RTL (قواعد A11y، قابلية الترجمة، المواقع).
7. العمليات (نسخ، أدلة، استعراضات، بطانات، معارض وأمثلة).

3) رموز التصميم (أساس التعبير)

الرموز هي قيم يتم إعادة استخدامها في جميع المنتجات.

3. 1 هيكل رمزي (مثال)

json
{
"color": {
"bg": { "base": "#FFFFFF", "subtle": "#F7F8FA" },
"fg": { "primary": "#11131A", "muted": "#656D76" },
"accent": { "primary": "#2F6BFF", "warning": "#FF9F1A", "critical": "#E53935", "success": "#2EAE60" }
},
"space": { "xs": 4, "sm": 8, "md": 12, "lg": 16, "xl": 24, "2xl": 32 },
"radius": { "sm": 8, "md": 12, "lg": 16, "pill": 1000 },
"shadow": { "sm": "0 1px 2px rgba(0,0,0,.08)", "md": "0 4px 12px rgba(0,0,0,.10)" },
"font": { "family": "Inter, system-ui", "size": { "sm": 12, "md": 14, "lg": 16, "xl": 20 } },
"motion": { "duration": { "fast": 120, "base": 200, "slow": 320 }, "curve": { "inout": "ease-in-out" } }
}

3. 2 تسمية الرموز

من عام إلى خاص: "اللون. اللهجة. الابتدائي "، не" الأزرق الأساسي ".
دون أن تكون مرتبطًا بعلامة تجارية في التسمية (العلامة التجارية هي موضوع وليس اسمًا رمزيًا).
التدرجات: 'fg. صامت '،' fg. '،' fg. معكوس '. لا تشفر السطوع في الاسم («blue500») بدون نظام.

3. 3 رموز سمة

ضوء، مظلم، متناقض: قيم التغيير، وليس الأسماء.
الموضوعات - طبقة التجاوز، واجهة المستخدم تظل ثابتة.

4) المكونات: العقد، الدول، التوافر

Component = Visual + Behavior + Props Contract + A11y.

4. 1 زر عقد مثال

ts type ButtonProps = {
kind: "primary"      "secondary"      "tertiary"      "danger";
size: "sm"      "md"      "lg";
icon?: "plus"      "download"      "trash";
disabled?: boolean;
loading?: boolean;
ariaLabel?: string;
onClick?: (e: MouseEvent) => void;
};

الدول: 'الافتراضي/التحويم/النشط/التركيز/المعوق/التحميل'.
التوافر: حلقة التركيز، أحجام الأهداف ≥ 40-48 px، «aria-pressed» للتبديل.

4. 2 ضمانات العنصر

أبعاد مستقرة (ارتفاع الخط، الحشو).
إمكانية الوصول خارج الصندوق (الأدوار/الأغنية، لوحة المفاتيح، التباين).
الثوابت: خطأ داخل الحقل دائمًا في الأسفل ومع «وصف أغنية».

5) أنماط UX (منطق قابل للتكرار)

النماذج: الملصق الأيسر/العلوي، العنصر المساعد ≠ الملصق، جنبًا إلى جنب + الأخطاء الموجزة، أقنعة الإدخال والمطالبات.
الوسائط: CTA رئيسي واحد، «Esc» يغلق، مصيدة التركيز، عائد التركيز.
الجداول/القوائم: الفرز، الرأس اللزج، التثبيت، التصدير.
المرشحات: وضع زر صريح، إعادة ضبط، التجهيزات المسبقة المحفوظة.
الإخطارات: نخب ≤ 3-5 ثانية، توقف عند التركيز، «الدور =» الحالة/التنبيه «».
لوحات القيادة: أفضل الرؤى → السياق → الرسومات → CTA.

6) المصطلحات الشائعة والكتابة الدقيقة

6. 1 مسرد

احتفظ بمسرد واحد لشروط العمل و UX. كل مقالة واجهة تشير إليها.
للمزدوجات - اختر كلمة واحدة («محفظة» مقابل «توازن»)، الثانية - كمرادف في البحث.

6. 2 قواعد النص

باختصار وبشأن القضية ؛ تجنب المصطلحات.
الأخطاء - شرح ما يجب فعله: «حدد التاريخ في تنسيق YYYY-MM-DD».
العناوين هي الأسماء ؛ الأزرار - الأفعال («حفظ»، «إلغاء»).
الوحدات المتسقة: التاريخ/الوقت في التوقيت العالمي المنسق أو الموقع، العملات ذات الرمز (اليورو، الدولار الأمريكي).

7) الأيقونات والرسوم التوضيحية

الأسرة متساوية الشكل: زاوية واحدة، سمك الخط، الشبكة 24 × 24.
الحالات والدلالات: اللون - الثانوي ؛ الشكل/الأيقونة + النص - الأساسي.
القياس: لا «تطفو» الرسوم التوضيحية بكثافة مختلفة (1 ×/2 ×/3 ×).

8) التوافر (A11y) والتوطين (i18n/RTL)

تخضع المكونات لـ WCAG AA: التباين، التنقل في لوحة المفاتيح، التركيز، «يفضل الحركة المخفضة».
سلاسل مترجمة - في الموارد وليس في الكود. العناصر الزائدة وشكل الرقم/التاريخ قابلة للتحويل محليًا.
RTL: تعكس الأيقونات، ترتيب علامة التبويب الصحيح، منطق DnD من لوحة المفاتيح.

9) الأرقام والتواريخ والعملات والأشكال

التواريخ/الوقت: ISO-8601، نقطة زمنية حقيقية - التوقيت العالمي المنسق ؛ المستخدم - الموقع.
العملة: وحدات ثانوية/سلاسل عشرية ؛ يحدد دائما رمزا (على سبيل المثال، "€12. 34» أو «12. 34 يورو" - حسب الموقع).
الفائدة: '12. 3٪ 'والنقاط' + 1. 2 pp 'تمييز واضح.
التقريب: إلى أرقام كبيرة ؛ «k/m» لأعداد كبيرة.

10) الحوكمة: الأدوار والقطع الأثرية والقنوات

مجلس لغة التصميم (DLC): مالك الرمز/المكونات، مطالبات RFC.

• مركز المحتوى (Figma/Code) + كتالوج مباشر مع أمثلة.
• الوثائق: الأدلة والأنماط A11y ودليل المحتوى.
• Changelog مع التواريخ والمستويات (مضاف/مغير/محذوف/محذوف/ثابت).
• القنوات: حوض التصميم الأسبوعي، قناة Slack، عروض التنفيذ.

11) التحديث والتطور

SemVer لحزمة المكونات: 'MAJOR. قاصر. PATCH '.
الصغرى - مضافة: رموز جديدة، دعائم ذات افتراضات، مكونات جديدة.
MAJOR - كسر: إزالة الدعائم، وتغيير الدلالات → أدلة الهجرة.
التخفيضات: تحذيرات، نافذة ≥ 90 يومًا، أعلام التوافق.

12) البطانات والفحوصات التلقائية

UI-linter: ألوان محظورة خارج الرموز، وأنماط مضادة (مغنية الأزرار، مخطط معطل).
A11y-checks: التباين، الأدوار/الأغنية، التركيز، لوحة المفاتيح.
i18n-linter: خطوط «صلبة» في الكود، عناصر غير صحيحة.
اختبارات لقطة الشاشة: التراجع البصري للمكونات.
عقود واجهة برمجة التطبيقات التصويرية (إن وجدت): أنواع البيانات ونطاقاتها وتوقيعاتها.

13) عرض المكونات (كتاب قصص/صندوق رملي)

أمثلة حية مع عناصر تحكم في الدعائم، رمز، ولايات، A11y-checker.
«وصفات»: نموذج التسجيل، الخطوة 3 ساحر، جدول + مرشحات، مودالكا + توست.
«Sandbox of locales»: switching language/formats/RTL.

14) أنماط التسمية والبنية

14. 1 مكونات (BEM/semantics، CSS مثال)

.btn/basic/
.btn--primary/view/
.btn--danger
.btn--lg/size/
.btn __ icon/part/

في الكود - الأسماء الرتيبة للدعائم: «الحجم»، «النوع»، «المعاق»، «النقر».

14. 2 هيكل ملفات المكتبة

/tokens
/components
/button
/input
/modal
/patterns
/docs
/changelog

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

ألوان/فواصل «مجانية» خارج الرموز المميزة.
المكونات المكررة: «ButtonV2,» «PrimaryButtonNew».
العنصر المساعد هو الملصق الميداني الوحيد.
تعطيل الخطوط العريضة والأزرار.
تحوم/نشط/معطل لا يمكن التنبؤ به.
مصطلحات مترجمة بدلاً من الترجمة العادية.
نقص أدلة الهجرة أثناء التحديثات.

16) مقاييس جودة اللغة الواحدة

التغطية - نسبة الشاشات التي تستخدم مكتبة المحتوى.
مؤشر الاتساق: إعادة استخدام الرموز مقابل الأنماط «اليدوية».
معدل النجاح A11y - النسبة المئوية للمكونات التي تمر عبر WCAG AA.
عيب الهروب: عيوب واجهة المستخدم/المحتوى في مبيعات التزام 1k.
وقت الشحن - حان الوقت لتنفيذ شاشة نموذجية قبل/بعد DLS.
الاعتماد: معارض DAU، رقم العلاقات العامة مع المكونات/الأنماط.

17) قائمة مراجعة الشاشة

• الرموز المستخدمة (اللون/المسافات الفاصلة/نصف القطر)، وليس القيم الصلبة.
• مكونات من المكتبة ؛ عادة - RFC فقط.
• إمكانية الوصول: لوحة المفاتيح/التركيز/التباين/الأدوار/الأغنية.
• الوحدات: التواريخ/العملات/النسب المئوية - حسب دليل الشكل.
• Microcopies: أزرار = أفعال، أخطاء = تصحيح.
• Locales/RTL لا تكسر التصميم.
• الدول: يتم توفير التحميل/الفراغ/الخطأ.
• تحديث اختبارات الانحدار البصري.

18) خطة التنفيذ (3 تكرارات)

التكرار 1 - المؤسسة (2-3 أسابيع)

الرموز (اللون/الطباعة/التباعد/الحركة)، المكونات الأساسية (الزر، الإدخال، التحديد، الأدوات، المودال)، دليل المحتوى (النغمة، الملصقات، الأخطاء).
Showcase (storybook) and A11y-checker, token linter.

التكرار 2 - الأنماط والتوطين (3-4 أسابيع)

أنماط النماذج/الجداول/المرشحات، حزمة الأيقونات 24 × 24، صندوق الرمل RTL/i18n، قواعد الأرقام/التواريخ/العملات.
SemVer, changelog, RFC/migration process, autotests (visual + A11y).

التكرار 3 - المقياس والتطور (مستمر)

المكونات التركيبية (الساحر، DataGrid، Chart Primitives)، الهيكل (الضوء/الظلام/التباين)، تقارير مقاييس الجودة، عمليات تدقيق UX العادية.

19) الأسئلة الشائعة الصغيرة

هل من الضروري «دفعة واحدة» ؟

لا ، ليس كذلك ابدأ بالرموز والمكونات الأساسية، ثم أضف الأنماط والعمليات.

كيف تقنع الفرق باستخدام YEI ؟

أظهر المكاسب: السرعة، وعدد أقل من العيوب، ووصفات الشاشة الجاهزة، A11y خارج الصندوق.

ماذا تفعل بالشاشات القديمة ؟

خطة الهجرة، أنماط الجسر من خلال الرموز، الشاشات ذات الأولوية - أولاً.

المجموع

لغة الواجهة الواحدة ليست مجرد مكتبة مكونة. هذا هو نظام القواعد والعمليات، حيث تحدد الرموز التعبيرية والمكونات - السلوك والتوافر، والأنماط - تكرار القرارات، والحوكمة والمقاييس - التطور المستدام. اجعل لغتك واضحة وقابلة للتحقق منها وقابلة للتوسيع - وستبدو منتجاتك وتعمل بشكل موحد وسريع وموثوق.