Ishlab chiquvchilar mobil qurilmalarga qanday moslashadi

Mobil slot - bu ish stolining kichiklashtirilgan nusxasi emas. U 5-6 ″ ekranlarda o’qishi, teginishda sezgir bo’lishi, byudjet qurilmalarida barqaror ishlashi, brauzer/OS cheklovlarini hurmat qilishi va batareyani «yemasligi» kerak. Quyida - tizim rejasi: UX va grafikadan tarmoqgacha, audio va QA.

1) Barmoqlar ostidagi UX va kichik ekran

Tegish o’lchamlari va zonalari: interaktiv ≥ 44-48 px; kritik tugmalar - bosh barmoqlar zonasida (pastki yarmi, qo’liga qarab o’ng/chap qirrasi).

Safe areas: «chelok», Dynamic Island, aylanishlar hisobi; yuqori elementlar uchun ichki ramka (safe inset).

Yo’nalishlari: portret - baseline; landshaft - alohida leyautlar/HUD qayta to’ldirish. Yutuq hisoblab chiqilayotganda «burilish» ni blokirovka qiling.

Vizual ierarxiyasi: belgilar va yutuq> fon va effektlar. Matn kontrasti, MSDF shriftlari, sonlar uchun autline.

Bir qo’lni boshqarish: pastdan asosiy CTA; stavkalar paneli va bosh barmoq masofasidagi «Spin».

Skip va turbo: majburiy; yashirmang. Sezgir kishilar uchun «kamroq harakat» yoqing.

Bo’sh holatlar va maslahatlar: qisqacha, harakat joyi bo’yicha, modalkalar bilan ortiqcha yuklamasdan.

2) Responsive-leyautlar va moslashuvchan to’rlar

Grid: 4-6 kolonka + Spin/stavkalar uchun belgilangan «langarlar».

Tomonlari: 16:9, 19. 5:9, 20:9 - alohida pozitsiyalar presetasi; «qisqa» tomoni bo’yicha ko’paytirish.

Kamera va niqoblar: barabanlar oynasi piksel dizayni bo’yicha doimiy ravishda; fon - muhim kontentsiz cho’ziladi/qisqartiriladi.

Matn: diapazonda avto-fit (min/max), so’zlarni ko’chirish, ICU-raqamlar/valyutalar formatlari.

3) Unumdorlik: maqsad - 60 FPS haddan tashqari qizdirilmasdan

Kadrlar budjeti: 16. 7 ms. Animatsiyalar «kadrlar bo’yicha» emas, balki taym-drayvdir.

Batching: atlaslar, materiallar bo’yicha guruhlash/blending; draw calls.

Overdraw: shaffof «choyshablarni» kesib, niqob/stensillardan foydalaning.

Xotira: obyektlar puli, zarrachalarni qayta ishlatish; ASTC/ETC2/BCn + fallback bilan to’qimalar.

LOD: budget-GPUda og’ir shaderlarni/post-effektlarni o’chirish; soddalashtirilgan fon.

GC-paykalar: animatsiya sikllarida allokatsiyalardan qochish; emitterlarni oldindan yuklash/yaratish.

Videoyozuvlar: qisqa sikllar, past bitreyt, burilish/fon ishida to’xtash.

Issiqlik va batareya: og’ir sahnalarning davomiyligini qisqartiring, fon taymerlarining chastotasini cheklang.

4) Grafika va assetalar

Atlaslar: 2048-4096 px, xesh nomlar bo’yicha (cache-busting), alohida UI/FX guruhlang.

To’qimalar: siqilgan formatlar (iOS/yangi Android uchun ASTC; Android uchun ETC2; BCn - desktop/WebGL2); WebP/PNG zaxira sifatida.

Shriftlar: MSDF/SDF + koʻp PNG toʻplamlari oʻrniga sheyderlar (glow/outline) uslublari.

Zarralar: additive-blending, qisqa umr ko’rish, pulling.

Post-effektlar: half/quarter-res bloom, yumshoq vinyetka; zaif qurilmalarda o’chirish.

Barabanlarning sprayt-listlari: pre-baked va «ingichka», ortiqcha bo’shliqsiz; skroll uchun piksel-snap.

5) Audio, vibro va tizimli cheklovlar

Avtoplay siyosati: tovush faqat imo-ishora bilan boshlanadi; tushunarli «tovush/sukunat» tumbler ko’rsating.

Miksher: foydalanuvchi ovozi/media ostida ducking; bir vaqtning o’zida SFX limiti.

Haptics: baraban oyoqlaridagi qisqa vibro-patternlar/katta yutuq; «yopish» opsiyasi.

Orqa fon rejimi: Orqa oynaga chiqishda/ekranni bloklashda animatsiya/audio pauza.

6) Tarmoq va oflayn barqarorlik

Tanqidiy yo’l:’spin ’/’ bonus’- tashqi qaramliklarsiz qisqa RPC; jitter bilan eksponensial retrajlar.

Idempotentlik: write-operatsiyalardagi kalit (stavka/to’lov) - takrorlash → xuddi shunday natija.

Service Worker (vebda): assetalar keshi, qisqa TTL manifesti, tadbir oldidan isitish.

Pleysholderlar: skeleton ekranlar, UI hodisalarining lokal navbati, aniq «tarmoq mavjud emas» holatlari.

7) Platforma farqlari va konteynyerlar

iOS Safari: qattiq avtoplay, WebGL xotirasi, taymerlarning fon cheklovlari.

Android Chrome/WebView: GPU/drayverlarning ko’proq variantlari - Mali/Adrenoni sinab ko’rish.

PWA: uy ekrani, oflayn kesh, lekin push/to’lovlar qoidalar bilan cheklangan.

Nativ/Unity: WebGL bandllari og’irroq, ammo iOS/Android uchun yagona kod; Addressables, per-platforma teksturalarini siqish.

VebView dasturlarida: stor siyosati, maxfiylik va RG talablarini hisobga oling.

8) Mahalliylashtirish va foydalanish

Tillar: satrlar uzunligi, o’ng tomondagi skriptlar, sana/valyuta formatlari; ICU xabarlari.

Kontrast va o’lcham: yuqori kontrast rejimi, kattalashtiriladigan shriftlar, tanqidiy matn - to’yinganlik o’zgarishlarisiz.

Kamroq harakat: parallaks/sheyklarni oʻchirish; muqobil effektlar.

9) Responsible Gaming va halollik

RG-instrumentlar: limitlardan/taym-autdan/o’z-o’zini chiqarib tashlashdan tez foydalanish; tunda «sokin rejim».

Natijaning halolligi: animatsiyadan oldin serverda natijani hisoblash; UX yoʻqolish ehtimoliga taʼsir qilmaydi.

Yurisdiksiyalar: avto-spin/buy-feature/tezliklar - hududlar bo’yicha jismoniy imtiyozlar orqali.

10) QA-matritsasi va kuzatilishi

Qurilmalar matritsasi: 8-12 ta referens (iPhone base/Pro, Mali/Adreno bilan Android budget/mid, planshetlar).

Profiling: FPS, draw calls, GPU/CPU time, xotira/VRAM, stutters/GC.

Krash/ANR: monitoring, seed/step bo’yicha muammoli raundlarning nusxalari.

Dashbordlar: First Playable, p95 tarmoqlari, orqa xatosi, harorat (agar mavjud bo’lsa), retenshn D1/D7, «ovoz yoqilgan» konvertatsiyasi, «skip» ulushi.

11) Mobaildagi A/B-eksperimentlar

Gipotezalar: Spin pozitsiyasi, CTA o’lchami, baraban to’xtash uzunligi, tutorial tartibi, «yumshoq» va «qattiq» bonus-intro.

Guardrails: crash/ANR, p95 tarmoqlari, shikoyatlar; degradatsiyada - ficheflagning avtootkati.

Segmentatsiya: qurilmalar/GPU/trafik kanalida - effektlar har xil bo’lishi mumkin.

12) Anti-patternlar (nima qilmaslik kerak)

1:1 desktopidan nusxa olish: kichik matn, mavjud boʻlmagan tugmalar.

Barcha qurilmalarda katta video/fon effektlari → haddan tashqari qizib ketish va FPS drop.

G’olibni hisoblashda tasodifiy GC: animatsiya tiklari ichidagi allokatsiyalar.

Qattiq enum: serverdan yangi qiymatga tushadi.

Imkoniyatlar demo-bustlari → ishonch va komplayensga zarba.

Feedbacksiz tarmoqni kutish: «oʻlik» tugmalar, holatlar yoʻq.

13) Mini-retseptlar

Tezkor portret leyaut

Pastki panel: Spin (oʻng) + Bet (chap), markaziy - hisoblagichlar.

Barabanlar oynasi fix, fon - parallaks 5-10%.

Katta yutuq: MSDF raqamlari + glow, «O’tkazib yuborish» tugmasi.

Yutuqning tejamkor samarasi

Scale-bounce sarlavhasi, additive-konfetti ≤ 1 c, half-res bloom.

Vibro qisqa (10-20 ms), tovush - markerlar bilan bitta aralash.

Budjet qurilmalarida barqaror WebGL

Bitta atlas UI + bitta atlas belgilari; post-effektlar o’chirilgan; 30 FPS «power-save» harakatsizlikda.

14) Mobil moslashuvning katta chek-ro’yxati

UX/Leaut

Touch zonalari ≥ 44-48 px, bosh barmoq zonasidagi asosiy CTA
Safe areas/« chelki »hisobga olingan; portret/landshaft ishlab chiqilgan
Skip/turbo/kamroq harakat mavjud

Grafika/Perf

60 FPS (referensiyalar), budjetlarda draw calls/overdraw
Tekstura siqish (ASTC/ETC2/BCn) + fallback
LOD/og’ir ta’sirlarni o’chirish, zarralar pullingi
Bandl va First Playable

Tarmoq/Ishonchlilik

Idempotent write operatsiyalari, jitter bilan retralar
Service Worker/kesh strategiyasi (vebda)
Ochiq oflayn/xato holatlari

Audio/Vibro

Faqat imo-ishora, mikser va SFX limitidan keyin avtoplay
«Yopish» opsiyasi bilan Haptics, background da pauza

Komplayens/RG

Yurisdiksiya bayroqlari, serverda halol natija
Chegaralar/pauzalar/o’z-o’zini istisno qilish

MA/Monitoring

Qurilmalar matritsasi o’tdi; GPU/CPU/xotira profillari
Dashbordlar p95 tarmoq/FPS/xato/boʻyoq
Chiptalar uchun seed/step nusxalari

Mobil oynaga moslashtirish - bu o’qiladigan UX, ehtiyotkor grafika, barqaror tarmoq va axloq balansidir. Jamoalar ekranni barmoqlar va safe areas bilan loyihalashda, 60 FPS va engil bandlni ushlab turishda, iOS/Android siyosatini hisobga olishda, haqiqiy qurilmalarda sinovdan o’tkazishda va kanareykali bayroqlarda chichlarni yoqishda g’alaba qozonishadi. Shunday qilib, slotlar har qanday smartfonda chiroyli, tezkor va halol bo’lib qoladi.