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.