Mobil qurilmalarda interfeys va UX qanday amalga oshiriladi

1) Printsiplar: mobil UX desktopdan qanday farq qiladi

Bir qo’lli boshqaruv. Asosiy CTA (stavka, takrorlash, tozalash) - «bosh barmoq zonasida» (ekranning pastki uchdan bir qismi).

Vertikal birinchi. Vertikal stollar/oqimlar - bazaviy stsenariy; gorizontal «kino rejimi» sifatida saqlanadi.

Kamroq bosish ko’proq ma’noni anglatadi. Har qanday stavka ≤ 2 ta harakatni egallashi kerak: maydon/katak boʻyicha → tap qiymatini tanlash.

Tezlik go’zallikdan ustun turadi. 60 fps uchun UI, minimal layout shift, «yengil» animatsiyalar.

Shaffoflik. Raund taymeri, ulanish holati, kechikish - aniq va tushunarsiz.

2) Ekran ramkasi: qayerda joylashtirish kerak

Yuqori zona (axborot):

Stol nomi, limitlar, oʻyinchilar hisoblagichi, tarmoq/kechikish indikatori, qoidalar/sozlash piktogrammalari.

Oʻrta zona (kontent):

Video oqim (WebRTC/LL-HLS) yoki 3D-stol, imo-ishora bilan kameralarni/burchaklarni almashtirish.
Qo’shimchalar: taymer, oxirgi raundlar natijalari, stavkalarni tasdiqlash ko’rinishi.

Quyi zona (boshqaruv):

Stavkalar paneli: nominallar, «Takrorlash», «Ikki baravar», «Tozalash» tezkor tugmalari.
Hamyonning yashirin pardasi (balans, tezkor depozit - kassaga o’tish).
Stol/oʻyin almashtirish (gorizontal skroll).

Tegish zonalari bo’yicha gidlar:

Minimal 48dp (Android )/44pt (iOS) interaktivga, tugmalar orasidagi ≥ 8dp.
Biz safe areas (notch, imo-ishora navigatsiyasi) ni hisobga olamiz.

3) Tezkor stavkalar: mikro qarz

Ikkita qadam: stol ustidagi maydon boʻyicha nominal → tap tanlash. Takroriy sinf - stavkani xuddi shu nominalga oshiradi.

Uzoq bosish (long press): kontekstli menyu (olib tashlash, ikki baravar oshirish, taqsimlash).

Nominallar panelidan pastga siljish: kengaytirilgan qiymatlar/stavkalar tarixini koʻrsatish.

Xaptika: stavkani qabul qilishda engil tebranish, rad etilganda aniqroq/kech stavka.

Maqom koʻrinishi: «Stavkalarni qabul qilyapmiz «/« Yopiq »- rang/ikona + sekundomer.

4) Video va overleylar:

Soʻrov boʻyicha asosiy kadr. Sifat almashtirilganda - «sovun» dan qochish uchun tezkor IDR.
Shaffof kartochkalar. Taymer va natijalar - 70-85% shaffoflik, taymer bo’yicha avtotransport.

Imo-ishoralar:

Videodan ikki marta tab - kamera/burchakni almashtirish.
Pinch - video masshtabi (CTAni yopmasdan).
«Chekka» xabarnomalar. Yutuqlar va promolarning push-satrlari yuqorida, stavka panelini to’sib qo’ymaydi.

5) Tarmoqning holati va kechikish

Tablet maqomi: «Onlayn 1,3 c »/« Yomon tarmoq 4,8 c». Belgi rangi ostonalarga qarab oʻzgaradi.

Yumshoq degradatsiya: avval FPS (60 → 48 → 30) ni kamaytiramiz, so’ngra echimini (1080p → 720p → 540p), buferni + 200-300 ms ga oshiramiz.

Avto-folbek: WebRTC → LL-HLS beqaror tarmoqlarda tomoshabin rejimi uchun; «kech» stavkalarni blokirovka qilish.

Oflayn ekran: stavka kontekstini saqlash, tushunarli sabab («Ulanish yoʻq») va «Takrorlash» tugmasi.

6) Mas’uliyatli o’yin va nazorat

Chegaralar qo’lda. Balans yonidagi «Limitlar» tugmasi: depozit/vaqt/yo’qotishlar, sessiya taymeri.

Bir daqiqalik pauza. O’yinning 30-45 daqiqasidan so’ng tavsiya etilgan tanaffus - «qizil bayroqlarsiz» yumshoq banner.

Kech stavka bloki. Agar e2e-kechikish> chegara - stavka qabul qilinmasa, UI sababini tushuntiradi.

Tarix va eksport. Oxirgi raundlar/stavkalar tasmasi, filtrlar, cheklarni tez eksport qilish.

7) Matn, ranglar, animatsiyalar

Tipografiya: sarlavhalar 17-20pt, tana 14-16pt; kontrast WCAG AA +.

Rang sxemasi: «signal» ranglar maqom uchun zaxiralangan (qabul qilingan/yopilgan/xato).

Animatsiyalar: 120-180 ms mikro qarama-qarshilik uchun; panellar/panellar uchun - 240-320 ms. Kadr bo’yicha - ko’pi bilan 2-3 parallel ta’sir.

Spinnerlar o’rniga skeletonlar. Tez progressiv yuklash maslahatlari.

8) Navigatsiya va axborot arxitekturasi

Pastki navigatsiya (tab bar): Lobbi, Live, Aksiyalar, Profil.

Live ichida: filtrli stollar roʻyxati (til, limitlar, oʻyin turi, sevimli dilerlar).

Chuqur havolalar: push/bot → stol/turnirga toʻgʻridan-toʻgʻri kirish; UTMni tahlil qilish uchun saqlash.

Back-stack: «orqaga» imo-ishorasi Android va iOS - raundni to’satdan yopmaydi, birinchi navbatda - ogohlantirish.

9) Mahalliylashtirish va maxsus tillar

RTL (arab/ivrit). Stavkalar va panellarning simmetrik aks ettirish.

Raqamli formatlar/valyutalar. Minglarni ajratuvchi vositalar, qisqa imzolar (1 000 → 1k).

Til stollari. Bayroqlar/tillarni koʻrsatish, diler tili boʻyicha filtrlar, lokal birliklar (₺, R $, ).

Satrlar uzunligi. Deskriptorlarni ko’p nuqtali avto kesish, tultiplarni long press bo’yicha kesish.

10) Qurilmaning unumdorligi va resursi

Batareya: past zaryadda 60 → 30 fps ni cheklaymiz, yuqori sarf haqida ogohlantiramiz.

Xotira: foydalanilmayotgan ABR profillarini tushiramiz, yuqori aniqlikdagi 2-3 ta teksturadan ortiq saqlamaymiz.

WebView/brauzer: ogʻir soyalar va CSS filtrlarini bloklash; silliqlik uchun GPU kompozitingdan foydalanamiz.

Rasmlarni optimallashtirish: WebP/AVIF, spraytlar va lazy-load.

11) To’lov va hamyon-patternlar

Mini-hamyon: balans va tezkor depozit (faqat Web-dagi 3DS/KYC bilan kassaga link).

Xavfsizlik tokenlari: qisqa TTL, joriy stavkani yo’qotmagan holda pere-login.

Mablag’manbaining ko’rinishi: stavka vaqtida CASH/BONUS.

12) Foydalanish imkoniyati (A11y) va muvofiqlik

VoiceOver/TalkBack: elementlar uchun imzolar, tab tartibida fokus, maqom e’lonlari uchun roliklar.

Yuqori kontrast/katta shrift: to’r sinmagan holda layout moslashuvi.

Imo-ishoralar ≠ yagona yo’l. Funktsiyani tugmalar bilan takrorlaymiz.

Test matritsasi: iOS (aktual + n-1), Android (SDK darajalari, mashhur qobiqlar), zaif qurilmalar, beqaror tarmoqlar.

13) Mikrokopirayting: nima va qanday deyish kerak

Aniq va qisqa. «Stavkalar qabul qilindi», «Stavkalar yopildi», «Mablag’yetarli emas», «Yomon tarmoq».

Kontekst. Stavkani blokirovka qilishda - «Oqimning kechikishi chegaradan oshadi».

Tasdiqlash. «Ishonchingiz komilmi?» «Orqaga/Bekor qilish» orqali orqaga qaytish mumkin boʻlgan joyda.

14) Tahlil va RUM: yaxshilash uchun o’lchaymiz

RUM-SDK: e2e-kechikish, startup, buffers, sifatni oʻzgartirish, dekoder xatolari.

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

Mahsulot hodisalari: stavka/ikki baravar ko’paytirish/tozalash, rad etish/kech stavka, stollar va dilerlar bo’yicha ushlab qolish.

Kirish faneli: telegram → lobbi → stol → birinchi stavka → takrorlash/ikki baravar ko’paytirish.

15) Mobil UI xatolari

Kichkina xitlar. Yechim: 48dp/44pt minimum, qoʻshimcha cheklovlar.

Sifat oʻzgarganda qora ekranlar. Yechim: siframe-on-demand va keyingi profilni oldindan yuklash.

«Orqaga» tasodifiy sviplar. Yechim: raunddan chiqishdan oldin tasdiqlash + kontent ichidagi imo-ishoralar tizim bilan ziddiyatli emas.

Klaviatura yopishishi. Yechim: summalar uchun numeric keypad, kiritilgandan keyin avtooshkarot, smart-skroll.

16) Ishlab chiqarish-ishga tushirish chek-varaqasi

UI va boshqaruv

bosh barmoq zonasida CTA; stavkagacha 2 qadam
Xaptika va tushunarli holatlar (qabul qilingan/yopilgan/xato)
Artefaktsiz vertikal/gorizontal rejimlar

Video va tarmoq

SVC/simulyakast, LL-HLS-folbekli WebRTC
Kechikish/tarmoq indikatori, yumshoq degradatsiya
Oʻzgartirilganda qora ekranlarsiz

Masʼuliyatli oʻyin

Limitlar/pauzalar/1-2 ta masofadagi tarix
E2e-chegaradan oshganda «kech» stavkalar bloki

Lokalizatsiya va A11y

RTL, katta shriftlar, kontrast
Toʻliq alt/labels

Unumdorlik

60 fps UI, <100 ms TTI
Energiya tejamkor rejim, xotira nazorati

Kuzatish

O’rnatilgan RUM va WebRTC-stats, SLO bo’yicha alertlar
Mahsulot hodisalari va stavkalar hunisi

17) Jami

Mobil UX jonli o’yinlar triada tezligi → aniqlik → nazorat. Vertikal stollar, bir qoʻl bilan boshqarish, tezkor stavkalar, xaptika va tushunarli holatlar qoʻlimizda «jonli zal» hissi uygʻotadi. Texnik intizom - yumshoq degradatsiya, LL-HLSdagi folbek, tarmoq indikatorlari, RUM-tahlil va A11y - chiroyli interfeysni flagman va byudjet qurilmalarida, metroda va uyda, iOS va Android-da yaxshi ishlaydigan ishonchli mahsulotga aylantiradi.