Mobil güvenli tasarım

1) Mobil güvenli ilkeler

1. Thumb-first: hareket bölgeleri - başparmak içinde (alttaki navigasyon, FAB/alttaki sağdan birincil).
2. Dokunmatik dostu: Alanlar ile 40-48 piksel ≥ hedefler; Mesafe ≥ 8-12 px.
3. Tasarım gereği güvenli alan: Kesikleri/hareket bölgelerini dikkate alıyoruz ('env (güvenli alan-inset-)').
4. Hız, "güzellik'ten daha önemlidir: LCP ≤ 2. 5s, INP ≤ 200ms, CLS ≤ 0. 1 (p75).
5. Kısıtlama: minimum modaller, minimum formlar, maksimum otomatik tamamlama.
6. Ağlar ve pil: ekonomik trafik, çevrimdışı mod, yetkili retrays.

2) Izgara, kesme noktaları ve güvenli alan

Kesme noktaları: ≤ 480 (mobil), 481-768 (dikey tablet), 769-1024 (yatay tablet).
Maksimum genişliğe sahip konteynerler, esnek kartlar 1-2 sütun.
Daha düşük paneller ≥ 56 piksel, hareket navigasyonu için stok.

css
:root { --inset-b: env(safe-area-inset-bottom); --inset-t: env(safe-area-inset-top); }
.app { padding-bottom: calc(16px + var(--inset-b)); padding-top: calc(8px + var(--inset-t)); }

3) Metin, düğmeler ve etkileşimler

Metin: 16-18 px taban, satır satır 1. 4–1. 6, satır uzunluğu 40-70 karakter.
Düğmeler: yükseklik 44-52 px, net odak/varlık/devre dışı; simge + metin, sadece simge değil.
Hareketlerin her zaman bir alternatifi vardır (düğme/menü/sıcak nokta).
Animasyonlar 'transform/opacity've' prefers-reduced-motion 'üzerindedir.

4) Formlar, klavyeler ve otomatik tamamlama

html
<input type="email" inputmode="email" autocomplete="email">
<input type="tel" inputmode="tel" autocomplete="tel">
<input type="number" inputmode="numeric" pattern="[0-9]">
<input type="text" autocomplete="one-time-code" />

Maskeler yumuşaktır (formatı gösteriyoruz, ancak girişi kırmıyoruz).

5) Navigasyon ve ekran mimarisi

Alt gezinme (5 puana kadar) + "geri" hareketi.
Hedef eyleme 3-5 dokunuşa kadar.
Kritik bölümler için "hamburger'den kaçının; kullanım/bölümlenmiş sekmeler.
UI durumları: 'loading/empty/error/success' - açık, eylemler ve açıklamalarla.

6) Performans ve tasarruf

Code-split ve tembel widget'lar; Grafikler/kartlar "talep üzerine" yüklenir.
Kritik kaynaklar - 'ön yükleme', gerisi - 'erteleme'/' tembel'.
AVIF/WebP resimleri + 'srcset/size', 'loading =' lazy ''.
Fontlar: 1 değişken WOFF2, 'font-display: swap', sadece basic ön yükleme.
Service Worker (PWA) aracılığıyla önbelleğe alma ve çevrimdışı, 'bayat-while-revalidate'.

7) Ağlar, çevrimdışı ve retrays

3G/high gecikme dostu: talep sınırı, butching, jittered backoff.
Kritik veri önbelleği ve senkronizasyon kuyruğuna sahip çevrimdışı ekran.
Veri ekonomisine saygı gösterin: İstemci İpuçları/Veri Kaydet - hafif görüntüler, otomatik video yok.

js const saveData = navigator.connection?.saveData;
const slow = ['slow-2g','2g'].includes(navigator.connection?.effectiveType);
if (saveData          slow) enableLiteMode(); // менее тяжелые ресурсы

8) Mobilde kullanılabilirlik (A11y)

Tam klavye/anahtar kontrolü ve okunabilir odak.
Kontrast ≥ WCAG AA, alternatif metin ('alt', 'aria-label').
Büyük hedefler ve duraklama animasyonları; Hareketler düğmelerle çoğaltılır.
Diyagramlar için - kısa bir metin özeti ve bir veri tablosu.

9) Karanlık tema, parlaklık ve haptikler

Karanlık tema sadece bir inversiyon değildir; Kontrastları ve renk aksanlarını kontrol edin.
Sistem temasına saygı gösterin ('prefers-color-scheme').
Haptics - dozlanmış (başarı/hata), devre dışı bırakma yeteneği.

10) Gizlilik, izinler ve güvenlik

İzinler yalnızca değer anında (kamera - belge taraması).
"Neden" açıklaması ve izinsiz geri dönüş.
WebAuthn/şifre yerine biyometri; parola yöneticileri desteklenir.
Katlarken hassas alanları gizleyin; Uyarı zaman aşımları.

11) Push bildirimleri ve arka plan görevleri

Açık değer senaryoları, sık değil; sessiz saatler.
Tek dokunuşla abonelikten çıkma ve tercih merkezi.
Arka plan çürükleri - küçük porsiyonlarda, pil/ağ kısıtlamaları ile.

12) Görüntüler, medya ve uyarlanabilirlik

Boyut belirtimli yer tutucu - sıfır CLS.
Otomatik oynatma olmadan varsayılan olarak video, altyazılar ve kontroller ile; uyarlanabilir bitratlar.
Simgeler - vektör (SVG) veya sprite; 1MB setleri yüklemeyin.

13) Parçacıklar ve ayarlar

html
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<meta name="theme-color" content="#11131A">

css
.card { content-visibility: auto; contain-intrinsic-size: 600px 400px; }

css
@media (prefers-reduced-motion: reduce) { { animation: none!important; transition: none!important; } }

14) Test planı (minimum)

Cihazlar: 1 iOS + 1 Android (küçük/orta/büyük ekran), portre/manzara.
Ağlar: çevrimdışı, 3G, 4G (gaz kelebeği); Veri Kaydetmeyi Etkinleştir.
Kullanılabilirlik: VoiceOver/TalkBack komut dosyaları, klavye geçişi, kontrast.
Performans: Web-Hayati (RUM), profiler; Büyük listeler, yazma/kaydırma/jestler.
Kararlılık: dönme, katlama/geri dönme, işlemi öldürme - durumu geri yükleme.
Güvenlik: izinler, oturum zaman aşımı, özel verileri gizleme, biyometri.

15) Mobil güvenli metrikler

LCP/INP/CLS (p75, yalnızca mobil).
Eylem Zamanı (birincil hedef tıklatmadan önce).
Tap Doğruluğu (yakın elemanların yanlış musluklarının paylaşımı).
Çökmesiz oturumlar/ANR oranı (uygulamalar/web görünümü).
Oturum başına veri ve Pil etkisi.
Opt-in/opt-out tüy ve nişan.

16) Anti-desenler

Düğmeler 28-32 piksel, yoğun listeler, alanı olmayan "kartlar" - özlüyor.
Açık gri bir arka plan üzerinde 12-14 piksel metin.
Modallar üzerinden modallar; Sadece jestle kapanıyor.
3G/Save-Data'ta video/animasyonları otomatik oynatın.
Yalnızca hareket özellikleri, düğme/menü yok.
Güvenli alan için hesaplanmamış - "patlama'ya da kaydırma paneliyle örtüşen içerik.

17) Ekran kontrol listesi

• Hedefler ≥ 48 px, girintiler ≥ 8-12 px
• Güvenli alan учтен ('viewport-fit = cover', 'env (safe-area-inset-)')
• Metin ≥ 16 px, kontrast AA, odak/varlık görünür
• Formlar: doğru 'type/inputmode/autocomplete', otomatik tamamlama çalışmaları
• LCP ≤ 2. 5s, INP ≤ 200ms, CLS ≤ 0. 1 (mobil)
• Tembel yüklemeli ağır bloklar, altörnekleme listeleri
• Çevrimdışı ekran, geri alma ile yeniden ödeme, Veri Kaydet modu
• Kabarcıklar ve izinler - talep üzerine, açıklama ve reddetme ile
• Karanlık tema ve azaltılmış hareket desteklenir
• Testler: iOS/Android, portre/manzara, 3G/offline, SR geçişi

18) Uygulama planı (3 yineleme)

• Izgara ve güvenli alan, 48 px hedefleri, klavye türleri/otomatik tamamlama, temel Web-Hayati, tembel görüntüler, karanlık tema.

• Code-split, content-visibility, offline + SW, Save-Data modu, retray/queues, state recovery, A11y denetim.

• RUM panoları, trafik/pil analizi, haptikler, izin komut dosyaları, liste iyileştirme (sanallaştırma), mobil ağların düzenli oyun günleri.

19) Mini-SSS

Ayrı bir "mobil menüye" ihtiyacım var mı?
Evet, ama öncelik 3-5 puan ile alt navigasyon; hamburger - ikincil için.

Buton kayıplarını nasıl azaltabilirim?
Hedefleri 48 px'e yükseltin, etrafına alanlar ekleyin, dikey olarak yayın, "başarı/hata" için dokunsal kullanın.

Offline gerekli mi?
Kritik senaryolar için evet: önbellek, işlem kuyruğu ve kullanıcıya dürüst istemler.

Sonuç

Mobil güvenli tasarım, dokunmatik ergonomi, güvenli alan muhasebesi, performans, kullanılabilirlik ve ızgara/pil direncinin bir kombinasyonudur. Kontrol listelerini takip edin, Web-Vitals'ı gerçek kullanıcılarla ölçün, gizlilik ve sistem ayarlarına saygı gösterin - arayüzünüz herhangi bir mobil cihazda uygun ve güvenilir olacaktır.