آواتار ها، وضعیت ها و حضور

1) نقش نماد و وضعیت در UX

• اطمینان از شناخت (در لیست ها، چت ها، جداول) ؛
• ارائه بازخورد حضور فوری (آنلاین/آفلاین) ؛
• ایجاد حس زنده بودن رابط (به ویژه در بازی های زمان واقعی، PvP، چت) ؛
• افزایش اعتماد و تعامل در تعامل بین بازیکنان.

2) نوع شناسی

3) ابعاد و شکل

32 پیکسل - حداقل اندازه (لیست ها، جداول، چت).
40-48 پیکسل - پروفایل ها، کارت ها، پانل ناوبری.
64-96 پیکسل - بلوک مشخصات بزرگ، اتاق جریان.
شکل: گرد - استاندارد، مربع - برای مارک ها/اپراتورها.
شعاع: «50٪» برای دایره یا «8-12 پیکسل» برای مربع نرم.

4) بارگیری و برگشت

فرمت های پشتیبانی شده: JPEG، PNG، WebP، SVG (تا 2-3 مگابایت).
منبع و بهینه سازی در سرور (به عنوان مثال 128، 256، 512 پیکسل).
در غیاب - نماد اولیه: حروف اول نام، پس زمینه از پالت.
خطا در حال بارگذاری → نگهدارنده جعلی با نماد کاربر.

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

5) پالت رنگ و پس زمینه

تولید خودکار پس زمینه با نام هش: رنگ پایدار اما منحصر به فرد.
کنتراست ≥ AA بین پس زمینه و حروف اول.
برای یک موضوع تاریک - کم نور 15-20٪.
اجتناب از ترکیبات تصادفی «سمی» ؛ پالت را به 6-10 تن محدود کنید.

6) نشانه حضور

6. 1 وضعیت های اساسی

6. 2 حضور در سطح فعالیت

• «نمایشنامه»
• «شرط میبندم»
• «در مسابقه»
• «در وقفه»

6. 3 پیاده سازی فنی

ارسال «ضربان قلب» هر 30 ثانیه از طریق WebSocket.
اگر سیگنال وجود نداشته باشد> 60 ثانیه → 'آفلاین'.
هنگامی که فعال است (اسکرول، کلیک، شرط)، وضعیت «آنلاین» → به روز شد.
در ذخیره سازی: TTL 120 ثانیه (Redis/API در زمان واقعی).

7) الگوهای نمایش

7. 1 در لیست کاربران

وضعیت آواتار + با یک نقطه در گوشه سمت راست پایین (8-10 پیکسل).
نکته ابزار: «آنلاین «/» آخرین ورود 5 دقیقه پیش ».

7. 2 در چت

آخرین پیام و زمان

آواتار + نام مستعار + مینی حضور ('آنلاین/آفلاین').
هماهنگ سازی از طریق رویداد سوکت 'user _ presence'.

7. 3 در هیئت مدیره

آواتار + نام + سطح/رتبه.
Hover → مینی پروفایل (آخرین فعالیت، کشور، پیروزی).

7. 4 در کارت پخش (PvP/Live)

آواتار بزرگ (64-80 پیکسل).
وضعیت زنده: «در بازی»، «در مکث»، «در انتظار حریف».
Stroke color = state ('border-color' var).

8) در دسترس بودن (A11y)

'alt' with name and status: «الکس پلیر آواتار - آنلاین».
برای وضعیت - متن تکراری، نه تنها رنگ.
'aria-live = «مودب» هنگامی که وضعیت تغییر می کند.
کنتراست ≥ AA برای وضعیت به پس زمینه.
از چراغ های چشمک زن استفاده نکنید.

9) دانلود ایالات و خطاها

در حال بارگذاری: دایره خاکستری/اسکلت بدون قاب.
خطا: شمایل عقبگرد + اعلان «آواتار بارگذاری نشد».
خالی: نگهدارنده اولیه یا سیستم.

10) حریم خصوصی

کاربر باید حضور (روشن/خاموش) را کنترل کند.
تنظیمات: «نمایش وضعیت آنلاین «/» نمایش آخرین فعالیت ».
حضور برای حساب مهمان پنهان است.
در PvP - شما فقط می توانید «در دسترس/مشغول» را بدون زمان دقیق نشان دهید.

11) پیاده سازی API حضور

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

• مشترک شدن در کانال «/presence/{ userId} ».
• پینگ/پنگ دوره ای از طریق سوکت.
• به روز رسانی خودکار وضعیت از طریق TTL.

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

12) ویژگی های iGaming

بازی های زنده: وضعیت «در اتاق شماره 12»، «در انتظار فروشنده»، «توزیع در حال انجام است».
مسابقات: نشان شرکت کننده، تایمر پایان.
PvP تعاونی: حریف یافت/فعالیت غیر فعال.
خوراک های اجتماعی: نماد با مسابقات مینی نشان یا سطح VIP.
شرط بندی آنلاین شلوغ است.

13) معیارها و عملکرد

تاخیر حضور: ≤ 1 ثانیه از رویداد تا به روز رسانی UI.

میزان موفقیت ضربان قلب: ≥ 99٪

بار پردازنده در مشتری: ≤ 5٪ در 1000 به روز رسانی/دقیقه.
دقت TTL: کاربران پس از انتشار «آویزان» نمی شوند.

تست نشت حافظه: پاک کردن شنوندگان بدون علامت

14) ضد گلوله

آواتار بدون «alt» یا بدون پس زمینه - «سوراخ» در UI.
فقط رنگ برای وضعیت) بدون نکته متن/ابزار (.
نقاط چشمک زن/حلقه های پالس - آزار دهنده است.
بدون محدودیت در به روز رسانی → اضافه بار WebSocket.
نمایش «last seen» به نزدیکترین ثانیه (نقض حریم خصوصی).
فرمت های مختلف/نسبت آواتار در همان شبکه.

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

رابط کاربری

• ابعاد و شعاع سازگار هستند ؛ آواتار متمرکز شده است.
• کنتراست ≥ AA ؛ هیچ رنگ خالصی وجود ندارد.
• Folback اولیه را ببینید و بخوانید.
• راهنمای ابزار یا وضعیت متن وجود دارد.

حضور و غیاب

• وضعیت ≤ 1 ثانیه پس از رویداد به روز می شود.
• آفلاین → آنلاین در هنگام اتصال مجدد صحیح است.
• بدون سنبله (deduplication رویداد).
• بیکار (idle> 5 دقیقه) در نظر گرفته شده است.

حریم خصوصی

• تنظیمات حضور کار می کنند.
• آخرین دیده می شود گرد به دقیقه/ساعت.
• هیچ افشای اضافی فعالیت (به عنوان مثال، شرط) وجود دارد.

عملکرد

• ضربان قلب پایدار است، WebSocket خودکار اتصال مجدد با عقب نشینی.
• بدون نشت حافظه با 1000 به روز رسانی.
• TTFF ≤ 100 میلی ثانیه زمانی که نمایش داده می شود.

17) مستندسازی در سیستم طراحی

Компоненты: 'Avatar'، 'PresenceDot'، 'UserCard'، 'ActivityBadge'، 'LiveStatus'.
الگوها: «Avatar with fallback», «Status point», «Real-time update presence», «Private mode».
نشانه ها: اندازه، رنگ، شعاع، به روز رسانی TTL، کنتراست.
انجام/انجام ندهید: رنگ بدون متن (انجام ندهید)، شکل گرد و مربع در یک لیست (انجام ندهید)، ابعاد پایدار و سکته مغزی (انجام دهید).

خلاصه ای کوتاه

آواتارها و وضعیت ها فقط عناصر تزئینی نیستند، بلکه زبان ارتباط بین کاربران و سیستم هستند. رنگ های سازگار، زیرنویس های قابل خواندن، هماهنگ سازی صحیح و احترام به حریم خصوصی باعث ایجاد حس فضای «زندگی» می شود، به ویژه در iGaming مهم است: در عرصه، در مسابقات، در یک چت زنده و یا شرط بندی با دوستان. حضور باعث می شود رابط کاربری پویا و انسانی باشد - اما تنها با تعادل محتوای اطلاعات و سکوت.