Bieg torrent

UI Leaderboard i karty misyjne: najlepsze praktyki

1) Dlaczego to wszystko: cele UI

Liderboard: natychmiast wyjaśnić „kto jest gdzie” i dlaczego grać dalej; pokaż najbliższy cel (+ N punktów przed ap).

Karty misyjne: przekształcić długie zasady w zrozumiałą „jednostkę działania” przez 10-30 minut.

2) Hierarchia Informacji Rady Przywództwa

Minimalny zestaw kolumn:

1. Miejsce (#) o stabilnej szerokości i dużej liczbie.

2. Gracz (avatar/frame/title, krótki przydomek) - klikalny → profil.

3. Punkty/metryka ratingu (SP/MMR/punkty zdarzeń) - wyrównanie w prawo.

4. Strefa nagród/rangi (ikona rzadkości/zakres nagród).

5. Czas/etap (live/qualifier/finals), zegar końcowy.

Wzory:

Podkreśl swoją linię (lepki rząd + „wróć do mnie”).
„Próg do celu”: mała śmierć „− 48 SP do TOP-100.”
Klejenie wiązania („T-10” dla identycznych punktów).

3) Kontrola i nawigacja

Filtry: liga/podział, region, przyjaciele, „tylko mój dostawca”.

Sortuj według lokalizacji (domyślnie), punktów, czasu wejścia, strefy nagród.

Paginacja vs nieskończone przewijanie:

pulpit - paginacja + „do siebie”, mobilny - niekończące się przewijanie, ale z „do początku/do siebie”.
Jump-to Rank: pole wejściowe szeregu do natychmiastowego przejścia (ważne dla tablic skali).

4) Aktualizacje na żywo (bez drgawek)

Aktualizacje diff: zmieniamy tylko linie, które zostały faktycznie przeniesione.

Animacja ruchu linii: 120-200 ms, easing-out; żadnych skoków.

Anty-migotanie: aktualizacje partii co 1-2 sekundy (nie częściej).

Optymistyczne aktualizacje: dodaj punkty lokalnie i zaznacz „synchronizację”....

5) Integralność i bezpieczeństwo w liderboard interfejsu użytkownika

Wyjaśnienie zasad: przycisk „Jak są liczone okulary?” obok tytułu.

Anty-bullying: maska część pseudonimu (opcja), skarga o toksyczną nazwę - 1 kliknięcie.

Wskaźnik podejrzanych kont: ukryty przed innymi; player - „twoje punkty są sprawdzane”.

Podział separacji: wizualnie różne odznaki ligowe tak, że silne nie mieszają się z starterów.

6) Anatomia karty misyjnej (projekt jednorazowy)

Tytuł (≤ 40-50 znaków), ikona typu misji.

Krótki opis (co robić, gdzie, ile).

Pasek postępu z liczbą/procentem + oszacowanie czasu (20-25 min).

Trudności (1-3 punkty) i rzadkość nagrody (kolor/twarz).

Nagrody: żetony/kosmetyki (małe miniatury), bez podtekstu „pieniężnego”.

Termin: zegar do wygaśnięcia o miękkim kolorze (pomarańczowy/czerwony w ostatnich 10%).

CTA: „Start „/” Kontynuuj „/” Odbierz ”- jeden przycisk główny.

Drugorzędne: „Zmiana misji” (jeśli jest to dozwolone), „Więcej” (zasady modalne).

7) Stany kart misji

Zablokowany: szary, z szybkością „otworzy się po poziomie 7 „; CTA = "Czego potrzebujesz? ».

Dostępny: kolor według typu; CTA = „Start”.

W toku: aktywny pasek postępu, CTA = „Kontynuuj”.

Zakończona: zielona kontrola; CTA = „Podnieś” (efekt ≤ 1 sek).

Wygasła: blada; CTA = "Ukryj'/" Powtórz w sezonie N."

Na hold (kontrola uczciwości): żółty die „wynik sprawdzić 1-3 minuty”.

8) Język wizualny i dostępność

Rzadkie kolory: Wspólne (neutralne), Rzadkie (niebieskie), Epic (fioletowe), Legendarne (złote), Mityczne (tęczowy akcent).

Kolory semantyczne: sukces/postęp - zielony, ostrzeżenia - bursztyn, terminy - czerwony.

Kontrast ≥ 4. 5:1, czcionki ≥ 14-16 px na telefonie komórkowym.

Wszystko ważne jest nie tylko w kolorze (ikony/wzory).

Thrifty VFX: 0. 6–1. 2 c, bez nakładania się kontroli.

Anavar: tabela → karty (2 kolumny tablet, 1 kolumna telefon); stałe nagłówki.

9) Stany załadunku, pustki i błędy

Szkielety do stołów i kart (3-5 linii/płytek).

Pusty stan: przydatny tekst + „Zdobądź misję startową”.

Błędy sieciowe: zrozumiałe, z „Powtarzać”; offline - pokaż pamięć podręczną i zaznacz „ostatnia aktualizacja: 14:02”.

10) Wydajność

Wirtualizacja listy (300 + wiersze).

Ikony jako sprites/Lottie (nie zoo SVG niepotrzebnie).

Debounce filtry/wyszukiwanie (300-500 ms).

Bufory klienta i ETag na tablice/misje.

11) Uczciwe treści i przeciwdziałanie nadużyciom w misjach UI

Krótkie „Jak to działa”: kropla szansy, litość logiki, straży ustnej, brak mgławic marketingowych.

Wzorzec antyrolniczy: uwaga „różnorodność” - postęp jest szybszy przy zmianie dostawcy/zakładu.

Cooldowns na przycisk „Zmień misję” i podpowiedź, kiedy można ponownie.

12) Metryka, która naprawdę ma znaczenie

Karty misji CTR, wskaźnik startu, wskaźnik ukończenia, mediana TTC.

Wskaźnik wyposażenia/czas trwania dla kosmetyków pochodzących z misji.

Liderboard Engagement: kliknięcia na „do siebie”, „przejdź do profilu”, czas widoczności.

Reklamacja/Mute Rate na VFX/powiadomienia.

Lepkość (DAU/MAU) i podniesienie D7/D30 dla osób uczestniczących w misjach/turniejach.

Gini by SP: równość postępu w podobnych czasach gry.

13) Pomysły A/B

1. Format paska postępu: numeryczny + wizualny vs tylko wizualny.

2. Ocena czasu: pokaż/nie pokazać; wpływ na start.

3. Układ CTA: jeden duży vs dwa równe przyciski.

4. Domyślne sortowanie: według miejsca vs według obszaru nagród.

5. Termin podświetlenia progu: T-10% vs T-20% czasu.

6. „Dla siebie” w tablicy liderów: przycisk vs jest zawsze stałym ciągiem.

14) Przykłady systemów JSON (treść → interfejs użytkownika)

Karta misji

json
{
„id':” m. s4. dostawca. różnorodność „,” tytuł „:” Otwórz trzech dostawców „,” streszczenie „:” Baw się z 3 różnymi dostawcami w 30 minut „,” trudność „:” medium „,” est_time_min": 25 „,” progress „: {” current „: 2,” target „: 3},” rewards „: {” tokens „: 10,” cosmetic_drop": {„rzadkość”: „Rare”, „p”: 0. 1}}, „expires_at": „2025-10-26T18: 00: 00Z,” „stan”: „in_progress,” „cta”: {„label”: „Continue”, „deeplink”: „app ://open/lobby? tab = dostawcy"}
}

Wiersz liderów

json
{
„rank”: 124, „user”: {„id':” u_59211, „” name „:” SeaFox „,” avatar_frame": „legendarny „. 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) Mikrokopia (krótka i przejrzysta)

Rozpoczęła się misja - „Chodźmy! 20 minut”.

Zachęcanie do postępu - „1 więcej dostawcy przed przyznaniem nagrody”.

Termin - „10% czasu, będziesz miał czas w jednym przejściu”.

Kontrola uczciwości - „Sprawdzamy wynik (do 3 minut) - nagroda jest zapisana”.

16) Lista kontrolna przed zwolnieniem

Tabele czytelne przy 320 px; jest „dla siebie” i lepki nagłówek.
Karty misji są jasne „na rzut oka”: cel, czas, nagroda, CTA.
Aktualizacja w czasie rzeczywistym bez migotania; plastry diff i częstotliwość masła.
Jak to działa ekran: punkt/czapka/formuły rzadkości.
Kontrola hałasu: limity VFX/min, tryb ciszy nocnej.
Dostępność: kontrast, nie tylko kolor, nawigacja klawiatura.
Przeciwdziałanie nadużyciom: cooldowns „Change mission”, podkreślając zmienność.
Opracowano mierniki i plan A/B; kliknij i synchronizuj dzienniki.

Silnym interfejsem liderów i kart misyjnych jest natychmiastowa czytelność, miękka dynamika, uczciwa przejrzystość i kontrolowany hałas. Daj graczowi najbliższy cel, zrozumiały postęp i schludny VFX, utrzymuj stabilne aktualizacje i jasne zasady. Następnie zarząd staje się silnikiem konkursu, a karty misyjne stają się wygodną „jednostką działania”, która systematycznie zwiększa zaangażowanie i zatrzymywanie.