Torrent Gear

UI Liderbord və Kart Missiyaları: Ən Yaxşı Təcrübələr

1) Niyə bütün bunlar: UI məqsədləri

Liderbord: dərhal «kim haradadır» və niyə oynamaq lazımdır; ən yaxın hədəfi göstərmək (apa + N xal).

Missiya kartları: uzun qaydaları 10-30 dəqiqə ərzində başa düşülən «fəaliyyət vahidi» nə çevirmək.

2) Liderbordun informasiya iyerarxiyası

Minimum sütun dəsti:

1. Yer (#) sabit eni və böyük rəqəm ilə.

2. Oyunçu (avatar/çərçivə/titul, qısa ləqəb) - klikabelli → profil.

3. Eynəklər/reytinq metrikası (SP/MMR/event eynəkləri) - sağ kənara hizalayın.

4. Mükafat/rütbə zonası (nadir nişan/mükafat diapazonu).

5. Vaxt/mərhələ (live/qualifier/finals), sonun zamanlayıcısı.

Nümunələr:

Onun sətir işıqlandırılması (sticky row + «mənə qayıtmaq»).
«Hədəfə eşik»: «TOP-100-ə − 48 SP» kiçik çarx.
Heç kimin yapışdırılması (eyni xallar üçün «T-10»).

3) İdarəetmə və naviqasiya

Filtrlər: liqa/divizion, region, dostlar, «yalnız mənim provayderim».

Çeşidləmə: yerə görə (səssiz) , xal, giriş vaxtı, mükafat zonası.

Pagination vs sonsuz scroll:

desktop - pagination + «özünə», mobile - sonsuz skroll, lakin «başlanğıc/özünə».
Jump-to Rank: ani keçid üçün grade giriş sahəsi (böyük ölçülü lövhələr üçün vacibdir).

4) Real vaxt yeniləmələri («sürtünmə» olmadan)

Diff-updates: Biz həqiqətən hərəkət yalnız sətirlər dəyişir.

Animasiya hərəkət sətir: 120-200 ms, easing-out; heç bir atlama.

Anti-titrəmə: hər 1-2 saniyədə bir batch yeniləmələri (daha çox deyil).

Optimist yeniləmələr: yerli olaraq eynək əlavə edin və «sinxronizasiya» qeyd edin....

5) Liderbordda dürüstlük və təhlükəsizlik

Qaydaların izahı: «Eynək necə sayılır?» düyməsi başlığın yanında.

Anti-zorbalık: Nik hissəsini maskalamaq (opsiya), zəhərli ad şikayəti - 1 klik.

Şübhəli hesabların markeri: başqalarından gizli; oyunçu - «Sizin xal yoxlanılır».

Divizionların bölünməsi: güclü başlanğıc ilə qarışdırılmaması üçün vizual olaraq fərqli liqalar nişanları.

6) Missiya kartının anatomiyası (one-glance design)

Başlıq (≤ 40-50 simvol), missiya növü simvolu.

Qısa təsvir (nə etmək, harada, nə qədər).

Tərəqqi bar sayı/faiz + vaxt qiymətləndirilməsi (≈ 20-25 dəq).

Çətinlik (1-3 nöqtə) və nadir mükafat (rəng/üz).

Mükafatlar: «pul» alt mətni olmayan tokenlər/kosmetika (kiçik miniatürlər).

Müddət: yumşaq rəng ilə sona çatmadan əvvəl taymer (son 10% orange/qırmızı).

CTA: «Başlamaq »/« Davam etmək »/« Almaq» - bir əsas düymədir.

Secondary: «Missiyanı dəyişdirmək» (əgər icazə verilirsə), «Daha ətraflı» (qaydalar modalı).

7) Missiya kartlarının vəziyyəti

Locked: boz, «7 səviyyəsindən sonra açılacaq «ipucu ilə; CTA = "Nə lazımdır? ».

Available: rəng növü; CTA = «başlamaq».

In-progress: aktiv tərəqqi bar, CTA = «Davam et».

Completed: yaşıl çek; CTA = «Almaq» (effekt ≤ 1 san).

Expired: solğun; CTA = «Gizlətmək «/« N mövsümündə təkrarlamaq ».

On hold (dürüstlük yoxlaması): sarı plush «1-3 dəq nəticə yoxlama».

8) Vizual dil və əlçatanlıq

Nadir rənglər: Common (neytral), Rare (mavi), Epic (fiolet), Legendary (qızıl), Mythic (göy qurşağı vurğusu).

Semantik rənglər: uğur/tərəqqi - yaşıl, xəbərdarlıq - kəhrəba, son tarix - qırmızı.

Kontrast ≥ 4. 5:1, şriftlər ≥ 14-16 px mobil.

Hər şey vacibdir - yalnız rəng (nişanlar/nümunələr).

İqtisadi VFX: 0. 6–1. 2 c, üst-üstə düşmədən.

Adaptiv: cədvəl → kartlar (2 tablet sütun, 1 telefon sütun); sabit başlıqlar.

9) Yükləmə vəziyyətləri, boşluqlar və səhvlər

Cədvəllər və kartlar üçün skeletlər (3-5 sətir/tayt).

Empty state: faydalı mətn + «Başlanğıc missiyası almaq».

Şəbəkə səhvləri: başa düşülən, «Təkrarla» ilə; oflayn - cache göstərir və qeyd «son yeniləmə: 14:02».

10) Performans

Siyahıların virtuallaşdırılması (300 + sətir).

Sprite/Lottie kimi nişanlar (ehtiyac olmadan SVG zoopark deyil).

Debounce filters/axtarış (300-500 ms).

Lövhələr/missiyalar üçün müştəri caches və ETag.

11) Dürüst məzmun və anti-sui-istifadə UI missiyaları

Qısa «Bu necə işləyir»: şans, pity-məntiq, qapaq, marketinq dumanlıqları olmadan.

Anti-farm nümunəsi: «müxtəlifliyi» qeyd edirik - provayder/faiz dəyişikliyi zamanı irəliləyiş daha sürətlə gedir.

Culdowns «Missiyanı dəyişdirin» düyməsinə və yenidən mümkün olduqda ipucu.

12) Həqiqətən vacib olan metriklər

CTR missiya kartları, Start Rate, Completion Rate, Median TTC.

Missiya vasitəsilə alınan kosmetika üçün Equip Rate/Duration.

Leaderboard Engagement: «özünüzə», «profilə keçid» klikləri, görünmə vaxtı.

VFX/Bildirişlərdə Complaint/Mute Rate.

Stickiness (DAU/MAU) və D7/D30 uplift.

Gini SP: oyun zamanı oxşar tərəqqinin bərabərliyi.

13) A/B ideyaları

1. Tərəqqi bar formatı: ədədi + vizual vs yalnız vizual.

2. Vaxt qiymətləndirilməsi: göstərmək/göstərməmək; başlanğıc təsiri.

3. CTA-düzəliş: bir böyük vs iki bərabər düymələr.

4. Default çeşidləmə: mükafat zonasına görə vs.

5. Işıqlandırma müddəti: T-10% vs T-20% vaxt.

6. Lider paneldə «Öz»: vs düyməsi həmişə sabit sətirdir.

14) JSON sxemləri nümunələri (məzmun → UI)

Missiya kartı

json
{
"id": "m. s4. provider. diversity "", title ":" Üç provayder açın "", summary ":" 3 dəqiqə ərzində 30 müxtəlif provayderlə oynayın "", 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 «:» Davam «,» deeplink «:» app ://open/lobby? tab=providers"}
}

Liderbord xətti

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 (qısa və aydın)

Missiya başladı - "Gedək! ≈ 20 dəqiqə qalıb".

Tərəqqinin təşviqi - «Mükafata daha 1 provayder».

Son tarix - «Vaxtın 10% -i, bir girişdə vaxtınız olacaq».

Dürüstlük testi - «Nəticəni yoxlayırıq (3 dəqiqəyə qədər) - mükafat saxlanılır».

16) Buraxılışdan əvvəl çek siyahısı

Cədvəllər 320 px; «özünüzə» və sticky header var.
Missiya kartları «bir baxışdan» başa düşüləndir: məqsəd, vaxt, mükafat, CTA.
Flicker olmadan Real Time Updates; diff yamalar və batch tezliyi.
Ekran «Bu necə işləyir»: eynək formulları/cap/nadir.
Səs-küy nəzarəti: VFX/dəq limitləri, gecə «sakit rejimi».
Mövcudluğu: kontrast, yalnız rəng deyil, klaviatura naviqasiyası.
Anti-sui-istifadə: Kuldaunlar «Missiyanı dəyişdirin», dəyişkənliyin işıqlandırılması.
Metrik və A/B-plan qurulmuşdur; kliklərin və sinxronizasiyaların qeydləri.

Güclü UI lider bord və missiya kartları ani oxunma, yumşaq dinamika, dürüst şəffaflıq və nəzarət olunan səs-küydür. Oyunçuya ən yaxın hədəf, aydın tərəqqi və səliqəli VFX verin, yeniləmələri sabit saxlayın və qaydalar aydın olsun. Sonra lövhə rəqabətin mühərrikinə çevrilir və missiya kartları - sistemli şəkildə iştirak və saxlanmanı artıran rahat «fəaliyyət vahidi» olur.