چگونه رابط کازینو تطبیقی اجرا شده است

چرا UI سازگار کازینو

بازیکنان از یک مرورگر تلفن همراه، برنامه های کاربردی وب، دسکتاپ، قرص، تلویزیون هوشمند و مینی برنامه ها (به عنوان مثال Telegram WebApp) وارد می شوند. سازگاری یک «شکست شبکه» نیست، بلکه یک UX پایدار است: ورود سریع، خوانایی، CTA های قابل فهم و اقدامات پولی ایمن برای هر اندازه صفحه و ورودی (لمسی/صفحه کلید/از راه دور).

پایه: سیستم طراحی و نشانه ها

Токены: «- فضا»، «- رادیوس»، «- سایه»، «- برند»، «- fg/bg»، «- دانگر»، «- موفقیت»، «- اندازه»، «- ارتفاع خط».

تایپوگرافی از طریق 'گیره ()':

CSS
: ریشه {--fs-body: گیره (14px، 1. 6vw، 16px) ؛ --fs-h1: گیره (22px، 4vw، 32px) ؛}

تم های روشن/تاریک: '@ media (ترجیح می دهد رنگ طرح: تاریک)' + سوئیچ زمان اجرا.

ایمنی حرکت:

CSS
@media (prefers-reduced-motion: reduce) {انیمیشن: هیچ! مهم است ؛ تحول: هیچ! مهم است}

نقاط شکست و شبکه (توصیه)

«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 ستون، پانل های گسترده).

لابی شبکه:

CSS
چاق و چله
نمایش دادن: شبکه ؛ فاصله: var (--space-3);
grid-template-columns: تکرار (پر کردن خودکار، minmax (حداقل (45٪، 220px)، 1fr)) ؛
}
@media (حداقل عرض: 768px) {.lobby {شبکه قالب ستون: تکرار (خودکار پر کردن, minmax (220px, 1fr))}

کارت بازی: قابل کلیک، آموزنده، اقتصادی

16: 9/4: 3 نسبت ابعاد با شی مناسب: پوشش.

مدالها: «زنده», ارائه دهنده, تازگی, RTP (در صورت مجاز).

اقدامات: «بازی»، «نسخه ی نمایشی»، مورد علاقه ها - قابل مشاهده/قابل دسترسی از صفحه کلید.

بارگذاری تنبل = "تنبل" "+" srcset "/" اندازه "برای تراکم DPR.

پوسته پوسته شدن بوم بازی و ویدئو زندگی می کنند

نسبت ثابت (به عنوان مثال،. 16:9) و مناسب «شامل» برای بوم ؛ CTA های بحرانی خارج از خانه bangs/indicator هستند.

مناطق امن (iOS/Android):

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

جهت گیری: گیم پلی را مسدود کنید اگر UX از چشم انداز/پرتره حیاتی است، اما یک اشاره واضح ارائه دهید.

زنده (WebRTC/LL-HLS): لایه پوشش جداگانه UI ؛ دکمه های شرط بندی بزرگ هستند (44 × 44 pt +)، تایمر در 'xs' خوانده می شود.

ناوبری و ماژول های کلیدی

هدر و جستجو

موبایل: برگر + جستجوی سریع (آیکون → معین/تمام صفحه).

دسکتاپ: جستجو و فیلترهای ثابت (ارائه دهندگان، ژانرها، ویژگی ها).

لغزش بث (جداول ورزشی/زنده)

تلفن همراه: حوض/کش رفتن به بالا ؛ دسکتاپ: نوار کناری سمت راست.

ثابت کردن مقدار/دکمه «قرار دادن» همیشه در ناحیه انگشت شست است.

میز نقدی

گام به گام جریان، درخواست idempointency، PII ماسک.

در 'xs/sm' - یک سوال در هر صفحه، نشانگر مرحله در بالا.

مشخصات و RG

سپرده/از دست دادن/محدودیت زمانی در یک شیر ؛ مراجع کمک محلی.

واحدهای انطباق همیشه در دسترس و قابل خواندن هستند.

محلی سازی: i18n، ارزها، RTL

متغیرهایی که رشته ها را در کلیدها ترجمه می کنند در HTML نیستند.

طول کلمه: دکمه های کشش آلمانی/فنلاندی → 'minmax' و 'گیره'.

ارزها/فرمت های تاریخ: "بین المللی. NumberFormat/DateTimeFormat '.

RTL: "dir =" auto "در ظروف متن، آیکون های آینه/فلش.

در دسترس بودن (A11y)

کنتراست کمتر از 4 نباشد. 5:1، بزرگ تعاملی (≥44×44 pt).

ناوبری صفحه کلید کامل (تمرکز حلقه قابل مشاهده است)، «aria-live» برای خطاها/تعادل/تایمر.

جایگزین برای حرکات ؛ فقط به ضربه تند وشدید زدن/شیر طولانی تکیه نکنید.

به حالت «reduced animation» از طریق «prefers-reduced-motion» احترام بگذارید.

بهره وری و تحویل دارایی

HTTP/3 + TLS 1 3، «preconnect» به دامنه CDN/بازی.

CDN کش با نام هش و «غیر قابل تغییر» برای استاتیک، SW-زمان اجرا کش برای اطلس/بسته نرم افزاری.

تصاویر WebP/AVIF، بافت KTX2 (Basis/UASTC)، صوتی Opus.

کد تقسیم شده توسط مسیرهای: لابی/بازی/پرداخت/مشخصات, بسته نرم افزاری اولیه ≤150 -200 KB BR.

اسکلت و پیش لودر به جای صفحه نمایش خالی (احساس TTI).

عنوانهای مثال:


کش کنترل: عمومی، حداکثر سن = 31536000، تغییر ناپذیر
رمزگذاری محتوا: br

طرح بندی و الگوهای سازگاری

پوشش کانتینر (در صورت موجود بودن)

کارت را به عرض ظرف تنظیم کنید، نه انبار.

جداول انعطاف پذیر/تاریخ معامله

در تلفن همراه: «کارت» به جای جداول، زمینه های مهم - اول.

در دسکتاپ: یک جدول کامل با مرتب سازی/فیلتر.

مودال و پایین ورق

در تلفن - پایین ورق با یک ژست بسته شدن ؛ بر روی دسکتاپ - مرکز معین.

طومارها را در یکدیگر قرار ندهید. پس زمینه رو درست کن

رفتار از دست دادن ارتباطات و آفلاین

PWA/Service Worker: shell cache، حالت آفلاین با یک کپی قابل فهم ؛ معاملات نقدی فقط آنلاین.

درخواستهای تلاش مجدد، صف معامله با 'Idempotency-Key'.

تست و تجزیه و تحلیل

ماتریس دستگاه: iOS/Android (مرورگرهای WebView +)، دسکتاپ (Chrome/Safari/Firefox/Edge)، قرص و تلویزیون.

معیارهای RUM: TTFB/LCP/TTI/CLS، «مسیر شرط/سپرده»، خطاهای نمای وب.

A/B از طریق پرچم (سرور)، آزمایش تنها با تخریب امن است.

قالب های کوچک

دکمه بازی (سازگار و در دسترس):

HTML
<کلاس دکمه =" cta" aria- label="Играть в گیتس فورچون">
<span> بازی </span>
</دکمه>

CSS
.cta (به انگلیسی)
فونت: ارث می برند ؛ بالشتک: .75 رم 1 رم ؛ شعاع مرزی: var (--radius-2) ؛
حداقل عرض: گیره (120px، 30vw، 200px) ؛
}
.cta: تمرکز قابل مشاهده {طرح کلی: var جامد 3px (--brand) ؛ طرح کلی-افست: 2px ؛}

تصویر بازی با «srcset»:

HTML
<img src = "/img/game @1x. صورت"
srcset = "/img/game @1x. avif 1x ,/img/game @2x. آویف 2X"
alt = «پیش نمایش بازی»
بارگذاری =» تنبل» عرض =» 320» ارتفاع =» 180»>

ایمنی و رعایت در جلو

آگهی های RG و متون قانونی - همیشه قابل خواندن در «XS»، با CTA همپوشانی ندارند.

کوکی/رضایت - لایه تطبیقی، ناوبری را خراب نمی کند.

پاسخ های API شخصی را در لایه های مشترک ذخیره نکنید ؛ ماسک PII در سیاهههای مربوط.

ضد الگوهای

یک بسته نرم افزاری یکپارچه 5-10 مگابایت «برای همه چیز» → صفحه اول طولانی.

مقادیر ثابت px بدون «clamp» → شکستن در DPI های غیر استاندارد.

تعامل غیرقابل تشخیص (کوچک، بدون تمرکز) → خطاها و شکایات.

شبکه «پریدن» هنگام بارگذاری تصاویر (بدون عرض/ارتفاع) → CLS بالا.

نادیده گرفتن RTL/نقل و انتقالات طولانی → سفر UI و cropped مقدار.

صندوق های پیچیده در یک صفحه تلفن → کاهش CR و افزایش خطاها.

عدم وجود منطقه امن در iOS → دکمه های بسته

تطبیقی کازینو چک لیست رابط

سیستم طراحی

نشانه ها، تم ها (نور/تاریک)، 'گیره'، 'prefers-'.
قطعات با تمرکز ظرف صفحه کلید.

ناوبری/ماژول ها

شبکه لابی نقطه انفصال، کارت با 'srcset'.
لغزش شرط: پایین ورق (تلفن همراه )/نوار کناری (دسکتاپ).
میز نقدی توسط مراحل، CTA های بزرگ، idempotency.

گیم پلی بازی

16:9 بوم/بازیکن و مناطق امن.
تایمرها/پوشش ها در «xs» قابل خواندن هستند، حرکات با دکمه ها تکرار می شوند.

محلی سازی

ردیف ICU، بین المللی. '، ارزها ؛ پشتیبانی از RTL
خطوط طولانی دکمه ها/منوها را نمی شکند.

در دسترس بودن

≥4 متضاد 5:1 حلقه تمرکز، اندازه 44 × 44 pt.
«aria-live» برای خطاها/تعادل/تایمر.

عملکرد

HTTP/3، CDN با دارایی های غیر قابل تغییر/هش.
کد تقسیم، WebP/AVIF/Opus/KTX2، SW- кэш.
LCP ≤ 2 با تلفن همراه, بسته نرم افزاری اولیه ≤ 200 KB BR.

با کیفیت بودن

داشبورد RUM (ویتال وب، قیف).
ماتریس تست دستگاه/نمای وب، پرچم های ویژگی و رول بک ها.

رابط تطبیقی از کازینو ترکیبی از یک سیستم طراحی، یک شبکه صالح، مقیاس پذیر بوم/ویدئو، محلی سازی و دسترسی، پشتیبانی شده توسط تحویل سریع از دارایی ها و مشاهده است. به دنبال این شیوه ها، شما یک کد پایه ای دریافت می کنید که به طور پایدار تبدیل می شود، بر روی دستگاه های عجیب و غریب شکسته نمی شود و قوانین بازی و حفظ حریم خصوصی را احترام می گذارد - به این معنی که درآمد را افزایش می دهد و خطرات عملیاتی را کاهش می دهد.