Awatary, statusy i obecność

1) Rola awatara i status w UX

• zapewnić uznanie (w wykazach, czatach, tabelach);
• zapewnia natychmiastowe informacje zwrotne o obecności (online/offline);
• stworzyć poczucie żywotności interfejsu (zwłaszcza w grach w czasie rzeczywistym, PvP, czaty);
• zwiększenie zaufania i zaangażowania w interakcje między graczami.

2) Typologia

3) Wymiary i kształt

32 px - minimalny rozmiar (listy, tabele, czaty).
40-48 px - profile, karty, panel nawigacyjny.
64-96 px - duże bloki profilowe, pokoje strumieniowe.
Kształt: okrągły - standardowy, kwadratowy - dla marek/operatorów.
Promień: '50%' dla okręgu lub '8-12 px' dla kwadratu miękkiego.

4) Załadunek i odpływ

Obsługiwane formaty: JPEG, PNG, WebP, SVG (do 2-3 MB).
Zasoby i optymalizacja na serwerze (na przykład 128, 256, 512 px).
W przypadku nieobecności - początkowy awatar: pierwsze litery nazwy, tło z palety.
Błąd wczytywania → fałszywy znacznik z ikoną użytkownika.

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

5) Palety kolorów i tło

Automatyczne generowanie tła po nazwie hash: stabilny, ale unikalny kolor.
Kontrast ≥ AA pomiędzy tłem a inicjałami.
Dla ciemnego tematu - ściemnianie 15-20%.
Unikać przypadkowych kombinacji „trujących”; ograniczyć paletę do 6-10 ton.

6) Wskazanie obecności

6. 1 Podstawowe statusy

6. 2 Obecność na poziomie aktywności

• „Gry”
• „Robi zakład”
• „W turnieju”
• „Na przerwie”

6. 3 Realizacja techniczna

Wysyłanie „bicia serca” co 30 sekund przez WebSocket.
Jeśli nie ma sygnału> 60 sekund → 'offline'.
Kiedy aktywny (przewiń, kliknij, zakład), status 'online' → zaktualizowany.
W magazynie: TTL 120 sec (Redis/Realtime API).

7) Wzory wyświetlania

7. 1 Na listach użytkowników

Avatar + status z kropką w prawym dolnym rogu (8-10 px).
Wskazówka: „Online „/” Ostatnie logowanie 5 min temu ”.

7. 2 W czacie

Avatar + przydomek + mini-obecność („online/offline”).
Ostatnia wiadomość i czas.
Synchronizacja za pomocą zdarzenia „user _ presence”.

7. 3 Na tablicy liderów

Avatar + nazwa + poziom/ranga.
Hover → mini-profil (ostatnia aktywność, kraj, zwycięstwa).

7. 4 Na karcie gracza (PvP/Live)

Duży awatar (64-80 px).
Status na żywo: „W grze”, „Na przerwie”, „Czekając na przeciwnika”.
Kolor udaru = stan ('border-color' var).

8) Dostępność (A11y)

'alt' z nazwą i statusem:' Alex Player Avatar - Online '.
Dla statusów - duplikaty tekstu, nie tylko kolor.
"aria-live =" grzeczny ", gdy zmienia się status.
Kontrast ≥ AA dla statusu w tle.
Nie używać świateł migających.

9) Pobierz stany i błędy

Załadunek: szary okrąg/szkielet bez ramki.
Błąd: ikona fallback + „Avatar nie załadowany” wiersz.
Pusty: początkowy lub systemowy odtwórca.

10) Prywatność

Użytkownik musi kontrolować obecność (włączony/wyłączony).
Ustawienia: „Pokaż status online „/” Pokaż ostatnią aktywność ”.
Obecność jest ukryta dla kont gości.
W PvP - można pokazać tylko „dostępne/zajęte”, bez dokładnego czasu.

11) Wdrożenie API obecności

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

• Subskrybuj kanał '/presence/{ اId} '.
• Okresowy ping/pong przez gniazdo.
• Automatyczna aktualizacja stanu za pośrednictwem TTL.

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

12) Specyfika iGaming

Gry na żywo: status „W pokoju nr 12”, „Czeka na dealera”, „Dystrybucja jest w toku”.
Turnieje: Odznaka uczestnicząca, timer końcowy.
Spółdzielnia PvP: znaleziony przeciwnik/nieaktywna aktywność.
Kanały społeczne: avatar z mini-odznaką turnieju lub poziomu VIP.
Zakłady są zajęte → online.

13) Metryka i wydajność

Opóźnienie obecności: ≤ 1 sekunda od aktualizacji zdarzenia do interfejsu użytkownika.
Wskaźnik skuteczności bicia serca: ≥ 99%.
Obciążenie procesora klienta: ≤ 5% przy 1000 aktualizacjach/min.
Dokładność TTL: użytkownicy nie „powiesić” online po zwolnieniu.
Testy wycieku pamięci: wyczyszczenie słuchaczy bez podpisu.

14) Antypattery

Avatar bez 'alt' lub bez tła - „dziura” w interfejsie użytkownika.
Tylko kolor dla stanu (brak tekstu/końcówki narzędzi).
Migające kropki/pulsujące pierścienie - irytujące.
Brak limitu aktualizacji → Przeciążenie WebSocket.
Wyświetlanie „ostatni widziany” do najbliższej sekundy (naruszenie prywatności).
Różne formaty/proporcje awatarów w tej samej sieci.

15) Żetony systemu projektowania (przykład)

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) Lista kontrolna QA

INTERFEJS UŻYTKOWNIKA

• Wymiary i promienie są spójne; avatar centered.
• Kontrast ≥ AA; nie ma czystych statusów kolorów.
• Folback początkowy zobacz i przeczytaj.
• Obecny jest podpowiedź lub status tekstu.

Obecność

• Status jest aktualizowany ≤ 1 sekundy po zdarzeniu.
• Offline → Online jest poprawny podczas ponownego połączenia.
• Brak kolców (deduplikacja zdarzeń).
• Rozważa się bezczynność (bezczynność> 5 min).

Prywatność

• Ustawienia obecności działają.
• Ostatnio widziany w zaokrągleniu do minut/godziny.
• Nie ma zbędnego ujawniania działalności (na przykład zakłady).

Wydajność

• Bicie serca jest stabilne, WebSocket automatycznie ponownie połączyć z backoff.
• Brak wycieków pamięci z 1000 aktualizacjami.
• TTFF ≤ 100 ms po wyświetleniu.

17) Dokumentacja w systemie projektowym

Кобонента: „Avatar”, „Na”, „Na Kartę”, „Na Odznakę”, „Na”.
Wzory: „Avatar z awaryjnym”, „Punkt statusu”, „Obecność aktualizacji w czasie rzeczywistym”, „Tryb prywatny”.
Żetony: rozmiary, kolory, promienie, aktualizacje TTL, kontrast.
Nie rób/Nie: kolor bez tekstu (nie), kształty okrągłe i kwadratowe w jednej liście (nie), stabilne wymiary i ruchy (do).

Krótkie podsumowanie

Awatary i statusy to nie tylko elementy dekoracyjne, ale język komunikacji między użytkownikami a systemem. Spójne kolory, czytelne napisy, prawidłowa synchronizacja i szacunek dla prywatności tworzą poczucie „życia” w przestrzeni, szczególnie ważne w iGaming: na arenie, w turnieju, na czacie na żywo lub podczas zakładów z przyjaciółmi. Obecność sprawia, że interfejs jest dynamiczny i ludzki - ale tylko z równowagą treści informacji i ciszy.