通知センターとイベント
1）目的
通知センターは、アクションの流れを妨げることなく、システムとユーザー間のフィードバックを提供します。非同期イベント（ベット、トランザクション、ボーナス、KYCステータス）をキャプチャし、通知を表示、フィルタリング、管理する単一の場所を提供します。
主な原則：- 気晴らしなしで知らせて下さい。
- 重複しないで優先順位を付けます。
- 適切な場所で行動を起こす。
2）通知の種類とその申請
3）優先順位と重要度
1.重要（エラー、失敗、セキュリティ）-すぐに注意が必要です（モーダル/バナー）。
2.重要（支払い、賭け、キャッシュアウト）-トースト+通知センターのエントリ。
3.情報（ニュース、ボーナス）-バッジとテープ。
4.ソーシャル（友人、チャット、トーナメント）-UIをブロックしないグループ化された通知。
UXルール： 「画面ごとに複数のアクティブな通知はありません。」
さらに多くのイベントがある場合は「、3つの新しいイベント」を組み合わせてください。
4）通知センターアーキテクチャ
4.1イベントソース
バックエンド→イベントバス→通知サービス→UI。
イベントは'type'、 'severity'、 'context'、 'ttl'、 'userId'と分類されます。
'notification_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-label=」新しい通知があります」'；at 0-'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）国と行動
New：カラー/背景プレートで強調表示されます。
読む：paler；バッジがありません。
エラー：アイコン+再試行。
システム：削除されていない、アーカイブされたのみ。
- スワイプ（モバイル）→削除/読み取り。
- ボタン：「More」、 「Repeat」、 「Hide」。
- Mass Actions： Mark All Read、 Clear All。
7）視覚的原則
通知のテキストの最大3行。
タイトルは太字で、最大50文字です。
- 成功-グリーン/'accent-success'
- エラー-赤/'accent-danger'
- 情報-青/'accent-info'
- 注意-オレンジ/'アクセント-ウォーニング'
- 対照≥ AA、影は最小限です。
- アニメーション：フェード/スライド≤ 160ミリ秒、一定の動きなし。
8）タイミングおよび表示
トースト：3-5秒、ホバーで一時停止します。
バナー：アクションの前に。
バッジ：今のところ未読のものがあります。
受信トレイ：TTLストレージ（例：14-30日）。
スクリーンフォーカスが失われたときに自動的に閉じる-慎重に（重要なステータスを失うことはありません）。
9） A11yおよびキーボード
トーストには'role=「status」'（またはエラーの'alert'）があります。
通知センター-'role='region'、'aria-label=「Notification Center」。
矢印ナビゲーションとタブ/シフト+タブのサポート。
VoiceOver：追加時に新しい通知を読み込む（'aria-live=「polite」）。
フォーカスは、それが表示されたときに「ジャンプ」しません-トーストが重要な場合にのみ。
10）パフォーマンス
怠惰なローディングとペジネーション（各20-30）。
データ圧縮（'gzip'/'br'）、要求のグループ化。
WebSocketの再接続+バックオフ。
アニメーションは'transform/opacity'のみです。
11） iGamingシナリオ
11.1賭けとキャッシュアウト
「Bet accepted」、 「Coefficient changed」、 「Cashout completed」-トースト+テープ録音。
エラーの場合-トースト「インストールに失敗しました」、再試行してバナー。
11.2支払い方法
「補充成功」→トースト。
［プロセス］→［テープエントリ］、［ETA］、［その他］ボタンで出力します。
PSPエラー→レッドトースト+CTA再試行。
11.3ボーナスとプロモーション
ホーム画面のバナー：「新しいトーナメント」、「入金ボーナス」。
通知センターには、すべてのプロモーションの履歴が保存されます。
マーケティングタイプを非表示/解除する機能。
11.4 KYCと安全性
検証が完了するまで永続的なバナー。
「KYC確認済み」→グリーントースト+テープでアーカイブ。
「ドキュメントの期限切れ」→通知+CTA更新。
12）メトリクス
CTR通知（タイプ別）。
解雇率（アクションなしで閉鎖された金額）。
未読カウントAVGの時間を読み取ります。
配信成功率（リアルタイム）。
イベントとショーの間のレイテンシ（ターゲット≤ 300ミリ秒）。
WebSocket/Push配信でエラー/再試行レート。
13）アンチパターン
各イベントのサウンドとポップアップ。
予測不可能な自動クローズタイマー。
同じ通知を繰り返します。
原因のないスクリーンセーバー（「確認」、「再起動」）。
マーケティングスパムとして通知を使用します。
unfiltered/searchableの中心>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ミリ秒≤リアルタイム配信。
- イベント終了後100ms ≤トーストが表示されます。
- センターが同期されます（読み取り/未読）。
- ミサ「すべてを読む」動作します。
UX
- 一度に1つ以上の乾杯。
- 通知寿命は最適です（3-5秒）。
- 重要な通知は保留中です。
- テキスト≤ 3行、CTA 1。
A11y
- 'role=「status」'/'aria-live'は正しいです。
- 矢印とタブのナビゲーションが動作します。
- AA ≥対照。
パフォーマンス
- ペジネーションと遅延負荷。
- 100以上の通知にフリーズはありません。
- データ圧縮と遅延レンダリング。
16）設計システムにおけるドキュメンテーション
"Toast'、" NotificationItem"、"NotificationCenter"、"BadgeIndicator"。
ガイド：通知の優先順位、TTL、グループ化、コピーライティング。
パターン：インスタントイベントのための乾杯、重要なバナー、歴史の中心。
Do/Don 't gallery：「スパム通知」と「冷静な認識」。
概要
通知センターは、単なるイベントの受信箱ではなく、信頼と透明性のアーキテクチャです。よく設計された通知は制御の感覚を作成します：重要なものはすべて提供され、何も失われません、騒音は抑制されます。これはiGamingにとって非常に重要です。ユーザーがゲームに気を取られることなく、賭け、支払い、ステータスの確認を確認することが重要です。