Ծանուցումների և իրադարձությունների կենտրոն

1) Նշանակումներ

Ծանուցման կենտրոնը արձագանք է տալիս համակարգի և օգտագործողի միջև, առանց խախտելու գործողությունների հոսքը։ Այն արձանագրում է ասինխրոն իրադարձություններ (տոկոսադրույքներ, գործարքներ, բոնուսներ, KYC արձաններ) և տալիս է ծանուցումներ դիտելու միասնական տեղ, դրանք ֆիլտրում և կառավարում։

Հիմնական սկզբունքները

Տեղեկացրեք առանց շեղվելու։

Առաջնահերթություն, ոչ թե կրկնօրինակել։

Գործողություններ տալ այնտեղ, որտեղ դրանք տեղին են։

2) Ծանուցումների տեսակները և դրանց կիրառումը

3) Գերակայություններ և կարևորության մակարդակներ

1. Critical (սխալ, ձախողում, անվտանգություն) - պահանջում են անմիջապես (Modal/Banner)։

2. Import.ru (105, տոկոսադրույքը, cashaut) - To.ru + գրառումը ծանուցման կենտրոնում։

3. Informational (նորություններ, բոնուսներ) - Badge և ժապավենը։

4. Social (ընկերներ, չատներ, մրցույթներ) - խմբակային ծանուցումներ, որոնք չեն արգելափակում UI-ը։

UX-կանոն. <<Էկրանին ոչ ավելի քան մեկ ակտիվ ծանուցում չկա>>։

Եթե դրանք ավելի մեծ են, միացրեք «3 նոր իրադարձություններ»։

4) Ծանուցման կենտրոնի ճարտարապետությունը

4. 1 Իրադարձությունների աղբյուրը

Backend → Event Bus → Notification Service → UI.

Իրադարձությունները դասակարգվում են '«type», «severity», «ext», «ttl», «userId»։

Կարդացեք «notiform _ store» (Redis + DB)։

4. 2 Հաճախորդների հոսք

WebSocket / SSE для real-time.

Տեղական state wwww.lazy-բեռնումը 10-20 ծանուցում է։

Push API (Delail/զննարկիչ) - օբյեկտիվ, օգտագործողի համաձայն։

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 Իկոնկա և badge

Ցույց է տալիս չհրապարակվածների քանակը («07 99»)։

Երբ կլիկը բացում է վահանակը/ծանուցման կենտրոնը։

"aria-label =" Նոր ծանուցումներ կան "։ nula' aria-hidden =» art»։

5. 2 Ծանուցման վահանակ

Քարտերի ցանկը ՝ Iconka wwww.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 (Altil) նախատեսվում է հեռացնել/կարդալ։

Կոճակները ՝ «Ավելին», «Կրկնել», «Թաքցնել»։

Զանգվածային գործողությունները 'Նշեք բոլոր կարդացածը, մաքրեք ամեն ինչ։

7) Տեսողական սկզբունքները

Տեքստի առավելագույն երեք տողերը ծանուցման մեջ։

Վերնագիրը ճարպային է, մինչև 50 նիշ։

Գունավոր կոդավորումը

Հաջողությունը կանաչ/« accent-success »է։

Սխալ 'կարմիր/« accent-danger »

Տեղեկատվությունը 'կապույտ/« accent-2019 »

Ուշադրությունը նարնջագույն/« accent-warning »է։

Հակադրությունը AA-ն է, ստվերը նվազագույն են։

Անիմացիաներ ՝ fade/slide 24160 ms, առանց անընդհատ շարժումների։

8) Թայմինգներ և ցուցադրություններ

To.ru: 3-5 վայրկյան, hover-ի ընդմիջումով։

Banner 'մինչև գործողությունը։

Badge: Քանի դեռ գոյություն չունի։

Inbox: TTL (օրինակ 14-30 օր)։

Express-close-ը, երբ կորցնում է էկրանի կիզակետը, զգույշ է (չկորցնել կարևոր կարգավիճակները)։

9) A1y և ստեղնաշար

To.ru-ն ունի "role =" status "(կամ" al.ru "սխալների համար)։

Ծանուցման կենտրոնը '"role =" region "' s 'aria-label =" Ծանուցման կենտրոն "։

Նավիգացիայի աջակցությունը սլաքներով և Tab/Shift + Tab։

VoicOver: նոր ծանուցումների կարդացում գրանցամատյանում ("aria-105 =" polite ")։

Ֆոկուսը չի «ցատկում» հայտնվելիս, միայն եթե tope-ը քննադատական է։

10) Արտադրողականությունը

Լենինի բեռնումը և պագինացիան (20-30)։

Տվյալների սեղմումը («gzip '/»), հարցումների խումբ։

WebSocket reconnection + backoff.

Անիմացիաները միայն «transform/opacity»։

11) iGaming սցենարները

11. 1 Տոկոսադրույքներ և կանխավճար

«Մրցույթի դրույքաչափը», «Գործակիցը փոխվել է», «Քեշաութ 2019» - to.ru + ձայնագրությունը ժապավենում։

Սխալմամբ 'to.ru «Չհաջողվեց տեղադրել», banner Retry-ի հետ։

11. 2 Վճարումներ

«Համալրումը հաջողությամբ» www.to.ru։

«Վերամշակման մեջ» տեղադրվում է ժապավենի, ETA և «Ավելին» կոճակը։

PMS-ի սխալը կարմիր to.ru + CTA Retry-ն է։

11. 3 Բոնուսներ և ակցիաներ

Հիմնական էկրանի վրա '«Նոր մրցույթը», «Բոնուսը ավանդի համար»։

Ծանուցման կենտրոնը պահպանում է բոլոր բացթողումների պատմությունը։

Թաքցնելու/հեռացնել մարքեթինգային տեսակներից։

11. 4 KYC և անվտանգություն

Persistent banner-ը մինչև ապացուցման ավարտը։

KYC-ն ապացուցված է "ռուսական կանաչ to.ru + արխիվը ժապավենի մեջ։

«Փաստաթղթի տևողությունը ավարտված է» նախատեսվում է ծանուցում + CTA նորարարել։

12) Մետրիկի

CTR ծանուցումներ (տիպերով)։

Cormiss rate (ինչքան փակվեց առանց գործողության)։

Unread count avg и time-to-read.
Delivery success rate (для realtime).

Latency-ի և ցուցադրման միջև (նպատակը 300 մզ էր)։

Error/Retry rate-ը WindowSocket/Push-ի առաքման ժամանակ։

13) Anti-patterna

Հնչյուններ և պատուհաններ յուրաքանչյուր իրադարձության ժամանակ։

Անկանխատեսելի տեղեկատվական-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-chek-թերթ

Ֆունկցիոնալությունը

• Real-Time առաքումը 300 մզ է։
• To.ru 35100 Ms իրադարձությունից հետո։
• Կենտրոնը համաժամեցված է (read/unread)։
• Զանգվածային «կարդալ ամեն ինչ» աշխատում է։

UX

• Ոչ ավելի քան 1 to.ru միաժամանակ։
• Ծանուցման կյանքի ժամանակը լավատես է (3-5 վայրկյան)։
• Կարևոր ծանուցումները մնում են մինչև գործողությունը։
• Տեքստ 243 տող, CTA մեկ։

A11y

• 'role = "status" '/' aria-international "ճիշտ է։
• Սլաքների և Tab-ի լուծարումը աշխատում է։
• Հակադրություն AA։

Պերֆորանսը

• Պագինացիա և lazy-load.
• Ոչ ֆրիզներ> 100 ծանուցումների ժամանակ։
• Տվյալների սեղմումը և հետաձգված ռենդերինգը։

16) Մոսկվա դիզայնի համակարգում

Компоненты: `Toast`, `NotificationItem`, `NotificationCenter`, `BadgeIndicator`.

Դելդներ 'ծանուցումների գերակայություններ, TTL, www.uping, կոպիրայթինգ։

Patterns: to.ru ակնթարթային իրադարձությունների համար, banner կարևոր, պատմության կենտրոն։

Do/Don 't-պատկերասրահը' "vs" հանգիստ տեղեկությունը "։

Live ռեզյումե

Ծանուցման կենտրոնը ոչ միայն իրադարձությունների «ինբոքս» է, այլ վստահության և թափանցիկության ճարտարապետությունը։ Լավ նախագծված ծանուցումները ստեղծում են վերահսկման զգացում, որը շատ կարևոր է, ոչինչ չի անհետացել, աղմուկը ճնշված է։ IGaming-ի համար սա քննադատական է, օգտագործողը կարևոր է տեսնել վճարումների, վճարումների և ստատուսների ապացույցը առանց խաղից շեղվելու։