مرکز اطلاع رسانی و رویدادها

1) هدف

مرکز اطلاع رسانی بازخورد بین سیستم و کاربر را بدون اختلال در جریان اقدامات فراهم می کند. این برنامه رویدادهای ناهمزمان (شرط ها، معاملات، پاداش ها، وضعیت های KYC) را ضبط می کند و یک مکان واحد برای مشاهده اعلان ها، فیلتر کردن و مدیریت آنها فراهم می کند.

• اطلاع رسانی بدون حواس پرتی
• اولویت بندی کنید، نه تکراری.
• اقدامات را در جایی که مناسب هستند انجام دهید.

2) انواع اعلان ها و کاربرد آنها

3) اولویت ها و سطوح اهمیت

1. بحرانی (خطا، شکست، امنیت) - نیاز به توجه فوری (معین/بنر).
2. مهم (پرداخت, شرط, cashout) - نان تست + ورود در مرکز اطلاع رسانی.
3. اطلاعاتی (اخبار، پاداش) - نشان و نوار.
4. اجتماعی (دوستان، چت، مسابقات) - اعلان های گروه بندی شده که UI را مسدود نمی کنند.

قانون UX: «بیش از یک اعلان فعال در هر صفحه».

اگر تعداد بیشتری از آنها وجود دارد، ترکیب کنید: «3 رویداد جدید».

4) معماری مرکز اطلاع رسانی

4. 1 منبع رویداد

Backend → اتوبوس رویداد → سرویس اطلاع رسانی → UI.
رویدادها طبقه بندی می شوند: «نوع»، «شدت»، «زمینه»، «ttl»، «شناسه کاربر».
ذخیره شده در 'notification _ store' (Redis + DB).

4. 2 جریان مشتری

WebSocket/SSE для زمان واقعی.
حالت محلی → بارگذاری تنبل از اعلان های 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-hidden =» true».

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 کاراکتر.

• موفقیت - سبز/« لهجه موفقیت »
• خطا - قرمز/« خطر لهجه »
• اطلاعات - آبی/« لهجه اطلاعات »
• توجه - نارنجی/« هشدار لهجه »
• کنتراست ≥ AA، سایه ها حداقل هستند.
• انیمیشن ها: محو شدن/اسلاید ≤ 160 میلی ثانیه، بدون حرکات ثابت.

8) زمان بندی و نمایش

نان تست: 3-5 ثانیه، با یک مکث در شناور.

برچسب: قبل از عمل

Badge: تاکنون موارد خوانده نشده وجود دارد.
صندوق ورودی: ذخیره سازی TTL (به عنوان مثال، 14-30 روز).
خودکار بستن زمانی که تمرکز روی صفحه نمایش از دست رفته است - با دقت (وضعیت های مهم را از دست ندهید).

9) A11y و صفحه کلید

تست دارای «role» = «وضعیت» (یا «هشدار» برای اشتباهات) است.
مرکز اطلاع رسانی - 'نقش = «منطقه»' با' aria-label =» مرکز اطلاع رسانی»'.
پشتیبانی از ناوبری فلش و Tab/Shift + Tab.
VoiceOver: خواندن اعلان های جدید هنگام اضافه شدن ('aria-live = «مودبانه»').
تمرکز زمانی که به نظر می رسد «پرش» نیست - فقط اگر نان تست مهم است.

10) عملکرد

بارگذاری تنبل و صفحه بندی (هر 20-30).
فشرده سازی داده ها ('gzip '/' br')، درخواست های گروه بندی.
اتصال مجدد WebSocket + برگشت.
انیمیشن ها فقط در «transform/opacity».

11) سناریوهای بازی

11. 1 شرط بندی و cashout

«Bet accepted», «Coefficient changed», «Cashout completed» - نان تست + ضبط نوار.
در صورت خطا - نان تست «نصب نشد»، بنر با Retry.

11. 2 پرداخت ها

«دوباره پر کردن موفقیت آمیز» → نان تست.
خروجی در فرآیند → ورود نوار، ETA، و دکمه بیشتر.
خطای PSP → نان تست قرمز + CTA تلاش مجدد.

11. 3 پاداش و تبلیغات

بنر در صفحه اصلی: «مسابقات جدید»، «پاداش سپرده».
مرکز اطلاع رسانی تاریخ تمام تبلیغات را ذخیره می کند.
قابلیت پنهان کردن/لغو اشتراک از انواع بازاریابی.

11. ۴ KYC و ایمنی

بنر مداوم تا تأیید کامل است.
«KYC تایید کرد» → نان تست سبز + آرشیو در نوار.
«Document expired» → اعلان + به روز رسانی CTA.

12) معیارها

اعلان های CTR (بر اساس نوع).
نرخ اخراج (چقدر بدون عمل بسته شد).
تعداد خوانده نشده AVG и زمان به خواندن.
میزان موفقیت تحویل (для زمان واقعی).
تأخیر بین رویداد و نمایش (≤ هدف 300 میلی ثانیه).
نرخ خطا/تکرار در تحویل WebSocket/Push.

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 میلی ثانیه.
• نان تست ≤ 100 میلی ثانیه پس از رویداد نمایش داده می شود.
• مرکز هماهنگ شده است (خوانده شده/خوانده نشده).
• توده «خواندن همه چیز» کار می کند.

تجربه کاربری

• نه بیش از 1 نان تست در یک زمان.
• طول عمر اطلاع رسانی مطلوب است (3-5 ثانیه).
• اطلاعیه های مهم در انتظار باقی می ماند.
• متن ≤ 3 خط، CTA یک.

A11y

• "role =" status "/" aria-live "صحیح است.
• ناوبری Arrow و Tab کار می کند.
• کنتراست ≥ AA.

عملکرد

• صفحه بندی و تنبل بار.
• بدون فریز در> 100 اطلاعیه ها.
• فشرده سازی داده ها و ارائه تاخیر.

16) مستندات در سیستم طراحی

Компоненты: 'Toast'، 'NotificationItem'، 'NotificationCenter'، 'BadgeIndicator'.
راهنماها: اولویت های اطلاع رسانی، TTL، گروه بندی، کپی رایت.
الگوها: نان تست برای رویدادهای فوری، بنر برای مهم، مرکز تاریخ.
آیا/آیا گالری: «اطلاعیه های اسپم» در مقابل «آگاهی آرام».

خلاصه ای کوتاه

مرکز اطلاع رسانی فقط یک صندوق ورودی از رویدادها نیست، بلکه یک معماری اعتماد و شفافیت است. نوتیفیکیشن های به خوبی طراحی شده احساس کنترل ایجاد می کنند: همه چیز مهم تحویل داده می شود، هیچ چیز از دست نمی رود، سر و صدا سرکوب می شود. این برای iGaming بسیار مهم است - مهم است که کاربر برای دیدن تایید شرط ها، پرداخت ها و وضعیت ها بدون اینکه از بازی منحرف شود.