مركز الإخطار والأحداث

1) الغرض

يقدم مركز الإخطار ملاحظات بين النظام والمستخدم دون تعطيل تدفق الإجراءات. يلتقط الأحداث غير المتزامنة (الرهانات والمعاملات والمكافآت وحالات KYC) ويوفر مكانًا واحدًا لعرض الإشعارات وتصفيتها وإدارتها.

• أبلغ دون إلهاء.
• إعطاء الأولوية وليس الازدواجية.
• اتخذ الإجراءات حيثما كانت مناسبة.

2) أنواع الإخطارات وتطبيقاتها

3) الأولويات ومستويات الأهمية

1. حرج (خطأ، فشل، أمن) - يتطلب الانتباه على الفور (Modal/Banner).
2. مهم (الدفع، الرهان، النقود) - توست + إدخال في مركز الإخطار.
3. معلومات (أخبار ومكافآت) - شارة وشريط.
4. اجتماعي (أصدقاء، محادثات، بطولات) - إشعارات مجمعة لا تمنع واجهة المستخدم.

قاعدة UX: «لا أكثر من إشعار نشط واحد لكل شاشة».

إذا كان هناك المزيد منها، اجمع: «3 أحداث جديدة».

4) بنية مركز الإخطار

4. 1 مصدر الحدث

Backend → Event Bus → Notification Service → UI.
تصنف الأحداث: «نوع»، «شدة»، «سياق»، «tl»، «معرف المستخدم».
مخزن في «إخطار _ مخزن» (Redis + DB).

4. 2 تدفق العملاء

WebSocket/SSE для في الوقت الفعلي.
الدولة المحلية → التحميل الكسول من 10-20 إشعارات.
ادفع واجهة برمجة التطبيقات (الهاتف المحمول/المتصفح) - اختياري، بموافقة المستخدم.

4. 3 نموذج البيانات (مثال)

json
{
"id": "n12345",
"type": "deposit_success",
"severity": "info",
"title": "Replenishment successful,"
"message": "You made 500 ₴ through Papara,"
"timestamp": "2025-11-03T19:20:00Z",
"context": { "transactionId": "tx123" },
"read": false,
"action": {"label": "View," "url": "/wallet/history "}
}

5) مكونات واجهة المستخدم

5. 1 أيقونة وشارة

يبين عدد غير المقروء ('≤ 99').
عند النقر، يفتح اللوحة/مركز الإخطار.
' aria-label =» هناك إشعارات جديدة» ؛ عند الصفر - «aria-hidden =» true «».

5. 2 لوحة الإخطار

قائمة البطاقات: رمز → عنوان → نص قصير → الوقت → CTA.
الحالة: خطأ جديد، مقروء، خطأ تسليم، تم تنزيله من الأرشيف.
المجموعة حسب التاريخ: اليوم، أمس، في وقت سابق.

5. 3 بطاقة إخطار

html
<article class="notif new" role="article">
<div class="icon success"></div>
<div class="content">
<h4> Replenishment successful </h4>
<p> 500 ₴ via Papara </p>
<time datetime =" 2025-11-03T19: 20"> 5 min ago </time>
</div>
<button class =" icon" aria-label = "Delete"> </button>
</article>

6) الدول والإجراءات

جديد: مميز بلوحة اللون/الخلفية.
اقرأ: paler ؛ ليس لديها شارة.
خطأ: أيقونة + Retry.
النظام: غير محذوف، محفوظ فقط.

• تمرير (الهاتف المحمول) → حذف/قراءة.
• الأزرار: «المزيد»، «كرر»، «إخفاء».
• الإجراءات الجماعية: ضع علامة على كل القراءة، امسح الجميع.

7) المبادئ المرئية

الحد الأقصى 3 سطور النص في الإخطار.
العنوان جريء يصل إلى 50 حرفًا.

• النجاح - الأخضر/« اللهجة الناجحة »
• خطأ - أحمر/« خطر لهجة »
• معلومات - أزرق/« معلومات لهجة »
• الانتباه - البرتقالي/« التحذير باللهجة »
• على النقيض ≥ AA، الظلال ضئيلة.
• الرسوم المتحركة: تتلاشى/تنزلق ≤ 160 مللي ثانية، بدون حركات ثابتة.

8) التوقيت والعرض

الخبز المحمص: 3-5 ثوانٍ، مع وقفة عند التحليق.
لافتة: قبل الحدث.
الشارة: هناك غير مقروءة حتى الآن.
صندوق الوارد: تخزين TTL (على سبيل المثال، 14-30 يومًا).
الإغلاق التلقائي عند فقدان تركيز الشاشة - بعناية (لا تفقد الحالات المهمة).

9) A11y ولوحة المفاتيح

يحتوي التوست على «role =» status' (أو «تنبيه» للأخطاء).
Notification Center - 'role = «region»' with' aria-label =» Notification Center»'.
دعم التنقل في السهم و Tab/Shift + Tab.
VoiceOver: قراءة إشعارات جديدة عند إضافتها ("aria-live =" مهذب ").
لا «يقفز» التركيز عندما يظهر - فقط إذا كان الخبز المحمص حاسمًا.

10) الأداء

كسول التحميل والتجميع (20-30 لكل منهما).
ضغط البيانات ('gzip '/' br')، طلبات التجميع.
إعادة اتصال WebSocket + التراجع.
الرسوم المتحركة فقط على «التحويل/التعتيم».

11) سيناريوهات iGaming

11. 1 الرهان والنقد

"الرهان مقبول"، "تغير المعامل"، "تم الانتهاء من Cashout' - توست + تسجيل الشريط.
في حالة الخطأ - نخب «فشل في التثبيت»، لافتة مع Retry.

11. 2 المدفوعات

«التجديد ناجح» → الخبز المحمص.
الإخراج في عملية → إدخال الشريط، إيتا، والمزيد من الزر.
خطأ PSP → الخبز المحمص الأحمر + CTA Retry.

11. 3 مكافآت وترقيات

لافتة على الشاشة الرئيسية: «بطولة جديدة»، «مكافأة الإيداع».
يخزن مركز الإخطار تاريخ جميع العروض الترويجية.
القدرة على الاختباء/إلغاء الاشتراك من أنواع التسويق.

11. 4 KYC والسلامة

لافتة ثابتة حتى اكتمال التحقق.
«أكد KYC» → نخب أخضر + أرشيف في شريط.
«انتهت صلاحية المستند» → إشعار + تحديث CTA.

12) المقاييس

إخطارات CTR (حسب النوع).
معدل الرفض (مقدار ما تم إغلاقه دون اتخاذ إجراء).
عد غير مقروء и وقت القراءة.
معدل نجاح التسليم (для الوقت الحقيقي).
الكمون بين الحدث والعرض (الهدف ≤ 300 مللي ثانية).
معدل الخطأ/إعادة التجربة على تسليم WebSocket/Push.

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

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

14) رموز نظام التصميم

json
{
"toast": {
"durationMs": 4000,
"maxWidth": 400,
"gap": 12,
"radius": 10,
"shadow": "var(--elev-3)"
},
"badge": {
"size": 18,
"color": "var(--accent-info)"
},
"panel": {
"width": 380,
"radius": 12,
"gap": 8,
"padding": "12 16"
},
"a11y": {
"ariaLive": "polite",
"contrastAA": true
}
}

15) قائمة QA المرجعية

الوظائف

• التسليم في الوقت الحقيقي ≤ 300 مللي ثانية.
• يتم عرض الخبز المحمص ≤ 100 مللي ثانية بعد الحدث.
• المركز متزامن (اقرأ/غير مقروء).
• الكتلة «اقرأ كل شيء» تعمل.

UX

• ليس أكثر من نخب 1 في كل مرة.
• عمر الإخطار هو الأمثل (3-5 ثوانٍ).
• لا تزال الإخطارات المهمة معلقة.
• نص ≤ 3 أسطر، CTA one.

A11y

• "الدور =" الوضع "/" aria-live "صحيحة.
• أعمال الملاحة في السهم والعلامة التبويب.
• التناقض ≥ AA.

الأداء

• التثبيت والكسل.
• لا يوجد فريز في> 100 إخطار.
• ضغط البيانات وتأخر تقديمها.

16) التوثيق في نظام التصميم

Компоненты: "Toast'،" NoticationItem "،" NotificationCenter "،" BadgeIndicator ".
الأدلة: أولويات الإخطار، TTL، التجميع، كتابة الإعلانات.
الأنماط: نخب الأحداث الفورية، لافتة مهمة، مركز التاريخ.
افعل/لا تفعل المعرض: «إشعارات البريد العشوائي» مقابل «الوعي الهادئ».

موجز موجز

مركز الإخطار ليس مجرد صندوق بريد للأحداث، ولكنه بنية للثقة والشفافية. تخلق الإشعارات المصممة جيدًا إحساسًا بالتحكم: يتم تسليم كل شيء مهم، ولا يضيع شيء، ويتم قمع الضوضاء. هذا أمر بالغ الأهمية بالنسبة إلى iGaming - من المهم للمستخدم أن يرى تأكيد الرهانات والمدفوعات والحالات دون تشتيت الانتباه عن اللعبة.