Torrent Gear

UI Leadboard & Card миссиялары: мыкты тажрыйбалар

1) Эмне үчүн мунун баары: UI максаттары

Leaderboard: заматта "ким кайда" жана эмне үчүн ойноо үчүн түшүндүрүп; жакын максатты көрсөтүү (+ N апага көз айнек).

Миссиялардын карточкалары: узак эрежелерди 10-30 мүнөткө түшүнүктүү "аракет бирдигине" айландыруу.

2) Лидборддун маалыматтык иерархиясы

Минималдуу динамиктер топтому:

1. Орду (#) туруктуу туурасы жана чоң саны менен.

2. Оюнчу (аватар/рамка/титул, кыска ник) - кликабель → профиль.

3. Көз айнек/рейтингдик метрика (SP/MMR/event көз айнек) - оң чети боюнча тегиздөө.

4. Байге/ранг зонасы (сейрек белги/сыйлык диапазону).

5. Убакыт/этап (live/qualifier/finals), аяктоо таймери.

Паттерндер:

Анын сызык жарык (sticky row + "мага кайтып").
"Максатка чейин босого": "TOP-100 чейин 48 SP −".
Чүчүкулак ("T-10" бирдей упай үчүн).

3) Башкаруу жана багыттоо

чыпкалар: лига/бөлүмү, аймак, достор, "бир гана менин провайдер".

Сорттоо: орду боюнча (өчүрүү боюнча) , упай боюнча, кирүү убактысы боюнча, байге зонасы боюнча.

Pagination vs чексиз scroll:

desktop - пагинация + "сага", mobile - чексиз скролл, бирок "баштоо/сага".
Jump-to Rank: заматта өтүү үчүн класс киргизүү талаасы (масштабдуу такталар үчүн маанилүү).

4) Реалдуу убакытта жаңыртуулар ("түртпөстөн")

Diff-Updates: Биз чынында көчүп гана саптарды өзгөртүү.

Анимация кыймылы: 120-200 ms, easing-out; секирүү жок.

Анти-фликер: батч-жаңыртуулар ар бир 1-2 сек (көп эмес).

Оптимисттик жаңыртуулар: жергиликтүү көз айнек кошуу жана "синхрондоштуруу" белгилөө....

5) Чынчылдык жана коопсуздук UI Leadboard

Эрежелердин түшүндүрмөсү: "Көз айнек кантип эсептелет?" аталышынын жанында.

Анти-буллинг: Nick бир бөлүгүн жашыруу (параметр), уулуу аты даттануу - 1 чыкылдатуу.

Шектүү эсептердин маркери: башкалардан жашырылган; оюнчу - "Сиздин көз айнек текшерилет".

Дивизиондордун бөлүнүшү: визуалдык жактан ар кандай лигалардын төш белгилери, күчтүүлөр старттык төш белги менен аралашып кетпеши үчүн.

6) Анатомия карта миссиясы (one-glance дизайн)

аталышы (≤ 40-50 белгилер), миссия түрү сөлөкөтү.

Кыска баяндамасы (эмне кылуу керек, кайда, канча).

Прогресс-саны менен бар/пайыз + убакыт баа (≈ 20-25 мин).

татаалдыгы (1-3 пункт) жана сейрек сыйлык (түсү/кыры).

Сыйлыктар: токендер/косметика (кичинекей миниатюралар), "акчалай" подтекстсиз.

Мөөнөтү: таймери жумшак түс менен аяктаганга чейин (акыркы 10% Orange/Red).

CTA: "баштоо "/" улантуу "/" алуу" - бир негизги баскычы.

Secondary: "Миссияны өзгөртүү" (уруксат берилсе), "More" (эрежелердин модалкасы).

7) Миссиялардын карточкаларынын абалы

Locked: боз, "7-денгээлден кийин ачылат "; CTA = "Эмне керек? ».

Available: түс боюнча түс; CTA = "Баштоо".

In-progress: прогресс-бар активдүү, CTA = "улантуу".

Completed: жашыл чек; CTA = "алуу" (≤ таасири 1 сек).

Expired: кубарып; CTA = "Жашыруу "/" N сезонунда кайталоо ".

On hold (чынчылдыгын текшерүү): сары плашка "текшерүү натыйжасы 1-3 мин".

8) Визуалдык тил жана жеткиликтүүлүк

Сейрек кездешүүчү түстөр: Common (нейтралдуу), Rare (көк), Epic (көк), Legendary (алтын), Mythic (асан-үсөн акценти).

Семантикалык түстөр: ийгилик/прогресс - жашыл, эскертүүлөр - янтарь, мөөнөтү - кызыл.

Контраст ≥ 4. 5:1, ариптер ≥ 14-16 px мобилдик.

Бардык маанилүү - гана түстүү эмес (сөлөкөттөр/үлгүлөр).

Экономикалык VFX: 0. 6–1. 2 c, эч кандай жабуу контролдоо.

Adaptive: таблица → карталар (2 таблетка колонка, 1 Phone колонка); Бекитилген аталыштар.

9) жүктөө шарттары, боштук жана каталар

Таблицалар жана карталар үчүн скелеттер (3-5 сап/тайлдар).

Empty state: пайдалуу текст + "баштоо миссиясын алуу".

Тармактын каталары: түшүнүктүү, "Кайталоо" менен; оффлайн - биз кэшди көрсөтүп, "акыркы жаңыртуу: 14:02" деп белгилейбиз.

10) аткаруу

Тизмелерди виртуалдаштыруу (300 + сап).

Спрайт/Lottie катары иконалар (эч кандай SVG зоопарк кереги жок).

Debounce чыпкалар/издөө (300-500 ms).

Кардарлардын кэшдери жана такталар/миссиялар үчүн ETag.

11) UI миссияларынын чынчыл мазмун жана анти-зордуктоо

Кыскача "Бул кантип иштейт": кокустук мүмкүнчүлүгү, pity-логика, капка, маркетинг тумандуулук жок.

Анти-фармацевтикалык үлгү: биз "ар түрдүүлүктү" белгилейбиз - прогресс провайдерди/ченди алмаштырууда тезирээк жүрөт.

Кулдауналар "Миссияны өзгөртүү" баскычына жана кайра мүмкүн болгондо кеңешке.

12) Чынында маанилүү болгон метриктер

CTR миссиясы, Start Rate, Completion Rate, Median TTC.

Миссия аркылуу алынган косметика үчүн Equip Rate/Duration.

Leaderboard Engagement: "өзүңө", "профилге өтүү", көрүү убактысы.

VFX/билдирүүлөр боюнча Complaint/Mute Rate.

Stickiness (DAU/MAU) жана миссияларга/турнирлерге катышкан D7/D30 uplift.

Gini SP: окшош оюн убактысы менен прогресстин бирдейлиги.

13) A/B-идеялары

1. прогресс-бар формат: сандык + көрүү vs гана көрүү.

2. Убакыт баасы: көрсөтүү/көрсөтпөө; баштоо таасири.

3. CTA-макети: бир чоң vs эки бирдей баскычтар.

4. Демейки сорттоо: байге зонасы боюнча vs жери боюнча.

5. мөөнөтү жарык босогосу: T-10% vs T-20% убакыт.

6. Алдыңкы тактада "Өзүмө": vs баскычы дайыма бекитилген.

14) JSON схемалар мисалдар (мазмун → UI)

Миссия картасы

json
{
"id": "m. s4. provider. diversity "", title ":" Үч провайдерди ачуу "", summary ":" 3 ар кандай провайдерлерден 30 мүнөттө ойноңуз "", 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": "улантуу", "deeplink": "app ://open/lobby? tab=providers"}
}

Лидборд сызыгы

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) Микрокопия (кыска жана ачык)

Миссия башталды - "Кетели! Калган ≈ 20 мин".

Прогрессти илгерилетүү - "Сыйлыкка дагы 1 провайдер".

Мөөнөтү - "Убакыттын 10%, бир кирүүдө убакыт болот".

Чынчылдыкты текшерүү - "Биз жыйынтыкты текшеребиз (3 мүнөткө чейин) - сыйлык сакталды".

16) чыгаруу алдында чек тизмеси

Таблицалар 320 px окулат; бар "сага" жана sticky башчысы.
Миссиялардын карталары "бир караганда" түшүнүктүү: максат, убакыт, сыйлык, CTA.
Фликери жок реалдуу убакыт жаңыртуу; дифф патч жана батч жыштыгы.
Экран "Бул кантип иштейт": көз айнек формулалары/капкак/сейрек.
Ызы-чууну көзөмөлдөө: VFX/мин чектери, түнкү "тынч режим".
Жеткиликтүүлүк: карама-каршы, бир гана түс эмес, клавиатура багыттоо.
Каршы-кыянаттык: Кулдаун "Миссияны өзгөртүү", өзгөрмөлүүлүктүн жарык.
Метрика жана A/B-план белгиленген; чыкылдатуу Логи жана синхрондоштуруу.

Күчтүү UI Leaderboard жана миссиялардын карталары - бул заматта окуу, жумшак динамика, чынчыл ачык-айкындуулук жана көзөмөлдөнүүчү ызы-чуу. Оюнчуга жакын максатты, түшүнүктүү прогрессти жана тыкан VFX бериңиз, жаңыланууларды туруктуу жана эрежелерди так кармаңыз. Анда такта атаандаштыктын кыймылдаткычына айланат, ал эми миссиялардын карталары - тартуу менен кармап турууну системалуу түрдө өстүрүүчү ыңгайлуу "аракет бирдиги" болуп калат.