UI liderbord va missiya kartochkalari: eng yaxshi amaliyotlar

1) Nima uchun bularning barchasi: UI maqsadlari

Liderbord: «Kim qayerda» va nima uchun keyingi o’yinni darhol tushuntirish; eng yaqin maqsadni ko’rsatish (apgacha + N ball).

Missiya kartochkalari: uzoq qoidalarni 10-30 daqiqaga tushunarli «harakat birligiga» aylantirish.

2) Liderbordning axborot ierarxiyasi

Minimal ustunlar toʻplami:

1. Kengligi barqaror va kattaroq (#).

2. Oʻyinchi (avatar/ramka/titul, qisqacha nik) - klikabelli → profil.

3. Ko’zoynak/reyting metrikasi (SP/MMR/ivent ko’zoynagi) - o’ng chekkasi bo’ylab tekislash.

4. Mukofot/darajali zona (kamyob belgisi/mukofot diapazoni).

5. Vaqt/bosqich (live/qualifier/finals), tugash taymeri.

Patternlar:

Oʻz satrini yoritish (sticky row + «menga qaytish»).
«Maqsadgacha bo’lgan chegara»: kichik plashka «− 48 SP to TOP-100».
Hech kimni yopishtirish (bir xil ochkolar uchun «T-10»).

3) Boshqaruv va navigatsiya

Filtrlar: liga/divizion, mintaqa, do’stlar, «faqat mening provayderim».

Saralash: joyning o’zida (sukut bo’yicha) , ko’zoynak bo’yicha, kirish vaqti bo’yicha, sovrin zonasi bo’yicha.

Paginatsiya vs cheksiz skroll:

desktop - paginatsiya + «o’ziga», mobile - cheksiz skroll, lekin «boshiga/o’ziga».
Jump-to Rank: bir zumda oʻtish uchun darajani kiritish maydoni (katta taxtalar uchun muhimdir).

4) Real vaqt yangilanishlari («to’xtash» dan tashqari)

Diff-yangilanishlar: biz faqat haqiqatan ham siljigan satrlarni o’zgartiramiz.

120-200 ms, easing-out; sakrashsiz.

Anti-fliker: batch-yangilanishlar har 1-2 soniyada (ko’p emas).

Optimistik yangilanishlar: mahalliy ochkolarni qo’shing va «sinxronizatsiya» ni belgilang....

5) Liderbordda halollik va xavfsizlik

Qoidalarning izohi: «Ko’zoynak qanday hisoblanadi?» tugmasi sarlavha yonida.

Anti-bulling: nik qismini niqoblash (variant), zaharli ism ustidan shikoyat - 1 klik.

Shubhali hisoblar markeri: boshqalardan yashirilgan; o’yinchiga - «sizning ochkolaringiz tekshirilmoqda».

Divizionlarni ajratish: kuchli ligalar boshlang’ich ligalar bilan aralashib ketmasligi uchun vizual ravishda turli liganing nishonlari.

6) Missiya kartochkasining anatomiyasi (one-glance design)

Sarlavha (40-50 belgidan ≤), missiya turi belgisi.

Qisqacha tavsif (nima qilish kerak, qayerda, qancha).

Progress-bar soni/foizi + vaqtni baholash (20-25 daqiqa ≈).

Mukofotning murakkabligi (1-3 nuqta) va kamdan-kam holati (rang/yuz).

Mukofotlar: tokenlar/kosmetika (kichik miniatyuralar), «pul» subteksisiz.

Muddati: yumshoq rangli taymer (oxirgi 10% da oranj/qizil).

CTA: «Boshlash »/« Davom etish »/« Olish» - bitta asosiy tugma.

Secondary: «Missiyani o’zgartirish» (agar ruxsat berilgan bo’lsa), «Batafsil ma’lumot» (qoidalar modalkasi).

7) Missiya kartochkalarining holati

Locked: kulrang, «7-darajadan keyin ochiladi «; CTA = "Nima kerak? ».

Available: turi boʻyicha rang; CTA = «Boshlash».

In-progress: progress-bar aktiv, CTA = «Davom etish».

Completed: yashil chek; CTA = «Olish» (effekt ≤ 1 sek).

Expired: och; CTA = «Yashirish «/« N mavsumida takrorlash ».

On hold (halollikni tekshirish): «1-3 daqiqa natijani tekshirish» sariq plashkasi.

8) Vizual til va foydalanish imkoniyati

Kamdan-kam uchraydigan ranglar: Common (neytral), Rare (ko’k), Epic (fiolet), Legendary (oltin), Mythic (kamalak aksenti).

Semantik ranglar: muvaffaqiyat/taraqqiyot - yashil, ogohlantirishlar - kehribar, muddatlar - qizil.

Kontrast ≥ 4. 5:1, mobildagi 14-16 px ≥ shriftlar.

Hamma narsa faqat rangda emas (piktogramma/pattern).

Tejamkor VFX: 0. 6–1. 2 s, nazoratni yopmasdan.

Moslashuv: jadval → kartochkalar (2 ta tablet ustuni, 1 ta telefon ustuni); biriktirilgan sarlavhalar.

9) Yuklash holatlari, bo’shliq va xatolar

Jadvallar va kartochkalar uchun skeletonlar (3-5 satr/tayl).

Empty state: foydali matn + «Boshlangʻich missiyani olish».

Tarmoq xatolari: tushunarli, «Takrorlash» bilan; oflayn - keshni koʻrsatamiz va «oxirgi yangilanish: 14:02» deb belgilaymiz.

10) Unumdorlik

Roʻyxatlarni virtuallashtirish (300 + satr).

Piktogrammalar sprayt/Lottie kabi (ehtiyojsiz SVG hayvonot bog’i emas).

Debounce filtrlar/qidiruv (300-500 ms).

Fayllar/missiyalar uchun mijoz keshlari va ETag.

11) UI missiyalaridagi halol kontent va buzilishlarga qarshi

Qisqacha «Bu qanday ishlaydi»: omon qolish imkoniyati, pity-mantiq, kapa, marketing tumanliklarisiz.

Anti-farm pattern: biz «xilma-xillik» ni ta’kidlaymiz - provayder/stavka almashtirilganda taraqqiyot tezroq boradi.

«Vazifani o’zgartirish» tugmasi bilan kuldaunlarni o’zgartirish mumkin bo’lganda.

12) Haqiqatan ham muhim bo’lgan metriklar

Missiya CTR kartochkalari, Start Rate, Completion Rate, Median TTC.

Missiya orqali olingan kosmetika uchun Equip Rate/Duration.

Leaderboard Engagement: «o’zingizga», «profilga o’ting», ko’rish vaqti.

VFX/xabarnoma uchun Complaint/Mute Rate.

Stickiness (DAU/MAU) va D7/D30 uplift.

Gini SP: o’yin vaqtiga o’xshash bo’lganda bir tekislikda.

13) A/B g’oyalari

1. Progress bar formati: son + vizual vs faqat vizual.

2. Vaqtni baholash: koʻrsatish/koʻrsatmaslik; boshlashga ta’sir ko’rsatish.

3. CTA: bitta katta vs ikkita teng tugmalar.

4. Andoza tartiblash: sovrinlar zonasi boʻyicha vs.

5. Muddat chegarasi: T-10% vs T-20% vaqt.

6. Peshqadamdagi «Oʻz uchun» tugmasi: vs tugmasi doimo biriktirilgan.

14) JSON sxemalariga misollar (kontent → UI)

Missiya kartochkasi

json
{
"id": "m. s4. provider. diversity "", title ":" Uchta provayderni oching "", summary ":" 3 turli provayderlardan 30 daqiqada o’ynang "", difficulty ":" medium "", est_time_min": 25, "progress": {"current": 2, "target": 3}, "rewards": {"tokens": 10, "cosmetic_drop": {" rarity ":" Rare "", p ": 0 1}}, "expires_at": "2025-10-26T18: 00: 00Z", "state": "in_progress", "cta": {"label": "Davom etish", "deeplink": "app ://open/lobby? tab=providers"}
}

Peshqadam satri

json
{
"rank": 124,  "user": {"id": "u_59211", "name": "SeaFox", "avatar_frame": "legendary. wave"},  "score": 18420,  "league": "Gold I",  "prize_band": "Top 100",  "delta_to_next": 47,  "is_me": false,  "stage": "qualifier",  "ends_at": "2025-10-24T21:00:00Z"
}

15) Mikrokopiya (qisqa va aniq)

Missiya boshlandi - "Ketaylik! ≈ 20 daqiqa qoldi".

Taraqqiyotni rag’batlantirish - «Mukofotga qadar yana 1 ta provayder».

Muddati - «Vaqtning 10 foizi, bir kirishda vaqt topasiz».

Halollikni tekshirish - «Natijani tekshiramiz (3 daqiqagacha) - mukofot saqlanib qoldi».

16) Chiqarishdan oldingi chek-varaq

Jadvallar 320 px; «o’ziga» va sticky header mavjud.
Missiya kartochkalari «bir qarashda» tushunarli: maqsad, vaqt, mukofot, CTA.
Haqiqiy yangilanishlar flikersiz; diff-patchlar va batch-chastota.
«Bu qanday ishlaydi» ekrani: ko’zoynak/qopqoq/kamyob formulalari.
Shovqin nazorati: VFX/min limitlari, tungi «sokin rejim».
Foydalanish imkoniyati: kontrast, nafaqat rang, balki klaviatura navigatsiyasi.
Zo’ravonlikka qarshi: «Missiyani o’zgartirish» kuldaunlari, o’zgaruvchanlikni yoritish.
Metrika va A/B-reja ishlab chiqilgan; klik va sinxronizatsiya loglari.

Kuchli UI peshqadam va missiya kartochkalari - bu bir zumda o’qish qobiliyati, yumshoq dinamika, halol shaffoflik va nazorat qilinadigan shovqin. O’yinchiga eng yaqin maqsad, aniq taraqqiyot va puxta VFX bering, yangilanishlarni barqaror va qoidalarni aniq tuting. Shunda doska musobaqaning dvigateliga aylanadi, missiya kartalari esa jalb qilish va ushlab turishni tizimli ravishda oshiradigan qulay «harakat birligiga» aylanadi.