अधिसूचना केंद्र और घटनाएँ

1) उद्देश्य

अधिसूचना केंद्र कार्यों के प्रवाह को बाधित किए बिना सिस्टम और उपयोगकर्ता के बीच प्रतिक्रिया प्रदान करता है। यह अतुल्यकालिक घटनाओं (दांव, लेनदेन, बोनस, केवाईसी स्टेटस) को पकड़ ता है और सूचनाओं को देखने, फिल्टर करने और उन्हें प्रबंधित करने के लिए एक ही स्थान प्रदान करता है।

मुख्य सिद्धांत:

व्याकुलता के बिना सूचना दें।
प्राथमिकता दें, डुप्लिकेट नहीं।
जहां वे उचित हों वहां कार्रवाई करें।

2) सूचनाओं के प्रकार और उनके आवेदन

टाइप करें	उदाहरण	इस्तेमाल करें
टोस्ट/स्नैकबार	बोली स्वीकृत, नेटवर्क त्रुटि	3-5 सेकंड के लिए अल्पकालिक सूचनाएं; खुद गायब हो जाओ।
लगातार बैनर	"KYC अपडेट आवश्यक"	महत्वपूर्ण लेकिन तत्काल नहीं उपयोगकर्ता कार्रवाई से पहले बने रहें।
बैज/सूचक	"" आइकन पर	नई घटनाओं का संकेत।
इनबॉक्स/फ़ीड	अधिसूचना केंद्र	समयरेखा और अधिसूचना इतिहास।
तंत्र मोडल	लॉग ऑफ, भुगतान त्रुटि	महत्वपूर्ण विफलताएं पुष्टि की आवश्यकता है।

3) प्राथमिकताएं और महत्व का स्तर

1. महत्वपूर्ण (त्रुटि, विफलता, सुरक्षा) - तुरंत ध्यान देने की आवश्यकता होती है (मोडल/बैनर)।

2. महत्वपूर्ण (भुगतान, शर्त, कैशआउट) - अधिसूचना केंद्र में टोस्ट + प्रविष्टि।

3. सूचनात्मक (समाचार, बोनस) - बैज और टेप।

4. सामाजिक (दोस्त, चैट, टूर्नामेंट) - समूहीकृत सूचनाएं जो यूआई को अवरुद्ध नहीं करती हैं।

UX नियम: "प्रति स्क्रीन एक से अधिक सक्रिय अधिसूचना नहीं है।"

यदि उनमें से अधिक हैं, तो संयोजन करें: "3 नई घटनाएं।"

4) अधिसूचना केंद्र वास्तुकला

4. 1 घटना स्रोत

बैकेंड → इवेंट बस → अधिसूचना सेवा → UI।

घटनाओं को वर्गीकृत किया गया है: 'प्रकार', 'गंभीरता', 'संदर्भ', 'ttl', 'userId'।

'नोटिफिकेशन _ स्टोर' (Redis + DB) में संग्रहीत।

4. 2 क्लाइंट प्रवाह

वेबसॉकेट/एसएसई - वास्तविक समय।

स्थानीय राज्य - 10-20 सूचनाओं का आलसी लोडिंग।

पुश एपीआई (मोबाइल/ब्राउज़र) - वैकल्पिक, उपयोगकर्ता सहमति के साथ।

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) यूआई घटक

5. 1 आइकन और बैज

बिना पढ़े ('≤ 99') की संख्या दिखाता है।

जब क्लिक किया जाता है, पैनल/सूचना केंद्र खोलता है।

' एरिया-लेबल =" नई सूचनाएं हैं"; शून्य पर -' आरिया-छिपा =" सही"।

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) राज्य और कार्रवाई

नया: रंग/पृष्ठभूमि प्लेट के साथ उभारा गया.

पढ़ें: पालर; बैज नहीं है।

त्रुटि: प्रतीक + पुनः प्रयास करें.
तंत्र: मिटाया नहीं गया, सिर्फ अभिलेखित.

क्रियाएँ:

स्वाइप (मोबाइल) → मिटाएँ/पढ़ें।
बटन: "अधिक", "दोहराओ", "छिपाओ।"
मास एक्शन: मार्क ऑल रीड, क्लियर ऑल।

7) दृश्य सिद्धांत

अधिसूचना में पाठ की अधिकतम 3 पंक्तियाँ।

शीर्षक बोल्ड है, 50 वर्णों तक।

रंग कोडिंग:

सफलता - हरा/' उच्चारण-सफलता '
त्रुटि - लाल/' एक्सेंट-खतरा '
जानकारी - नीला/' उच्चारण-जानकारी '
ध्यान दें - नारंगी/' उच्चारण-चेतावनी '
कंट्रास्ट ≥ एए, छाया न्यूनतम हैं।
एनिमेशन: फीका/स्लाइड ≤ 160 एमएस, निरंतर आंदोलनों के बिना।

8) समय और प्रदर्शन

टोस्ट: 3-5 सेकंड, होवर पर ठहराव के साथ।

बैनर: कार्रवाई से पहले।

बैज: अब तक बिना पढ़े हुए हैं।

इनबॉक्स: टीटीएल भंडारण (उदाहरण के लिए, 14-30 दिन)।

स्क्रीन फोकस खो जाने पर स्वतः बंद करें - सावधानी से (महत्वपूर्ण स्थिति न खोएं)।

9) A11y और कीबोर्ड

टोस्ट में एक 'रोल = "स्थिति" (या त्रुटियों के लिए' अलर्ट ') है।

अधिसूचना केंद्र - 'आरिया-लेबल =' अधिसूचना केंद्र 'के साथ' भूमिका = 'क्षेत्र'।

तीर नेविगेशन और टैब/शिफ्ट + टैब के लिए समर्थन।

वॉयसओवर: जोड़े जाने पर नई सूचनाओं को पढ़ ना ('आरिया-लाइव = "विनम्र")।

जब यह प्रकट होता है तो ध्यान "कूदता" नहीं है - केवल अगर टोस्ट महत्वपूर्ण है।

10) प्रदर्शन

आलसी लोडिंग और पैगिनेशन (20-30 प्रत्येक)।

डेटा संपीड़न ('gzip '/' br'), समूहीकरण निवेदन.

वेबसॉकेट पुनर्संयोजन + बैकऑफ़।

एनिमेशन केवल 'रूपांतरण/अपारदर्शिता' पर।

11) iGaming परिदृश्य

11. 1 सट्टेबाजी और कैशआउट

"बेट ने स्वीकार किया", "गुणांक बदल गया", "कैशआउट पूरा" - टोस्ट + टेप रिकॉर्डिंग।

त्रुटि - टोस्ट के मामले में "स्थापित करने में विफल", रीट्री के साथ बैनर।

11. 2 भुगतान

"पुनर्पूर्ति सफल" → टोस्ट।

प्रक्रिया → टेप प्रविष्टि, ईटीए और अधिक बटन में आउटपुट।

PSP त्रुटि - लाल टोस्ट + CTA रीट्री।

11. 3 बोनस और पदोन्नति

होम स्क्रीन पर बैनर: "न्यू टूर्नामेंट", "डिपॉजिट बोनस"।

अधिसूचना केंद्र सभी प्रोमो के इतिहास को संग्रहीत करता है।

विपणन प्रकारों से छिपाने/वापस लेने की क्षमता।

11. 4 केवाईसी और सुरक्षा

सत्यापन पूरा होने तक लगातार बैनर।

"KYC ने पुष्टि की" → टेप में हरे टोस्ट + संग्रह।

"दस्तावेज़समाप्त हो गया" → सूचना + सीटीए अद्यतन।

12) मेट्रिक्स

सीटीआर सूचनाएँ (प्रकार से)।

बर्खास्तगी दर (कार्रवाई के बिना कितना बंद किया गया था)।

काउंट avg и टाइम-टू-रीड।

वितरण सफलता दर (для realtime)।

घटना और शो के बीच विलंबता (लक्ष्य ≤ 300 एमएस)।

वेबसॉकेट/पुश डिलीवरी पर त्रुटि/पुनः प्रयास दर।

13) एंटी-पैटर्न

प्रत्येक कार्यक्रम में ध्वनि और पॉप-अप।

अप्रत्याशित ऑटो-क्लोज टाइमर।

एक ही सूचना दोहराएँ।

बिना कारण के स्क्रीनसेवर ("पुष्टि करें", "रिबूट")।

विपणन स्पैम के रूप में सूचनाओं का उपयोग करना।

केंद्र अनफिल्टर्ड/खोज योग्य> 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) क्यूए चेकलिस्ट

कार्यक्षमता

रियल टाइम डिलीवरी ≤ 300 एमएस।
टोस्ट को घटना के बाद ≤ 100 मीटर प्रदर्शित किया जाता है।
केंद्र सिंक्रनाइज़है (पढ़ें/अनरीड)।
मास "सब कुछ पढ़ें" काम करता है।

UX

एक समय में 1 से अधिक टोस्ट नहीं।
अधिसूचना जीवनकाल इष्टतम (3-5 सेकंड) है।
महत्वपूर्ण सूचनाएं लंबित हैं।
पाठ ≤ 3 लाइनें, CTA एक।

A11y

'भूमिका = "स्थिति" '/' आरिया-लाइव' सही हैं।
तीर और टैब नेविगेशन काम करता है।
कंट्रास्ट ≥ एए।

निष्पादन

Pagination और आलसी-भार।
कोई फ्रिज़नहीं> 100 सूचनाएँ।
डेटा संपीड़न और प्रतिपादन में देरी।

16) डिजाइन प्रणाली में प्रलेखन

Компоненты: 'टोस्ट', 'नोटिफिकेशन आइटम', 'नोटिफिकेशन सेंटर', 'बैजइंडिकेटर'।

गाइड: अधिसूचना प्राथमिकताएं, टीटीएल, समूह, कॉपीराइटिंग।

पैटर्न: तत्काल घटनाओं के लिए टोस्ट, महत्वपूर्ण के लिए बैनर, इतिहास के लिए केंद्र।

करो/मत गैलरी: "स्पैम सूचनाएं" बनाम "शांत जागरूकता।"

संक्षिप्त सारांश

अधिसूचना केंद्र न केवल घटनाओं का एक इनबॉक्स है, बल्कि विश्वास और पारदर्शिता की वास्तुकला है। अच्छी तरह से डिज़ाइन की गई सूचनाएं नियंत्रण की भावना पैदा करती हैं: सब कुछ महत्वपूर्ण वितरित किया जाता है, कुछ भी नहीं खोया जाता है, शोर यह iGaming के लिए महत्वपूर्ण है - उपयोगकर्ता के लिए खेल से विचलित हुए बिना दांव, भुगतान और स्टेटस की पुष्टि देखना महत्वपूर्ण है।

अधिसूचना केंद्र और घटनाएँ

UX

A11y

निष्पादन

संक्षिप्त सारांश

हमसे संपर्क करें

त्वरित संपर्क

वीडियो जल्द ही अपडेट किया जाएगा

हम इस समय परियोजनाओं में बहुत व्यस्त हैं