ავატარები, სტატუსები და პრესა

1) ავატარის როლი და სტატუსი UX- ში

• უზრუნველყოფს აღიარებას (სიებში, ჩატებში, ცხრილებში);
• ისინი აძლევენ მყისიერ უკუკავშირს ყოფნის შესახებ (ონლაინ/ოფლაინ);
• შექმენით ინტერფეისის ენერგიის შეგრძნება (განსაკუთრებით რეალურ დროში თამაშებში, PvP, ჩატი);
• ზრდის ნდობას და მონაწილეობას მოთამაშეებს შორის ურთიერთქმედებაში.

2) ტიპოლოგია

3) ზომები და ფორმა

32 px - მინიმალური ზომა (სიები, ცხრილები, ჩეთები).
40-48 px - პროფილები, ბარათები, სანავიგაციო პანელი.
64-96 px - დიდი პროფილის ბლოკები, ნაკადის ოთახები.
ფორმა: მრგვალი - სტანდარტი, კვადრატული - ბრენდების/ოპერატორებისთვის.
სხივი: '50%' წრისთვის ან '8-12 px "რბილი მოედნისთვის.

4) დატვირთვა და fallback

მხარდაჭერილი ფორმატები: JPEG, PNG, WebP, SVG (2-3 MB- მდე).
Resise და ოპტიმიზაცია სერვერზე (მაგალითად, 128, 256, 512 px).
არარსებობის შემთხვევაში - საწყისი ავატარი: სახელის პირველი ასოები, პალიტრის ფონი.
ყალბი placeholder- ის დატვირთვის შეცდომა მომხმარებლის ხატით.

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

5) ფერის პალიტრა და ფონი

Hesh Hone- ის ავტომატური წარმოება: სტაბილური, მაგრამ უნიკალური ფერი.
კონტრასტი არის AA ფონსა და ინიციალებს შორის.
ბნელი თემისთვის - დაბნელება 15-20%.
თავიდან აიცილეთ შემთხვევითი „შხამიანი“ კომბინაციები; შეზღუდეთ პალიტრა (6-10 ტონი).

6) პრეზიდენტის მითითება

6. 1 ძირითადი სტატუსები

6. 2 Activity-level presence

• „თამაშობს“
• „ფსონს აკეთებს“
• „ტურნირში“
• „შესვენების დროს“

6. 3 ტექნიკური განხორციელება

„heartbeat“ გაგზავნა ყოველ 30 წამში WebSocket- ის საშუალებით.
სიგნალის არარსებობის შემთხვევაში> 60 წამი 'ოფლაინ'.
აქტივობის დროს (croll, click, bet), სტატუსის განახლება 'online'.
საცავში: TTL 120 წამი (Redis/Realtime API).

7) ჩვენების ნიმუშები

7. 1 მომხმარებელთა სიებში

ავატარი + წერტილის სტატუსი ქვედა მარჯვენა კუთხეში (8-10 px).
Tooltip: „ონლაინ “/„ ბოლო შესასვლელი 5 წუთის წინ“.

7. 2 ჩატში

Avatar + მეტსახელი + mini-presence ('online/offline').
ბოლო შეტყობინება და დრო.
სინქრონიზაცია socket event 'user _ presence'.

7. 3 ლიდერთა ცხრილში

ავატარი + სახელი + დონე/წოდება.
Hover - მინი პროფილი (ბოლო აქტივობა, ქვეყანა, გამარჯვება).

7. 4 მოთამაშის ბარათში (PvP/Live)

დიდი ავატარი (64-80 px).
ცოცხალი სტატუსი: „თამაშში“, „პაუზაზე“, „მოწინააღმდეგე ელოდება“.
გარსაცმის ფერი = მდგომარეობა ('border-color' var).

8) წვდომა (A11y)

'alt' სახელით და სტატუსით: „Avatar მოთამაშე Alex - ქსელში“.
სტატუსებისთვის - ტექსტური დუბლიკატები, არა მხოლოდ ფერი.
'aria-live = „პოლიტა“ სტატუსის შეცვლისას.
კონტრასტი AA ფონზე სტატუსისთვის.
არ გამოიყენოთ მოციმციმე ინდიკატორები.

9) დატვირთვის მდგომარეობა და შეცდომები

Loading: ნაცრისფერი წრე/ჩონჩხი ჩარჩოს გარეშე.
ერორი: fallback ხატი + მინიშნება „ავატარი არ არის დატვირთული“.
Empty: წამოიწყო ან სისტემური placeholder.

10) კონფიდენციალურობა

მომხმარებელმა უნდა გააკონტროლოს ხილვადობა (on/off).
პარამეტრები: „აჩვენეთ ონლაინ სტატუსი “/„ აჩვენეთ ბოლო აქტივობა“.
Presence იმალება სტუმრების ანგარიშებისთვის.
PvP- ში შეგიძლიათ აჩვენოთ მხოლოდ „ხელმისაწვდომი/დაკავებული“, ზუსტი დროის გარეშე.

11) პრესა API- ს განხორციელება

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

• გამოწერა არხზე '/presence/{ userID} '.
• პერიოდული პინგ/პონგი socket- ის საშუალებით.
• TTL- ის სტატუსის ავტომატური განახლება.

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

12) iGaming სპეციფიკა

ცოცხალი თამაშები: სტატუსი „ოთახში 1212“, „დილერი ელოდება“, „განაწილება მოდის“.
ტურნირები: გასროლა „მონაწილეობს“, დასრულების ტაიმერი.
კოოპერატივი PvP: საქმიანობა „მოწინააღმდეგე იპოვნეს/არააქტიური“.
სოციალური ფირები: ავატარი ტურნირის mini-badge ან VIP დონეზე.
განაკვეთები: „განაკვეთის პროცესში“ (busy) - „მზად“ (ონლაინ).

13) მეტრიკა და სპექტაკლი

პრეზიდენტობა: ღონისძიებიდან 1 წამი UI- ს განახლებამდე.
Heartbeat success rate: ≥ 99%.

CPU load კლიენტზე: 5% ევრო 1000 განახლებაზე/წთ

TTL accuracy: მომხმარებლები არ „ეკიდებიან“ ინტერნეტით გამოსვლის შემდეგ.
Memory leak tests: დაწერილი მსმენელების გაწმენდა.

14) ანტიპატერები

ავატარი 'alt' ან ფონის გარეშე - „ხვრელი“ UI- ში.
მხოლოდ სტატუსის ფერი (ტექსტის გარეშე/tooltip).
მოციმციმე წერტილები/პულსირების რგოლები - გაღიზიანებულია.
განახლების ლიმიტის არარსებობა - WebSocket- ის გადატვირთვა.
რუქა „ბოლო თესლი“ სიზუსტით წამამდე (კონფიდენციალურობის დარღვევა).
სხვადასხვა ფორმატები/ავატარების პროპორციები ერთ ქსელში.

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 წამი.
• ოფლაინ - ონლაინ სწორად რეკონსტრუქციის დროს.
• არ ხდება ადიდებები (მოვლენების დედაპლაცია).
• მხედველობაში მიიღება უმოქმედობა (idle> 5 წუთი).

კონფიდენციალურობა

• ხილვადობის პარამეტრები მუშაობს.
• ბოლო თესლი მრგვალდება წუთამდე/საათამდე.
• არ არსებობს საქმიანობის დამატებითი გამჟღავნება (მაგალითად, განაკვეთები).

შესრულება

• Heartbeat სტაბილურია, WebSocket auto-reconnect backoff- ით.
• მეხსიერების გაჟონვის გარეშე 1000 განახლებაზე.
• TTFF-100 ms გამოსახვის დროს.

17) დოკუმენტაცია დიზაინის სისტემაში

Компоненты: `Avatar`, `PresenceDot`, `UserCard`, `ActivityBadge`, `LiveStatus`.
ნიმუშები: „ავატარი fallback“, „წერტილი სტატუსი“, „Real Time Presence განახლება“, „პირადი რეჟიმი“.
ნიშნები: ზომები, ფერები, რადიუსი, TTL განახლებები, კონტრასტი.
Do/Don 't: ფერი ტექსტის გარეშე (don' t), მრგვალი და კვადრატული ფორმები ერთ სიაში (don 't), სტაბილური ზომები და კონტურები (do).

მოკლე რეზიუმე

ავატარები და სტატუსები არა მხოლოდ დეკორატიული ელემენტებია, არამედ მომხმარებლებსა და სისტემას შორის კომუნიკაციის ენა. თანმიმდევრული ფერები, წაკითხული ხელმოწერები, სწორი სინქრონიზაცია და კონფიდენციალურობის პატივისცემა ქმნის „ცოცხალი“ სივრცის შეგრძნებას, განსაკუთრებით მნიშვნელოვანია iGaming- ში: ასპარეზზე, ტურნირში, პირდაპირ ჩეთში ან მეგობრებთან ფსონებით. პრესა ინტერფეისს დინამიურ და ჰუმანურ ხდის - მაგრამ მხოლოდ ინფორმატიკისა და დუმილის ბალანსით.