אווטארים, סטטוסים ונוכחות

1) תפקיד האווטאר ומעמד ב ־ UX

• להבטיח הכרה (ברשימות, שיחות, שולחנות);
• לספק משוב נוכחות מיידי (מקוון/לא מקוון);
• יצירת תחושת פרנסה של הממשק (במיוחד במשחקים בזמן אמת, PvP, צ 'אטים);
• להגביר את האמון ואת ההתקשרות בין השחקנים.

2) טיפולוגיה

3) ממדים וצורה

32 גודל מינימלי (רשימות, שולחנות, שיחות).
40-48 px - פרופילים, כרטיסים, לוח ניווט.
64-96 px - בלוקים פרופיל גדולים, חדרי זרם.
צורה: עגולה - סטנדרטית, מרובעת - למותגים/מפעילים.
רדיוס: ”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 סטטוסים בסיסיים

6. 2 נוכחות ברמת פעילות

• ‏ ”מחזות” ‏
• ”עושה הימור”
• ‏ ”בטורניר” ‏
• ”בהפסקה”

6. 3 יישום טכני

שולח ”פעימות לב” כל 30 שניות דרך שקע רשת.
אם אין אות> 60 שניות = ”מנותק”.
כאשר פעיל (גלילה, קליק, הימור), מצב ה ”online” about עודכן.
באחסון: TTL 120 שניות (Redis/Realtime API).

7) תצוגה של תבניות

7. 1 ברשימות משתמש

מצב אווטאר + עם נקודה בפינה הימנית התחתונה (8-10 px).
טיפ: ”אונליין ”/” ההתחברות האחרונה לפני 5 דקות ”.

7. 2 בצ 'אט

אווטאר + כינוי + נוכחות מיני (”online/offline”).
הודעה אחרונה וזמן.
סינכרון באמצעות אירוע שקע ”user _ revence”.

7. 3 על לוח המנהיגים

אווטאר + שם + רמה/דרגה.
Hover # מיני-פרופיל (פעילות אחרונה, מדינה, ניצחונות).

7. 4 בכרטיס השחקן (PvP/Live)

אווטאר גדול (64-80 px).
סטטוס חי: ”במשחק”, ”בהפסקה”, ”מחכה ליריב”.
צבע שבץ = מצב ('גבול-צבע' var).

8) זמינות (A11y)

עם שם ומעמד: ”אלכס נגן אווטאר - אונליין”.
לסטטוסים - שכפול טקסט, לא רק צבע.
'Aria-live = "מנומס" "כאשר סטטוס משתנה.
ניגוד בין א "א לסטטוס לרקע.
אל תשתמש באורות מהבהבים.

9) הורד מצבים וטעויות

מעגל אפור/שלד ללא מסגרת.
שגיאה: סמל הגיבוי + ”אווטאר לא נטען” prempt.
ריק: ממלא מקום ראשוני או מערכת.

10) פרטיות

המשתמש חייב לשלוט בנוכחות (on/off).
הגדרות: ”הצג סטטוס מקוון ”/” הצג פעילות אחרונה ”.
הנוכחות מוסתרת עבור חשבונות אורחים.
ב ־ PvP - אתה יכול להראות רק ”זמין/עסוק”, ללא זמן מדויק.

11) יישום נוכחות API

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

• רשום לערוץ '/נוכחות/@ ID '.
• פינג/פונג תקופתי דרך שקע.
• עדכון מצב אוטומטי באמצעות TTL.

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

12) הפרטים של iGaming

משחקים חיים: סטטוס ”בחדר 12”, ”מחכה לסוחר”, ”ההפצה בעיצומה”.
טורנירים: תג השתתפות, טיימר סוף.
PvP שיתופי: יריב נמצא/פעילות לא פעילה.
הזנות חברתיות: אווטאר עם מיני טורניר תגים או רמת אח "מים.
ההימורים עמוסים.

13) מדדים וביצועים

נוכחות: צילום 1 שני מאירוע לעדכון UI.
קצב ההצלחה של פעימות הלב: 99%.
טעינת מעבד ללקוח: 5% ב 1000 עדכונים/דקות.
דיוק TTL: משתמשים לא ”לתלות” באינטרנט לאחר השחרור.
בדיקות דליפת זיכרון: ניקוי מאזינים לא חתומים.

14) תרופות אנטי ־ פטריות

אווטאר בלי ”אלט” או בלי רקע - ”חור” ב UI.
רק צבע לסטטוס (לא טקסט/טיפ).
נקודות מהבהבות/טבעות פועמות - מעצבן.
אין הגבלה על עדכונים * עומס יתר של שקעי רשת.
הצגת ”נראה לאחרונה” לשני הקרוב (הפרת פרטיות).
פורמטים/פרופורציות שונות של אווטארים באותה רשת.

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; אין סטטוסים בצבע טהור.

[ ] Folback ראשוני לראות ולקרוא.

[ ] סטטוס Tooltip או טקסט נוכחים.

נוכחות

[ ] המעמד מעודכן 1 שנייה לאחר האירוע.

[ ] Offline _ Online נכון במהלך חיבור מחדש.

[ ] אין קוצים (שכפול אירועים).

[ ] Idle (סרק> 5 דקות) נחשב.

פרטיות

[ ] הגדרות הנוכחות עובדות.

[ ] נראה לאחרונה מעוגל לדקות/שעות.

[ ] אין גילוי מיותר של פעילות (למשל, הימורים).

ביצועים

[ הלב ] יציב, שקע אינטרנט מתחבר מחדש עם גיבוי.

[ ] אין דליפות זיכרון עם 1000 עדכונים.

[ ] TTFF 100 ms כאשר מוצג.

17) תיעוד במערכת התכנון

”Avatar”, ”About Dot”, ”AberCard”, ”About Dage”, ”Lı Status”.
תבניות: ”אווטאר עם גיבוי”, ”סטטוס פוינט”, ”נוכחות עדכון בזמן אמת”, ”מצב פרטי”.
אסימונים: גדלים, צבעים, רדיוס, עדכוני TTL, ניגודיות.
Do/Don 't: צבע ללא טקסט (לא), צורות עגולות וריבועיות ברשימה אחת (לא), ממדים יציבים ושבץ (דו).

סיכום קצר

אווטרים ומדינות אינם רק אלמנטים דקורטיביים, אלא גם שפת התקשורת בין המשתמשים למערכת. צבעים עקביים, כיתובים ניתנים לקריאה, סינכרון נכון וכבוד לפרטיות יוצרים תחושה של מרחב "חי", חשוב במיוחד ב ־ iGaming: בזירה, בטורניר, בצ "אט חי או בהימורים עם חברים. הנוכחות הופכת את הממשק לדינמי ואנושי - אבל רק עם איזון של תוכן מידע ושתיקה.