Аватарлар, статустар жана presence

1) UX Avatar жана статусу ролу

• таанылууну камсыз кылуу (тизмелер, чаттар, таблицалар);
• катышуусу жөнүндө дароо пикир берет (онлайн/offline);
• интерфейстин жандуу сезимин жаратат (өзгөчө реалдуу убакыт оюндарында, PvP, чаттарда);
• оюнчулар ортосундагы өз ара аракеттенүүдө ишенимди жана катышууну жогорулатат.

2) Типология

3) Өлчөмү жана формасы

32 px - минималдуу өлчөм (тизмелер, таблицалар, чаттар).
40-48 px - профилдер, карталар, навигация панели.
64-96 px - чоң профилдик блоктор, стрим бөлмөлөр.
Форма: тегерек - стандарт, чарчы - бренддер/операторлор үчүн.
Радиус: '50%' тегерек же '8-12 px' жумшак чарчы үчүн.

4) Download & fallback

Колдоого алынган форматтар: JPEG, PNG, WebP, SVG (2-3 MB чейин).
Кайра иштетүү жана Server оптималдаштыруу (мисалы, 128, 256, 512 px).
Жок болсо - аватардын баш тамгасы: аталыштын биринчи тамгалары, палитранын фону.
Жүктөө катасы → колдонуучунун сөлөкөтү менен жасалма placeholder.

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

5) Түс палитрасы жана фон

Аты-жөнү хэш алкагында Autogeneration: туруктуу, бирок уникалдуу түс.
АА ≥ фон менен баш тамгалардын ортосундагы карама-каршылык.
караңгы тема үчүн - 15-20% караңгылатуу.
кокусунан "уулуу" айкалыштарын качуу; палитра чектөө (6-10 тонна).

6) Presence-көрсөтүү

6. 1 Негизги статустар

6. 2 Activity-level presence

• "Ойнойт"
• "Коюм"
• "Турнирде"
• "Тыныгууда"

6. 3 Техникалык ишке ашыруу

жөнөтүү 'heartbeat' ар бир 30 секунд аркылуу WebSocket.
сигнал жок болсо> 60 сек → 'offline'.
иш (scroll, чыкылдатуу, bet) → статусун жаңыртуу 'online'.
Сактоо: TTL 120 сек (Redis/Realtime API).

7) Дисплей үлгүлөрү

7. 1 Колдонуучулардын тизмесинде

Avatar + абалы төмөнкү оң бурчунда чекити (8-10 px).
Tooltip: "Онлайн "/" Акыркы кирүү 5 мүнөт мурун".

7. 2 чатта

Avatar + ник + mini-presence ('online/offline').
Акыркы билдирүү жана убакыт.
socket event 'user _ presence' аркылуу синхрондоштуруу.

7. 3 Таблицада

Avatar + аты + деңгээл/даражасы.
Hover → мини-профиль (акыркы иш-аракет, өлкө, жеңиш).

7. 4 оюнчу карта (PvP/Live)

Ири avatar (64-80 px).
Жашоо статусу: "Оюнда", "Тыныгууда", "Атаандашын күтөт".
Контурдун түсү = абалы ('border-color' var).

8) Жеткиликтүүлүк (A11y)

'alt' аты жана статусу менен: "Alex оюнчу Avatar - онлайн".
Статустар үчүн - тексттик дубликаттар, түсү гана эмес.
'aria-live =' polite 'статусу өзгөргөндө.
Контраст ≥ АА фон статусу үчүн.
Жаркыраган индикаторлорду колдонбоңуз.

9) Жүктөө шарттары жана каталар

Loading: боз тегерек/скелет кадр жок.
Error: fallback сөлөкөтү + "Avatar жүктөлгөн эмес".
Empty: аты-жөнү же системасы placeholder.

10) Купуялык

Колдонуучу presence (on/off) көрүнүшүн көзөмөлдөшү керек.
Параметрлер: "Онлайн статусун көрсөтүү "/" Акыркы ишин көрсөтүү".
Коноктордун аккаунттары үчүн presence жашыруун.
PvP - гана "жеткиликтүү/бош эмес", так убакыт көрсөтө алат.

11) Prezence API ишке ашыруу

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

• Каналга жазылуу '/presence/{ userId} '.
• socket аркылуу мезгил-мезгили менен ping/pong.
• TTL боюнча статусту автоматтык түрдө жаңыртуу.

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

12) iGaming өзгөчөлүктөрү

Live-оюндар: "Бөлмөдө № 12", "Дилерди күтөт", "Бөлүштүрүү жүрүп жатат" статусу.
Турнирлер: "Катышуучу" төш белгиси, аяктоо таймери.
Кооперативдик PvP: "Атаандаш табылды/активдүү эмес".
Коомдук тасмалар: мини-badge турнир же VIP деңгээл менен Avatar.
Коюмдар: "Коюм процессинде" (busy) → "Даяр" (online).

13) Метрика жана аткаруу

Presence latency: ≤ 1 UI жаңыртууга чейин сек.
Heartbeat success rate: ≥ 99%.
кардарга CPU жүктөө: ≤ 5% 1000 тактоо/мин.
TTL accuracy: колдонуучулар чыккандан кийин онлайн "илинип".
Memory leak tests: жазылбаган угуучуларды тазалоо.

14) Антипаттерндер

Avatar 'alt' же фон жок - "тешик" UI.
Статус үчүн гана түс (текст/tooltip жок).
Жаркыраган чекиттер/соккон шакектер - кыжырдантат.
Жаңылоого чек жок → WebSocket ашыкча жүктөө.
Көрсөтүү "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

• өлчөмдөрү жана радиустары туруктуу; аватар борборлоштурулган.
• Контраст ≥ AA; түс статусу жок.
• Folback баштапкы көрүп жана окуп.
• Tooltip же текст абалы бар.

Presence

• Статус окуядан кийин 1 сек ≤ жаңыланат.
• Offline → Online реконнект менен туура.
• Эч кандай жарылуулар жок (окуялардын дедупликациясы).
• Аракетсиздик эске алынат (idle> 5 мин).

Купуялык

• Көрүү параметрлери presence иштейт.
• Last seen мүнөт/саат тегеректелет.
• Эч кандай ашыкча ачыкка чыгаруу (мисалы, коюмдар).

Спектакль

• Heartbeat туруктуу, backoff менен WebSocket auto-reconnect.
• 1000 тактоо менен эс өчүрүү жок.
• TTFF ≤ 100ms көрсөтүү менен.

17) Дизайн системасында документтер

Компоненты: `Avatar`, `PresenceDot`, `UserCard`, `ActivityBadge`, `LiveStatus`.
Үлгүлөрү: "Avatar менен fallback", "Статус-пункт", "Реал-убакыт жаңыртуу presence", "Жеке режим".
Белгилер: өлчөмдөрү, түстөр, радиустар, TTL жаңыртуу, контраст.
Do/Don 't: текст жок түс (don' t), тегерек жана бир тизмедеги чарчы формалар (don 't), туруктуу өлчөмдөр жана контурлар (do).

Кыскача резюме

Аватарлар жана статустар - бул жөн гана декоративдик элементтер эмес, колдонуучулар менен системанын ортосундагы байланыш тили. Ырааттуу түстөр, окулган кол тамгалар, туура синхрондоштуруу жана купуялуулукту урматтоо iGaming 'де өзгөчө маанилүү болгон "жандуу" мейкиндик сезимин түзөт: аренада, турнирде, live-чатта же достор менен коюмдарда. Presence динамикалык жана адамгерчиликтүү Interface кылат - бирок маалымат жана унчукпай балансы менен гана.