الصور الرمزية والحالات والوجود

1) دور الصورة الرمزية والمركز في UX

• وضمان الاعتراف (في القوائم والمحادثات والجداول) ؛
• وتقديم ملاحظات فورية عن الحضور (عبر الإنترنت/خارج الإنترنت) ؛
• يخلق إحساسًا بحيوية الواجهة (خاصة في الألعاب في الوقت الفعلي، PvP، الدردشات) ؛
• زيادة الثقة والمشاركة في التفاعلات بين اللاعبين.

2) التصنيف

3) الأبعاد والشكل

32 px - الحد الأدنى للحجم (القوائم والجداول والمحادثات).
40-48 px - ملامح، بطاقات، لوحة ملاحة.
64-96 px - كتل الملفات الشخصية الكبيرة، غرف التيار.
الشكل: مستدير - قياسي، مربع - للعلامات التجارية/المشغلين.
نصف القطر: «50٪» للدائرة أو «8-12 px» للمربع الناعم.

4) التحميل والاحتياطي

التنسيقات المدعومة: JPEG، PNG، WebP، SVG (حتى 2-3 ميجابايت).
الموارد والتحسين على الخادم (على سبيل المثال، 128، 256، 512 px).
في حالة الغياب - الصورة الرمزية الأولية: الحروف الأولى من الاسم، والخلفية من اللوحة.
خطأ التحميل → عنصر زائف مع أيقونة المستخدم.

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/Realtime API).

7) أنماط العرض

7. 1 في قوائم المستخدمين

حالة Avatar + بنقطة في الزاوية اليمنى السفلية (8-10 px).
الأدوات: «Online «/» آخر تسجيل دخول منذ 5 دقائق ».

7. 2 في الدردشة

Avatar + nickname + mini-presentation ('online/offline').
الرسالة الأخيرة والوقت.
التزامن عبر حدث المقبس «المستخدم _ الوجود».

7. 3 على لوحة المتصدرين

أفاتار + اسم + مستوى/رتبة.
تحوم → الملف الشخصي المصغر (النشاط الأخير، البلد، الانتصارات).

7. 4 على بطاقة اللاعب (PvP/Live)

أفاتار كبير (64-80 px).
الحالة الحية: «في اللعبة»، «في وقفة»، «في انتظار الخصم».
لون السكتة الدماغية = الحالة (var 'border-color').

8) التوافر (A11y)

'alt' مع الاسم والحالة: «Alex Player Avatar - Online».
للحالات - النص مكرر، ليس فقط اللون.
«aria-live =» مهذب «» عندما يتغير الوضع.
التباين ≥ AA للحالة إلى الخلفية.
لا تستخدم الأضواء الساطعة.

9) تنزيل الحالات والأخطاء

التحميل: دائرة رمادية/هيكل عظمي بدون إطار.
خطأ: أيقونة احتياطية + مطالبة «Avatar not loaved».
فارغ: عنصر أولي أو نظام.

10) الخصوصية

يجب على المستخدم التحكم في الوجود (التشغيل/الإيقاف).
الإعدادات: «أظهر الحالة عبر الإنترنت «/» أظهر النشاط الأخير ».
الحضور مخفي لحسابات الضيوف.
في PvP - يمكنك فقط إظهار «متاح/مشغول» بدون وقت محدد.

11) تنفيذ وجود API

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

• اشترك في القناة '/الوجود/{ userId} '.
• بينج/بونج دوري عبر المقبس.
• تحديث تلقائي للحالة عبر TTL.

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

12) تفاصيل iGaming

الألعاب الحية: الحالة «في الغرفة رقم 12»، «في انتظار التاجر»، «التوزيع جاري».
البطولات: شارة المشاركة، مؤقت النهاية.
PvP التعاوني: تم العثور على الخصم/النشاط غير النشط.
الخلاصات الاجتماعية: صورة رمزية مع بطولة شارة صغيرة أو مستوى كبار الشخصيات.

الرهانات مشغولة → على الإنترنت

13) المقاييس والأداء

زمن الوجود: ≤ 1 الثانية من الحدث إلى تحديث واجهة المستخدم.
معدل نجاح نبضات القلب: 99٪ ≥.
تحميل وحدة المعالجة المركزية على العميل: ≤ 5٪ عند 1000 تحديث/دقيقة.
دقة TTL: لا «يتعلق» المستخدمون عبر الإنترنت بعد الإصدار.
اختبارات تسرب الذاكرة: مسح المستمعين غير الموقعين.

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) قائمة QA المرجعية

واجهة المستخدم

• الأبعاد والأنصاف متسقة ؛ تمركز الصورة الرمزية.
• التباين ≥ AA ؛ لا توجد حالات لون نقي.
• Folback انظر وقراءة أولية.
• حالة الأدوات أو النصوص موجودة.

الوجود

• يتم تحديث الحالة ≤ 1 ثانية بعد الحدث.
• → غير متصل بالإنترنت صحيح أثناء إعادة الاتصال.
• لا مسامير (تفريغ الحدث).
• يتم النظر في الخمول (الخمول> 5 دقائق).

الخصوصية

• تعمل إعدادات الوجود.
• شوهدت آخر مرة مقربة إلى دقائق/ساعات.
• لا يوجد كشف زائد عن النشاط (على سبيل المثال، الرهانات).

الأداء

• دقات القلب مستقرة، إعادة الاتصال التلقائي عبر WebSocket مع التراجع.
• لا تسرب ذاكرة مع 1000 تحديث.
• TTFF ≤ 100 مللي ثانية عند عرضه.

17) التوثيق في نظام التصميم

Компоненты: «Avatar»، «PresentationDot»، «UserCard'،» ActivityBadge «،» LiveStatus'.
الأنماط: "Avatar with redback"، "Status point'،" حضور التحديث في الوقت الفعلي "،" الوضع الخاص ".
الرموز: الأحجام، الألوان، نصف القطر، تحديثات TTL، التباين.
افعل/لا تفعل: اللون بدون نص (لا تفعل)، الأشكال المستديرة والمربعة في قائمة واحدة (لا تفعل)، الأبعاد المستقرة والضربات (تفعل).

موجز

الصور الرمزية والحالات ليست مجرد عناصر زخرفية، ولكن لغة الاتصال بين المستخدمين والنظام. تخلق الألوان المتسقة والتعليقات التوضيحية القابلة للقراءة والتزامن الصحيح واحترام الخصوصية إحساسًا بمساحة «المعيشة»، وهي مهمة بشكل خاص في iGaming: في الساحة أو في البطولة أو في الدردشة الحية أو عند المراهنة مع الأصدقاء. يجعل الوجود الواجهة ديناميكية وإنسانية - ولكن فقط مع توازن محتوى المعلومات والصمت.