Κέντρο κοινοποίησης και εκδηλώσεις

1) Σκοπός

Το κέντρο κοινοποίησης παρέχει ανατροφοδότηση μεταξύ του συστήματος και του χρήστη χωρίς να διαταράσσει τη ροή των ενεργειών. Καταγράφει ασύγχρονα γεγονότα (στοιχήματα, συναλλαγές, μπόνους, καταστάσεις KYC) και παρέχει ένα ενιαίο μέρος για να δείτε ειδοποιήσεις, να φιλτράρετε και να τα διαχειριστείτε.

• Ενημερώστε χωρίς περισπασμό.
• Προτεραιότητα, όχι αντίγραφο.
• Προβείτε σε ενέργειες όπου ενδείκνυται.

2) Τύποι κοινοποιήσεων και εφαρμογή τους

3) Προτεραιότητες και επίπεδα σπουδαιότητας

1. Κρίσιμη (σφάλμα, αστοχία, ασφάλεια) - απαιτείται άμεση προσοχή (Modal/Banner).
2. Σημαντικό (πληρωμή, στοίχημα, εξαργύρωση) - Τοστ + εγγραφή στο κέντρο κοινοποίησης.
3. Ενημερωτικό (ειδήσεις, μπόνους) - Σήμα και ταινία.
4. Κοινωνικές (φίλοι, συνομιλίες, τουρνουά) - ομαδοποιημένες ειδοποιήσεις που δεν εμποδίζουν την UI.

Κανόνας UX: «Όχι περισσότερες από μία ενεργές ειδοποιήσεις ανά οθόνη».

Εάν υπάρχουν περισσότερα, συνδυάστε: «3 νέα γεγονότα».

4) Αρχιτεκτονική κέντρου κοινοποίησης

4. 1 Πηγή γεγονότων

Backend → Event Bus → Notice Service → UI.
Τα γεγονότα ταξινομούνται: "τύπος", "σοβαρότητα", "πλαίσιο", "tt ," userId ".
Αποθηκεύεται στο 'notice _ store' (Redis + DB).

4. 2 Ροή πελάτη

WebSocket/SSE для σε πραγματικό χρόνο.
Τοπική κατάσταση → τεμπέλης φόρτωση 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 =» Υπάρχουν νέες κοινοποιήσεις «». στο μηδέν -' aria-κρυμμένο =» αληθινό»'.

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) Κράτη και δράσεις

Νέο: τονίστηκε με χρώμα/πλάκα φόντου.
Ανάγνωση: πιο χλωμό; δεν διαθέτει σήμα.
Σφάλμα: εικονίδιο + Retry.
Σύστημα: δεν διαγράφηκε, μόνο αρχειοθετήθηκε.

• Swipe (κινητό) → διαγραφή/ανάγνωση.
• Κουμπιά: «Περισσότερα», «Επαναλάβετε», «Απόκρυψη».
• Μαζικές δράσεις: Σημειώστε όλες τις αναγνώσεις, καθαρίστε όλες.

7) Οπτικές αρχές

Το πολύ 3 γραμμές κειμένου στην κοινοποίηση.
Ο τίτλος είναι τολμηρός, μέχρι 50 χαρακτήρες.

• Επιτυχία - πράσινη/« επιτυχής προφορά »
• Σφάλμα - κόκκινος/' κίνδυνος προφοράς '
• Πληροφορίες - μπλε/« info προφοράς »
• Προσοχή - πορτοκαλί/« προειδοποίηση προφοράς »
• Αντίθετα ≥ τους ΑΑ, οι σκιές είναι ελάχιστες.
• Κινούμενα σχέδια: εξασθένιση/ολίσθηση ≤ 160 ms, χωρίς συνεχείς κινήσεις.

8) Χρονοδιαγράμματα και απεικόνιση

Τοστ: 3-5 δευτερόλεπτα, με μια παύση στο hover.
Πανό: πριν από την ενέργεια.
Σήμα: μέχρι στιγμής δεν έχουν διαβαστεί.
Εισερχόμενα: αποθήκευση TTL (π.χ. 14-30 ημέρες).
Αυτόματο κλείσιμο όταν χαθεί η εστίαση της οθόνης - προσεκτικά (μην χάσετε σημαντικές καταστάσεις).

9) A11y και πληκτρολόγιο

Το τοστ έχει ένα 'role = «status»' (ή 'alert' για σφάλματα).
Κέντρο Κοινοποίησης - 'role =' region '' with 'aria-label = «Notice Center»'.
Υποστήριξη πλοήγησης βέλους και Tab/Shift + Tab.
Voey Over: ανάγνωση νέων ειδοποιήσεων όταν προστίθενται ('aria-live = «polite»').
Η εστίαση δεν «πηδάει» όταν εμφανίζεται - μόνο αν η πρόποση είναι κρίσιμη.

10) Επιδόσεις

Τεμπέλης φόρτωση και σελιδοποίηση (20-30 η καθεμία).
Συμπίεση δεδομένων ('gzip '/' br'), ομαδοποίηση αιτήσεων.
Επανασύνδεση WebSocket + backoff.
Κινούμενα σχέδια μόνο σε 'μετασχηματισμό/αδιαφάνεια'.

11) Σενάρια iGaming

11. 1 Στοιχήματα και ταμειακά διαθέσιμα

«Το στοίχημα γίνεται δεκτό», «Ο συντελεστής αλλάζει», «Το Cashout ολοκληρώθηκε» - τοστ + ηχογράφηση ταινίας.
Σε περίπτωση λάθους - η πρόποση «Αποτυχία εγκατάστασης», πανό με Retry.

11. 2 Πληρωμές

«Επιτυχής αναπλήρωση» → πρόποση.
Έξοδος στην εγγραφή ταινίας διεργασίας, ETA, και περισσότερο κουμπί.
Σφάλμα PSP → κόκκινο τοστ + CTA Retry.

11. 3 Πριμοδοτήσεις και προαγωγές

Banner στην αρχική οθόνη: «New Tournament», «Deposit Bonus».
Το κέντρο κοινοποίησης αποθηκεύει την ιστορία όλων των promos.
Ικανότητα απόκρυψης/μη εγγραφής από τύπους εμπορίας.

11. 4 KYC και ασφάλεια

Ανθεκτικό πανό έως ότου ολοκληρωθεί η επαλήθευση.
«KYC επιβεβαίωσε» → πράσινο τοστ + αρχείο σε ταινία.
«Λήξη του εγγράφου» → κοινοποίηση + επικαιροποίηση CTA.

12) Μετρήσεις

Κοινοποιήσεις CTR (ανά τύπο).
Ποσοστό απόρριψης (πόσο έκλεισε χωρίς δράση).
Μη αναγνωσμένη καταμέτρηση avg и ώρα προς ανάγνωση.
Ποσοστό επιτυχίας παράδοσης (для πραγματικός χρόνος).
Καθυστέρηση μεταξύ γεγονότος και εμφάνισης (στόχος ≤ 300 ms).
Σφάλμα/ρυθμός επαναπροσδιορισμού στο WebSocket/Push delivery.

13) Αντι-μοτίβα

Ήχοι και pop-ups σε κάθε εκδήλωση.
Απρόβλεπτοι χρονοδιακόπτες αυτόματου κλεισίματος.
Επαναλάβετε τις ίδιες κοινοποιήσεις.
Screensavers χωρίς αιτία («επιβεβαίωση», «επανεκκίνηση»).
Χρήση κοινοποιήσεων ως spam μάρκετινγκ.
Κέντρο αφιλτράριστο/αναζητήσιμο σε> 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.

Η πρόποση εμφανίζεται ≤ 100 ms μετά την εκδήλωση.
Το κέντρο συγχρονίζεται (read/unread).

• Η μάζα «διάβασε τα πάντα» λειτουργεί.

UX

• Όχι περισσότερο από 1 τοστ κάθε φορά.
• Η διάρκεια ζωής της κοινοποίησης είναι η βέλτιστη (3-5 δευτερόλεπτα).
• Εκκρεμούν σημαντικές κοινοποιήσεις.
• Κείμενο ≤ 3 γραμμές, CTA ένα.

A11y

• 'ρόλος =' status ''/' aria-live' είναι σωστοί.
• Έργα πλοήγησης βέλους και καρτέλας.
• Αντιπαραβολή ≥ AA.

Απόδοση

• Παγίδευση και τεμπέλης.
• Δεν υπάρχουν φρέζες σε> 100 κοινοποιήσεις.
• Συμπίεση δεδομένων και καθυστερημένη απόδοση.

16) Τεκμηρίωση στο σύστημα σχεδιασμού

: 'Toast', ' Ite ,' Center ',' BadgeIndicator '.
Οδηγοί: προτεραιότητες κοινοποίησης, TTL, ομαδοποίηση, αντιγραφή.
Μοτίβα: πρόποση για στιγμιαίες εκδηλώσεις, πανό για σημαντικά, κέντρο για την ιστορία.
Do/Don 't gallery: «ειδοποιήσεις spam» ή «ηρεμία».

Σύντομη Περίληψη

Το κέντρο κοινοποίησης δεν είναι απλώς μια εισροή γεγονότων, αλλά μια αρχιτεκτονική εμπιστοσύνης και διαφάνειας. Οι καλά σχεδιασμένες κοινοποιήσεις δημιουργούν μια αίσθηση ελέγχου: όλα τα σημαντικά παραδίδονται, τίποτα δεν χάνεται, ο θόρυβος καταστέλλεται. Αυτό είναι κρίσιμο για το iGaming - είναι σημαντικό για τον χρήστη να βλέπει επιβεβαίωση στοιχημάτων, πληρωμών και καταστάσεων χωρίς να αποσπάται η προσοχή από το παιχνίδι.