UI Liderbord we missiýa kartoçkalary: iň gowy tejribe

1) Näme üçin bularyň hemmesi: UI maksatlary

Liderbord: "kimiň nirededigini" we näme üçin oýnamalydygyny derrew düşündirmek; iň ýakyn nyşany görkezmek (apa çenli + N bal).

Missiýalaryň kartoçkalary: uzyn düzgünleri 10-30 minut düşnükli "hereket birligine" öwürmek.

2) Liderbordyň maglumat iýerarhiýasy

Iň az sütün toplumy:

1. Hemişelik giňligi we uly belgisi bolan ýer (#).

2. Oýunçy (awatar/çarçuwa/titul, gysgaça nika) - → profil.

3. Äýnek/reýting metrikasy (SP/MMR/wakanyň äýnegi) - sag gyrada tekizlemek.

4. Baýrak/dereje zolagy (seýrek nyşan/baýrak diapazony).

5. Wagt/basgançak (live/qualifier/finals), gutarýan wagt.

Pattern:

Öz setiriňizi yşyklandyrmak (sticky row "maňa gaýdyp geliň").
"Nyşana çenli bosagasy": "TOP-100-e − 48 SP" kiçijik çarçuwasy.
Hiç kimiň ýelmemesi (birmeňzeş äýnek üçin "T-10").

3) Dolandyryş we nawigasiýa

Süzgüçler: liganyň/bölümiň, sebitiň, dostlaryň, "diňe meniň üpjün edijim".

Sortlama: ýeri boýunça (sessiz) , äýnek boýunça, giriş wagty boýunça, baýrak zolagy boýunça.

Paginasiýa vs tükeniksiz skroll:

desktop - paginasiýa + "özüňe", mobile - tükeniksiz skroll, ýöne "başyna/özüňe".
Jump-to Rank: derrew geçmek üçin derejäni girizmek meýdançasy (uly tagtalar üçin möhümdir).

4) Hakyky wagtda täzelenmeler ("dyrnaksyz")

Diff-täzelenmeler: Diňe hakyky üýtgän setirleri üýtgedýäris.

Setiriň hereket animasiýasy: 120-200 ms, easing-out; bökmän.

Anti-fliker: her 1-2 sekuntdan bir gezek täzelenýär (ýygy-ýygydan däl).

Optimistik täzelenmeler: ýerli äýnek goşýarys we "sinhronizasiýa" belleýäris....

5) Liderbordda dogruçyllyk we howpsuzlyk

Düzgünleriň düşündirişi: "Äýnek nähili hasaplanýar?" düwmesi sözbaşynyň gapdalynda.

Anti-zorluk: nigiň bir bölegini gizläň (opsiýa), zäherli at baradaky şikaýat - 1 basmak.

Şübheli hasaplaryň markeri: beýlekilerden gizlenen; oýunçy - "äýnegiňiz barlanýar".

Bölümleriň bölünişi: güýçlileriň başlangyç bilen garyşmazlygy üçin dürli ligalaryň nyşanlary.

6) Missiýa kartoçkasynyň anatomiýasy (one-glance design)

Başlyk (≤ 40-50 nyşan), missiýanyň görnüşiniň nyşany.

Gysga düşündiriş (näme etmeli, nirede, näçeräk).

Progress-bar sany/göterimi bilen + wagt bahasy (20-25 minut ≈).

Baýragyň çylşyrymlylygy (1-3 nokat) we seýrek bolmagy (reňk/gyra).

Baýraklar: bellikler/kosmetika (kiçi miniatýuralar), "pul" sözbaşysyz.

Möhleti: Taýmer ýumşak reňk bilen gutarýança (soňky 10% -de oranj/gyzyl).

CTA: "Başla "/" Dowam et "/" Al" - bir esasy düwme.

Secondary: "Wezipäni üýtget" (rugsat berilse), "Has giňişleýin maglumat" (düzgünleriň modaly).

7) Missiýa kartoçkalarynyň ýagdaýy

Locked: çal, "7-nji derejeden soň açylar "; CTA = "Näme gerek? ».

Awailable: görnüşi boýunça reňk; CTA = "Başla".

In-progress: progress-bar active, CTA = "Dowam et".

Completed: ýaşyl çek; CTA = "Almak" (1 sek ≤ täsir).

Expired: reňkli; CTA = "Gizle "/" N möwsüminde gaýtala ".

On hold (dogruçyllygy barlamak): "1-3 minutlyk netijäni barlamak" sary galam.

8) Wizual dil we elýeterlilik

Seýrek reňkler: Common (bitarap), Rare (gök), Epic (fiolet), Legendary (altyn), Mythic (älemgoşar aksenti).

Semantik reňkler: üstünlik/ösüş - ýaşyl, duýduryş - amber, möhlet - gyzyl.

Kontrast ≥ 4. 5:1, şriftler ≥ mobilde 14-16 px.

Möhüm zat diňe reňk bilen däl (nyşanlar/nusgalar).

Tygşytly VFX: 0. 6–1. 2 c, gözegçiliksiz.

Uýgunlaşma: tablisa → kartoçkalar (2 tablet sütüni, 1 telefon sütüni); Bellenen sözbaşylar.

9) Ýüklemek, boşluk we ýalňyşlyklar

Tablisalar we kartoçkalar üçin skeletler (3-5 setirler/taýlar).

Empty state: peýdaly tekst + "Başlangyç missiýany al".

Tor ýalňyşlyklary: düşnükli, "Gaýtala" bilen; oflayn - keş görkezýäris we "soňky täzelenme: 14:02" diýip belleýäris.

10) Öndürijilik

Sanlaşdyrma sanawlary (300 + setirler).

Sprayt/Lottie ýaly nyşanlar (zerurlyksyz SVG haýwanat bagy däl).

Süzgüçler/gözleg Debounce (300-500 ms).

Tagtalar/missiýalar üçin müşderi nagt pullary we ETag.

11) UI missiýalarynda dogruçyl mazmun we hyýanatçylyga garşy

Gysgaça "Bu nähili işleýär": marketing dumanlyklary bolmazdan, samsyk, pity-logika, kapa mümkinçiligi.

Anti-pharm pattern: "dürlüligi" belleýäris - üpjün ediji/stawka çalşylanda öňegidişlik has çalt gidýär.

"Missiýany üýtget" düwmesine Guldaunlar we mümkin bolanda maslahat beriň.

12) Hakykatdanam möhüm bolan metrikler

Missiýa kartoçkalarynyň CTR, Start Rate, Completion Rate, Median TTC.

Missiýa arkaly alnan kosmetika üçin Equip Rate/Duration.

Leaderboard Engagement: "özüňize", "profile geçiň", görünmek wagty.

VFX/habarnamalarda Complaint/Mute Rate.

Stickiness (DAU/MAU) we D7/D30/ýaryşlara gatnaşanlardan uplift.

Gini SP: oýnuň wagtyna meňzeşlikde öňegidişlik.

13) A/B-pikirler

1. Progress bar formaty: san + wizual vs diňe wizual.

2. Wagt çaklamasy: görkezmek/görkezmezlik; başlamaga täsiri.

3. CTA: bir uly vs iki sany deň düwme.

4. Adaty sortlamak: baýrak zolagy boýunça vs.

5. Yşyklandyryş möhleti: T-10% vs T-20% wagt.

6. Liderborddaky "özüňe": vs düwmesi hemişe berkidilen setir.

14) JSON shemalarynyň mysallary (mazmun → UI)

Missiýanyň kartoçkasy

json
{
"id": "m. s4. provider. diversity "", title ":" Üç üpjün edijini aç "", summary ":" 3 minutda 30 dürli üpjün edijiden çal "", 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 ":" Dowam etmek "," deeplink ":" app ://open/lobby? tab=providers"}
}

Liderbord setiri

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) Mikrokopiýa (gysga we düşnükli)

Missiýa başlandy - "Geliň! ≈ 20 minut galdy".

Öňe gidişligi höweslendirmek - "Baýraga çenli ýene 1 üpjün ediji".

Möhlet - "Wagtyň 10% -i, bir gezek girmäge wagtyňyz bar".

Dogruçyllygy barlamak - "Netijäni barlaýarys (3 minuda çenli) - sylag saklandy".

16) Goýberilmezden öň çek-sanawy

Tablisalar 320 px okalýar; "özüňe" we sticky header bar.
Missiýalaryň kartoçkalary "bir seredişde" düşnüklidir: maksat, wagt, baýrak, CTA.
Çeňňeksiz täzelenmeler; diff-patches we batch ýygylygy.
"Nädip işleýär" ekrany: äýnek formulalary/kaps/seýrek.
Ses gözegçiligi: VFX/min çäkleri, gijeki "asuda re modeim".
Elýeterlilik: kontrast, diňe reňk däl, klawiatura nawigasiýasy.
Hyýanatçylyga garşy: "Missiýany üýtget" kuldaunlary, üýtgeşikligiň yşyklandyrylyşy.
Metrikler we A/B-meýilnamasy açylýar; klikleriň we senkronizasiýalaryň ýazgylary.

Güýçli UI liderbord we missiýa kartoçkalary - bu derrew okalmak, ýumşak dinamika, dogruçyl aç-açanlyk we gözegçilik edilýän ses. Oýunçy üçin iň ýakyn maksat, düşnükli ösüş we arassa VFX beriň, täzelenmeleri durnukly saklaň we düzgünleri aýdyň saklaň. Şonda tagtalar ýaryşyň hereketlendirijisine, missiýa kartoçkalary bolsa gatnaşygy we saklamagy yzygiderli ösdürýän amatly "hereket birligine" öwrülýär.