تورنت جير

UI Leaderboard وبطاقات المهمة: أفضل الممارسات

1) لماذا كل شيء: أهداف واجهة المستخدم

Leaderboard: اشرح على الفور «من هو المكان» ولماذا تلعب بعد ذلك ؛ أظهر أقرب هدف (+ N نقطة قبل ap).

بطاقات المهمة: تحويل القواعد الطويلة إلى «وحدة عمل» مفهومة لمدة 10-30 دقيقة.

2) التسلسل الهرمي لمعلومات مجلس القيادة

المجموعة الدنيا من الأعمدة:

1. ضع (#) بعرض ثابت وعدد كبير.

2. Player (avatar/frame/title, short nickname) - clickable → profile.

3. النقاط/مقياس التصنيف (SP/MMR/نقاط الحدث) - تتماشى مع اليمين.

4. منطقة الجائزة/الرتبة (نطاق أيقونة/جائزة نادرة).

5. الوقت/المرحلة (مباشر/تصفيات/نهائيات)، مؤقت النهاية.

الأنماط:

سلط الضوء على خطك (صف لزج + «عد إلي»).
«عتبة الهدف»: موت صغير «− 48 SP إلى TOP-100.»
لصق التعادل («T-10» للنقاط المتطابقة).

3) المراقبة والملاحة

المرشحات: الدوري/القسم، المنطقة، الأصدقاء، «فقط مقدم الخدمة الخاص بي».

الفرز حسب الموقع (الافتراضي)، حسب النقاط، حسب وقت الدخول، حسب منطقة الجائزة.

التثبيت مقابل التمرير اللامتناهي:

سطح المكتب - pagination + «لنفسك»، جوال - تمرير لا نهاية له، ولكن مع «البداية/لنفسك».
القفز إلى الترتيب: مجال إدخال الرتبة للانتقال الفوري (مهم للوحات الحجم).

4) تحديثات مباشرة (بدون ارتعاش)

تحديثات Diff: نغير الخطوط التي تحركت بالفعل فقط.

رسوم متحركة لحركة الخط: 120-200 مللي ثانية، تخفيف ؛ لا قفزات.

مضاد الوميض: يتم تحديث الدفعة كل 1-2 ثانية (ليس في كثير من الأحيان).

تحديثات متفائلة: إضافة نقاط محليًا ووضع علامة على «التزامن»....

5) النزاهة والسلامة في UI leaderboard

شرح القواعد: زر «كيف يتم احتساب النظارات ؟» بجانب العنوان.

مكافحة التنمر: إخفاء جزء من اللقب (خيار)، شكوى بشأن اسم سام - 1 نقرة.

علامة الحسابات المشبوهة: مخفية عن الآخرين ؛ لاعب - «يتم التحقق من نقاطك».

فصل التقسيم: شارات دوري مختلفة بصريًا بحيث لا تختلط الشارات القوية مع المبتدئين.

6) تشريح بطاقة المهمة (تصميم لمحة واحدة)

العنوان (≤ 40-50 حرفًا)، أيقونة نوع المهمة.

وصف قصير (ماذا تفعل، أين، كم).

شريط التقدم مع الرقم/النسبة المئوية + تقدير الوقت (≈ 20-25 دقيقة).

صعوبة (1-3 نقاط) وندرة المكافأة (اللون/الوجه).

المكافآت: رموز/مستحضرات تجميل (منمنمات صغيرة)، بدون نص فرعي «نقدي».

المصطلح: مؤقت حتى انتهاء الصلاحية بلون ناعم (برتقالي/أحمر في آخر 10٪).

CTA: «ابدأ «/» استمر «/» اختر »- زر رئيسي واحد.

ثانوي: «مهمة التغيير» (إذا سمح)، «المزيد» (قواعد الوسائط).

7) بطاقات البعثة

مقفل: رمادي، مع «سيفتح بعد المستوى 7 «؛ CTA = "ماذا تحتاج ؟ ».

متوفر: اللون حسب النوع ؛ CTA = «ابدأ».

قيد التنفيذ: progress bar active، CTA = «تابع».

اكتمل: فحص أخضر ؛ CTA = «التقاط» (التأثير ≤ 1 ثانية).

انتهت صلاحيتها: شاحبة ؛ CTA = «Hide «/» Repeat in Season N«.

في الانتظار (فحص الصدق): الموت الأصفر «تحقق من النتيجة 1-3 دقائق».

8) اللغة البصرية وإمكانية الوصول

الألوان النادرة: شائعة (محايدة)، نادرة (زرقاء)، ملحمية (بنفسجية)، أسطورية (ذهبية)، أسطورية (لهجة قوس قزح).

الألوان الدلالية: النجاح/التقدم - الأخضر، التحذيرات - الكهرمان، المواعيد النهائية - الأحمر.

التباين ≥ 4. 5:1، خطوط ≥ 14-16 px على الهاتف المحمول.

كل شيء مهم ليس فقط في اللون (أيقونات/أنماط).

Thrifty VFX: 0. 6–1. 2 ج، دون تداخل في التحكم.

أنافار: بطاقات → الجدول (2 عمود لوحي، هاتف عمود 1) ؛ الرؤوس الثابتة.

9) حالات التحميل والفراغات والأخطاء

هياكل عظمية للجداول والبطاقات (3-5 خطوط/بلاط).

الحالة الفارغة: نص مفيد + «احصل على مهمة إطلاق».

أخطاء الشبكة: مفهومة، مع «تكرار» ؛ غير متصل - أظهر المخبأ ووضع علامة «آخر تحديث: 14:02».

10) الأداء

افتراضية القائمة (300 + صفوف).

أيقونات مثل sprites/Lottie (ليست حديقة حيوانات SVG دون داع).

مرشحات/بحث Debounce (300-500 ms).

مخابئ العملاء و ETag للمجالس/البعثات.

11) محتوى صادق ومكافحة إساءة الاستخدام في مهام واجهة المستخدم

قصير «كيف يعمل»: فرصة الإسقاط، ومنطق الشفقة، وواقي الفم، وعدم وجود سدم تسويقية.

النمط المناهض للمزرعة: لاحظ «التنوع» - يكون التقدم أسرع عند تغيير المزود/الرهان.

تهدئة على زر «Change Mission» وتلميح عندما يمكنك ذلك مرة أخرى.

12) المقاييس المهمة حقًا

بطاقات مهمة CTR، معدل البداية، معدل الإنجاز، متوسط TTC.

معدل التجهيز/مدة مستحضرات التجميل المشتقة من البعثة.

مشاركة لوحة المتصدرين: انقر فوق «لنفسك»، «انتقل إلى الملف الشخصي»، وقت الرؤية.

معدل الشكوى/البكم على VFX/الإخطارات.

الثبات (DAU/MAU) والارتقاء D7/D30 لأولئك المشاركين في البعثات/البطولات.

جيني من SP: تكافؤ التقدم في أوقات اللعب المماثلة.

13) أفكار A/B

1. تنسيق شريط التقدم: رقمي + بصري مقابل بصري فقط.

2. تقييم الوقت: عرض/عدم بيان ؛ في البداية.

3. تخطيط CTA: زر واحد كبير مقابل زرين متساويين.

4. الفرز الافتراضي: حسب المكان مقابل منطقة الجائزة.

5. عتبة الإضاءة الخلفية للموعد النهائي: T-10٪ مقابل T-20٪ من الوقت.

6. «لنفسك» في لوحة المتصدر: الزر مقابل هو دائمًا سلسلة ثابتة.

14) أمثلة على مخططات JSON (المحتوى → واجهة المستخدم)

بطاقة المهمة

جسون
{
"id": "m. s4. المزود. التنوع، «العنوان»: «فتح ثلاثة موفرين»، «ملخص»: «العب مع 3 موفرين مختلفين في 30 دقيقة»، «صعوبة»: «متوسط»، «est_time_min": 25»، «تقدم»: {«حالي»: 2، «هدف»: 3}، «مكافآت»: {«رموز»: 10 «،» cosmetic_drop": «نادرة»: «نادرة»، «p»: 0 1}}، «expires_at":» 2025-10-26T18: 00: «00Z,» حالة «:» in_progress, «cta»: {«label':» تابع «،» deeplink «:» تطبيق ://مفتوح/لوبي ؟ علامة التبويب = مقدمي الخدمات"}
}

صف لوحة المتصدرين

جسون
{
"rank": 124, "user": {"id": "u_59211," "name": "SeaFox", "avatar_frame":" legendary ". الموجة «}،» النتيجة «: 18420،» الدوري «:» Gold I «،» : «Top 100»، « : 47»، « : خطأ»، «مرحلة»: «مؤهل»، « :»
}

15) المجهرية (قصيرة وواضحة)

بدأت المهمة - «لنذهب! ≈ 20 دقيقة متبقية».

تشجيع التقدم - «1 مزود أكثر قبل الجائزة».

الموعد النهائي - «10٪ من الوقت، سيكون لديك وقت دفعة واحدة».

فحص الصدق - «نتحقق من النتيجة (حتى 3 دقائق) - يتم حفظ المكافأة».

16) القائمة المرجعية السابقة للإفراج

الجداول القابلة للقراءة في 320 px ؛ هناك «لنفسك» ورأس لزج.
بطاقات المهمة واضحة «في لمحة»: الهدف، الوقت، المكافأة، CTA.
تحديث في الوقت الفعلي بدون وميض ؛ رقع diff وتردد الجزار.
شاشة How It Working: صيغ النقطة/الغطاء/النادرة.
التحكم في الضوضاء: حدود VFX/دقيقة، وضع الهدوء الليلي.
إمكانية الوصول: التباين، ليس فقط اللون، التنقل على لوحة المفاتيح.
مكافحة الإساءة: تهدئة «مهمة التغيير»، وتسليط الضوء على التباين.
وضع خطة القياسات والخطة ألف/باء ؛ نقر ومزامنة السجلات.

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