UI Leaderboard și Mission Carduri: Cele mai bune practici

1) De ce totul: goluri UI

Clasament: explicați instantaneu „cine este unde” și de ce să jucați în continuare; arată cea mai apropiată țintă (+ N puncte înainte de ap).

Carduri de misiune: transformați regulile lungi într-o „unitate de acțiune” ușor de înțeles timp de 10-30 de minute.

2) Leadership Board Information Ierarhia

Set minim de coloane:

1. Plasați (#) cu o lățime stabilă și un număr mare.

2. Player (avatar/cadru/titlu, poreclă scurtă) - clickable → profile.

3. Puncte/rating metric (SP/MMR/puncte de eveniment) - aliniați la dreapta.

4. Zona de premiere/rang (raritate icon/gama de atribuire).

5. Time/stage (live/qualifier/finals), cronometru final.

Modele:

Evidențiați linia (rând lipicios + „întoarce-te la mine”).
„Pragul la țintă”: mor mici „− 48 SP la TOP-100.”
Lipirea cravată („T-10” pentru puncte identice).

3) Control și navigare

Filtre: ligă/divizie, regiune, prieteni, „doar furnizorul meu”.

Sortați după locație (implicit), după puncte, după ora de intrare, după zona de premiere.

Paginare vs defilare infinită:

desktop - paginare + „pentru tine”, mobil - defilare fără sfârșit, dar cu „la început/pentru tine”.
Jump-to Rank: un câmp de intrare rang pentru tranziția instantanee (important pentru plăcile de scară).

4) Actualizări live (fără spasme)

Actualizări Diff: schimbăm doar liniile care s-au mutat.

Animația mișcării liniei: 120-200 ms, ușurare; fără sărituri.

Anti-flicker: actualizări de lot la fiecare 1-2 secunde (nu mai des).

Actualizări optimiste: adăugați puncte la nivel local și marcați „sincronizare”....

5) Integritate și siguranță în clasamentul UI

Explicarea regulilor: butonul „Cum sunt numărate ochelarii?” lângă titlu.

Anti-bullying: masca parte a poreclei (opțiune), plângere cu privire la un nume toxic - 1 clic.

Marker de conturi suspecte: ascunse de alții; jucător - „punctele sunt verificate”.

Separarea diviziei: vizual diferite insigne liga, astfel încât cele puternice nu se amestecă cu începători.

6) Anatomia unui card de misiune (design cu o singură privire)

Titlu (≤ 40-50 caractere), pictogramă tip misiune.

Scurtă descriere (ce să fac, unde, pentru cât de mult).

Bara de progres cu numărul/procentul + estimarea timpului (≈ 20-25 min).

Dificultate (1-3 puncte) și raritate a recompensei (culoare/față).

Recompense: jetoane/cosmetice (miniaturi mici), fără subtext „monetar”.

Termen: cronometru până la expirarea cu culoare moale (portocaliu/roșu în ultimii 10%).

CTA: „Start „/” Continuați „/” Pick up ”- un buton principal.

Secundar: „Misiune de schimbare” (dacă este permis), „Mai mult” (reguli modale).

7) Stări de card de misiune

Blocat: gri, cu promptul „se va deschide după nivelul 7 „; CTA = "De ce ai nevoie? ».

Disponibil: culoare după tip; CTA = „Start”.

În curs de desfășurare: bara de progres activă, CTA = „Continuă”.

Completat: verificare verde; CTA = „Pick up” (efect ≤ 1 sec).

Expirat: palid; CTA = "Ascunde "/" Repetă în sezonul N.

În așteptare (verificare onestitate): galben mor „rezultatul verifica 1-3 minute”.

8) Limbaj vizual și accesibilitate

Culori rare: Comun (neutru), Rar (albastru), Epic (violet), Legendar (aur), Mythic (accent curcubeu).

Culori semantice: succes/progres - verde, avertismente - chihlimbar, termene limită - roșu.

Contrast ≥ 4. 5:1, fonturi ≥ 14-16 px pe mobil.

Tot ceea ce este important nu este numai în culoare (icoane/modele).

Thrifty VFX: 0. 6–1. 2 c, fără suprapunere de control.

Anavar: tabel → carduri (tabletă 2 coloane, telefon 1 coloană); anteturi fixe.

9) Stări de încărcare, goluri și erori

Schelete pentru mese și cărți (3-5 linii/dale).

Stare goală: text util + „Obțineți o misiune de lansare”.

Erori de rețea: ușor de înțeles, cu „Repetați”; offline - arată memoria cache și marca „ultima actualizare: 14:02”.

10) Performanță

Lista virtualizare (300 + rânduri).

Icoane ca sprite/Lottie (nu o grădină zoologică SVG inutil).

Debounce filtre/căutare (300-500 ms).

Cache-uri client și ETag pentru placi/misiuni.

11) conținut onest și anti-abuz în misiunile UI

Scurt „Cum funcționează”: picătură șansă, logica milă, gurmanzi, fără nebuloase de marketing.

Model anti-fermă: notați „diversitate” - progresul este mai rapid atunci când schimbați furnizorul/pariul.

Se răcește pe butonul „Schimbare misiune” și un indiciu atunci când puteți din nou.

12) Măsurători care contează cu adevărat

Carduri de misiune CTR, Rata de pornire, Rata de finalizare, TTC mediană.

Equip Rate/Durata pentru produse cosmetice derivate din misiune.

Leaderboard Engagement: clicuri pe „pentru tine”, „du-te la profil”, timpul de vizibilitate.

Plângere/Rata mută pe VFX/notificări.

Stickiness (DA/MAU) și D7/D30 ridicare pentru cei implicați în misiuni/turnee.

Gini by SP: planeitatea progresului la momente similare de joc.

13) Idei A/B

1. Formatul barei de progres: doar numeric + vizual vs vizual.

2. Evaluarea timpului: arată/nu arată; impactul la început.

3. Aspect CTA: unul mare vs două butoane egale.

4. Sortare implicită: după loc vs după zona de premiere.

5. Pragul limită de iluminare din spate: T-10% vs T-20% din timp.

6. „Pentru tine” în placa de lider: butonul vs este întotdeauna un șir fix.

14) Exemple de scheme JSON (conținut → UI)

Card de misiune

json
{
„id':” m. s4. furnizor. diversitate „,” titlu „:” Deschideți trei furnizori „,” rezumat „:” Jucați cu 3 furnizori diferiți în 30 de minute „,” dificultate „:” mediu „,” est_time_min": 25 „,” progres „: {” curent „: 2,” țintă „: 3},” recompense „: {” tokens „: 10”, cosmetic_drop": {„raritate”: „Rare”, „p”: 0. 1}, „expires_at": „2025-10-26T18:” 00Z,: „stare”: „in_progress,” „cta”: {„etichetă”: „Continuați”, „deeplink”: „app ://open/lobby? tab = furnizori"}
}

Rândul clasamentului

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

15) Microcopie (scurtă și clară)

Misiunea a început - „Să mergem! ≈ 20 de minute rămase”.

Încurajarea progresului - „Încă 1 furnizor înainte de atribuire”.

Termen limită - „10% din timp, veți avea timp într-un singur du-te”.

Verificarea sincerității - „Verificăm rezultatul (până la 3 minute) - recompensa este salvată”.

16) Lista de verificare înainte de lansare

Tabelele pot fi citite la 320 px; există „pentru tine” și antet lipicios.
Cardurile de misiune sunt clare „dintr-o privire”: obiectiv, timp, recompensă, CTA.
Actualizare în timp real fără pâlpâire; plasturi diff și frecvența butch.
Cum funcţionează ecran: point/cap/raritate formule.
Controlul zgomotului: limite VFX/min, modul liniștit de noapte.
Accesibilitate: contrast, nu numai culoare, navigare tastatură.
Anti-abuz: se răcește „Schimbare misiune”, subliniind variabilitatea.
Metrica și planul A/B stabilite; faceți clic și sincronizați jurnalele.

O interfață puternică a clasamentului și a cardurilor de misiune este lizibilitatea instantanee, dinamica moale, transparența onestă și zgomotul controlat. Oferiți jucătorului cel mai apropiat obiectiv, progresul ușor de înțeles și VFX îngrijit, păstrați actualizările stabile și regulile clare. Apoi, placa devine motorul competiției, iar cărțile de misiune devin o „unitate de acțiune” convenabilă, care crește sistematic angajamentul și retenția.