अवतार, स्टेटस और उपस्थिति

1) यूएक्स में अवतार और स्थिति की भूमिका

अवतार व्यक्तित्व का दृश्य लंगर है, और स्थिति इसकी गतिविधि का संदर्भ है। साथ में वे:

मान्यता सुनिश्चित करना (सूची, चैट, टेबल में);
तत्काल उपस्थिति प्रतिक्रिया प्रदान करें (ऑनलाइन/ऑफ़लाइन);
इंटरफ़ेस की आजीविका की भावना पैदा करें (विशेष रूप से वास्तविक समय के खेल, PvP, चैट में);
खिलाड़ियों के बीच बातचीत में विश्वास और जुड़ा

2) टाइपोलॉजी

तत्व	मुलाकात	उदाहरण प्रदर्शित करें
अवतार	दृश्य उपयोक्ता आईडी	गोल या वर्ग थंबनेल 32-64 px
उपस्थिति	वर्तमान कनेक्शन स्थिति	ग्रीन/ग्रे डॉट, ऑनलाइन, निष्क्रिय
गतिविधि	मौजूदा क्रिया	"प्ले बुक ऑफ़ रा", "इन द टूर्नामेंट", "स्टेक्स"
मनपसंद स्थिति	मनपसंद हस्ताक्षर	"परेशान मत करो", "एक विराम पर"

3) आयाम और आकार

32 px - न्यूनतम आकार (सूची, तालिकाएं, चैट)।

40-48 px - प्रोफाइल, कार्ड, नेविगेशन पैनल।

64-96 पीएक्स - बड़े प्रोफ़ाइल ब्लॉक, स्ट्रीम रूम।

आकार: ब्रांड/ऑपरेटरों के लिए गोल - मानक, वर्ग -।

त्रिज्या: सर्कल के लिए '50%' या नरम वर्ग के लिए '8-12 px'।

4) लोडिंग और फॉलबैक

समर्थित प्रारूप: JPEG, PNG, WebP, SVG (2-3 MB तक)।

सर्वर पर संसाधन और अनुकूलन (उदाहरण के लिए, 128, 256, 512 px)।

अनुपस्थिति में - प्रारंभिक अवतार: नाम के पहले अक्षर, पैलेट से पृष्ठभूमि।

उपयोक्ता प्रतीक के साथ → नकली प्लेसहोल्डर लोड करने में त्रुटि।

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

5) रंग पट्टियाँ और पृष्ठभूमि

नाम हैश द्वारा पृष्ठभूमि की ऑटो-पीढ़ी: स्थिर लेकिन अद्वितीय रंग।

कंट्रास्ट - पृष्ठभूमि और प्रारंभिक के बीच एए।

एक अंधेरे विषय के लिए - 15-20% को कम करना।

यादृच्छिक "जहरीले" संयोजनों से बचें; पैलेट को 6-10 टन तक सीमित करें।

6) उपस्थिति संकेत

6. 1 बेसिक स्टेटस

स्थिति	रंग	पाठ	व्यवहार
ऑनलाइन	ग्रीन ('# 00C853')	ऑनलाइन	वेबसॉकेट से कनेक्टेड
आइडल	येलो ('# FFD600')	यह निष्क्रिय है	कोई क्रिया> 5 मिनट
व्यस्त/डीएनडी	रेड ('# D32F2F')	परेशान न करें	इन-गेम या अक्षम सूचनाएँ
ऑफ़ लाइन	ग्रे ('# 9E9E9E')	ऑफ़ लाइन	कोई कनेक्शन> 2 मिनट

6. 2 गतिविधि-स्तरीय उपस्थिति

इसके अतिरिक्त, आप कार्रवाई दिखा सकते हैं:

"खेलता है"
"एक शर्त बनाता है"
"टूर्नामेंट में"
"हाईटस पर"

6. 3 तकनीकी कार्यान्वयन

वेबसॉकेट के माध्यम से हर 30 सेकंड में 'दिल की धड़ कन' भेजना।

जब सक्रिय (स्क्रॉल, क्लिक, शर्त), 'ऑनलाइन' स्थिति - अद्यतन।

यदि कोई संकेत नहीं है> 60 सेकंड → 'ऑफ़लाइन'.

भंडारण में: TTL 120 सेकंड (Redis/Realtime API)।

7) प्रदर्शन पैटर्न

7. 1 उपयोगकर्ता सूची में

निचले दाएं कोने (8-10 पीएक्स) में एक डॉट के साथ अवतार + स्थिति।

टूलटिप: "ऑनलाइन "/" लास्ट लॉगिन 5 मिनट पहले "।

7. 2 चैट में

अवतार + उपनाम + मिनी-उपस्थिति ('ऑनलाइन/ऑफ़लाइन')।

अंतिम संदेश और समय।

सॉकेट इवेंट 'उपयोगकर्ता उपस्थिति' के माध्यम से तुल्यकालन।

7. 3 लीडरबोर्ड पर

अवतार + नाम + स्तर/रैंक।

होवर → मिनी-प्रोफाइल (अंतिम गतिविधि, देश, जीत)।

7. 4 प्लेयर कार्ड पर (PvP/Live)

बड़ा अवतार (64-80 px)।

लाइव स्थिति: "खेल में", "विराम पर", "प्रतिद्वंद्वी के लिए प्रतीक्षा"।

स्ट्रोक रंग = स्थिति ('सीमा-रंग' var)।

8) उपलब्धता (A11y)

'अल्ट' विथ नाम और स्थिति: "एलेक्स प्लेयर अवतार - ऑनलाइन।"

स्थिति - पाठ डुप्लिकेट के लिए, केवल रंग ही नहीं।

स्थिति बदलने पर 'एरिया-लाइव = "विनम्र"।

पृष्ठभूमि की स्थिति के लिए कंट्रास्ट ≥ AA।

चमकती रोशनी का उपयोग न करें।

9) राज्यों और त्रुटियों को डाउनलोड करें

लोडिंग: ग्रे सर्कल/कंकाल बिना फ्रेम के।

त्रुटि: फॉलबैक प्रतीक + "अवतार लोड नहीं किया गया" प्रांप्ट.

रिक्त: प्रारंभिक या तंत्र प्लेसहोल्डर

10) गोपनीयता

उपयोक्ता को उपस्थिति (ऑन/ऑफ) को नियंत्रित करना होगा।

सेटिंग्स: "ऑनलाइन स्थिति दिखाएँ "/" अंतिम गतिविधि दिखाएँ। "

अतिथि खातों के लिए उपस्थिति छिपी हुई है।

PvP में - आप बिना सटीक समय के केवल "उपलब्ध/व्यस्त" दिखा सकते हैं।

11) उपस्थिति एपीआई का कार्यान्वयन

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

सर्वर:

चैनल '/उपस्थिति/{ UsureId} 'की सदस्यता लें।
सॉकेट के माध्यम से आवधिक पिंग/पोंग।
TTL के माध्यम से स्वचालित स्थिति अद्यतन।

ग्राहक:

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

12) iGaming की बारीकियाँ

लाइव गेम्स: स्थिति "इन रूम नंबर 12", "वेटिंग फॉर द डीलर", "वितरण चल रहा है।"

टूर्नामेंट: भाग लेना बैज, अंत टाइमर।

सहकारी PvP: प्रतिद्वंद्वी मिला/निष्क्रिय गतिविधि।

सामाजिक फ़ीड: मिनी-बैज टूर्नामेंट या वीआईपी स्तर के साथ अवतार।

दांव व्यस्त हैं - ऑनलाइन।

13) मेट्रिक्स और प्रदर्शन

उपस्थिति विलंबता: घटना से UI अपडेट तक ≤ 1 सेकंड।

दिल की धड़ कन सफलता दर: ≥ 99%।

CPU क्लाइंट पर लोड: 1000 अपडेट/मिनट पर ≤ 5%।

टीटीएल सटीकता: उपयोगकर्ता रिलीज के बाद ऑनलाइन "हैंग" नहीं करते हैं।

मेमोरी रिसाव परीक्षण: अहस्ताक्षरित श्रोताओं को साफ करना

14) एंटीपैटर्न

'ऑल्ट' के बिना या बिना पृष्ठभूमि के अवतार - यूआई में "छेद"।

सिर्फ स्थिति के लिए रंग (कोई पाठ/औज़ार्टिप नहीं)।

चमकते डॉट्स/स्पंदन के छल्ले - कष्टप्रद।

अद्यतन पर कोई सीमा नहीं → 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) क्यूए चेकलिस्ट

यूआई

आयाम और रेडी सुसंगत हैं; अवतार केंद्रित।
कंट्रास्ट ≥ एए; कोई शुद्ध रंग स्टेटस नहीं हैं।
फोलबैक प्रारंभिक देखें और पढ़ें।
औज़ार या पाठ स्थिति मौजूद है।

उपस्थिति

स्थिति को घटना के बाद ≤ 1 सेकंड अपडेट किया गया है।
ऑफ़ लाइन - ऑनलाइन पुनर्संयोजन के दौरान सही है।
कोई स्पाइक्स नहीं (घटना deduplication)।
आइडल (निष्क्रिय> 5 मिनट) माना जाता है।

गोपनीयता

उपस्थिति सेटिंग कार्य।
अंतिम बार मिनटों/घंटों तक गोल देखा गया।
गतिविधि का कोई अतिरंजित प्रकटीकरण नहीं है (उदाहरण के लिए, दांव)।

निष्पादन

हार्टबीट स्थिर है, वेबसॉकेट ऑटो-बैकऑफ के साथ फिर से जुड़ ता है।
1000 अपडेट के साथ कोई मेमोरी लीक नहीं।
TTFF ≤ 100 ms जब प्रदर्शित किया जाता है।

17) डिजाइन प्रणाली में प्रलेखन

: 'अवतार', ' डॉट', 'यूज़रकार्ड', ' बैज', 'लाइवस्टेटस'।

पैटर्न: "अवतार विथ फॉलबैक", "स्टेटस पॉइंट", "रियल-टाइम अपडेट उपस्थिति", "प्राइवेट मोड"।

टोकन: आकार, रंग, रेडी, टीटीएल अपडेट, कंट्रास्ट।

करें/मत करें: पाठ के बिना रंग (मत करो), एक सूची में गोल और वर्ग आकार (मत), स्थिर आयाम और स्ट्रोक (डू)।

संक्षिप्त सारांश

अवतार और स्टेटस केवल सजावटी तत्व नहीं हैं, बल्कि उपयोगकर्ताओं और प्रणाली के बीच संचार की भाषा है। लगातार रंग, पढ़ ने योग्य कैप्शन, सही तुल्यकालन और गोपनीयता के लिए सम्मान "रहने" की जगह की भावना पैदा करते हैं, विशेष रूप से आईगेमिंग में महत्वपूर्ण: अखाड़े में, एक टूर्नामेंट में, एक लाइव चैट में या दोस्तों के साथ। उपस्थिति इंटरफ़ेस को गतिशील और मानव बनाती है - लेकिन केवल सूचना सामग्री और मौन के संतुलन के साथ।