UX және 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 с »/« Нашар желі 4,8 с». Иконаның түсі табалдырықтар бойынша өзгереді.

Жұмсақ деградация: алдымен 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 ішінде: фильтрлері бар үстелдер тізімі (тіл, лимиттер, ойын түрі, сүйікті дилерлер).

Терең сілтемелер: push/bot → үстелге/турнирге тікелей кіру; талдау үшін UTM сақтау.

Back-stack: «артқа» белгісі Android және iOS свайп - раундты кенеттен жаппайды, алдымен - ескерту.

9) Оқшаулау және ерекше тілдер

RTL (араб/иврит). Ставкалар торлары мен панельдерді симметриялы көрсету.

Сандық форматтар/валюталар. Мыңдарды бөлгіштер, қысқа қолтаңбалар (орын жетіспеген жағдайда 1 000 → 1k).

Тіл үстелдері. Жалауларды/тiлдердi көрсету, дилердiң тiлi бойынша сүзгiлер, жергiлiктi бiрлiктер ( .

Жолдардың ұзындығы. Дескрипторларды көп нүктемен автоматты кесу, тултиптерді - long press бойынша.

10) Құрылғының өнімділігі мен ресурсы

Батарея: 60 → 30 fps төмен зарядта шектейміз, жоғары шығын туралы ескертеміз.

Есте сақтау: ABR профильдерін пайдаланбаймыз, жоғары шешімді 2-3 текстурадан артық ұстамаймыз.

WebView/браузер: ауыр көлеңкелер мен CSS сүзгілерін бұғаттаймыз; GPU-композитингті бірқалыптылық үшін пайдаланамыз.

Кескіндерді оңтайландыру: WebP/AVIF, спрайттар және lazy-load.

11) Төлем және әмиян-паттерндер

Шағын әмиян: баланс және жылдам депозит (тек Web-де 3DS/KYC бар кассаға сілтеме).

Қауіпсіздік токендері: қысқа 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 қадам
Хаптика және түсінікті мәртебелер (қабылданды/жабылды/қате)
Артефактсыз тік/көлденең режимдер

Бейне және желі

SVC/симулякасты WebRTC, 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-де бірдей жақсы жұмыс істейтін сенімді өнімге айналдырады.