چگونه رابط کاربری و UX در دستگاه های تلفن همراه اجرا می شود
1) اصول: چگونه UX تلفن همراه از دسکتاپ متفاوت است
کنترل با یک دست CTA های اصلی (شرط بندی، تکرار، روشن) در «منطقه انگشت شست» (سوم پایین صفحه) قرار دارند.
اول عمودي. جداول/جریان عمودی - مورد پایه ؛ افقی به عنوان «حالت فیلم» حفظ می شود.
کلیک کمتر منطقی تر است. هر شرط بندی باید ≤2 اقدام را انجام دهد: انتخاب یک مقدار → شیر توسط زمینه/سلول.
سرعت مهمتر از زیبایی است. 60 فریم در ثانیه در UI، حداقل تغییر طرح، انیمیشن «نور».
شفافیت. تایمر گرد، وضعیت اتصال، تاخیر - به وضوح و unobtrusively.
2) قاب صفحه نمایش: کجا قرار دهید
منطقه بالا (اطلاعاتی):- نام جدول، محدودیت ها، شمارنده پخش، نشانگر شبکه/تاخیر، آیکون های قوانین/تنظیمات.
- جریان ویدئو (WebRTC/LL-HLS) یا جدول 3D، تعویض دوربین/زاویه با یک ژست.
- پوشش ها: تایمر، نتایج دور های اخیر، تأیید پاپ آپ شرط ها.
- پانل شرط بندی: فرقه ها، دکمه های سریع «تکرار»، «دو»، «پاک کردن».
- پرده کیف پول پنهان (تعادل، سپرده سریع - به صندوقدار بروید).
- سوئیچ جدول/بازی (پیمایش افقی).
- حداقل 48dp (Android )/44pt (iOS) در هر تعاملی، تورفتگی بین دکمه ها ≥8dp.
- ما را به حساب مناطق امن (شکاف، ناوبری ژست).
3) شرط سریع: میکرو تعامل
دو مرحله: انتخاب مقدار چهره → شیر در زمینه بر روی میز. تکرار ضربه بزنید - شرط را با همان ارزش چهره افزایش می دهد.
مطبوعات طولانی: منوی زمینه (حذف، دو برابر، توزیع).
بر روی پانل فرقه ضربه بزنید: ارزش های گسترده/تاریخ شرط بندی را نشان دهید.
Haptika: لرزش نور هنگام پذیرش شرط، برجسته تر - هنگام امتناع/شرط دیر.
دید وضعیت: «پذیرش شرط «/» بسته «- رنگ/آیکون + کرونومتر.
4) ویدئو و پوشش: به طوری که برای دخالت نیست، اما برای کمک به
بر اساس تقاضا keyframe. هنگام تعویض کیفیت - IDR فوری برای جلوگیری از «صابون».
کارت های شفاف تایمر و نتایج - 70-85٪ شفافیت، خودکار پنهان کردن توسط تایمر.
حرکات دست:- دو شیر در ویدئو - تعویض دوربین/زاویه.
- خرج کردن - مقیاس ویدئو (بدون همپوشانی CTA).
- اطلاعیه های «لبه». Push-lines of winnings and promo - در بالا، پانل شرط بندی را همپوشانی نکنید.
5) شرایط شبکه و تاخیر
وضعیت قرص: "آنلاین 1. 3 c «/» شبکه بد 4. 8 ج" رنگ آیکون با آستانه تغییر می کند.
تخریب نرم: ابتدا FPS (60 → 48 → 30) را کاهش می دهد، سپس رزولوشن (1080p → 720p → 540p)، بافر را با 200-300 میلی ثانیه افزایش می دهد.
Auto-folback: WebRTC → LL-HLS برای حالت تماشاگر با یک شبکه ناپایدار ؛ مسدود کردن شرط های «دیر»
صفحه آفلاین: صرفه جویی در زمینه شرط بندی، دلیل قابل درک («بدون اتصال») و دکمه «تکرار».
6) بازی مسئول و کنترل
محدودیت در دست «محدودیت» را فشار دهید در کنار تعادل: سپرده/زمان/از دست دادن, تایمر جلسه.
يه لحظه صبر کن مکث توصیه شده پس از 30-45 دقیقه از بازی یک بنر نرم، بدون «پرچم قرمز» است.
بلوک اواخر پیشنهاد اگر e2e-delay> آستانه - پیشنهاد پذیرفته نمی شود، UI دلیل را توضیح می دهد.
تاریخ و صادرات دور اخیر/شرط خوراک، فیلتر، صادرات بررسی سریع.
7) متن، رنگ، انیمیشن
تایپوگرافی: عناوین 17-20pt، بدن 14-16pt ؛ کنتراست از WCAG AA +.
طرح رنگ: رنگ «سیگنال» برای وضعیت (پذیرفته/بسته/خطا) محفوظ است.
انیمیشن ها: 120-180 میلی ثانیه برای تعاملات میکرو ؛ 240-320 میلی ثانیه - برای پانل ها/پرده ها. قاب قاب - بیش از 2-3 اثر موازی.
اسکلت به جای اسپینر سرعت بارگذاری سریع پیشرفته.
8) ناوبری و معماری اطلاعات
ناوبری پایین (نوار تب): لابی، زنده، تبلیغات، مشخصات.
Inside Live: لیست جداول فیلتر (زبان، محدودیت ها، نوع بازی، نمایندگی های مورد علاقه).
لینک های عمیق: فشار/ربات → ورود مستقیم به جدول/مسابقات ؛ صرفه جویی در UTM برای تجزیه و تحلیل.
Back-stack: ژست Android «back» و کش رفتن iOS - ابتدا به طور ناگهانی دور را نبندید - هشدار.
9) محلی سازی و زبان های خاص
RTL (عربی/عبری) شبکه های شرط بندی آینه و پانل.
فرمت های شماره/ارز. هزاران جداکننده، امضاهای کوتاه (1000 → 1k به دلیل کمبود فضا).
جداول زبان نمایش پرچم ها/زبان ها، فیلترهای زبان فروشنده، واحدهای محلی (₺، R $، ₴).
طول ردیف ها توصیف خودکار برش با بیضوی، tultips - با فشار طولانی.
10) عملکرد دستگاه و منابع
باتری: محدود کردن FPS 60 → 30 زمانی که شارژ کم است، هشدار می دهند در مورد مصرف بالا.
حافظه: بارگیری پروفایل های ABR استفاده نشده، بیش از 2-3 بافت با وضوح بالا را نگه ندارید.
WebView/browser: مسدود کردن سایه های سنگین و فیلترهای CSS ؛ از ترکیب GPU برای صاف بودن استفاده کنید.
بهینه سازی تصویر: WebP/AVIF، sprites و تنبل بار.
11) الگوهای پرداخت و کیف پول
مینی کیف پول: تعادل و سپرده سریع (لینک به صندوقدار با 3DS/KYC تنها در وب).
توکن های امنیتی: TTL کوتاه، ورود مجدد بدون از دست دادن شرط فعلی.
دید از منبع بودجه: نقدی/پاداش در زمان شرط بندی.
12) در دسترس بودن (A11y) و سازگاری
VoiceOver/TalkBack: امضا برای عناصر، تمرکز زبانه سفارش، فیلم ها برای اطلاعیه های وضعیت.
کنتراست بالا/فونت بزرگ: تطبیق طرح بدون شکستن شبکه.
حرکات تنها راه ≠. ما عملکرد را با دکمه ها تکرار می کنیم.
ماتریس تست: iOS (فعلی + n-1)، آندروید (سطح SDK، پوسته های محبوب)، دستگاه های ضعیف، شبکه های ناپایدار.
13) میکرو copywriting: چه و چگونه به صحبت می کنند
واضح و کوتاه «شرط پذیرفته», «شرط بسته», «بودجه کافی», «شبکه بد».
زمینه. اگر پیشنهاد مسدود شده باشد، اعلان «تاخیر جریان بیش از آستانه» است.
تأییدیه ها حذف «آیا مطمئن هستید ؟» جایی که می توانید از طریق «بازگشت/خنثی کردن» رول کنید.
14) تجزیه و تحلیل و RUM: اندازه گیری برای بهبود
RUM-SDK: تاخیر e2e، راه اندازی، بافر، سوئیچ کیفیت، خطاهای رمزگشایی.
WebRTC-stats: RTT، loss، jitter، NACK/PLI доля TURN-relay.
رویدادهای محصول: نرخ/دو/روشن، چشم پوشی/نرخ دیرکرد، جدول و فروشنده نگه دارید.
ورودی فن: تلگرام → لابی → میز → شرط اول → تکرار/دو برابر.
15) ضد اشکالات UI موبایل
ضربه هاي کوچيک راه حل: حداقل 48dp/44pt، تورفتگی های اضافی.
صفحه نمایش سیاه در هنگام تغییر کیفیت. راه حل: keyframe-on-demand و پیش بارگذاری مشخصات زیر است.
کش رفتن «بازگشت» تصادفی. راه حل: تایید قبل از خروج از حرکات + دور در داخل محتوا با حرکات سیستم درگیری نیست.
چسباندن صفحه کلید راه حل: صفحه کلید عددی برای مقادیر، پنهان کردن خودکار پس از ورودی، پیمایش هوشمند.
16) چک لیست راه اندازی تولید
رابط کاربری و مدیریت
- CTA در ناحیه انگشت شست ؛ 2 مرحله برای شرط بندی
- وضعیت هاپتیک و قابل درک (پذیرفته/بسته/خطا)
- حالت های عمودی/افقی بدون مصنوعات
ویدئو و شبکه
- WebRTC با SVC/simulacast، LL-HLS folback
- شاخص تاخیر/شبکه، تخریب نرم
- بدون صفحه نمایش سیاه و سفید در هنگام تعویض
بازی مسئولانه
- محدودیت/مکث/تاریخ در فاصله 1-2 تاپا
- بلوک شرط «اواخر» زمانی که آستانه e2e بیش از حد است
بومی سازی و A11y
- RTL، فونت های بزرگ، کنتراست
- کامل ALT/برچسب برای خوانندگان صفحه نمایش
عملکرد
- UI 60 فریم در ثانیه، TTI <100 میلی ثانیه برای صفحه نمایش های کلیدی
- حالت صرفه جویی در انرژی، کنترل حافظه
قابل مشاهده بودن
- ساخته شده در RUM و WebRTC-stats، هشدار SLO
- رویدادهای محصول و قیف نرخ
17) خط پایین
موبایل UX بازی زندگی می کنند سه گانه از سرعت → وضوح کنترل. جداول عمودی، کنترل یک دست، شرط سریع، haptics و وضعیت قابل درک ایجاد احساس یک «اتاق نشیمن» در کف دست خود را. نظم و انضباط فنی - تخریب نرم، folback در LL-HLS، شاخص های شبکه، تجزیه و تحلیل RUM و A11y - یک رابط زیبا را به یک محصول قابل اعتماد تبدیل می کند که به همان اندازه در دستگاه های پرچم دار و بودجه، در مترو و در خانه، در iOS و Android کار می کند.