מרכז הודעה ואירועים
1) מטרה
מרכז ההודעות מספק משוב בין המערכת למשתמש מבלי לשבש את זרימת הפעולות. הוא לוכד אירועים אסינכרוניים (הימורים, עסקאות, בונוסים, סטטוסים של KYC) ומספק מקום אחד לצפות בהודעות, לסנן ולנהל אותן.
עקרונות עיקריים:- להודיע ללא הסחת דעת.
- לתעדף, לא לשכפל.
- תן פעולות היכן שהן מתאימות.
2) סוגי הודעות ויישומן
3) סדרי עדיפויות ורמות חשיבות
1. קריטי (שגיאה, כישלון, ביטחון) - דורש תשומת לב מיידית (מודל/באנר).
2. חשוב (תשלום, הימור, כסף) - טוסט + כניסה במרכז ההודעה.
3. מידע (חדשות, בונוסים) תג וקלטת.
4. הודעות חברתיות (חברים, צ 'אטים, טורנירים) - הודעות קבוצתיות שאינן חוסמות את הקשר.
חוק UX: ”לא יותר מהודעה פעילה אחת לכל מסך”.
אם יש יותר מהם, לשלב: ”3 אירועים חדשים”.
4) ארכיטקטורת מרכז הודעה
4. מקור אירוע 1
Backend Action Event Bus # Ac.Service Ac.U.I
אירועים מסווגים: 'סוג', 'חומרה', 'הקשר', 'tl', 'Id'.
מאוחסן ב- ”notification _ store” (רדיס + DB).
4. 2 זרימת לקוח
שקע רשת/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').
בעת לחיצה, פותח את מרכז הפאנל/הודעה.
” יש הודעות חדשות”; באפס -' אריה-נסתר =” נכון”.
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) מצבים ופעולות
חדש: מודגש עם לוחית צבע/רקע.
קרא: חיוור יותר; אין לו תג.
שגיאה: סמל + Retry.
המערכת: לא נמחקה, רק בארכיון.
- swipe (mobile) # למחוק/לקרוא.
- כפתורים: ”עוד”, ”חוזר”, ”להסתיר”.
- פעולות המוניות: סמן את כל הקריאה, נקה הכל.
7) עקרונות חזותיים
מקסימום 3 שורות של טקסט בהודעה.
הכותרת היא נועזת, עד 50 תווים.
- הצלחה - ירוק/מבטא-propost
- שגיאה - מבטא אדום/מסוכן &post
- מידע - כחול/מבטא-אינפורמציה &fost
- תשומת לב - כתום/' מבטא-אזהרה &fost
- ניגוד בין אלכוהוליסטים אנונימיים, צללים הם מינימליים.
- אנימציות: Flade/slid name 160 ms, ללא תנועות קבועות.
8) עיתוי ותצוגה
טוסט: 3-5 שניות, עם הפסקה ברחף.
לפני הפעולה.
יש כאלה שלא נקראו עד כה.
תיבת דואר אלקטרוני: אחסון TTL (לדוגמה, 14-30 יום).
סגירה אוטומטית כאשר מיקוד המסך הולך לאיבוד - בזהירות (אל תאבד סטטוסים חשובים).
9) A11y ומקלדת
לטוסט יש a 'role = ”סטטוס” (או ”התראה” לשגיאות).
מרכז ההודעות - תפקיד ”אזור” עם 'אריה-תווית =” מרכז ההודעות”.
תמיכה בניווט חץ ולשונית/Shift + Tab.
Over: קריאת הודעות חדשות כאשר נוסף ('אריה-לחיות = ”מנומס”).
המוקד אינו ”קופץ” כאשר הוא מופיע - רק אם הרמת הכוסית קריטית.
10) ביצועים
טעינה עצלה ועבודת אלילים (20-30 כל אחד).
דחיסת נתונים (”gzip ”/” br”), בקשות מקבץ.
חיבור מחדש של שקע אינטרנט + גיבוי.
אנימציות רק על ”שינוי צורה/אופייה”.
11) תרחישי משחק
11. 1 הימורים וקשאוט
”בית מקובל”, ”מקדם השתנה”, ”קאשאוט השלים” - טוסט + הקלטה.
במקרה של שגיאה - טוסט ”נכשל להתקין”, באנר עם Retry.
11. 2 תשלומים
”חידוש מוצלח” * טוסט.
פלט ב Process # כניסת סרט, זמן הגעה משוער, וכפתור נוסף.
שגיאת PSP = טוסט אדום + CTA Retry.
11. 3 בונוסים וקידומים
באנר על מסך הבית: ”טורניר חדש”, ”בונוס הפקדה”.
מרכז ההודעות מאחסן את ההיסטוריה של כל הפרומואים.
יכולת להסתיר/להתיר משיווק.
11. 4 KYC ובטיחות
דגל מתמשך עד האימות הושלם.
”KYC אישר” # טוסט ירוק + ארכיון בקלטת.
”מסמך פג תוקף” = הודעה + עדכון CTA.
12) מדדים
הודעות CTR (על ידי סוג).
שיעור ביטול (כמה נסגר ללא פעולה).
לא נקראה בספירה האחרונה בזמן הקריאה.
אחוזי הצלחה במשלוחים (time realtime).
Latency בין אירוע לתצוגה (target cloud 300 ms).
שגיאה/שינוי קצב בהעברת שקע אינטרנט/דחיפה.
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) רשימת QA
פונקציונליות
[ ] משלוח בזמן אמת 300 ms.
[ ] טוסט מוצג 100 ms לאחר האירוע.
מרכז [ ] מסונכרן (לקרוא/לא לקרוא).
[ מיסה ] ”לקרוא הכל” עובדת.
UX
[ לא יותר ] טוסט 1 בכל פעם.
[ ] הודעה לכל החיים היא אופטימלית (3-5 שניות).
[ ] הודעות חשובות נותרו תלויות ועומדות.
[ טקסט ] 3 שורות, סי-טי-איי 1.
A11y
התפקיד [ ] = ”סטטוס” '/' אריה-לחיות 'הם נכונים.
[ ] חץ וטאב עובד ניווט.
[ ] ניגודיות לאלכוהוליסטים אנונימיים.
ביצועים
[ ] עבודת אלילים ועומס עצלים.
[ ] אין צ 'יפס ב> 100 הודעות.
[ ] דחיסת נתונים ועיכוב ביצוע.
16) תיעוד במערכת התכנון
”טוסט”, ”פריט מודיעיני”, ”מרכז המידע”, ”אינדיקטור רע”.
מדריכים: סדר עדיפויות הודעה, טי-טי-אל, קיבוצים, קופירייטינג.
דפוסים: טוסט לאירועים מיידיים, דגל חשוב, מרכז להיסטוריה.
Do/Don 't גלריה: ”הודעות דואר זבל” נגד ”מודעות רגועה”.
תקציר
מרכז ההודעות אינו רק תיבת דואר אלקטרוני של אירועים, אלא ארכיטקטורה של אמון ושקיפות. הודעות מתוכננות היטב יוצרות תחושת שליטה: כל מה שחשוב מועבר, שום דבר לא אבד, הרעש מדוכא. זה קריטי עבור iGaming - חשוב למשתמש לראות אישור של הימורים, תשלומים ומדינאות מבלי להיות מוסח מהמשחק.