შეტყობინებების ცენტრი და მოვლენები

1) დანიშვნა

შეტყობინებების ცენტრი უზრუნველყოფს უკუკავშირს სისტემასა და მომხმარებელს შორის, მოქმედების ნაკადის დარღვევის გარეშე. იგი აფიქსირებს ასინქრონულ მოვლენებს (განაკვეთები, გარიგებები, პრემიები, KYC სტატუსები) და უზრუნველყოფს შეტყობინებების ნახვის ერთ ადგილს, მათ ფილტრაციას და კონტროლს.

• აცნობეთ ყურადღების გარეშე.
• პრიორიტეტიზაცია და არა დუბლირება.
• მისცეს მოქმედებები იქ, სადაც ისინი მიზანშეწონილია.

2) შეტყობინებების ტიპები და მათი გამოყენება

3) პრიორიტეტები და მნიშვნელობა

1. კრიტიკული (შეცდომა, მარცხი, უსაფრთხოება) - დაუყოვნებლივ მოითხოვს ყურადღებას (Modal/Banner).
2. Important (გადახდა, განაკვეთი, ფულადი სახსრები) - Toast + ჩაწერა შეტყობინებების ცენტრში.
3. Information (სიახლეები, პრემია) - Badge და ფირზე.
4. სოციალური (მეგობრები, ჩეთები, ტურნირები) - ჯგუფური შეტყობინებები, რომლებიც არ ბლოკავს UI- ს.

UX წესი: „ეკრანზე არაუმეტეს ერთი აქტიური შეტყობინება“.

თუ ისინი უფრო დიდია, გააერთიანეთ: „3 ახალი მოვლენა“.

4) შეტყობინებების ცენტრის არქიტექტურა

4. 1 მოვლენების წყარო

Backend → Event Bus → Notification Service → UI.
მოვლენები კლასიფიცირდება: 'ტიპი', 'severity', 'context', 'tl', 'userId'.
შენახულია 'Notification _ store' (Redis + DB).

4. 2 კლიენტის ნაკადი

WebSocket / SSE для real-time.
ადგილობრივი სახელმწიფო - 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 = "ნამდვილი" ".

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.
შეცდომა: ხატი + Retry.
სისტემური: არ არის ამოღებული, მხოლოდ არქივში.

• Swipe (მობილური) - წაშლა/წაკითხვა.
• ღილაკები: „მეტი“, „განმეორება“, „დამალვა“.
• მასობრივი მოქმედებები: აღნიშნეთ ყველაფერი წაკითხულზე, გაასუფთავეთ ყველაფერი.

7) ვიზუალური პრინციპები

შეტყობინებაში ტექსტის მაქსიმალური 3 სტრიქონი.
სათაური არის ცხიმიანი, 50-მდე სიმბოლო.

• წარმატება - მწვანე/' accent-success '
• შეცდომა - წითელი/' accent-danger '
• ინფორმაცია - ლურჯი/' accent-info '
• ყურადღება - ნარინჯისფერი/' accent-warning '
• კონტრასტი - AA, ჩრდილები მინიმალურია.
• ანიმაცია: fade/slide - 160 ms, მუდმივი მოძრაობების გარეშე.

8) ტაიმინგი და ჩვენება

Toast: 3-5 წამი, პაუზით hover.
ბანერი: მოქმედებამდე.
Badge: ჯერჯერობით არ არის წაკითხული.
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.
ანიმაციები მხოლოდ „ტრანსფორმაციულ/opacity“ -ზე.

11) iGaming სკრიპტები

11. 1 განაკვეთები და ფულადი სახსრები

„განაკვეთი მიღებულია“, „კოეფიციენტი შეიცვალა“, „Cashout დასრულებულია“ - ფირზე ჩაწერა + ჩაწერა.
შეცდომით - Toast „ვერ მოათავსეთ“, ბანერი Retry- სთან.

11. 2 გადახდა

„წარმატებით შევსება“.
„დამუშავების დასკვნა“ არის ჩანაწერი ფირზე, ETA და ღილაკი „დამატებითი“.
PSP შეცდომა არის წითელი toast + CTA Retry.

11. 3 პრემია და აქციები

Banner მთავარ ეკრანზე: „ახალი ტურნირი“, „ანაბრის პრემია“.
შეტყობინებების ცენტრი ინახავს ყველა პრომო ისტორიას.
მარკეტინგის ტიპებისგან დამალვის/გამოწერის შესაძლებლობა.

11. 4 KYC და უსაფრთხოება

Persistent banner გადამოწმების დასრულებამდე.
„KYC დადასტურებულია“ მწვანე ტოასტის + არქივი ფირზე.
„დოკუმენტი ამოიწურა“. შეტყობინება განახლდება + CTA.

12) მეტრიკი

CTR შეტყობინებები (ტიპების მიხედვით).
Dismiss rate (რამდენი დაიხურა მოქმედების გარეშე).
Unread count avg и time-to-read.
Delivery success rate (для realtime).
ცეკვა მოვლენასა და შოუს შორის (მიზანი 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 ჩეკის სია

ფუნქციონირება

• Real Time მიტანა 300 ms.
• Toast აჩვენებს ღონისძიების შემდეგ 100 ms.

ცენტრი სინქრონიზებულია (read/unread).

• მასობრივი „წაკითხვა“ მუშაობს.

UX

• ერთდროულად 1-ზე მეტი არ არის.
• შეტყობინებების ცხოვრების დრო ოპტიმალურია (3-5 წ.).
• მნიშვნელოვანი შეტყობინებები მოქმედებამდე რჩება.
• ტექსტი 3 სტრიქონი, CTA ერთი.

A11y

• 'role = „status“ '/' aria-live' სწორია.
• ისრებით ნავიგაცია და Tab მუშაობს.
• კონტრასტი AA.

შესრულება

• პაგინაცია და ლაზი-ლოდი.
• არ არსებობს ფრიზია> 100 შეტყობინებაში.
• მონაცემთა შეკუმშვა და დაგვიანებული გაშვება.

16) დოკუმენტაცია დიზაინის სისტემაში

Компоненты: `Toast`, `NotificationItem`, `NotificationCenter`, `BadgeIndicator`.
ჰაიდები: შეტყობინებების პრიორიტეტები, TTL, grouping, საავტორო უფლებები.
ნიმუშები: Toast მყისიერი მოვლენებისთვის, მნიშვნელოვანი ბანერი, ისტორიის ცენტრი.
Do/Don 't გალერეა: „ძილის შეტყობინებები“ „მშვიდი ინფორმირება“.

მოკლე რეზიუმე

შეტყობინებების ცენტრი არ არის მხოლოდ მოვლენების „ინბოქსი“, არამედ ნდობისა და გამჭვირვალეობის არქიტექტურა. კარგად შემუშავებული შეტყობინებები ქმნის კონტროლის გრძნობას: ყველა მნიშვნელოვანი მიტანა, არაფერი დაიკარგა, ხმაური თრგუნავს. IGaming- ისთვის ეს კრიტიკულია - მომხმარებლისთვის მნიშვნელოვანია დაინახოს ფსონების, გადახდების და სტატუსის დადასტურება თამაშისგან ყურადღების გარეშე.