نظم التصميم ووثائقها

1) ما هو نظام التصميم ولماذا هو مطلوب

يعد نظام التصميم مصدرًا واحدًا للحقيقة للواجهة: مجموعة من الرموز والمكونات والممارسات والتوثيق التي توفر إمكانية التنبؤ بأجهزة UX وسرعة التطوير وقابلية التوسع.

• اتساق الطبقة المرئية والسلوكية عبر جميع المنتجات.
• السرعة: إعادة استخدام المكونات، مخصوما منها تكاليف المراجعة.
• الجودة: أنماط A11y العامة، التوطين، الاختبارات، معايير المحتوى.
• قابلية الإدارة: مسؤولية واضحة، إصدارات، خارطة طريق.

2) بنية نظام التصميم (طبقات)

1. رموز التصميم (الأساس): الألوان، الطباعة، الأبعاد، نصف القطر، الظلال، المسافات، الحالات، بالإضافة إلى الرموز الدلالية («اللون». السطح. تحذير «،» الفضاء. xs ').
2. مكونات واجهة المستخدم: الأزرار، حقول الإدخال، نوافذ الوسائط، الهبوط، الطاولات، الخبز المحمص، اللافتات، التنبيهات، الحالات الفارغة، الهياكل العظمية.
3. الأنماط والتركيبات: نماذج KYC، تدفق الدفع، عدم وجود نتائج، أساتذة الدرجات، بطاقات المحتوى.
4. دليل المحتوى (microcopy): النغمة، قاموس المصطلحات، أنماط الخطأ/النجاح، الدفع/اللافتات.
5. البنية التحتية: دليل A11y والاختبار والتوطين والنسخ والمساهمين (المساهمة).

3) رموز التصميم: المبادئ

الدلالات> أسلوب «الخام». استخدم اللون. النص. صامت "بدلاً من" # 6B7280 ".
تحديد المواضيع والمنصات. رموز المصدر → خرائط النظام الأساسي (الويب، iOS، Android، البريد الإلكتروني).
السمة الفاتحة/المظلمة وتباين WCAG على المستوى الرمزي.
المقاييس العالمية والسياقية: "الفضاء. 2 '،' نصف القطر. md'، 'الارتفاع. 1 '،' التعتيم. المعوقين ".
إصدار الرمز: التغييرات - من خلال سياسة الاستنكار وملاحظات الهجرة.

4) المكونات: متطلبات وتكوين الصفحة في الوثائق

• الوصف والغرض. متى تستخدم/لا تستخدم.
• البدائل/الدول. الأبعاد، الأنواع (الابتدائي/الثانوي/الشبح)، المعاق، التحميل، المدمر.
• إمكانية الوصول. الدور، التنقل في لوحة المفاتيح، «aria»، التباين، حلقات التركيز.
• النص المجهري والأمثلة. ملصقات/عناصر عضوية صالحة، أخطاء، مساعدة.
• أمثلة الشفرة. الحد الأدنى من واجهات برمجة التطبيقات، الخاضعة للرقابة/غير الخاضعة للرقابة.
• التكامل مع النماذج و i18n. الحالات الطويلة والأرقام/العملات/التواريخ.
• أمثلة مضادة. أنماط الاستخدام الخاطئة.
• مصفوفة الاختبار. لقطات مرئية، وحدة/تفاعل، قارئات شاشة.

5) أنماط التكوين (وصفات)

استمارات التسجيل/CUS: الساحر خطوة بخطوة، التقدم، التحقق من السطر الداخلي + الملخص، أنماط الخطأ.
تدفق الدفع: اختيار الطريقة، والرسوم، والتواريخ، وقاعدة الطريقة نفسها، والتأكيد، والحالة.
الحالات الفارغة: السياق + القيمة + CTA، صفر نتائج البحث.
رسائل النجاح/الخطأ: التسلسل الهرمي للحالة، الرموز المرئية، الخبز المحمص/اللافتات/الوسائط.
الملاحة والفلاتر: بحث عالمي، تجهيزات مسبقة سريعة، علامات.
يجب أن تظهر صفحات النمط تكوينًا من المكونات الجاهزة للنسخ، مع ميكروكوب وملاحظات A11y.

6) دليل المحتوى (صوت ونبرة، ميكروكوب)

الصوت: محترف، واضح ؛ النغمة تعتمد على السياق (الصعود، الدفع، الضمان).
قاموس موحد للمصطلحات: المدفوعات، المكافآت، الحدود، KYC - قيمة واحدة لكل منتج.
القوالب: CTA، الأخطاء، التحذيرات، النجاحات، الدول الفارغة، الإشعارات.
التوطين - أولا: المخزون لطول الخطوط والأرقام/العملات/التواريخ حسب المنطقة.
A11y-vocabulary: ملصقات واضحة، أوصاف أغنية، بدون غموض.

7) إمكانية الوصول (A11y) كمعيار للنظام

المعايير الأساسية: WCAG 2. 1 AA للتباين، التركيز مرئي دائمًا، التنقل في لوحة المفاتيح.
الأدوار والسمات: تصف المكونات "الدور" و "aria-label' و" aria-despby "والمناطق الحية للنخب/التنبيهات.
القراء على الشاشة: أمثلة على العبارات، ترتيب القراءة، الحالات الصحيحة («حازم/مهذب»).
إجراءات الاختبار: الفحوصات التلقائية + النصوص اليدوية.

8) التوطين والتدويل

i18n مفاتيح بجانب كود المكون + وصف السياق.
الأرقام/العملات/التواريخ من خلال صيغة المرافق ؛ لا ترمز إلى نص في قوالب.
اختبارات الطول: «الألمانية الطويلة»، «المحمول الضيق»، متغيرات RTL.
النغمة باللغات: خريطة لهجة الخطوات الحاسمة (المدفوعات/الأمن).

9) التوثيق: الهيكل والملاحة

1. مقدمة: المهمة والمبادئ ومجالات المسؤولية.

2. الرموز: الألوان، الطباعة، الشبكة، الأبعاد، الظلال، الدول، الموضوعات.

3. المكونات: كتالوج مع مرشحات (حسب الدور، حسب المنصة، بواسطة A11y).

4. الأنماط: السيناريوهات (النماذج، المدفوعات، الحالات الفارغة، النجاح/الأخطاء).

5. دليل المحتوى: الصوت والنبرة، القاموس، قوالب المجهرية.

6. إمكانية الوصول: المعايير والقوائم المرجعية وحالات الاختبار.

7. التوطين: مبادئ، أمثلة، مسارد حسب السوق.

8. التكامل والشفرة: التركيب، الإصدارات، الأمثلة، كيفية الهجرة.

9. المساهمة: عمليات المساهمة، واستعراض التصميم، واستعراض الرموز، وتعريف ما تم إنجازه.

10. Changelog و Roadmap: الإصدارات، الاستنكافات، خطة التنمية، القضايا المعروفة.

10) الحوكمة والعمليات

الأدوار: مالك النظام (DesignOps/UX Platform)، والصيانة (التصميم/الترفيه)، والاستشاريون (BE، A11y، التوطين).
لجنة التغيير: تقييم الطلب، تحديد الأولويات، واجهة برمجة التطبيقات/المصالحة الرمزية.
العمليات: RFC للمكونات الجديدة، استمارات القضايا الداخلية، SLA للأخطاء.
تعريف Done: design (Figma) ↔ code (UI package) ↔ dock (example + guide) ↔ tests.

11) المساهمة: كيفية إضافة/تغيير

نموذج RFC: مشكلة الخيارات القرار المختار i18n الهجرة والمخاطر.
Flow PR: مراجعة التصميم مراجعة الرمز مؤلف الإعلانات UX التحقق ملاحظات الإصدار.
قواعد التوافق الخلفية: طفيفة/تصحيح غير مدمرة، رئيسية - مع الاستنكار والهجرة التلقائية، حيثما أمكن ذلك.

12) الإصدار والإطلاقات والهجرات

SemVer للحزم («@ company/ds-core»، «@ company/ds-forms'،» @ company/ds-charts').
ملاحظات الإصدار: تغييرات رمزية، واجهات برمجة التطبيقات المكونة، والسلوك الافتراضي، وكسر التغييرات، وأدلة الهجرة.
Deprections: dock markups, linter rules, code mods for mass resulation.
خط أنابيب التصميم والرموز: مصدر واحد (JSON/YAML) → يبني النظام الأساسي (CSS vars و iOS و Android).

13) اختبار الجودة

اختبارات الوحدة للسلوك والظروف.
لقطات مرئية (سمة/انحدار الحالة).
الاختبارات A11y: النصوص التلقائية + اليدوية لقارئ الشاشة.
E2E حالات التدفق الحرج (التسجيل، والمدفوعات، وشركة KYC).
ميزانيات Perf: حدود الحزمة/العرض وحظر الإدمان الشديد.

14) مقاييس نضج نظام التصميم

الاعتماد:% شاشات/مستودعات باستخدام DS.
السرعة: الوقت من التخطيط إلى التسليم.
الجودة: عيوب UI/A11y إلى 1 إطلاق.
الاتساق: عدد المكونات/الأنماط «التي يمكن التخلص منها» خارج نظام التشغيل.
المستندات: تغطية مكونات الرصيف، الجمهور الداخلي NPS (المصممون/المطورون/المحللون).

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

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

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

• الأسماء الدلالية والغرض.
• تباين AA في كلا الموضوعين.
• تم توثيق الزلاجات والاستخدام.

• الخيارات/الدول مشمولة.
• A11y-description، «aria -»، التركيز.
• أمثلة التنظير المجهري (الملصقات والأخطاء والتلميحات).
• عينات الكود وحالات الحافة (خطوط طويلة، حمولة، فارغة).
• Unit/visual/A11y الاختبارات خضراء.

• ملاحظات الإصدار مع أمثلة قبل/بعد.
• دليل الهجرة и الاستنكاف.
• قصص/عروض توضيحية محدثة، روابط في قفص الاتهام.

17) قبل/بعد الأمثلة

• الأزرار الأساسية المختلفة: الألوان/نصف القطر/المسافات الفاصلة لا تتطابق ؛ نصوص مختلفة لـ CTA.

• Single 'Button with tomens:' size = md ',' variant = primary ',' radium = lg ',' spacing = md ', text in the style "action + object'.

• رسائل فنية، لا مطالبات.

• المكون '<شدة FieldError = «خطأ»> تنسيق التاريخ غير صالح. استخدم DD. MM. YYYY. + التركيز التلقائي.

18) نموذج صفحة المكون (هيكل عظمي)

الاسم: زر

الوصف: بدء إجراء ؛ 1 رئيسية لكل شاشة.
الخيارات: أولية، ثانوية، شبح، مدمرة ؛ أبعاد sm/md/lg.
الدول: تحوم، تركيز، نشط، تحميل، معطل.
A11y: متاح من لوحة المفاتيح ؛ «مضغوط» من أجل التبديل.

Microcopy: "حفظ التغييرات"، "تابع التحقق. "تجنب "حسنًا"

Code (example API): «Button {variant, size, icon, loaging}».
الأمثلة المضادة: المرحلة الابتدائية المزدوجة على نفس مستوى التسلسل الهرمي.
الاختبارات: لقطات بصرية، تباين، حلقة تركيز.

19) دليل تنفيذ نظام التصميم (نشر)

1. المراجعة البينية: حصر الألوان/الطباعة/المكونات/الأنماط.
2. رموز MVP والمكونات الرئيسية: Button، Input، Select، Modal، Alert، EmptyState، Toast.
3. التوثيق وكتاب القصة: أمثلة حية، مقتطفات من الرموز، أدلة.
4. المنتج التجريبي: استبدال الأدوات وجمع التعليقات.
5. دليل الهجرة: التعديلات الرمزية، قواعد الاستنكار.
6. تمديد المجموعة: الجداول، الترويج، منتديات الشكل، خطوات الساحر.
7. التحجيم: أنماط المنتجات (المدفوعات، وشركة KYC)، والتكامل مع التحليلات و A/B.
8. الدعم: قناة أسئلة، جيش تحرير السودان، حلقات عمل داخلية.

20) نماذج الوثائق السريعة

• الاسم: "اللون. الحدود. تحذير '
• الغرض: إطارات التحذير واللافتات إشعار/تحذير
• التناقض: AA ضد اللون. السطح. التخلف عن السداد "
• لا: استخدم لنص صغير الحجم
• ذات صلة: "اللون. السطح. تحذير، أيقونة. تحذير '

نمط النمط: حالة فارغة (لا نتائج)

الغرض: تصحيح استفسار دون الشعور «بالخطأ»

التكوين: العنوان (بالجملة)، النص (1-2 جملة)، CTA، CTA الثانوية، أيقونة/رسم توضيحي

Microcopy: "لم يتم العثور على شيء بواسطة "{استعلام}" أعد تعيين المرشحات أو صقل الاستعلام"

A11y: «الدور =» الوضع «،» الأريا - لايف «=» مهذب «»

ورقة الغش النهائية

الرموز الدلالية + الانضباط A11y = القاعدة.
صفحات المكونات الكاملة: الغرض، المتغيرات، A11y، الميكروكوب، الكود، الاختبارات.
الأنماط = تركيبات المكونات مع النصوص والقواعد الجاهزة.
Docs - product: version, releases, migrations, contribution process.
قياس النضج: الاعتماد، السرعة، العيوب، الاتساق، NPS للأوامر الداخلية.