Habarnamalar we wakalar merkezi

1) Bellenilmegi

Habarnamalar merkezi hereketleriň akymyny bozman, ulgam bilen ulanyjynyň arasynda seslenme aragatnaşygyny üpjün edýär. Ol asinxron wakalary (nyrhlary, amallary, bonuslary, KYC statuslaryny) ýazga alýar we habarnamalary görmek, süzülmek we dolandyrmak üçin ýeke-täk ýer berýär.

• Ünsüňizi sowman habar beriň.
• Köpeltmek däl-de, ileri tutmak.
• Degişli ýerlerde hereket etmek.

2) Habarnamalaryň görnüşleri we olaryň ulanylmagy

3) Ähmiýetiniň ileri tutulýan ugurlary we derejeleri

1. Critical (ýalňyşlyk, şowsuzlyk, howpsuzlyk) - birbada ünsi talap edýär (Modal/Banner).
2. Important (töleg, stawka, kesşaut) - Toast + habarnamalar merkezine ýazgy.
3. Informational (habarlar, bonuslar) - Badge we lenta.
4. Social (dostlar, söhbetdeşlikler, ýaryşlar) - UI-ni bloklamaýan toparlanan habarnamalar.

UX düzgüni: "Ekranda bir işjeň habarnamadan köp bolmaly däldir".

Eger olardan köp bolsa, "3 täze waka".

4) Habarnamalar merkeziniň arhitekturasy

4. 1 Wakalaryň çeşmesi

Backend → Event Bus → Notification Service → UI.
Wakalar toparlara bölünýär: 'type', 'severity', 'context', 'ttl', 'userId'.
"notification _ store" -da saklanýar (Redis + DB).

4. 2 Müşderi akymy

WebSocket / SSE для real-time.
Lokal state → lazy-ýüklemek 10-20 bildiriş.
Push API (mobile/brauzer) - ulanyjynyň razylygy bilen goşmaça.

4. 3 Maglumatlar modeli (mysal)

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-komponentler

5. 1 Nyşan we badge

Okalanlaryň sanyny görkezýär ('99' ≤).
Basylanda bildiriş paneli/merkezi açylýar.
' aria-label =" Täze habarnamalar bar"'; nol - 'aria-hidden = "true'.

5. 2 Bildiriş paneli

Kartoçkalaryň sanawy: nyşan → sözbaşy → gysga tekst → wagt → CTA.
Ýagdaýlar: täze, okaldy, eltip bermekde ýalňyşlyk, arhiwden ýüklendi.
Toparlanyş senesi: Şu gün, Düýn, Öň.

5. 3 Habarnamanyň kartoçkasy

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) Ýagdaýlar we hereketler

Täze: Reňkli/arka planşetli.
Okaldy: has reňkli; badge ýok.
Hata: Nyşan + Retry.
Ulgam: aýrylmaýar, diňe arhiwlenýär.

• Swipe (mobile) → aýyrmak/okamak.
• Düwmeler: "Has giňişleýin", "Gaýtala", "Gizle".
• Köpçülikleýin hereketler: Hemme zady okalyp belläň, Hemme zady arassalaň.

7) Wizual ýörelgeler

Habarnamadaky tekstiň iň köp 3 setiri.
Sözbaşy ýagly, 50 belgä çenli.

• Üstünlik - ýaşyl/' accent-success '
• Hata - gyzyl/' accent-danger '
• Maglumat - gök/' accent-info '
• Üns beriň - mämişi/' accent-warning '
• Kontrast ≥ AA, kölegeler iň az.
• Animasiýa: fade/slide ≤ 160 ms, hemişelik hereketsiz.

8) Taýmingler we görkezmek

Toast: 3-5 sek, hower-de arakesme bilen.
Banner: hereketinden öň.
Badge: okalmadyk bar bolsa.
Inbox: TTL boýunça saklamak (mysal üçin, 14-30 gün).
Ekranyň ünsüni ýitireniňizde awto-close - seresap boluň (möhüm statuslary ýitirmäň).

9) A11y we klawiatura

Toast 'role =' status '(ýa-da' alert 'hatalar üçin) bar.
Habarnamalar merkezi - 'role = "region"' s' aria-label =" Habarnamalar merkezi"'.
Oklar we Tab/Shift + Tab bilen nawigasiýa goldaw.
VoiceOver: Goşulanda täze habarnamalary okamak ('aria-live = "polite"').
Fokus ýüze çykanda "bökmeýär" - diňe toast möhüm bolsa.

10) Öndürijilik

Ýaltalyk ýüklemek we paginasiýa (hersi 20-30).
Maglumatlary gysmak ('gzip '/' br'), soraglary toparlamak.
WebSocket reconnection + backoff.
Animasiýa diňe 'transform/opacity' -de.

11) iGaming ssenarileri

11. 1 Nyrhlar we nagt pul

"Stawka kabul edildi", "Koeffisiýent üýtgedi", "Keshaut ýerine ýetirildi" - toast + lenta ýazgy.
Ýalňyşlyk ýüze çyksa - "Retry" banneri "Goýup bolmady" toast.

11. 2 Tölegler

"Doldurmak üstünlikli" → toast.
"Iş gutarýar" → lentadaky ýazgy, ETA we "Has giňişleýin maglumat" düwmesi.
PSP hatasy → gyzyl toast + CTA Retry.

11. 3 Bonuslar we aksiýalar

Esasy ekranda banner: "Täze ýaryş", "Goýum üçin bonus".
Habarnamalar merkezi ähli mahabatlaryň taryhyny saklaýar.
Marketing görnüşlerinden gizlemek/abuna ýazylmak mümkinçiligi.

11. 4 KYC we howpsuzlyk

Persistent banner barlag tamamlanýança.
"KYC tassyklandy" → ýaşyl toast + lentadaky arhiw.
"Resminamanyň möhleti gutardy" → habarnamasy + CTA täzelensin.

12) Metrikler

Habarnamalaryň CTR-i (görnüşleri boýunça).
Dismiss rate (näçeräk hereketsiz ýapyldy).
Unread count avg и time-to-read.
Delivery success rate (для realtime).
Wakanyň we görkezilişiň arasynda Latency (maksat ≤ 300 ms).
WebSocket/Push iberilende Error/Retry rate.

13) Anti-patternler

Her hadysada sesler we açylýan penjireler.
Öňünden aýdyp bolmajak awto-close wagtlary.
Şol bir habarnamalaryň gaýtalanmagy.
Hiç hili sebäpsiz skrinblokerler ("tassyklaň", "täzeden açyň").
Habarnamalary marketing-spam hökmünde ulanmak.

14) Dizaýn-ulgamyň bellikleri

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-sanawy

Funksionallyk

• Real wagt eltip bermek ≤ 300 ms.
• Toast wakadan soň 100 ms ≤ görkezilýär.
• Merkez sinhronlaşdyryldy (read/unread).
• Köpçülikleýin "hemme zady okamak" işleýär.

UX

• Bir wagtyň özünde 1 toast-dan köp bolmaly däldir.
• Habarnamalaryň ömri optimal (3-5 sek).
• Möhüm habarnamalar güýje girýänçä galýar.
• Tekst ≤ 3 setirler, CTA bir.

A11y

• 'role = "status" '/' aria-live' dogry.
• Oklar bilen nawigasiýa we Tab işleýär.
• Kontrast ≥ AA.

Çykyş

• Paginasiýa we lazy-load.
• > 100 habarnamada friz ýok.
• Maglumatlary gysmak we yza süýşürmek.

16) Dizaýn-ulgamdaky resminamalar

Компоненты: `Toast`, `NotificationItem`, `NotificationCenter`, `BadgeIndicator`.
Gaýdlar: habarnamalaryň ileri tutulýan ugurlary, TTL, grouping, göçürmek.
Patterns: dessine wakalar üçin toast, möhüm wakalar üçin banner, taryh üçin merkez.
Do/Don 't-galereýa: "ýatylýan habarnamalar" vs "asuda habarlylyk".

Gysgaça gysgaça

Habarnamalaryň merkezi diňe bir wakalaryň "inboksy" däl, eýsem ynam we aç-açanlyk arhitekturasydyr. Gowy düzülen habarnamalar gözegçilik duýgusyny döredýär: möhüm zatlaryň hemmesi getirildi, hiç zat ýitmedi, ses basyldy. iGaming üçin bu möhüm - ulanyjy üçin oýundan daşlaşman, nyrhlaryň, tölegleriň we statuslaryň tassyklanmagyny görmek möhümdir.