アバター、ステータス、プレゼンス

1） UXにおけるアバターとステータスの役割

• 認識を確保する（リスト、チャット、テーブル）；
• 即刻の存在フィードバックを提供して下さい（オンライン/オフライン）；
• インターフェイスの活気の感覚を作成します（特にリアルタイムゲーム、PvP、チャットで）。
• プレーヤー間の相互作用の信頼そして関与を高めて下さい。

2）タイポロジー

3）次元および形

32 px-最小サイズ（リスト、テーブル、チャット）。
40-48 px-プロファイル、カード、ナビゲーションパネル。
64-96 px-大きなプロファイルブロック、ストリームルーム。
形状：ラウンド-標準、正方形-ブランド/オペレータのための。
半径：円のための'50％'または柔らかい正方形のための'8-12 px'。

4）ローディングおよびフォールバック

サポートされているフォーマット：JPEG、 PNG、 WebP、 SVG（最大2-3 MB）。
サーバ上のリソースと最適化（例：128、256、512 px）。
不在-最初のアバター：名前の最初の文字、パレットからの背景。
ユーザーアイコンのある偽のプレースホルダの読み込み中にエラーが発生しました。

html
<img class="avatar" src="/u/123/avatar.jpg" alt="Аватар игрока Alex" onerror="this.src='/assets/avatar-fallback.png'">

5）カラーパレットおよび背景

名前ハッシュによる背景の自動生成：安定していますが、ユニークな色。
背景≥イニシャル間の対照AA。
暗いテーマのために-調光15-20％。
ランダムな「毒」の組み合わせは避けてください。パレットを6〜10トーンに制限します。

6）プレゼンス表示

6.1基本的なステータス

6.2アクティビティレベルのプレゼンス

• 「演劇」
• 「賭けをする」
• 「In the Tournament」
• 「On hiatus」

6.3技術的な実装

WebSocket経由で30秒ごとに「ハートビート」を送信します。
信号がない場合>60秒→'オフライン'。
アクティブ（スクロール、クリック、ベット）すると、'online'ステータス→更新されます。
ストレージ：TTL 120 sec （Redis/Realtime API）。

7）表示パターン

7.1ユーザーリスト内

右下隅にドットが付いたアバター+ステータス（8-10 px）。
ツールチップ：「Online「/」Last login 5 min ago」。

7.2チャットで

アバター+ニックネーム+ミニプレゼンス（'オンライン/オフライン'）。
最後のメッセージと時間。
ソケットイベント'user_presence'による同期。

7.3リーダーボード上で

アバター+名前+レベル/ランク。
ホバー→ミニプロファイル（最後のアクティビティ、国、勝利）。

7.4プレイヤーカード（PvP/ライブ）

大きなアバター（64-80 px）。

ライブステータス： 「ゲーム中」「、一時停止中」「、対戦相手を待っている」

Stroke color=state （'border-color' var）。

8）空室状況（A11y）

名前とステータスの'alt'： 「Alex Player Avatar-Online」。
ステータス-テキストの重複、色だけではありません。
'aria-live=ステータスが変わると「礼儀」になります。
ステータス≥背景へのコントラスト。
点滅するライトを使用しないで下さい。

9）ダウンロード状態とエラー

ローディング：フレームのない灰色の円/スケルトン。
エラー：フォールバックアイコン+「アバターがロードされていません」プロンプト。
空：初期またはシステムプレースホルダ。

10）プライバシー

ユーザーは存在（オン/オフ）を制御する必要があります。

設定： 「オンラインステータスを表示する「/」最後のアクティビティを表示する」

ゲストアカウントには存在が隠されています。
PvPでは、正確な時間なしに「available/busy」のみを表示できます。

11）プレゼンスAPIの実装

json
{
"userId": "u123",
"presence": "online",
"activity": "playing",
"lastSeen": "2025-11-03T18:52:00Z"
}

• チャンネル'/presence/{ userId}'を購読します。
• ソケットによる周期的なping/pong。
• TTLによる自動ステータス更新。

js socket.on('presence:update', data => {
document.querySelector(`#u${data.userId}.status`).dataset.state = data.presence;
});

12） iGamingの詳細

ライブゲーム： ステータス「12号室」「ディーラー待ち」「配布中」

トーナメント：参加バッジ、エンドタイマー。
協力的なPvP：相手が見つかりました/非アクティブな活動。
ソーシャルフィード：ミニバッジトーナメントまたはVIPレベルのアバター。
ベットは忙しい→オンライン。

13）指標とパフォーマンス

プレゼンス待ち時間：イベントからUI更新まで1秒を≤します。
ハートビート成功率：≥ 99％。

クライアントのCPU負荷： 1000アップデート/分で≤ 5％

TTL精度：ユーザーはリリース後にオンラインで「ハング」しません。
メモリリークテスト：符号なしリスナーをクリアします。

14） Antipatterns

'alt'なし、または背景なしのアバター-UIの「hole」。
ステータスの色のみ（テキスト/ツールチップなし）。
点滅ドット/パルスリング-迷惑。
更新→WebSocketの過負荷に制限はありません。
最寄りの2番目に「last seen」を表示する（プライバシー侵害）。
同じグリッド内の異なるフォーマット/アバターの割合。

15）システムトークンの設計（例）

json
{
"avatar": {
"sizes": { "xs": 24, "sm": 32, "md": 40, "lg": 64 },
"radius": { "circle": "50%", "square": 8 },
"border": { "width": 2, "color": "var(--bg-elevated)" }
},
"presence": {
"dotSize": 10,
"gap": 2,
"colors": {
"online": "#00C853",
"idle": "#FFD600",
"busy": "#D32F2F",
"offline": "#9E9E9E"
}
},
"motion": {
"updateMs": 150,
"fadeMs": 120
},
"a11y": {
"contrastAA": true,
"textLabel": true
}
}

16） QAチェックリスト

UI （UI）

• 寸法と半径は一貫しています。アバターを中心に。
• 対照≥ AA；純粋な色のステータスはありません。
• Folback initial see and read。
• ツールチップまたはテキストのステータスが表示されます。

プレゼンス

• イベントの1秒後≤ステータスが更新されます。
• オフライン→オンラインは再接続の間に正しいです。
• スパイクなし（イベント重複除外）。
• アイドル（アイドル>5分）と見なされます。

プライバシーポリシー

• プレゼンス設定が機能します。
• 最後の目撃は数分/時間に丸められた。
• 活動の余分な開示はありません（例えば、賭け）。

パフォーマンス

• Heartbeatは安定しており、WebSocketはバックオフで自動的に再接続します。
• 1000個のアップデートでメモリリークが発生しません。
• TTFF ≤表示時100ミリ秒です。

17）設計システムにおけるドキュメンテーション

-'Avatar'、 'PresenceDot'、 'UserCard'、 'ActivityBadge'、 'LiveStatus'。

パターン： 「フォールバック付きアバター」「、ステータスポイント」「、リアルタイム更新プレゼンス」「、プライベートモード」

トークン：サイズ、色、半径、TTLの更新、コントラスト。
Do/Don 't：テキストなしの色（don' t）、 1つのリスト内の丸い図形と正方形の図形（don 't）、安定した寸法とストローク（do）。

簡単な要約

アバターとステータスは装飾的な要素だけでなく、ユーザーとシステム間のコミュニケーション言語です。一貫した色、読みやすいキャプション、正しい同期とプライバシーの尊重は、iGamingで特に重要な「生きている」空間の感覚を作り出します。アリーナ、トーナメント、ライブチャット、または友人との賭け。存在は、インターフェイスを動的で人間的にしますが、情報コンテンツと沈黙のバランスをとるだけです。