Bildiriş və Hadisə Mərkəzi

1) Təyinat

Bildiriş mərkəzi hərəkət axınını pozmadan sistem və istifadəçi arasında rəy təmin edir. O, asenkron hadisələri (bahislər, əməliyyatlar, bonuslar, KYC statusları) qeyd edir və bildirişləri izləmək üçün vahid yer, onların filtrasiyası və idarə edilməsini təmin edir.

• Diqqəti yayındırmadan məlumat verin.
• Prioritet, dublyaj deyil.
• Uyğun olduğu yerlərdə hərəkət etmək.

2) Bildiriş növləri və onların tətbiqi

3) Prioritetlər və əhəmiyyət səviyyələri

1. Kritik (səhv, uğursuzluq, təhlükəsizlik) - dərhal diqqət tələb edir (Modal/Banner).
2. İmportant (ödəniş, bahis, cashout) - Toast + bildiriş mərkəzinə giriş.
3. Informational (xəbərlər, bonuslar) - Badge və lent.
4. Sosial (dostlar, söhbətlər, turnirlər) - qruplaşdırılmış bildirişlər, UI-ni bloklamır.

UX qaydası: «Ekranda bir aktiv bildirişdən çox deyil».

Daha çox varsa, «3 yeni hadisə» birləşdirin.

4) Bildiriş Mərkəzinin arxitekturası

4. 1 Hadisə mənbəyi

Backend → Event Bus → Notification Service → UI.
Hadisələr təsnif edilir: 'type', 'severity', 'context', 'ttl', 'userId'.
"notification _ store 'da saxlanılır (Redis + DB).

4. 2 Müştəri axını

WebSocket / SSE для real-time.
Lokal state → lazy-download 10-20 bildirişlər.
Push API (mobile/browser) - istifadəçinin razılığı ilə isteğe bağlıdır.

4. 3 Data modeli (nümunə)

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) UI komponentləri

5. 1 Simge və badge

Oxunanların sayını göstərir ('≤ 99').
Tıklayanda panel/bildiriş mərkəzi açılır.
' aria-label =» Yeni bildirişlər var»'; sıfır - 'aria-hidden =' true '.

5. 2 Bildiriş paneli

Kart siyahısı: ikona → başlıq → qısa mətn → vaxt → CTA.
Hallar: yeni, oxundu, çatdırılma xətası, arxivdən yükləndi.
Tarix üzrə qruplaşdırma: Bu gün, Dünən, Əvvəllər.

5. 3 Bildiriş kartı

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) Hallar və hərəkətlər

Yeni: rəng/arxa plan ilə seçilir.
Oxundu: solğun; badge yoxdur.
Səhv: Simge + Retry.
Sistem: silinmir, yalnız arxivləşdirilir.

• Swipe (mobile) → silmək/oxumaq.
• Düymələr: «Ətraflı», «Təkrar», «Gizlətmək».
• Kütləvi fəaliyyət: Hamısını oxu, Hamısını təmizlə.

7) Vizual prinsiplər

Bildirişdə maksimum 3 sətir mətn.
Başlıq yağlı, 50 simvol qədər.

• Uğur - yaşıl/' accent-success '
• Səhv - qırmızı/' accent-danger '
• Məlumat - mavi/' accent-info '
• Diqqət - narıncı/' accent-warning '
• Kontrast ≥ AA, kölgələr minimaldır.
• Animasiyalar: fade/slide ≤ 160 ms, daimi hərəkət olmadan.

8) Zamanlama və ekran

Toast: hover ilə fasilə ilə 3-5 san.
Banner: hərəkətə qədər.
Badge: oxunmamış qədər.
Inbox: TTL saxlama (məsələn, 14-30 gün).
Auto-close ekran fokusunu itirdikdə - diqqətlə (vacib statusları itirməyin).

9) A11y və klaviatura

Toast 'role = "status' (və ya səhv üçün 'alert') var.
Bildiriş mərkəzi - 'role = «region»' s' aria-label =» Bildiriş mərkəzi»'.
Oxlar və Tab/Shift + Tab naviqasiya dəstək.
VoiceOver: əlavə edildikdə yeni bildirişlərin oxunması ('aria-live = «polite»').
Diqqət göründüyü zaman «atlamır» - yalnız toast kritik olduqda.

10) Performans

tənbəl yükləmə və paginasiya (hər biri 20-30).
Sıxılma ('gzip '/' br'), sorğuların qruplaşdırılması.
WebSocket reconnection + backoff.
Animasiya yalnız 'transform/opacity'.

11) iGaming ssenariləri

11. 1 Bahislər və cashout

«Mərc qəbul edildi», «Əmsal dəyişdi», «Cashout tamamlandı» - toast + lentə qeyd.
Səhv olduqda - toast «Qoymaq mümkün olmadı», Retry ilə banner.

11. 2 Ödənişlər

«Doldurma uğurla» → toast.
«Emalda çıxış» → lentdə qeyd, ETA və «Ətraflı» düyməsi.
PSP səhv → qırmızı toast + CTA Retry.

11. 3 Bonuslar və promosyonlar

Banner əsas ekranda: «Yeni turnir», «Depozit bonusu».
Bildiriş Mərkəzi bütün promosyonların tarixçəsini saxlayır.
Marketinq növlərindən gizlətmək/abunə olmaq imkanı.

11. 4 KYC və təhlükəsizlik

Persistent banner yoxlama başa çatana qədər.
«KYC təsdiq» → yaşıl toast + lent arxiv.
«Sənədin müddəti başa çatdı» → bildiriş + CTA yenilənir.

12) Metrika

CTR bildirişləri (növlərinə görə).
Dismiss rate (nə qədər hərəkətsiz bağlandı).
Unread count avg и time-to-read.
Delivery success rate (для realtime).
Hadisə və nümayiş arasında Latency (hədəf ≤ 300 ms).
WebSocket/Push çatdırıldığında Error/Retry rate.

13) Anti-nümunələr

Hər hadisədə səslər və açılır pəncərələr.
Gözlənilməz auto-close zamanlayıcılar.
Eyni bildirişləri təkrarlayın.
Heç bir səbəb olmadan ekran blokları («təsdiq edin», «yenidən yükləyin»).
Marketinq spam kimi bildirişlər istifadə.

14) Dizayn sistemi tokenləri

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-çek siyahısı

Funksionallıq

• Real vaxt çatdırılma ≤ 300 ms.
• Toast hadisədən sonra 100 ms ≤ göstərilir.
• Mərkəz sinxronlaşdırılmışdır (read/unread).
• Kütləvi «hər şeyi oxumaq» işləyir.

UX

• Bir anda ən çox 1 toast.
• Bildirişlərin ömrü optimaldır (3-5 san).
• Mühüm bildirişlər qüvvədə qalır.
• Mətn ≤ 3 sətir, CTA bir.

A11y

• 'role = «status» '/' aria-live' düzdür.
• Oxları naviqasiya və Tab işləyir.
• Kontrast ≥ AA.

Performans

• Pagination və lazy-load.
• Friz yoxdur> 100 bildirişlər.
• Sıxılma və gecikmiş render.

16) Dizayn sistemində sənədləşmə

Компоненты: `Toast`, `NotificationItem`, `NotificationCenter`, `BadgeIndicator`.
Qaydalar: bildiriş prioritetləri, TTL, grouping, kopyalama.
Nümunələr: ani hadisələr üçün toast, əhəmiyyətli üçün banner, tarix üçün mərkəz.
Do/Don 't-qalereya: «xəbərdarlıq» vs «sakit məlumatlılıq».

Qısa xülasə

Bildiriş mərkəzi yalnız hadisələrin «inbox» deyil, etimad və şəffaflıq arxitekturasıdır. Yaxşı dizayn edilmiş bildirişlər nəzarət hissi yaradır: hər şey çatdırılır, heç bir şey itmir, səs-küy yatırılır. iGaming üçün bu kritikdir - istifadəçi üçün oyundan yayınmadan bahislərin, ödənişlərin və statusların təsdiqlənməsini görmək vacibdir.