Torrent Gear

UI лидерборда и карточек миссий: лучшие практики

1) Зачем это всё: цели UI

Лидерборд: моментально объяснить «кто где» и зачем играть дальше; показать ближайшую цель (+N очков до апа).

Карточки миссий: превратить длинные правила в понятную «единицу действия» на 10–30 минут.

2) Информационная иерархия лидерборда

Минимальный набор колонок:

1. Место (#) с устойчивой шириной и крупной цифрой.

2. Игрок (аватар/рамка/титул, краткий ник) — кликабельно → профиль.

3. Очки/рейтинговая метрика (SP/MMR/очки ивента) — выровнять по правому краю.

4. Приз/ранговая зона (иконка редкости/диапазон награды).

5. Время/стадия (live/qualifier/finals), таймер окончания.

Паттерны:

Подсветка своей строки (sticky row + «вернуться к мне»).
«Порог до цели»: маленькая плашка «−48 SP до ТОП-100».
Склейка ничьих («T-10» для одинаковых очков).

3) Управление и навигация

Фильтры: лига/дивизион, регион, друзья, «только мой провайдер».

Сортировки: по месту (по умолч.), по очкам, по времени входа, по призовой зоне.

Пагинация vs бесконечный скролл:

desktop — пагинация + «к себе», mobile — бесконечный скролл, но с «к началу/к себе».
Jump-to Rank: поле ввода ранга для мгновенного перехода (важно для масштабных досок).

4) Обновления в реальном времени (без «дёрганья»)

Дифф-обновления: меняем только строки, которые реально сдвинулись.

Анимация перемещения строки: 120–200 мс, easing-out; без прыжков.

Анти-фликер: батч-обновления каждые 1–2 сек (не чаще).

Оптимистичные обновления: локально добавляем очки и метим «синхронизация…».

5) Честность и безопасность в UI лидерборда

Пояснение правил: кнопка «Как считаются очки?» рядом с заголовком.

Анти-буллинг: маскировать часть ника (опция), жалоба на токсичное имя — 1 клик.

Маркер подозрительных аккаунтов: скрытый от других; игроку — «ваши очки проверяются».

Разделение дивизионов: визуально разные бейджи лиг, чтобы сильные не смешивались со стартовыми.

6) Анатомия карточки миссии (one-glance design)

Заголовок (≤ 40–50 символов), иконка типа миссии.

Короткое описание (что сделать, где, за сколько).

Прогресс-бар c числом/процентом + оценка времени (≈ 20–25 мин).

Сложность (1–3 точки) и редкость награды (цвет/грань).

Награды: токены/косметика (маленькие миниатюры), без «денежного» подтекста.

Срок: таймер до истечения с мягким цветом (оранж/красный в последние 10%).

CTA: «Начать» / «Продолжить» / «Забрать» — одна главная кнопка.

Secondary: «Сменить миссию» (если разрешено), «Подробнее» (модалка правил).

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 на mobile.

Всё важное — не только цветом (иконки/паттерны).

Экономный VFX: 0.6–1.2 c, без перекрытия контрола.

Адаптив: таблица → карточки (2 колонки tablet, 1 колонка phone); закреплённые заголовки.

9) Состояния загрузки, пустоты и ошибки

Скелетоны для таблиц и карточек (3–5 строк/тайлов).

Empty state: полезный текст + «Получить стартовую миссию».

Ошибки сети: понятные, с «Повторить»; офлайн — показываем кэш и помечаем «последнее обновление: 14:02».

10) Производительность

Виртуализация списков (300+ строк).

Иконки как спрайты/Lottie (не SVG-зоопарк без нужды).

Debounce фильтров/поиска (300–500 мс).

Клиентские кэши и ETag для досок/миссий.

11) Честный контент и анти-абьюз в UI миссий

Краткое «Как это работает»: шанс дропа, pity-логика, капы, без маркетинговых туманностей.

Анти-фарм паттерн: отмечаем «разнообразие» — прогресс идёт быстрее при смене провайдера/ставки.

Кулдауны на кнопку «Сменить миссию» и подсказка, когда можно снова.

12) Метрики, которые реально важны

CTR карточек миссий, Start Rate, Completion Rate, Median TTC.

Equip Rate/Duration для косметики, полученной через миссии.

Leaderboard Engagement: клики на «к себе», «перейти к профилю», время видимости.

Complaint/Mute Rate на VFX/уведомления.

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 header.
Карточки миссий понятны «с одного взгляда»: цель, время, награда, CTA.
Реал-тайм обновления без фликера; дифф-патчи и батч-частота.
Экран «Как это работает»: формулы очков/кап/редкости.
Контроль шума: лимиты VFX/мин, ночной «тихий режим».
Доступность: контраст, не только цвет, клавиатурная навигация.
Анти-абьюз: кулдауны «Сменить миссию», подсветка вариативности.
Метрики и A/B-план заведены; логи кликов и синхронизаций.

Сильный UI лидерборда и карточек миссий — это мгновенная читаемость, мягкая динамика, честная прозрачность и контролируемый шум. Дайте игроку ближайшую цель, понятный прогресс и аккуратный VFX, держите обновления стабильными, а правила — ясными. Тогда доска становится двигателем соревнования, а карточки миссий — удобной «единицей действия», которая системно растит вовлечённость и удержание.