Билдирүүлөр жана окуялар борбору

1) Максаты

Кабарлоо борбору иш-аракеттердин агымын бузбастан, система менен колдонуучунун ортосундагы пикир байланышты камсыз кылат. Ал асинхрондук окуяларды (коюмдарды, транзакцияларды, бонустарды, KYC статустарын) каттайт жана билдирмелерди көрүү, аларды чыпкалоо жана башкаруу үчүн бирдиктүү жерди берет.

• алаксытпай маалымат берүү.
• артыкчылык жана кайталоо эмес.
• Иш-аракеттерди алар ылайыктуу жерде берүү.

2) Билдирүүлөрдүн түрлөрү жана аларды колдонуу

3) Артыкчылыктар жана маанилүүлүк деңгээли

1. Critical (ката, ката, коопсуздук) - дароо көңүл бурууну талап кылат (Modal/Banner).
2. Important (төлөм, коюм, кэшаут) - Toast + билдирүү борборуна жазуу.
3. Informational (жаңылыктар, бонустар) - белги жана лента.
4. Social (достор, чаттар, турнирлер) - топтоштурулган билдирүүлөр, UI бөгөт жок.

UX-эреже: "Экрандагы бир активдүү билдирүүдөн ашык эмес".

Эгер алар көп болсо, бириктирүү: "3 жаңы окуялар".

4) Кабарлоо борборунун архитектурасы

4. 1 Окуялардын булагы

Backend → Event Bus → Notification Service → UI.
Окуялар классификацияланат: 'type', 'severity', 'context', 'ttl', 'userId'.
сакталат 'notification _ store' (Redis + DB).

4. 2 Кардар агымы

WebSocket / SSE для real-time.
Local state → lazy-жүктөө 10-20 билдирүүлөр.
Push API (мобайл/браузер) - колдонуучунун макулдугу менен, кошумча.

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) UI компоненттери

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) Шарттар жана иш-аракеттер

Жаңы: түс/фон формасы менен белгиленген.
Окулду: кубарып; badge жок.
Ката: Simge + Retry.
Системалуу: өчүрүлбөйт, болгону архивделет.

• Swipe (Mobile) → алып салуу/окуу.
• "Кененирээк", "Кайталоо", "Жашыруу" баскычтары.
• Массалык иш-аракеттер: Баарын окуп белгилөө, Баарын тазалоо.

7) Визуалдык принциптер

Билдирүүдөгү тексттин эң көп дегенде 3 сабы.
Аталышы майлуу, 50 белгиге чейин.

• Ийгилик - жашыл/' accent-success '
• Ката - кызыл/' accent-danger '
• Маалымат - көк/' accent-info '
• Эскертүү - кызгылт/' accent-warning '
• Контраст ≥ AA, көлөкө минималдуу.
• Animation: fade/slide ≤ 160 ms, туруктуу кыймыл жок.

8) Тайминг жана көрсөтүү

Toast: 3-5 секунд, hover менен тыныгуу менен.
Баннер: чейин.
Белги: азырынча окулбаган.
Inbox: TTL сактоо (мисалы, 14-30 күн).
Auto-close экран басым жоготуп жатканда - этият (маанилүү статусун жоготуп эмес).

9) A11y жана клавиатура

Toast 'role = "status"' (же каталар үчүн 'alert') бар.
Кабарлоо борбору - 'role = "region"' s' aria-label =" Кабарлоо борбору"'.
жебе жана Tab/Shift + Tab багыттоо колдоо.
VoiceOver: кошууда жаңы эскертмелерди окуу ('aria-live = "polite"').
Фокус пайда болгондо "секирбейт" - toast критикалык болсо гана.

10) аткаруу

Жалкоо жүктөө жана пагинация (20-30).
Маалыматтарды кысуу ('gzip '/' br'), суроо-талаптарды топтоо.
WebSocket reconnection + backoff.
'transform/opacity' боюнча гана анимациялар.

11) iGaming скрипттери

11. 1 чендер жана кэшбэк

"Коюм кабыл алынды", "Коэффициент өзгөрдү", "Кэшаут аткарылды" - toast + лентага жазуу.
Ката - toast "Коюу мүмкүн эмес", Retry менен баннер.

11. 2 Төлөмдөр

"Толуктоо ийгиликтүү" → toast.
"Иштеп чыгуу" → лента жазуу, ETA жана "Маалымат" баскычы.
PSP катасы → Red Toast + CTA Retry.

11. 3 Бонустар жана акциялар

Негизги экрандагы баннер: "Жаңы турнир", "Депозит үчүн бонус".
Кабарлоо борбору бардык промо тарыхын сактайт.
маркетинг түрлөрүн жашыруу/жазылуу мүмкүнчүлүгү.

11. 4 KYC жана коопсуздук

Persistent баннер текшерүү аяктаганга чейин.
"KYC тастыкталган" → жашыл toast + тасма архиви.
"Документтин мөөнөтү бүттү" → билдирүү + CTA жаңыртуу.

12) Метрика

CTR билдирүүлөр (түрлөрү боюнча).
Dismiss rate (иш-аракет жок жабылган канча).
Unread count avg и time-to-read.
Delivery success rate (для realtime).
Окуя менен көрсөтүүнүн ортосундагы Latency (максаты ≤ 300 ms).
Error/Retry rate WebSocket/Push жеткирүү учурунда.

13) Анти-үлгүлөрү

Ар бир окуяда үндөр жана калкыма терезелер.
күтүлбөгөн auto-close таймери.
Ошол эле билдирүүлөрдү кайталоо.
Эч кандай себепсиз скринблокерлер ("ырастаңыз", "кайра жүктөп алыңыз").
маркетинг-спам катары эскертмелерди колдонуу.
чыпкасы жок/издөө борбору> 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 ms.
• Toast окуядан кийин 100 ms ≤ көрсөтүлөт.
• борбору синхрондуу (read/unread).
• Массалык "баарын окуп" иштейт.

UX

• көп эмес 1 toast бир убакта.
• оптималдуу эскертүүлөрдүн жашоо убактысы (3-5 сек).
• Маанилүү билдирүүлөр күчүнө чейин калат.
• Текст ≤ 3 сап, CTA бир.

A11y

• 'role = "status" '/' aria-live' туура.
• багыттоо жебе жана Tab иштейт.
• Контраст ≥ AA.

Аткаруу

• Pagination жана lazy-load.
• Friz жок> 100 эскертмелер.
• Маалыматтарды кысуу жана кийинкиге калтырылган рендерлик.

16) Дизайн системасында документтер

Компоненты: `Toast`, `NotificationItem`, `NotificationCenter`, `BadgeIndicator`.
Гайддер: билдирүүлөрдүн артыкчылыктары, TTL, grouping, копирайтинг.
Үлгүлөр: заматта окуялар үчүн toast, маанилүү үчүн баннер, тарых борбору.
Do/Don 't-галерея: "эскертүүлөр" vs "тынч маалымат".

Кыскача резюме

Кабарлоо борбору - бул жөн гана окуялардын "инбоксу" эмес, ишеним жана ачык-айкындуулук архитектурасы. Жакшы иштелип чыккан билдирүүлөр көзөмөл сезимин жаратат: бардык маанилүү нерселер жеткирилди, эч нерсе жоголгон жок, ызы-чуу басылды. iGaming үчүн бул өтө маанилүү - колдонуучу оюндан алаксыбай коюмдардын, төлөмдөрдүн жана статустардын тастыкталышын көрүү маанилүү.