化身，狀態和保證

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）。
缺席-化身的縮寫：名稱的第一個字母，來自調色板的背景。
引導錯誤→帶有用戶圖標的空格placeholder。

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）Presence指示

6.1個基本狀態

6.2 Activity-level presence

• 「播放」
• 「下註」
• 「在比賽中」
• 「休息」

6.3技術實施

每30秒通過WebSocket發送「heartbeat」。
如果沒有信號>60 sec → 'offline'。
活動（滾動、點擊、bet） →在線狀態更新。
在存儲中：TTL 120秒（Redis/Realtime API）。

7）顯示模式

7.1在用戶列表中

化身+狀態位於右下角（8-10 px）。
Tooltip： 「Online （在線）」/「5分鐘後的最後一個登錄」。

7.2在聊天中

化身+nik+mini-presence（「online/offline」）。
最新消息和時間。
通過socket事件「user_presence」進行同步。

7.3在排行榜上

化身+名稱+級別/等級。
Hover →迷你輪廓（最新活動，國家，勝利）。

7.4在玩家卡（PvP/Live）

大型化身（64-80 px）。
生活狀態：「在遊戲中」，「暫停」，「等待對手」。
筆畫顏色=狀態（'border-color' var）。

8）可用性（A11y）

「alt」具有名稱和狀態：「亞歷克斯玩家的頭像在網上」。
對於狀態-文本副本，而不僅僅是顏色。
更改狀態時的'aria-live='polite'。
與背景狀態的AA ≥對比。
不要使用閃爍指示燈。

9）下載狀態和錯誤

裝載：沒有框架的灰色圓圈/骨架。
錯誤：倒退圖標+提示「未加載阿凡達」。
Empty：首字母縮寫或系統placeholder。

10）隱私性

用戶必須控制可見性（on/off）。
設置：「顯示在線狀態」/「顯示最新活動」。
對於來賓帳戶，presence隱藏。
在PvP中-只能顯示「可用/繁忙」，而無需精確的時間。

11） presence API的實現

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

• 訂閱頻道'/presence/{userId}"。
• 定期ping/pong通過socket。
• 通過TTL自動更新狀態。

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

12） iGaming的細節

現場遊戲： 狀態「在12號房間」，「期待經銷商」，「講義去。」

比賽：「參與」徽章，結束計時器。
協作PvP：「發現對手/未激活」活動。
社交磁帶：來自錦標賽迷你徽章或VIP級別的化身。
投註：「在投註過程中」（忙碌）→「準備就緒」（在線）。

13）度量與表演

Presence latency：從事件到UI更新≤ 1秒。

Heartbeat success rate: ≥ 99%.

客戶端CPU加載：≤ 5%,1000更新/分鐘。
TTL accuracy：用戶在發布後不在線「掛起」。
內存泄漏測試：清除已預訂的聽眾。

14）反模式

沒有「alt」或沒有背景的化身是UI中的「漏洞」。
僅用於狀態的顏色（無文本/tooltip）。
閃爍點/脈動環-刺激。
沒有升級限制→ WebSocket過載。
以一秒鐘的精度顯示「最後一次」（侵犯隱私）。
一個網格中化身的不同格式/比例。

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

• 尺寸和半徑是一致的；化身居中。
• AA ≥對比；沒有純粹的顏色狀態。
• Folback首次看到並閱讀。
• Tooltip或文本狀態存在。

Presence

• 狀態在事件發生後≤ 1秒更新。
• 重新配置時,Offline → Online是正確的。
• 不會出現激增（事件重復數據消除）。
• 計入不作為（idle> 5分鐘）。

隱私權

• presence可見性設置有效。
• 最後一個季節四舍五入到分鐘/小時。
• 沒有額外的活動披露（例如費率）。

表演表演

• Heartbeat是穩定的，WebSocket自動重新連接與backoff。
• 1000次更新時沒有內存泄漏。
• TTFF在顯示時≤ 100毫秒。

17）設計系統中的文檔

Компоненты: `Avatar`, `PresenceDot`, `UserCard`, `ActivityBadge`, `LiveStatus`.

模式：帶有倒退的阿凡達，狀態點，Real Time Update Presence，私人模式。
代幣：尺寸,顏色,半徑,TTL更新,對比度。
Do/Do n't：沒有文字的顏色（do n't），一個列表中的圓形和正方形（do n't），穩定的尺寸和筆畫（do）。

簡短的摘要

化身和狀態不僅是裝飾元素，而且是用戶與系統之間交流的語言。連續的顏色，可讀的簽名，正確的同步和對隱私的尊重形成了「生活」空間的感覺，在iGaming中尤為重要：在競技場，錦標賽，現場聊天或與朋友打賭時。Presence使界面充滿活力和人性-但只有在平衡信息性和沈默的情況下。