Аватарлар, мәртебелер және presence

1) Аватардың рөлі және UX мәртебесі

• танымалдылықты қамтамасыз етеді (тізімдерде, чаттарда, кестелерде);
• қатысу туралы жедел кері байланыс береді (online/offline);
• интерфейстің жандылық сезімін тудырады (әсіресе real-time ойындарында, PvP, чаттарда);
• ойыншылар арасындағы өзара іс-қимыл кезінде сенім мен тартымдылықты арттырады.

2) Типология

3) Өлшемдері мен пішіні

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

4) Жүктеу және fallback

Қолдау көрсетілетін форматтар: 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) Түс палитрасы және фон

Хеш атауы бойынша фонның автогенерациясы: тұрақты, бірақ бірегей түс.
АА ≥ фон мен инициалдар арасындағы қарама-қарсылығы.
Қараңғы тақырып үшін - 15-20% қараңғылау.
Кездейсоқ «улы» тіркестерден аулақ болыңыз; палитраны шектеңіз (6-10 тонна).

6) Presence-индикация

6. 1 Базалық мәртебелер

6. 2 Activity-level presence

• «Ойнайды»
• «Ставка жасайды»
• «Турнирде»
• «Үзілісте»

6. 3 Техникалық іске асыру

WebSocket арқылы әрбір 30 секунд сайын 'heartbeat' жіберіледі.
Сигнал болмаған кезде> 60 сек → 'offline'.
Белсенділік кезінде (scroll, click, bet) → 'online' мәртебесін жаңарту.
Сақтау орнында: TTL 120 сек (Redis/Realtime API).

7) Бейнелеу үлгілері

7. 1 Пайдаланушылар тізімінде

Аватар + төменгі оң жақ бұрыштағы нүкте мәртебесі (8-10 px).
Tooltip: «Онлайн »/« Соңғы кіру 5 минут бұрын».

7. 2 сөйлесу

Аватар + ник + mini-presence ('online/offline').
Соңғы хабар және уақыт.
socket event 'user _ presence' арқылы үндестіру.

7. 3 Көшбасшылар кестесінде

Аватар + аты + деңгейі/дәрежесі.
Hover → шағын профиль (соңғы белсенділік, ел, жеңіс).

7. 4 Ойыншы карточкасында (PvP/Live)

Ірі аватар (64-80 px).
Тірі мәртебесі: «Ойында», «Үзілісте», «Қарсыласты күтеді».
Жиек түсі = күйі ('border-color' var).

8) Қол жетімділік (A11y)

'alt' атауы мен мәртебесімен: «Alex ойыншысының аватары - желіде».
Мәртебелер үшін - мәтіндік телнұсқалар, тек түсі ғана емес.
'aria-live =' polite 'күйі өзгергенде.
АА ≥ мәніне мәндік қарама-қайшылығы.
Жыпылықтайтын индикаторларды қолданбау.

9) Жүктеу жағдайлары және қателер

Loading: сұр шеңбер/қаңқасыз скелетон.
Error: fallback-белгішесі + «Аватар жүктелмеген» көмекшісі.
Empty: бастапқы немесе жүйелік placeholder.

10) Құпиялылық

Пайдаланушы presence (on/off) көрінуін бақылауы тиіс.
Параметрлер: «Онлайн күйін көрсету »/« Соңғы әрекетті көрсету».
Қонақ аккаунттары үшін presence жасырын.
PvP - тек «қол жетімді/бос емес» деп көрсетуге болады.

11) presence 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: «Қарсылас табылды/белсенді емес» белсенділігі.
Әлеуметтік таспалар: mini-badge турнирі немесе VIP деңгейі бар аватар.
Мөлшерлемелер: «Мөлшерлеме процесінде» (busy) → «Дайын» (online).

13) Метрика және спектакль

Presence latency: оқиғадан UI жаңартуға дейін 1 сек ≤.
Heartbeat success rate: ≥ 99%.
CPU жүктеу: 1000 жаңарту/мин 5% ≤.
TTL accuracy: пайдаланушылар шыққаннан кейін онлайн «ілінбейді».
Memory leak tests: Жазылмаған тыңдаушыларды тазалау.

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

'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; түс күйі жоқ.
• Фолбэк бастауын көріп, оқимыз.
• Tooltip немесе мәтін күйі бар.

Presence

• Жағдай оқиғадан кейін 1 сек ≤ жаңартылады.
• Offline → Online реконнект кезінде дұрыс.
• Жарылыстар жоқ (оқиғаларды дедупликациялау).
• Әрекетсіздік ескеріледі (idle> 5 мин).

Құпиялылық

• presence көріну параметрлері жұмыс істейді.
• Last seen минутына/сағатына дейін дөңгелектенеді.
• Белсенділіктің артық ашылуы жоқ (мысалы, мөлшерлемелер).

Көрініс

• Heartbeat тұрақты, WebSocket auto-reconnect backoff.
• 1000 жаңарту кезінде жад кемімейді.
• TTFF көрсету кезінде 100 мс ≤.

17) Дизайн-жүйедегі құжаттама

Компоненты: `Avatar`, `PresenceDot`, `UserCard`, `ActivityBadge`, `LiveStatus`.
Паттерндер: «Fallback бар аватар», «Нүкте мәртебесі», «Real-time presence жаңарту», «Жеке режим».
Белгілер: өлшемдері, түстері, радиустары, TTL жаңартулары, қарама-қарсылығы.
Do/Don 't: мәтінсіз түс (don' t), бір тізімдегі дөңгелек және шаршы пішіндер (don 't), тұрақты өлшемдер мен жиектер (do).

Қысқаша түйіндеме

Аватарлар мен мәртебелер - бұл жай ғана сәндік элементтер емес, пайдаланушылар мен жүйе арасындағы қарым-қатынас тілі. Дәйекті түстер, оқылатын қолтаңбалар, дұрыс үндестіру және құпиялылықты құрметтеу, әсіресе iGaming-те: аренада, турнирде, live-чатта немесе достармен ставкаларда маңызды «тірі» кеңістік сезімін қалыптастырады. Presence интерфейсті динамикалық және адамгершілік етеді - бірақ ақпарат пен тыныштық теңгерімінде ғана.