Cum interfața și UX sunt implementate pe dispozitive mobile

1) Principii: modul în care UX mobil diferă de desktop

Control cu o singură mână. Principalele CTA-uri (pariu, repetare, clare) se află în „zona degetului mare” (treimea inferioară a ecranului).

Vertical mai întâi. Tabele verticale/Fluxuri - Caz de bază; orizontala este menținută ca un „mod de film”.

Mai puţine clicuri au mai mult sens. Orice pariu trebuie să facă acțiuni ≤2: selectarea unei valori → atingeți după câmp/celulă.

Viteza e mai importantă decât frumuseţea. 60 fps în UI, schimbare minimă de aspect, animații „ușoare”.

Transparență. Timer rotund, starea conexiunii, întârziere - în mod clar și discret.

2) cadru de ecran: în cazul în care pentru a plasa

Zona superioară (informațională):

Numele mesei, limitele, contorul jucătorului, indicatorul de rețea/întârziere, pictogramele reguli/setări.

Zona de mijloc (conținut):

Flux video (WebRTC/LL-HLS) sau masă 3D, comutare camere/unghiuri cu un gest.
Suprapuneri: timer, rezultatele rundelor recente, confirmarea pop-up a pariurilor.

Zona inferioară (control):

Panoul de pariuri: cupiuri, butoane rapide „Repetare”, „Dublu”, „Clar”.
Cortina portofel ascuns (soldul, depozit rapid - du-te la casier).
Comutator de masă/joc (derulare orizontală).

Ghid după zonele tactile:

Cel puțin 48dp (Android )/44pt (iOS) per interactiv, indentare între butoanele ≥8dp.
Luăm în considerare zonele sigure (crestătură, navigare prin gesturi).

3) Pariuri rapide: Micro-interacțiuni

Doi pași: alegerea unei valori nominale → apăsați pe câmpul de pe masă. Atingeți repetat - mărește pariul cu aceeași valoare nominală.

Apăsați lung: meniul contextual (ștergeți, dublați, distribuiți).

Glisați în jos pe panoul de denominare: afișați valorile extinse/istoricul pariurilor.

Haptika: vibrație ușoară atunci când acceptați un pariu, mai pronunțat - atunci când refuzați/pariați târziu.

Vizibilitate stare: „Acceptă pariuri „/” Închis „- culoare/pictogramă + cronometru.

4) Video și suprapuneri: pentru a nu interfera, ci pentru a ajuta

La cerere cadru cheie. La schimbarea calității - IDR instant pentru a evita „săpun”.

Cărţi translucide. Timer și rezultate - 70-85% transparență, auto-ascunde de cronometru.

Gesturi:

Atingeți dublu pe video - comutarea camerei/unghiului.
Pinch - scară video (fără suprapunerea CTA).
Notificări „Edge”. Push-linii de câștiguri și promo - în partea de sus, nu suprapuneți panoul de pariuri.

5) Condiții de rețea și întârzieri

Status pilula: "Online 1. 3 c „/” Rea rețea 4. 8 c." Culoarea pictogramei se modifică după praguri.

Degradare moale: mai întâi reduceți FPS (60→48→30), apoi rezoluția (1080p→720p→540p), măriți tamponul cu + 200-300 ms.

Auto-folback: WebRTC → LL-HLS pentru modul spectator cu o rețea instabilă; blocarea pariurilor „târzii”.

Ecran offline: salvarea contextului de miză, un motiv ușor de înțeles („Fără conexiune”) și butonul „Repetare”.

6) Joc responsabil și control

Limitele la îndemână. Butonul „Limite” de lângă soldul: depozit/timp/pierdere, cronometru de sesiune.

Pauză-minut. Pauza recomandată după 30-45 de minute de joc este un banner moale, fără „steaguri roșii”.

Blocul cu licitaţie târzie. Dacă e2e-delay> praguri - oferta nu este acceptată, UI explică motivul.

Istorie și export. Runde recente/pariuri feed, filtre, export rapid verifica.

7) Text, culori, animații

Tipografie: titluri 17-20pt, corp 14-16pt; contrastul WCAG AA +.

Schema de culori: culorile „semnal” sunt rezervate pentru stări (acceptate/închise/eroare).

Animații: 120-180 ms pentru micro-interacțiuni; 240-320 ms - pentru panouri/perdele. Cadru cu cadru - nu mai mult de 2-3 efecte paralele.

Schelete în loc de învârtitori. Solicitări rapide de încărcare progresivă.

8) Arhitectura de navigație și informații

Navigare inferioară (bara de file): Lobby, Live, Promoții, Profil.

În interiorul Live: Liste de tabele de filtrare (limbă, limite, tip de joc, dealeri preferați).

Legături adânci: push/bot → intrare directă la masă/turneu; salvarea UTM pentru analiză.

Back-stack: Android „înapoi” gest și iOS glisați - nu închideți runda brusc, în primul rând - un avertisment.

9) Localizare și limbi speciale

RTL (arabă/ebraică). Grile de pariuri oglindă și panouri.

Formate de numere/valute. Mii de separatoare, semnături scurte (1.000 → 1k din lipsă de spațiu).

Tabele de limbă. Afișează steaguri/limbi, filtre de limbă dealer, unități locale (₺, R $, ₴).

Lungimea rândurilor. Descriptori auto-cut cu elipsă, tultips - prin apăsare lungă.

10) Performanța dispozitivului și resursa

Baterie: limitați 60→30 fps atunci când încărcarea este scăzută, avertizați cu privire la consumul ridicat.

Memorie: descărcați profilurile ABR. neutilizate, nu țineți mai mult de 2-3 texturi de înaltă rezoluție.

WebView/browser: blocați umbre grele și filtre CSS; utilizați compozitie GPU pentru netezime.

Optimizarea imaginii: WebP/AVIF, sprite și lene-load.

11) Modele de plată și portofel

Mini-portofel: echilibru și depozit rapid (link către casier cu 3DS/KYC numai pe Web).

Jetoane de securitate: scurt TTL, re-login fără a pierde pariul curent.

Vizibilitatea sursei de fonduri: CASH/BONUS la momentul pariului.

12) Disponibilitate (A11y) și compatibilitate

VoiceOver/TalkBack: semnături pentru elemente, focalizare tab-order, videoclipuri pentru anunțuri de stare.

Contrast ridicat/font mare: adaptare aspect fără a rupe grila.

Gesturile ≠ singura cale. Duplicăm funcționalitatea cu butoane.

Matrice de testare: iOS (curent + n-1), Android (niveluri SDK, piei populare), dispozitive slabe, rețele instabile.

13) Micro-copywriting: ce și cum să vorbești

Clar şi scurt. „Pariuri acceptate”, „Pariuri închise”, „Fonduri insuficiente”, „Rele network”.

Context. Dacă oferta este blocată, promptul „Întârzierea fluxului depășește pragul”.

Confirmări. Scoateți „Ești sigur?” în cazul în care vă puteți rula înapoi prin „Înapoi/Anula”.

14) Analiză și ROM: măsură de îmbunătățire

RUM-SDK: întârziere e2e, pornire, tampoane, switch-uri de calitate, erori de decodare.

Statistici WebRTC: RTT, pierdere, jitter, NACK/PLI доля TURN-releu.

Evenimente de produs: Rate/Double/Clear, Waiver/Late Rate, Tabel și Dealer Hold.

Fanel intrare: telegrama lobby masa primul pariu repetat/dublu.

15) Mobile UI Anti-Bug-uri

Mici lovituri. Soluție: minimum 48dp/44pt, liniuțe suplimentare.

Ecrane negre atunci când se schimbă calitatea. Solutie: keyframe-on-demand si preincarca urmatorul profil.

Glisează aleatoriu. Soluție: confirmarea înainte de ieșirea din runda + gesturile din interiorul conținutului nu intră în conflict cu gesturile sistemului.

Lipirea tastaturii. Soluţie: tastatură numerică pentru cantităţi, ascundere automată după intrare, derulare inteligentă.

16) Lista de verificare a lansării producției

UI și Management

CTA în zona degetului mare; 2 pași pentru a paria
Statusuri haptice și ușor de înțeles (acceptate/închise/eroare)
Moduri verticale/orizontale fără artefacte

Video și rețea

WebRTC cu SVC/simulacast, folback LL-HLS
Indicator de întârziere/rețea, degradare soft
Nu există ecrane negre la comutare

Joc responsabil

Limite/pauze/istorie la o distanță de 1-2 tapa
Blocarea pariurilor „târzii” atunci când pragul e2e este depășit

Localizare și A11y

RTL, fonturi mari, contrast
Alt complet/etichete pentru cititoarele de ecran

Performanță

60 fps UI, <100 ms TTI pentru ecrane cheie
Modul de economisire a energiei, controlul memoriei

Observabilitate

Built-in RUM și WebRTC-statistici, alerte SLO
Evenimente de produs și pâlnie rata

17) Linia de jos

Jocurile mobile UX live sunt o triadă de viteză → claritate → control. Mesele verticale, comenzile cu o singură mână, pariurile rapide, hapticurile și statusurile ușor de înțeles creează sentimentul unei „camere de zi” în palmă. Disciplina tehnica - degradare soft, folback pe LL-HLS, indicatori de retea, analiza si A11y RUM - transforma o interfata frumoasa intr-un produs fiabil care functioneaza la fel de bine pe flagship-uri si dispozitive bugetare, in metrou si acasa, pe iOS si Android.