Маркази огоҳӣ ва чорабиниҳо

1) Мақсад

Маркази огоҳинома фикру мулоҳизаҳои байни система ва корбарро бидуни халалдор кардани ҷараёни амалҳо таъмин мекунад. Он рӯйдодҳои асинхрониро (гаравҳо, транзаксияҳо, мукофотпулӣ, статусҳои KYC) сабт мекунад ва барои дидани огоҳиҳо, филтр ва идоракунии онҳо ҷои ягона медиҳад.

• Бе парешонӣ хабар диҳед.
• Афзалият диҳед, на нусхабардорӣ.
• Амалҳоеро пешниҳод кунед, ки мувофиқ бошанд.

2) Намудҳои огоҳиҳо ва татбиқи онҳо

3) Афзалиятҳо ва сатҳи аҳамият

1. Интиқодӣ (хато, нокомӣ, амният) - фавран таваҷҷӯҳро талаб мекунад (Модал/Баннер).
2. Муҳим (пардохт, гарав, пули нақд) - вуруди тост + дар маркази огоҳӣ.
3. Иттилоотӣ (ахбор, мукофотпулӣ) - Нишона ва навор.
4. Иҷтимоӣ (дӯстон, чатҳо, мусобиқаҳо) - огоҳиномаҳои гурӯҳбандишуда, ки UI-ро манъ намекунанд.

Қоидаи UX: "На бештар аз як огоҳии фаъол дар як экран".

Агар шумораи онҳо зиёдтар бошад, якҷоя кунед: "3 ҳодисаи нав".

4) Меъмории маркази огоҳӣ

4. 1 Манбаи ҳодиса

Backend → Event Bus → Хадамоти огоҳкунӣ → UI.
Ҳодисаҳо тасниф карда мешаванд: 'намуд', 'вазнинӣ', 'контекст', 'ttl', 'корбар'.
Дар 'notification _ store' нигоҳ дошта мешавад (Redis + DB).

4. 2 Ҷараёни муштарӣ

Шабакаи веб/SSE dlya дар реҷаи вақти воқеӣ.
Давлати маҳаллӣ → боркунии танбалии 10-20 огоҳинома.
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-пинҳон =" ҳақиқӣ"'.

5. 2 Панели огоҳинома

Рӯйхати кортҳо: icon → сарлавҳа → матни кӯтоҳ → вақт → 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) Давлатҳо ва амалҳо

Нав: равшанӣ бо табақи рангӣ/пасзамина.
Хонда шуд: паланг; нишона надорад.
Хато: icon + Retry.
Система: нест карда нашудааст, танҳо бойгонӣ шудааст.

• Swipe (мобилӣ) → нест кардан/хондан.
• Тугмаҳо: "Бештар", "Такрор", "Пинҳон".
• Амалҳои оммавӣ: Ҳама чизро хонед, ҳамаро тоза кунед.

7) Принсипҳои визуалӣ

Максимум 3 сатри матн дар огоҳинома.
Унвон далер аст, то 50 аломат.

• Муваффақият - сабз/' accent-муваффақ '
• Хатогӣ - сурх/' accent-danger '
• Маълумот - кабуд/' accent-info '
• Диққат - норанҷӣ/' accent-warning '
• Муқоиса ≥ АА, сояҳо ҳадди аққал мебошанд.
• Аниматсияҳо: пажмурда/слайд ≤ 160 мс, бе ҳаракатҳои доимӣ.

8) Вақт ва намоиш

Тост: 3-5 сония, бо таваққуф дар hover.
Баннер: пеш аз амал.
Нишона: то ҳол хонда нашудаанд.
Қуттӣ: нигоҳдории TTL (масалан, 14-30 рӯз).
Ҳангоми гум шудани фокуси экран худкор пӯшед - бодиққат (ҳолати муҳимро аз даст надиҳед).

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

Тост дорои a 'role = "status" (ё' ҳушдор 'барои хатогиҳо).
Маркази огоҳинома - 'нақш = "минтақа"' бо' aria-label =" Маркази огоҳӣ"'.
Дастгирии паймоиши тир ва Ҷадвал/Shift + Tab.
Овоз: хондани огоҳиномаҳои нав ҳангоми илова ('aria-live = "хушмуомила").
Фокус ҳангоми пайдо шудани он "ҷаҳида" намешавад - танҳо агар тост муҳим бошад.

10) Иҷро

Боркунии танбалӣ ва пагинатсия (ҳар яке 20-30).
Фишурдани маълумот ('gzip '/' br'), дархостҳои гурӯҳбандӣ.
Пайвасткунии Web-Socket + бозгашт.
Аниматсияҳо танҳо дар 'табдил/шаффофият'.

11) Сенарияҳои IGaming

11. 1 Гарав ва пули нақд

"Бет қабул кард", "Коэффисиент тағир ёфт", "Cashout анҷом ёфт" - сабти тост + лента.
Дар ҳолати хатогӣ - вудкои "Насб карда нашуд", баннер бо Retry.

11. 2 Пардохтҳо

"Пуркунӣ бомуваффақият аст" → вудкои.
Натиҷа дар раванди § вуруди лента, ETA ва тугмаи бештар.
Хатои PSP → тости сурх + CTA Retry.

11. 3 Бонусҳо ва аксияҳо

Баннер дар экрани хонагӣ: "Мусобиқаи нав", "Бонуси амонатӣ".
Маркази огоҳинома таърихи ҳама таблиғотро нигоҳ медорад.
Қобилияти пинҳон кардан/иҷро накардан аз намудҳои маркетинг.

11. 4 KYC ва бехатарӣ

Парчами доимӣ то анҷом ёфтани санҷиш.
"KYC тасдиқ кард" → тости сабз + бойгонӣ дар лента.
"Ҳуҷҷат тамом шуд" → огоҳинома + навсозии CTA.

12) Метрҳо

Огоҳиҳои CTR (аз рӯи намуд).
Меъёри аз кор озод кардан (чӣ қадар бидуни амал баста шуд).
Ҳисобкунии хонданашуда аз вақти хондан.
Сатҳи муваффақияти расонидан (dlya realtime).
Таъхир дар байни ҳодиса ва намоиш (ҳадаф ≤ 300 мс).
Хатогӣ/Меъёри такрорӣ дар расонидани Websocket/Push.

13) Анти-намунаҳо

Дар ҳар як чорабинӣ садоҳо ва поп-апҳо.
Вақтсанҷҳои пешгӯинашавандаи худкор.
Ҳамон огоҳиҳоро такрор кунед.
Screensavers бе сабаб ("тасдиқ", "бозоғоз").
Истифодаи огоҳиҳо ҳамчун спам маркетинг.
Маркази номатлуб/ҷустуҷӯшаванда дар> 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 як.

A11y

• 'нақш = "статус" '/' aria-live' дуруст аст.
• Корҳои паймоиш ва ҷадвал.
• Муқоиса ≥ АА.

Иҷро

• Пагинатсия ва сарбории танбал.
• Фриз дар> 100 огоҳинома нест.
• Фишурдани маълумот ва таъхири таъхир.

16) Ҳуҷҷатгузорӣ дар системаи тарроҳӣ

Компоненты: 'Тост', 'Огоҳинома', 'Огоҳинома', 'Нишондиҳанда'.
Роҳнамо: афзалиятҳои огоҳӣ, TTL, гурӯҳбандӣ, нусхабардорӣ.
Намунаҳо: тост барои рӯйдодҳои фаврӣ, баннер барои муҳим, маркази таърих.
Галереяро иҷро накунед: "огоҳиҳои спам" ва "огоҳии ором".

Хулосаи мухтасар

Маркази огоҳинома на танҳо паёмдони рӯйдодҳо, балки меъмории эътимод ва шаффофият мебошад. Огоҳиномаҳои хуб тарҳрезишуда ҳисси назоратро ба вуҷуд меоранд: ҳама чизи муҳим расонида мешавад, ҳеҷ чиз гум намешавад, садо хомӯш карда мешавад. Ин барои IGaming муҳим аст - барои корбар муҳим аст, ки тасдиқи гаравҳо, пардохтҳо ва статусҳоро бидуни парешон аз бозӣ бубинад.