Torrent Gear

Как реализуется интерфейс и UX на мобильных устройствах

1) Принципы: чем мобильный UX отличается от десктопа

Одноручное управление. Основные CTA (ставка, повтор, очистить) — в «зоне большого пальца» (нижняя треть экрана).

Вертикальный первый. Вертикальные столы/потоки — базовый сценарий; горизонталь поддерживается как «кино-режим».

Меньше кликов — больше смысла. Любая ставка должна занимать ≤2 действия: выбор значения → тап по полю/ячейке.

Скорость важнее красоты. 60 fps в UI, минимальный layout shift, «лёгкие» анимации.

Прозрачность. Таймер раунда, статус подключения, задержка — явно и ненавязчиво.

2) Каркас экрана: что где расположить

Верхняя зона (информационная):

Название стола, лимиты, счётчик игроков, индикатор сети/задержки, иконки правил/настроек.

Средняя зона (контент):

Видеопоток (WebRTC/LL-HLS) или 3D-стол, переключение камер/ракурсов жестом.
Наложения: таймер, результаты последних раундов, всплывающие подтверждения ставок.

Нижняя зона (управление):

Панель ставок: номиналы, быстрые кнопки «Повторить», «Удвоить», «Очистить».
Скрываемая шторка кошелька (баланс, быстрый депозит — переход в кассу).
Переключатель столов/игр (горизонтальный скролл).

Гайд по зонам касания:

Минимум 48dp (Android) / 44pt (iOS) на интерактив, отступ между кнопками ≥8dp.
Учитываем safe areas (notch, жестовая навигация).

3) Быстрые ставки: микровзаимодействия

Два шага: выбор номинала → тап по полю на столе. Повторный тап — увеличивает ставку на тот же номинал.

Долгое нажатие (long press): контекстное меню (удалить, удвоить, распределить).

Свайп вниз по панели номиналов: показать расширенные значения/историю ставок.

Хаптика: лёгкая вибрация при приёме ставки, более выраженная — при отказе/поздней ставке.

Видимость статуса: «Принимаем ставки»/«Закрыто» — цвет/иконка + секундомер.

4) Видео и оверлеи: чтобы не мешать, а помогать

Ключевой кадр по запросу. При переключении качества — мгновенный IDR, чтобы избежать «мыла».

Полупрозрачные карточки. Таймер и результаты — 70–85% прозрачности, автоскрытие по таймеру.

Жесты:

Двойной тап по видео — переключение камеры/ракурса.
Пинч — масштаб видео (без перекрытия CTA).
«Краевые» уведомления. Пуш-строки выигрышей и промо — вверху, не перекрывают ставочную панель.

5) Состояния сети и задержки

Статус-пилюля: «Онлайн 1,3 c» / «Плохая сеть 4,8 c». Цвет иконки меняется по порогам.

Мягкая деградация: сначала снижаем FPS (60→48→30), потом разрешение (1080p→720p→540p), увеличиваем буфер на +200–300 мс.

Авто-фолбэк: WebRTC → LL-HLS для зрительского режима при нестабильной сети; блокировка «поздних» ставок.

Оффлайн-экран: сохранение контекста ставки, понятная причина («Нет соединения») и кнопка «Повторить».

6) Ответственная игра и контроль

Лимиты под рукой. Кнопка «Лимиты» рядом с балансом: депозит/время/потери, таймер сессии.

Пауза-минута. Рекомендованная пауза через 30–45 минут игры — мягкий баннер, без «красных флагов».

Блок поздней ставки. Если e2e-задержка > порога — ставка не принимается, UI объясняет причину.

История и экспорт. Лента последних раундов/ставок, фильтры, быстрый экспорт чеков.

7) Текст, цвета, анимации

Типографика: заголовки 17–20pt, тело 14–16pt; контраст WCAG AA+.

Цветовая схема: «сигнальные» цвета зарезервированы под статусы (принято/закрыто/ошибка).

Анимации: 120–180 мс для микровзаимодействий; 240–320 мс — для панелей/шторок. Покадрово — не более 2–3 параллельных эффектов.

Скелетоны вместо спиннеров. Быстрые прогрессивные подсказки загрузки.

8) Навигация и информационная архитектура

Нижняя навигация (tab bar): Лобби, Live, Акции, Профиль.

Внутри Live: списки столов с фильтрами (язык, лимиты, тип игры, любимые дилеры).

Глубокие ссылки: пуш/бот → прямой вход на стол/турнир; сохранение UTM для аналитики.

Back-stack: жест «назад» Android и свайп iOS — не закрывают раунд внезапно, сначала — предупреждение.

9) Локализация и особые языки

RTL (арабский/иврит). Симметричное отражение сеток ставок и панелей.

Числовые форматы/валюты. Разделители тысяч, короткие подписи (1 000 → 1k при нехватке места).

Языковые столы. Отображение флагов/языков, фильтры по языку дилера, локальные единицы (₺, R$, ₴).

Длина строк. Дескрипторы авто-обрезать с многоточием, тултипы — по long press.

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

Батарея: ограничиваем 60→30 fps при низком заряде, предупреждаем о высоком расходе.

Память: выгружаем неиспользуемые профили ABR, не держим больше 2–3 текстур высокого разрешения.

WebView/браузер: блокируем тяжёлые тени и фильтры CSS; используем GPU-композитинг для плавности.

Оптимизация изображений: WebP/AVIF, спрайты и lazy-load.

11) Платёжные и кошелёк-паттерны

Мини-кошелёк: баланс и быстрый депозит (линк в кассу с 3DS/KYC только в Web).

Токены безопасности: короткий TTL, пере-логин без потери текущей ставки.

Видимость источника средств: CASH/BONUS в момент ставки.

12) Доступность (A11y) и совместимость

VoiceOver/TalkBack: подписи для элементов, фокус по таб-порядку, ролики для объявлений статусов.

Высокая контрастность/большой шрифт: адаптация layout без поломки сетки.

Жесты ≠ единственный способ. Дублируем функционал кнопками.

Тест-матрица: iOS (актуальные + n-1), Android (SDK уровни, популярные оболочки), слабые устройства, нестабильные сети.

13) Микрокопирайтинг: что и как говорить

Ясно и коротко. «Ставки приняты», «Ставки закрыты», «Недостаточно средств», «Плохая сеть».

Контекст. При блокировке ставки — подсказка «Задержка потока превышает порог».

Подтверждения. Убираем «Вы уверены?» там, где можно откатить через «Назад/Отменить».

14) Аналитика и RUM: измеряем, чтобы улучшать

RUM-SDK: e2e-задержка, startup, buffers, переключения качества, ошибки декодера.

WebRTC-stats: RTT, loss, jitter, NACK/PLI, доля TURN-relay.

Продуктовые события: ставка/удвоение/очистка, отказ/поздняя ставка, удержание по столам и дилерам.

Фанел входа: телеграм → лобби → стол → первая ставка → повтор/удвоение.

15) Анти-ошибки мобильного UI

Крошечные хиты. Решение: 48dp/44pt минимум, дополнительные отступы.

Чёрные экраны при смене качества. Решение: keyframe-on-demand и предзагрузка следующего профиля.

Случайные свайпы «назад». Решение: подтверждение перед выходом из раунда + жесты внутри контента не конфликтуют с системными.

Прилипание клавиатуры. Решение: numeric keypad для сумм, автоскрытие после ввода, смарт-скролл.

16) Чек-лист продакшн-запуска

UI и управление

CTA в зоне большого пальца; 2 шага до ставки
Хаптика и понятные статусы (принято/закрыто/ошибка)
Вертикальный/горизонтальный режимы без артефактов

Видео и сеть

WebRTC с SVC/симулякастом, LL-HLS-фолбэк
Индикатор задержки/сети, мягкая деградация
Без «чёрных» экранов при переключениях

Ответственная игра

Лимиты/паузы/история на расстоянии 1–2 тапа
Блок «поздних» ставок при превышении e2e-порога

Локализация и A11y

RTL, большие шрифты, контрастность
Полные alt/labels для скринридеров

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

60 fps UI, <100 ms TTI для ключевых экранов
Энергосберегающий режим, контроль памяти

Наблюдаемость

Встроен RUM и WebRTC-stats, алерты по SLO
Продуктовые события и воронка ставок

17) Итог

Мобильный UX live-игр — это триада скорость → ясность → контроль. Вертикальные столы, управление одной рукой, быстрые ставки, хаптика и понятные статусы создают ощущение «живого зала» в ладони. Техническая дисциплина — мягкая деградация, фолбэк на LL-HLS, индикаторы сети, RUM-аналитика и A11y — превращает красивый интерфейс в надёжный продукт, который одинаково хорошо работает на флагманах и бюджетных устройствах, в метро и дома, на iOS и Android.