Geliştiriciler mobil cihazlar için yuvaları nasıl uyarlar

Mobil slot, masaüstünün daha küçük bir kopyası değildir. 5-6 ″ ekranlarında okunabilir olmalı, dokunulduğunda duyarlı olmalı, bütçe cihazlarında istikrarlı bir şekilde çalışmalı, tarayıcı/işletim sistemi kısıtlamalarına saygı göstermeli ve pili "yememelidir". Aşağıda sistem planı: UX ve grafiklerden ağa, ses ve QA'ya.

1) Parmaklar ve küçük ekran altında UX

Boyutlar ve dokunma bölgeleri: Etkileşimli ≥ 44-48 piksel; Kritik düğmeler - başparmak alanında (alt yarı, ele bağlı olarak sağ/sol kenar).

Güvenli alanlar: "patlama" için muhasebe, Dinamik Ada, yuvarlama; Üst öğeler için iç çerçeve (güvenli iç metin).

Yönelimler: portre - taban çizgisi; Peyzaj - ayrı düzenler/HUD'un yeniden düzenlenmesi. Kazancı sayarken "aşırı pişirmeyi" engelleyin.

Görsel hiyerarşi: semboller ve kazançlar> arka plan ve efektler. Metin kontrastı, MSDF fontları, sayılar için anahat.

Tek elle operasyon: Aşağıdan ana CTA'lar; Bahis paneli ve başparmak mesafesinde "Spin".

Atlama ve turbo: zorunlu; saklanma. Hassas olanlar için'daha az hareket "ekleyin.

Boş durumlar ve ipuçları: kısaca, eylem yerinde, modallerle aşırı yüklenmeden.

2) Duyarlı düzenler ve uyarlanabilir kafes

Izgara: 4-6 sütun + Spin/Stakes için sabit "çapalar".

Veçheler: 16:9, 19. 5:9, 20:9 - ayrı pozisyon ön ayarları; "Kısa" tarafta ölçeklendirme.

Kamera ve maskeler: Tambur penceresi piksel tasarımında değişmez; arka plan - önemli içerik olmadan uzanır/çerçeveler.

Metin: Aralıkta otomatik sığdırma (min/max), kelime sonları, sayıların/para birimlerinin YBÜ formatları.

3) Performans: Aşırı ısınmadan 60 FPS hedefleyin

Çerçeve bütçesi: 16. 7ms. Animasyonlar - zaman sürücü, değil "çerçeveler tarafından".

Butching: atlaslar, malzemelere göre gruplama/blanding; Azaltılmış beraberlik çağrıları.

Overdraw: Temiz "sayfaları" kesin, maskeler/şablonlar kullanın.

Hafıza: nesnelerin havuzu, parçacıkların yeniden kullanımı; ASTC/ETC2/BCn + fallback ile dokular.

LOD: bütçe-GPU üzerinde ağır gölgelendiriciler/sonrası etkileri devre dışı bırakma; basitleştirilmiş arka planlar.

GC adezyonları: animasyon döngülerinde tahsislerden kaçının; Yayıcıların ön yüklenmesi/ön oluşturulması.

Video ekleri: kısa döngüler, düşük bit hızı, küçültme/arka plan çalışması sırasında durur.

Isı ve pil: ağır sahnelerin süresini azaltın, arka plan zamanlayıcılarının sıklığını sınırlayın.

4) Grafikler ve varlıklar

Atlaslar: 2048-4096 px, özet adlarıyla (önbellek bozma), grup UI/FX ayrı ayrı.

Dokular: sıkıştırılmış formatlar (iOS/yeni Android için ASTC; Android için ETC2; BCn - masaüstü/WebGL2); Rezerv olarak WebP/PNG.

Fontlar: Birçok PNG kümesi yerine, gölgelendiriciler tarafından MSDF/SDF + stilleri (ışıma/anahat).

Parçacıklar: eklemeli harmanlama, kısa ömür, çekme.

Post-etkileri: yarım/çeyrek-res çiçek, yumuşak vinyet; Zayıf cihazlarda bağlantı kesilmesi.

Sprite davul listeleri: önceden pişirilmiş ve'ince ", gereksiz boşluklar olmadan; kaydırma için piksel yapışma.

5) Ses, titreşim ve sistem sınırlamaları

Otomatik oynatma ilkeleri: ses sadece hareketle başlar; Anlaşılabilir bir "ses/sessizlik" geçiş anahtarı gösterin.

Karıştırıcı: Kullanıcının sesine/medyasına eğilmek; Eşzamanlı SFX sınırı.

Haptikler: davul duraklarında kısa titreşim desenleri/büyük kazanç; "Kapalı" seçeneği.

Arka plan modu: Arka plan/ekran kilidinden ayrılırken animasyonları/sesi duraklatın.

6) Ağ ve çevrimdışı sürdürülebilirlik

Kritik yol: 'spin'/' bonus' - dış bağımlılıkları olmayan kısa RPC'ler; jitter ile üstel retrai.

Idempotence: yazma işlemlerinde anahtar (bahis/ödeme) - aynı sonucu tekrarlayın.

Service Worker (web'de): Varlıkların önbelleği, kısa TTL ile tezahür eder, olaylardan önce ısınır.

Yer tutucular: iskelet ekranlar, yerel UI olay kuyruğu, net ağ kullanılamayan durumlar.

7) Platform farklılıkları ve konteynerler

IOS Safari: sıkı otomatik oynatma, WebGL belleği, arka plan zamanlayıcı sınırları.

Android Chrome/WebView: daha fazla GPU varyasyonu/sürücüsü - Mali/Adreno'yu test edin.

PWA: Ana ekran, çevrimdışı önbellek, ancak kurallarla sınırlandırılmış itme/ödeme.

Yerel/Birlik: WebGL paketleri daha ağırdır, ancak iOS/Android için tek bir kod; Adresler, platform başına doku sıkıştırması.

Uygulamalarda WebView: stora politikası, gizlilik ve RG gereksinimlerini dikkate alır.

8) Yerelleştirme ve kullanılabilirlik

Diller: dize uzunluğu, sağ el komut dosyaları, tarih/para birimi formatları; Yoğun bakım mesajları.

Kontrast ve boyut: yüksek kontrast modu, ölçeklenebilir yazı tipleri, kritik metin - doygunluk farkları olmadan.

Daha az hareket: paralaks/boyun kapalı; Alternatif etkiler.

9) Sorumlu Oyun ve Dürüstlük

WG araçları: sınırlara/zaman aşımına/kendini dışlamaya hızlı erişim; Geceleri "sessiz mod".

Sonucun dürüstlüğü: animasyondan önce sunucudaki sonucun hesaplanması; UX düşme olasılığını etkilemez.

Yargı bölgeleri: Otomatik döndürme/satın alma özelliği/hızları - bölgelere göre phicheflags aracılığıyla.

10) QA matrisi ve gözlemlenebilirlik

Cihaz matrisi: 8-12 referanslar (iPhone baz/Pro, bütçe/Mali/Adreno ile orta Android, tabletler).

Profil oluşturma: FPS, çizim çağrıları, GPU/CPU zamanı, bellek/VRAM, kekemeler/GC.

Crash/ANR: Tohum/adım ile problem turlarının izlenmesi, tekrarlanması.

Panolar: İlk Oynanabilir, p95 ağlar, spin hatası, sıcaklık (varsa), D1/D7 tutma, dönüşümde ses, kesir atla.

11) A/B mobil deneyler

Hipotezler: Spin pozisyonu, CTA boyutu, davul durma uzunluğu, öğretici sipariş, yumuşak vs sert bonus intro.

Korkuluklar: çarpışma/ANR, p95 ağları, şikayetler; Bozulma sırasında - ficheflag'ın otomatik olarak geri alınması.

Segmentasyon: cihaz/GPU/trafik kanalına göre - etkiler değişebilir.

12) Anti-desenler (ne yapmamalı)

Copy Desktop 1:1: küçük metin, düğmeler kullanılamıyor.

Tüm cihazlarda büyük video/arka plan efektleri - aşırı ısınma ve FPS damlaları.

Kazançları hesaplarken rastgele GC: animasyon keneleri içindeki tahsisler.

İstemcide sabit enum: sunucudan yeni bir değerle düşer.

Olasılık demoları - güven ve uyum için bir darbe.

Geri bildirim olmadan bir ağ beklemek: "ölü" düğmeler, durum yok.

13) Mini tarifler

Hızlı portre leyout

Alt panel: Döndürme (sağ) + Bahis (sol), orta - sayaçlar.

Davul pencere düzeltme, arka plan - paralaks %5-10.

Büyük kazanç: MSDF basamakları + kızdırma, atlama düğmesi.

Uygun maliyetli kazanma etkisi

Ölçek-sıçrama başlığı, katkı maddesi-konfeti ≤ 1 c, yarım çözünürlüklü çiçek.

Titreşim kısadır (10-20 ms), ses işaretleyicilerle bir karışımdır.

Bütçe cihazlarında kararlı WebGL

Bir UI atlası + bir karakter atlası; Post-efektler kapalı; Boştayken 30 FPS "güç tasarrufu".

14) Büyük mobil adaptasyon kontrol listesi

UX/Leyout

Dokunma bölgeleri ≥ 44-48 piksel, başparmak bölgesindeki ana CTA'lar
Güvenli alanlar/patlamalar dikkate alınır; portre/manzara çalıştı
Atlama/turbo/daha az hareket mevcut

Grafik/Perf

60 FPS (referanslar), bütçelerde çağrı çekme/fazla çekme
Doku sıkıştırmaları (ASTC/ETC2/BCn) + geri dönüş
LOD/devre dışı bırakma ağır etkileri, parçacık çekme
Bundle ve İlk Oynanabilir amaçları için

Ağ/Güvenilirlik

Idempotent yazma işlemleri, jitter ile yeniden ödeme
Hizmet Çalışanı/Önbellek Stratejisi (Web)
Çevrimdışı/hata durumlarını temizleyin

Ses/Vibro

Yalnızca jestten sonra otomatik oynatma, karıştırıcı ve SFX sınırı
Kapalı seçenekli haptikler, arka planda duraklat

Uyumluluk/RG

Yargı bayrakları, sunucuda dürüst sonuç
Sınırlara/duraklatmalara/kendi kendine dışlamaya hızlı erişim

QA/İzleme

Aygıt matrisi geçti; GPU/CPU/Bellek profilleri
Ağ p95 panoları/FPS/hatalar/çökmeler
Biletler için tohum/adım tekrarları

Yuvayı mobil cihazlara uyarlamak, okunabilir UX, dikkatli grafikler, istikrarlı ağ ve etik dengesidir. Takımlar parmaklar ve güvenli alanlar için bir ekran tasarladıklarında, 60 FPS ve hafif bir paket tuttuklarında, iOS/Android politikalarını dikkate aldıklarında, gerçek cihazlarda test ettiklerinde ve kanaryalı bayrakların özelliklerini açtıklarında kazanırlar. Böylece yuvalar herhangi bir akıllı telefonda güzel, hızlı ve dürüst kalır.