Чӣ гуна интерфейси мутобиқшавии казино амалӣ карда мешавад

Чаро казино мутобиқати UI

Бозингарон аз браузери мобилӣ, барномаҳои webview, мизи корӣ, планшет, Smart TV ва мини-барномаҳо ворид мешаванд (масалан, Telegram Web-App). Мутобиқшавӣ ин "танаффуси шабака" нест, балки UX-и устувор: воридшавии зуд, хониш, CTA-ҳои фаҳмо ва амалҳои бехатари пулӣ барои ҳама гуна андозаи экран ва вуруд (ламс/клавиатура/дурдаст).

Асос: системаи тарроҳӣ ва нишонаҳо

Токены: '--space', '--radius', '--shadow', '--brand', '---fg/bg', '---danger', '--- success', '--font-андоза', '--- сатр-баландӣ'.

Типография тавассути 'clamp ()':

css
: решаи {--fs-body: фишор (14px, 1). 6vw, 16px); --fs-h1: фишор (22px, 4vw, 32px);}

Мавзӯъҳои сабук/торик: '@ media (афзалият-ранг-схема: торик)' + гузариши вақт.

Бехатарии ҳаракат:

css
@ media (афзалияти кам кардани ҳаракат: кам кардан) {аниматсия: ҳеҷ! муҳим; гузариш: ҳеҷ! муҳим;}}}

Нуқтаҳо ва торҳо (тавсия)

'xs <360' - телефонҳои супер паймон (1 баландгӯяк).

'sm 360-479' - телефонҳои оммавӣ (2 сутун дар даромадгоҳ).

'md 480-767' - телефонҳои калон/планшетҳои хурд (2-3 баландгӯяк).

'lg 768-1023' - планшетҳо (3-4 сутун, панели паҳлӯ ба талабот).

'xl 1024-1439' - ноутбукҳо (4-5 сутун, панели доимӣ).

'2xl ≥ 1440' - мизи корӣ/ТВ (5-7 сутун, панелҳои васеъ).

Лобби Grid:

css
.лобби {
намоиш: шабака; холӣ: var (--space-3);
сутунҳои шабакавӣ: такрорӣ (худкор пур кардан, minmax (min (45%, 220px), 1fr));
}
@ media (min-width: 768px) {.lobby {шабака-шаблон-сутунҳо: такрор (худкор пур кардан, minmax (220px, 1fr));}}

Корти бозӣ: клик, иттилоотӣ, иқтисодӣ

16: 9/4: 3 таносуби ҷанба бо объект-мувофиқ: сарпӯш.

Нишонаҳо: "Зиндагӣ", провайдер, навоварӣ, RTP (агар иҷозат дода шавад).

Амалҳо: "Бозӣ", "Демо", мунтахаб - аз клавиатура намоён/дастрас.

Боркунии танбалӣ' боркунӣ =" танбалӣ"' + 'srcset '/' андоза' барои зичии DPR.

Миқёси рони бозӣ ва видеои зинда

Таносуби собит (масалан. 16:9) ва мувофиқ 'дорои' рони; CTA-ҳои интиқодӣ берун аз хонаи бангҳо/нишондиҳандаҳо мебошанд.

Минтақаҳои бехатар (IOS/Android):

css
.safe {padding: env (safe-area-inset-top) env (safe-area-inset-right) env (safe-area-inset-left);}

Самтгирӣ: Агар UX аз манзара/портрет интиқод кунад, бозии бозиро блок кунед, аммо ишораи возеҳе диҳед.

Live (Web-RTC/LL-HLS): қабати алоҳидаи UI; тугмаҳои гарав калон мебошанд (44 × 44 pt +), вақтсанҷ дар 'xs' хонда мешавад.

Модулҳои паймоиш ва калидҳо

Ҳедер ва ҷустуҷӯ

Мобилӣ: бургер + ҷустуҷӯи зуд (icon → modal/fullylscreen).

Мизи корӣ: ҷустуҷӯ ва филтрҳои доимӣ (провайдерҳо, жанрҳо, хусусиятҳо).

Ковокии Байт (мизҳои варзишӣ/зинда)

Мобилӣ: dock/swipe-up; мизи корӣ: панели рост.

Ислоҳ кардани миқдор/тугмаи "Гузоштан" ҳамеша дар минтақаи ангушти калон аст.

Мизи нақд

Ҷараёни зина ба зина, номутобиқатиро талаб кунед, ниқоби PII.

Дар 'xs/sm' - як савол дар як экран, нишондиҳандаи марҳила дар боло.

Профил ва RG

Маҳдудияти пасандоз/зиён/вақт дар як лӯла; истинодҳои кӯмаки маҳаллӣ.

Воҳидҳои мутобиқат ҳамеша дастрасанд ва хондан мумкин аст.

Маҳаллисозӣ: i18n, асъор, RTL

Ҷойгоҳҳои ICU, ки сатрҳоро дар калидҳо тарҷума мекунанд, дар HTML нестанд.

Дарозии калима: тугмаҳои дарозии олмонӣ/финӣ → 'minmax' ва 'clamp'.

Асъор/форматҳои сана: 'Intl. Формат/Санаи формати вақт '.

RTL: 'dir = "auto"' дар контейнерҳои матнӣ, нишонаҳо/тирҳо.

Мавҷудият (A11y)

Муқоиса аз 4 камтар нест. 5:1, интерактивии калон (≥ 44 × 44 pt).

Паймоиши пурраи клавиатура (фокус-ҳалқаи намоён), 'aria-live' барои хатогиҳо/тавозун/таймерҳо.

Алтернативаҳо ба имову ишора; на танҳо ба swipes/лӯлаи дароз такя кунед.

Ба режими "аниматсияҳои коҳишёфта" тавассути 'афзалият-кам-ҳаракат' эҳтиром гузоред.

Маҳсулнокӣ ва таҳвили дороиҳо

HTTP/3 + TLS 1. 3, 'preconnect' ба доменҳои CDN/бозӣ.

Кэши CDN бо номҳои ҳаш ва 'тағйирнопазир' барои статика, кэши вақти корӣ барои атласҳо/бастаҳо.

Тасвирҳои Webp/AVIF, матнҳои KTX2 (Base/UASTC), Opus аудио.

Рамзи тақсимкунӣ аз рӯи хатсайрҳо: lobby/game/checkout/profile, бастаи ибтидоӣ ≤ 150 -200 KB br.

Скелетҳо ва пешгузаштаҳо ба ҷои экранҳои холӣ (ҳассосияти TTI).

Сарлавҳаҳои намунавӣ:


Кэш-Назорат: оммавӣ, максималӣ = 31536000, тағйирнопазир
Рамзгузории мундариҷа: br

Тарҳ ва шакли мутобиқшавӣ

Сарпӯши контейнер (ҳангоми дастрас будан)

Кортро ба паҳнои контейнер танзим кунед, на стовер.

Ҷадвалҳои тағйирёбанда/таърихи транзаксия

Дар мобилӣ: "кортҳо" ба ҷои ҷадвалҳо, соҳаҳои муҳим - аввал.

Дар мизи корӣ: мизи мукаммал бо навъбандӣ/филтрҳо.

Варақи модалӣ ва поёнӣ

Дар телефон - варақи поён бо ишораи пӯшида; дар мизи корӣ - марказ-модал.

Дафтарҳоро ба ҳамдигар нагузоред; Замина ислоҳ кунед.

Рафтори аз даст додани коммуникатсия ва офлайн

Корманди PWA/хидматрасонӣ: кэши ниҳонӣ, ҳолати офлайнӣ бо нусхаи фаҳмо; танҳо амалиёти нақдии онлайн.

Дархостҳои такрорӣ, навбати муомилот бо 'Idempotency-Key'.

Санҷиш ва таҳлил

Матритсаи дастгоҳ: IOS/Android (Web-View + браузерҳо), мизи корӣ (Chrome/Safari/Firefox/Edge), планшетҳо ва телевизорҳо.

Нишондиҳандаҳои RUM: TTFB/LCP/TTI/CLS, "роҳ ба гарав/амонат", хатогиҳои вебвейк.

A/B тавассути парчамҳо (сервер), таҷрибаҳо танҳо бо таназзули бехатар.

Қолабҳои хурд

Тугмаи бозӣ (мутобиқ ва дастрас):

html
<тугмаи class =" cta" aria-label = "Играть в Дарвозаҳои Фортуна">
<span> Бозӣ </span>
</тугма>

css
.cta {
ҳуруф: мерос; padding: .75rem 1rem; сарҳад-радиус: var (--radius-2);
min-width: фишурда (120px, 30vw, 200px);
}
.cta: нақшаи фокус-намоён {: 3px сахт var (--brand); контур-офсет: 2px;}

Тасвири бозӣ бо 'srcset':

html
<img src = "/img/game @ 1x. авиф"
srcset = "/img/game @ 1x. avif 1x ,/img/game @ 2x. avif 2x"
alt = "Пешнамоиши бозӣ"
боркунӣ =" танбалӣ" width =" 320" height =" 180">

Бехатарӣ ва риояи он дар пеш

Баннерҳои RG ва матнҳои ҳуқуқӣ - ҳамеша дар 'xs' хонда мешаванд, CTA-ро такрор намекунанд.

Куки/ризоият - қабати мутобиқшавӣ, паймоишро вайрон намекунад.

Ҷавобҳои шахсии API-ро дар қабатҳои муштарак нигоҳ надоред; PII-ро дар гузоришҳо ниқоб кунед.

Анти-намунаҳо

Як бастаи монолитӣ 5-10 МБ "барои ҳама чиз" → экрани аввалини дароз.

Арзишҳои собитшудаи px бе 'clamp' → танаффус дар DPI-ҳои ғайримуқаррарӣ.

Интерактивҳои фарқнашаванда (хурд, фокус) → хатогиҳо ва шикоятҳо.

Торҳои "ҷаҳида" ҳангоми бор кардани тасвирҳо ('no' width/баландӣ ') → CLS-и баланд.

Сарфи назар кардани интиқолҳои RTL/дарозмуддат → сафари UI ва миқдори буридашуда.

Назоратчиёни мураккаби нақдӣ дар як экрани телефон → кам шудани CR ва зиёд шудани хатогиҳо.

Набудани минтақаи бехатар дар тугмаҳои пӯшида.

Рӯйхати санҷиши интерфейси мутобиқшудаи казино

Системаи тарроҳӣ

Токенҳо, мавзӯъҳо (сабук/торик), 'фишор', 'prefers-'.
Компонентҳо бо фокуси контейнер-клавиатура.

Паймоиш/Модулҳо

Шабакаи lobby Breakpoint, кортҳо бо 'srcset'.
Слипи Бет: варақи поёнӣ (мобилӣ )/панели тарафӣ (мизи корӣ).
Кассаи пулӣ аз рӯи зинаҳо, CTA-ҳои калон, idempotency.

Бозии бозӣ

16:9 рони/бозингар ва минтақаҳои бехатар.
Вақтсанҷҳо/сарпӯшҳо дар 'xs' хонда мешаванд, имову ишораҳо бо тугмаҳо такрор карда мешаванд.

Маҳаллисозӣ

сатрҳои ICU, 'Intl. ', асъор; Дастгирии RTL.
Хатҳои дароз тугмаҳо/менюҳоро вайрон намекунанд.

Мавҷудият

Муқоиса ≥ 4. 5:1 ҳалқаҳои фокусӣ, андозаҳои 44 × 44 pt.
'aria-live' барои хатогиҳо/тавозун/вақтсанҷҳо.

Иҷро

HTTP/3, CDN бо дороиҳои 'тағйирнопазир '/hash.
Рамзи тақсимшавӣ, WebP/AVIF/Opus/KTX2, SW-кеш.
LCP ≤ 2 бо бастаи мобилӣ, ибтидоӣ ≤ 200 КБ бр.

Сифат

панели RUM (Web Vitals, юбка).
Матритсаи санҷиши дастгоҳ/вебвейс, парчамҳо ва роликҳо.

Интерфейси мутобиқшавии казино маҷмӯи системаи тарроҳӣ, шабакаи салоҳиятдор, риштаи миқёспазир/видео, маҳаллисозӣ ва дастрасӣ мебошад, ки бо таҳвили босуръати дороиҳо ва мушоҳидаҳо дастгирӣ карда мешавад. Пас аз ин таҷрибаҳо, шумо як рамзи ягонаи асосиро мегиред, ки ба таври устувор табдил меёбад, дастгоҳҳои экзотикиро вайрон намекунад ва қоидаҳои бозӣ ва махфияти масъулро эҳтиром мекунад - ин маънои онро дорад, ки даромадро афзоиш медиҳад ва хатарҳои амалиётиро коҳиш медиҳад.