化身，状态和保证

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使界面充满活力和人性-但只有在平衡信息性和沉默的情况下。