معايير مبادئ UX التوجيهية والوصلة البينية

1) المبادئ

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

2) الشبكة والفواصل والإيقاع

الشبكة: 4/8-pt الملعب ؛ الأعمدة: 12 (سطح المكتب)، 6 (جهاز لوحي)، 4 (متنقل).
المسافات الداخلية: مضاعفات 4 ؛ الخارجية - 8/ 12/16/24.
الإيقاع الرأسي: العنوان → العنوان الفرعي → محتوى الحركة → (CTA).
الحدود والفواصل: اقتصادية ؛ يفضل «الهواء» والتسلسل الهرمي للطباعة.

3) الطباعة

مقياس الدبوس: 12/14/ 16/20/24/32/40 (الجسم 16).
ارتفاع الصف: 1. 4–1. 6 للنص، 1. 2–1. 3 للعناوين.
طول الخط: 45-75 حرفًا (سطح المكتب)، 35-55 (الهاتف المحمول).
تسليط الضوء: جريء للهجات الدلالية ؛ القبعات - فقط في الملصقات.
إمكانية القراءة بصوت عالٍ: يجب أن تبدو النصوص طبيعية.

4) اللون والتباين

الدلالات: «النجاح/المعلومات/التحذير/الخطأ/المحايد».
التناقض: WCAG الحد الأدنى 2. 1 ألف ألف (النص/الخلفية ≥ 4. 5:1; كبير ≥ 3:1).
اللون ≠ الإشارة الوحيدة أضف أيقونة/نص/نموذج.
حلقة التركيز: مرئية دائمًا (لا تعطل في CSS).

5) بنية الملاحة والمعلومات

مسار المستخدم: "أين أنا ؟ ماذا يوجد هنا ؟ ما التالي؟ - من الواضح.
التسلسل الهرمي للقائمة: ≤ مستويات 2 في الملاحة الرئيسية.
فتات الخبز: للأقسام العميقة.
البحث: متاح عالميا على أدلة معقدة ؛ hotkey '/'.
ينص التنقل على ما يلي: يتم تمييز علامة التبويب/الصفحة النشطة بالرموز.

6) المكونات والأنماط

نستخدم مكونات نظام التصميم (بدون «محلي الصنع»).
1-CTA لكل شاشة ؛ أما البقية فهي ثانوية/ثالثية.
الدول: الافتراضي/التحويم/التركيز/النشط/المعوق/التحميل - إلزامي لكل تفاعلي.
الحالات الفارغة: السياق + القيمة + CTA (+ الرابط الثانوي).
التنبيهات الشائعة: تنبيه صفحة واحدة لكل شاشة + مطالبات محلية.

7) النماذج والتحقق والأخطاء

التسمية إلزامية. العنصر المساعد هو مثال على التنسيق وليس البديل.
التحقق الداخلي من عدم الوضوح، موجز الأخطاء لتقديم.
رسالة خطأ: ما الخطأ + كيفية إصلاح + قيد/تنسيق.
التمرير التلقائي والتركيز على الخطأ الأول ؛ "aria-invalid'،" aria-descripby ".
الأقنعة والتنسيقات: سريع، ولكن لا تكسر المدخلات (بايست ممكن).
سلامة البيانات: لا تفقد أي شيء أثناء إعادة التشغيل/الخطأ.

8) الشروط والتعليقات

النجاح: نخب 2-4 ثانية، نغمة محايدة إيجابية، CTA «ما التالي».
معلومات/إشعار: لافتة ناعمة/نوع، لا تمنع التيار.
التحذير/الخطأ/النقدي: التسلسل الهرمي بصريا/دلاليا ؛ حاسمة - أسلوب/لافتة مع عمل صريح.
التحميل: هيكل عظمي> spinner ؛ تقييم وقت الانتظار> 3 s.

9) المحتوى والمنظار الدقيق

قاعدة الإجابات الثلاثة: ما يحدث → لماذا → ماذا تفعل بعد ذلك.
CTA: فعل الفعل + كائن («حفظ التغييرات»، «التحقق من المرور»).
الأرقام/التواريخ/العملات: الأشكال المحلية.
النغمة: ودية ؛ في خطوات مرهقة (الدفع/الضمان) - محايدة.

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

ملاحة لوحة مفاتيح كاملة ؛ ترتيب التبويب المنطقي.
الأدوار و «aria» للمناطق التفاعلية الحية للنخب/الحالات.
تناقضات، حلقات تركيز، أحجام تفاعلية ≥ 44 × 44 px.
البدائل النصية للرموز/الصور ؛ الجداول مع 'ث '/' نطاق'.
الشيكات: تلقائي (بطانة/ماسح ضوئي) + نصوص يدوية لقارئ الشاشة.

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

جميع الأوتار في السياق i18n مفاتيح.
اختبار «اللغات الطويلة» (DE/TR)، أوضاع RTL.
الأرقام/العملات/الأوقات - تنسيق المرافق.
خريطة النغمة: درجة الشكلية/العاطفة حسب السيناريو (التشغيل/المدفوعات/الأمن).

12) الاستجابة †

نقاط التوقف: 360/768/1024/1280 +.
الهاتف المحمول أولاً: المسار الحرج متاح بيد واحدة، CTA في منطقة الإبهام.
الإيماءات ولوحة المفاتيح: تتكرر الإيماءات بالأزرار ؛ على سطح المكتب - المفاتيح الساخنة.
الكثافة: على سطح المكتب - «الهواء» على الهاتف المحمول - توفير عمودي دون المساس بإمكانية النقر.

13) موضوع مظلم

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

14) الرسوم المتحركة والحركة

المدة: 120-200 مللي ثانية (صغيرة)، 200-300 مللي ثانية (تحولات).
وظائف التسارع طبيعية (مكعب بيزير مع تباطؤ طفيف).
يجب ألا تمنع الرسوم المتحركة التدفق وتضعف إمكانية القراءة.
الاحترام «يفضل الحركة المخفضة».

15) الأداء

LCP ≤ 2. 5s، TTI/TBT باللون الأخضر ؛ وربط الرموز ؛ تحميل وسائط كسول.
افتراضية القوائم الطويلة ؛ تخزين البيانات.
الهيكل العظمي لإدراك السرعة ؛ تقليل تخطيط «غير المرغوب فيه».

16) الأمن والخصوصية في واجهة المستخدم

تفسيرات واضحة لأسباب الطلبات (آلة تصوير، KYC، geo).
المواعيد النهائية/اللجان/الحدود الشفافة ؛ بدون «فوري» إذا كان من الممكن حدوث تأخير.
بيانات سرية - إخفاء، «عرض/إخفاء» صريح.
تأكيدات لاتخاذ إجراءات لا رجعة فيها ؛ سجل النشاط/إشعارات الدخول.

17) مقاييس جودة UX

تحويل الخطوة والوقت حتى الانتهاء.
معدل الخطأ حسب الحقول/الخطوات ووقت الإصلاح.
CTR بواسطة CTA وقابلية تكرار السيناريو.
إسقاط بعد خطأ/بعد التحميل> N ثانية.
مكالمات الدعم حسب الموضوع (قبل/بعد التغييرات).
A11y-defects للإفراج (الهدف - 0 حاسم).

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

شاشة ما قبل الإصدار

• هدف أساسي واحد و CTA أولي واحد.
• الملاحة وحالة I-am واضحة.
• المحتوى القصير: 1-2 جملة لكل كتلة.
• الدول: يتم تغطية التحميل/الفراغ/الخطأ/النجاح.
• A11y: تباين AA، التركيز مرئي، «aria -» على التفاعلي.
• التوطين: فحص أطوال السلسلة/الأشكال/RTL.
• الأداء: لا توجد كتل «ثقيلة» بلا داع.

نموذج ما قبل الإصدار

• توجد الملصقات وأشكال العينات.
• المصادقة الداخلية + ملخص لتقديمه.
• قم بالتمرير إلى الخطأ الأول، وركز في الصندوق.
• الرسائل: ماذا/كيف/لماذا ؛ بدون 500/400 رمز للمستخدم.
• لا تضيع البيانات بشأن الأخطاء/إعادة التشغيل.

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

«حسنًا» مثل CTA على خطوات دلالية.
العنصر المساعد بدلاً من التسمية.

اللون كإشارة الحالة الوحيدة

المغازل بدون تقدير للوقت ولا بديل.
نوافذ الوسائط بدون مصيدة التركيز وإغلاق ESC.
مزج أنماط/أيقونات، تكرار المكونات خارج نظام التصميم.
الفكاهة/الرموز التعبيرية في السيناريوهات الحرجة (الدفع/الأمان).

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

خطأ النموذج

قبل: «خطأ 400»

بعد: "تنسيق التاريخ غير صالح. استخدم DD. م

حالة فارغة

قبل: «إنه فارغ هنا»

بعد: "سيظهر هنا تاريخ العمليات بعد التجديد الأول للموارد. [تعبئة]"

رسالة نجاح

إلى: «تم»

بعد: "الدفع مقبول. تحديث الرصيد. [عرض التاريخ]"

الملاحة

من قبل: ليس من الواضح مكان المستخدم

بعد: علامة تبويب نشطة + فتات خبز + عنوان صفحة صريح

21) نماذج لمراجعة التصميم

إطار الشاشة

العنوان → وصف موجز → المحتوى/القائمة → التعليقات/الحالات → الإجراءات.

إطار العفن

الرأس → الحقل → السريع (التسمية + المساعدة + الخطأ) → CTA → الإجراءات الثانوية → الملاحظات.

قالب ميكروكوبي

العنوان (سابق)

جمل 1-2: السياق + الخطوة التالية

CTA: إجراء + كائن

الرابط الثانوي: المساعدة/القواعد

22) العمليات والحفاظ على المعايير

تعريف Done (UX): تخطيط + نصوص + حالات + A11y + i18n + مقاييس.
مراجعة UX في العلاقات العامة: قائمة مرجعية من الأقسام 18-21.
الوثائق: كل ميزة تضيف/تحديث دليل إلى ويكي/Storybook.
التدقيق مرة كل ربع سنة: المحتوى، A11y، الأداء، الاتساق.

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

هدف واحد، واحد رئيسي CTA.
تم تصميم الدول والتعليقات مسبقًا.
A11y والتوطين - من الصفر، وليس «لاحقًا».
ألوان أقل - المزيد من الدلالات والإيقاع.
القياس: التحويل، الأخطاء، الوقت، الانعكاسات.
كل ذلك من خلال نظام التصميم: نفس القواعد → نفس التوقعات → UX يمكن التنبؤ بها.

يمكنني استكمال هذا الدليل بنماذج جاهزة لسيناريوهاتك الرئيسية (التسجيل/CUS، الإيداع/السحب، المكافآت/البطولات) وجمع القوائم المرجعية لعملية المراجعة الخاصة بك.