Avatarlar, statuslar və presence

1) UX-də avatarın və statusun rolu

• tanınmanı təmin edir (siyahılarda, söhbətlərdə, cədvəllərdə);
• mövcudluğu haqqında ani rəy verir (online/offline);
• interfeysin canlılığı hissi yaradır (xüsusilə real vaxt oyunlarında, PvP, söhbətlərdə);
• oyunçular arasında qarşılıqlı əlaqədə inamı və iştirakını artırır.

2) Tipologiya

3) Ölçüsü və forması

32 px - minimum ölçü (siyahılar, cədvəllər, söhbətlər).
40-48 px - profillər, kartlar, naviqasiya paneli.
64-96 px - böyük profil blokları, axın otaqları.
Forma: dairəvi - standart, kvadrat - markalar/operatorlar üçün.
Radius: '50%' dairə üçün və ya '8-12 px' yumşaq kvadrat üçün.

4) Download və fallback

Dəstəklənən formatlar: JPEG, PNG, WebP, SVG (2-3 MB-ə qədər).
Serverdə Resize və optimizasiya (məsələn, 128, 256, 512 px).
Yox olduqda - avatarın baş hərfi: adın ilk hərfləri, palitradan fon.
Yükləmə səhvi → istifadəçi ikonası ilə saxta placeholder.

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

5) Rəng paletləri və fon

Adı hash fonunun avtomatik generasiyası: sabit, lakin unikal rəng.
Fon və baş hərflər arasında AA ≥ kontrastı.
Qaranlıq mövzu üçün - 15-20% qaranlıq.
Təsadüfi «zəhərli» birləşmələrdən çəkinin; palitranı məhdudlaşdırın (6-10 ton).

6) Presence göstərici

6. 1 Əsas statuslar

6. 2 Activity-level presence

• «Oyun»
• «Bahis edir»
• «Turnirdə»
• «Fasilədə»

6. 3 Texniki tətbiq

WebSocket vasitəsilə hər 30 saniyədə bir 'heartbeat' göndərin.
Siqnal olmadıqda> 60 san → 'offline'.
Aktiv olduqda (scroll, klik, bet) → 'online' statusunun yenilənməsi.
Saxlama: TTL 120 san (Redis/Realtime API).

7) Ekran nümunələri

7. 1 istifadəçi siyahısında

Avatar + status sağ alt küncdə nöqtə (8-10 px).
Tooltip: «Online »/« Son giriş 5 dəqiqə əvvəl».

7. 2 Canlı söhbət

Avatar + nik + mini-presence ('online/offline').
Son mesaj və vaxt.
socket event 'user _ presence' vasitəsilə sinxronizasiya.

7. 3 Liderlər cədvəlində

Avatar + ad + səviyyə/dərəcə.
Hover → mini profil (son fəaliyyət, ölkə, qələbə).

7. 4 Oyunçu kartında (PvP/Live)

Böyük avatar (64-80 px).
Canlı status: «Oyunda», «Fasilədə», «Rəqibi gözləyir».
Kontur rəngi = state ('border-color' var).

8) Mövcudluq (A11y)

'alt' adı və statusu ilə: «Alex oyunçusunun avatarı - şəbəkədə».
Statuslar üçün - mətn dublikatları, yalnız rəng deyil.
'aria-live =' polite 'status dəyişdikdə.
Fon statusu üçün AA ≥ kontrastı.
Yanıb-sönən göstəricilərdən istifadə etməyin.

9) Yükləmə vəziyyətləri və səhvlər

Yükləmə: boz dairə/çərçivəsiz skelet.
Error: fallback ikonası + «Avatar yüklü deyil» ipucu.
Empty: başlanğıc və ya sistem placeholder.

10) Gizlilik

İstifadəçi presence (on/off) görünüşünə nəzarət etməlidir.
Parametrlər: «Online statusu göstər »/« Son aktivliyi göstər».
Qonaq hesabları üçün presence gizlidir.
PvP - yalnız dəqiq vaxt olmadan «mövcud/məşğul» göstərilə bilər.

11) Prezence API-nin həyata keçirilməsi

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

• Kanal abunəsi '/presence/{ userId} '.
• socket vasitəsilə periodik ping/pong.
• TTL statusunun avtomatik yenilənməsi.

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

12) iGaming xüsusiyyətləri

Canlı oyunlar: «12 nömrəli otaqda», «Diler gözləyir», «Paylama davam edir» statusu.
Turnirlər: «Iştirak edir» nişanı, sonun taymeri.
Kooperativ PvP: Fəaliyyət «Rəqib tapıldı/aktiv deyil».
Sosial lentlər: mini-badge turniri və ya VIP səviyyəli avatar.
Bahislər: «Bahis prosesində» (busy) → «Hazır» (online).

13) Metrika və performans

Presence latency: Hadisədən UI yeniləməsinə qədər ≤ 1 san.
Heartbeat success rate: ≥ 99%.
Müştəridə CPU yükləmə: ≤ 5% ilə 1000 yeniləmə/dəq.
TTL accuracy: istifadəçilər çıxış sonra online «asmaq» deyil.
Memory leak tests: abunə olmayan dinləyicilərin təmizlənməsi.

14) Antipattern

Avatar 'alt' və ya fon olmadan - «dəlik» UI.
Yalnız status üçün rəng (mətn/tooltip olmadan).
Yanıb-sönən nöqtələr/pulsativ üzüklər - qıcıqlandırıcı.
Yeniləmə limiti yoxdur → WebSocket-in həddindən artıq yüklənməsi.
«Son seen» -in bir saniyəyə qədər dəqiqliklə göstərilməsi (məxfiliyin pozulması).
Bir şəbəkədə avatarların müxtəlif formatları/nisbətləri.

15) Dizayn sistemi tokenləri (nümunə)

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-çek siyahısı

UI

• Ölçülər və radiuslar sabitdir; avatar mərkəzləşdirilmişdir.
• Kontrast ≥ AA; sırf rəng statusu yoxdur.
• Folbek başlanğıc görür və oxuyur.
• Tooltip və ya mətn statusu mövcuddur.

Presence

• Status hadisədən sonra 1 saniyə ≤ yenilənir.
• Offline → Online rekonnektdə düzgündür.
• Heç bir sıçrayış (hadisələrin təkrarlanması) yoxdur.
• Hərəkətsizlik nəzərə alınır (idle> 5 dəq).

Gizlilik

• Görünürlük presence parametrləri işləyir.
• Last seen dəqiqə/saat qədər yuvarlaqlaşdırılır.
• Heç bir əlavə açıqlama fəaliyyət (məsələn, bahis).

Performans

• Heartbeat sabit, backoff ilə WebSocket auto-reconnect.
• 1000 yeniləmə ilə yaddaş sızması yoxdur.
• TTFF ≤ göstərildikdə 100 ms.

17) Dizayn sistemində sənədləşmə

Компоненты: `Avatar`, `PresenceDot`, `UserCard`, `ActivityBadge`, `LiveStatus`.
Nümunələr: «Avatar ilə fallback», «Status point», «Real-time yeniləmə presence», «Private mode».
Tokenlər: ölçülər, rənglər, radiuslar, TTL yeniləmələri, kontrast.
Do/Don 't: mətnsiz rəng (don 't), bir siyahıda dairəvi və kvadrat formalar (don 't), sabit ölçülər və kontur (do).

Qısa xülasə

Avatarlar və statuslar sadəcə dekorativ elementlər deyil, istifadəçilər və sistem arasında ünsiyyət dilidir. Ardıcıl rənglər, oxunan imzalar, düzgün sinxronizasiya və məxfiliyə hörmət, xüsusilə iGaming-də: arenada, turnirdə, canlı söhbətdə və ya dostlarınızla bahis edərkən «canlı» məkan hissi yaradır. Presence interfeysi dinamik və insani edir - ancaq məlumatlılıq və sükutun balansında.