Avatarlar, statüler ve mevcudiyet

1) UX'te avatarın rolü ve durumu

• Tanınmayı sağlamak (listelerde, sohbetlerde, tablolarda);
• Anında varlık geri bildirimi sağlayın (çevrimiçi/çevrimdışı);
• Arayüzün canlılık hissi yaratması (özellikle gerçek zamanlı oyunlarda, PvP, sohbetlerde);
• Oyuncular arasındaki etkileşimlerde güven ve katılımı artırın.

2) Tipoloji

3) Boyutlar ve şekil

32 px - minimum boyut (listeler, tablolar, sohbetler).
40-48 piksel - profiller, kartlar, gezinme paneli.
64-96 px - büyük profil blokları, akış odaları.
Şekil: Yuvarlak - standart, kare - markalar/operatörler için.
Yarıçap: Daire için '%50' veya yumuşak kare için '8-12 px'.

4) Yükleme ve geri dönüş

Desteklenen formatlar: JPEG, PNG, WebP, SVG (2-3 MB'a kadar).
Sunucuda kaynak ve optimizasyon (örneğin, 128, 256, 512 px).
Yokluğunda - ilk avatar: adın ilk harfleri, paletin arka planı.
Hata yükleniyor - kullanıcı simgeli sahte yer tutucu.

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

5) Renk paletleri ve arka plan

Arka planın isme göre otomatik olarak oluşturulması hash: kararlı ama benzersiz renk.
Arka plan ve baş harfleri arasında AA ≥ kontrast.
Karanlık bir tema için - %15-20 karartma.
Rastgele "zehirli" kombinasyonlardan kaçının; Paleti 6-10 tonla sınırlandırın.

6) Mevcudiyet göstergesi

6. 1 Temel durumlar

6. 2 Aktivite düzeyinde varlık

• "Oyunlar"
• "Bahis yapar"
• "Turnuvada"
• "Ara verildi"

6. 3 Teknik uygulama

WebSocket üzerinden her 30 saniyede bir 'kalp atışı' gönderiliyor.
Sinyal yoksa> 60 saniye> 'çevrimdışı'.
Etkin olduğunda (kaydırma, tıklama, bahis), 'çevrimiçi' durumu - güncellendi.
Depolama: TTL 120 sn (Redis/Realtime API).

7) Ekran desenleri

7. 1 Kullanıcı listelerinde

Avatar + durumu sağ alt köşede bir nokta ile (8-10 piksel).
Tooltip: "Online "/" Son giriş 5 dakika önce ".

7. 2 Sohbette

Avatar + nickname + mini-presence ('online/offline').
Son mesaj ve zaman.
Soket olayı 'user _ presence'ile senkronizasyon.

7. 3 Liderlik tablosunda

Avatar + adı + seviye/sıra.
Hover - mini profil (son etkinlik, ülke, zaferler).

7. 4 Oyuncu kartında (PvP/Canlı)

Büyük avatar (64-80 px).
Canlı durum: "Oyunda", "Durakta", "Rakibi bekliyor".
Kontur rengi = durum ('kenarlık rengi' var).

8) Kullanılabilirlik (A11y)

Adı ve durumu ile 'alt': "Alex Player Avatar - Online".
Durumlar için - metin kopyaları, sadece renk değil.
'aria-live =' kibar '' durum değiştiğinde.
Arka plana durum için AA ≥ kontrast.
Yanıp sönen ışıklar kullanmayın.

9) İndirme durumları ve hatalar

Yükleme: çerçevesiz gri daire/iskelet.
Hata: fallback simgesi + "Avatar yüklenmedi" istemi.
Boş: başlangıç veya sistem yer tutucu.

10) Gizlilik

Kullanıcı varlığı kontrol etmelidir (açık/kapalı).
Ayarlar: "Çevrimiçi durumu göster "/" Son etkinliği göster ".
Varlığı konuk hesapları için gizlidir.
PvP'de - kesin bir zaman olmadan yalnızca "kullanılabilir/meşgul" gösterebilirsiniz.

11) Varlık API'sinin uygulanması

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

• '/presence/{ userId} 'kanalına abone olun.
• Soket yoluyla periyodik ping/pong.
• TTL üzerinden otomatik durum güncellemesi.

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

12) iGaming'in özellikleri

Canlı oyunlar: durum "12 numaralı odada", "Dağıtıcıyı bekliyor", "Dağıtım devam ediyor".
Turnuvalar: Katılan rozet, bitiş zamanlayıcısı.
Kooperatif PvP: Rakip Bulunan/Aktif Olmayan Etkinlik.
Sosyal yayınlar: Mini rozetli turnuva veya VIP seviyesine sahip avatar.
Bahisler meşgul - online.

13) Metrikler ve performans

Durum gecikmesi: Olaydan UI güncellemesine 1 saniye ≤.
Kalp atışı başarı oranı: ≥ %99.
İstemcide CPU yükü: 1000 güncelleme/dakikada ≤ %5.
TTL doğruluğu: Kullanıcılar serbest bırakıldıktan sonra çevrimiçi "takılmazlar".
Bellek sızıntısı testleri: imzalanmamış dinleyicileri temizleme.

14) Antipatterns

'Alt' olmadan veya arka plan olmadan Avatar - UI'de "delik".
Durum için yalnızca renk (metin/araç ipucu yok).
Yanıp sönen noktalar/titreşen halkalar - can sıkıcı.
Güncelleştirmelerde sınır yok - WebSocket aşırı yüklemesi.
En yakın saniyeye "son görülme" görüntülenmesi (gizlilik ihlali).
Aynı ızgaradaki avatarların farklı formatları/oranları.

15) Tasarım sistemi belirteçleri (örnek)

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) KG kontrol listesi

KULLANICI ARAYÜZÜ

• Boyutlar ve yarıçaplar tutarlıdır; Avatar merkezli.
• AA ≥ kontrast; Saf renk durumu yoktur.
• Folback ilk görmek ve okumak.
• Araç ipucu veya metin durumu mevcuttur.

Varlığı

• Durum, olaydan sonra 1 saniye ≤ güncellenir.
• Çevrimdışı> Çevrimiçi yeniden bağlanma sırasında doğrudur.
• Ani artış yok (olay tekilleştirme).
• Boşta (boşta> 5 dk) kabul edilir.

Gizlilik

• Varlık ayarları çalışır.
• Son görülme dakikalara/saatlere yuvarlandı.
• Faaliyetin gereksiz yere açıklanması yoktur (örneğin, bahisler).

Performans

• Kalp atışı sabittir, WebSocket geri alma ile otomatik olarak yeniden bağlanır.
• 1000 güncelleme ile bellek sızıntısı yok.
• TTFF görüntülendiğinde 100 ms ≤.

17) Tasarım sistemindeki belgeler

Компоненты: 'Avatar', 'PresenceDot', 'UserCard', 'ActivityBadge', 'LiveStatus'.
Desenler: "Fallback ile Avatar", "Durum noktası", "Gerçek zamanlı güncelleme varlığı", "Özel mod".
Belirteçler: boyutlar, renkler, yarıçaplar, TTL güncellemeleri, kontrast.
Yapma/Yapma: metin olmadan renk (yapma), tek bir listede yuvarlak ve kare şekiller (yapma), kararlı boyutlar ve konturlar (yapma).

Kısa özet

Avatarlar ve statüler sadece dekoratif unsurlar değil, kullanıcılar ve sistem arasındaki iletişim dilidir. Tutarlı renkler, okunabilir başlıklar, doğru senkronizasyon ve gizliliğe saygı, özellikle iGaming'de önemli olan "yaşam" alanı duygusu yaratır: arenada, turnuvada, canlı sohbette veya arkadaşlarınızla bahis yaparken. Varlık, arayüzü dinamik ve insan yapar - ancak yalnızca bilgi içeriği ve sessizlik dengesi ile.