Giriş: Mobil tasarım web tasarımı değildir#
Mobil uygulama tasarımı webin küçültülmüş hali değildir. Parmak fiziği, ekran konumu, hareket fizyolojisi ve dikkat süresi tamamen farklıdır. Bunu görmezden gelen tasarım, ne kadar güzel görünürse görünsün, kullanım metriklerinde başarısız olur.
Aşağıda 2026'da mobil tasarımı dönüştüren 5 prensibi uygulanabilir detaylarla anlatıyoruz. Her prensip için somut sayı, kural ve kontrol listesi var.
1. Touch-target — fiziksel boyut disiplini#
İlk ve en sık ihlal edilen kural: touch-target boyutu. Apple HIG en az 44×44pt, Material Design en az 48×48dp diyor. Daha küçük tıklama alanları için hata oranı %30'a kadar çıkar.
Pratik kural: butonlar arası boşluk en az 8pt; ikon-only butonlar 44pt'tan küçük olmamalı (görsel ikon 24pt olabilir ama tap area ekstra padding ile genişler). Form alanları, switch ve checkbox'lar için de aynı kural geçerli.
Kontrol: Figma'da componentlere tıklanabilir alan overlay'i ekleyin. 44/48pt'tan küçük her şey kırmızı bayrak. Test cihazına yükledikten sonra parmakla 30 saniye gezin — yanlış basışlar varsa target küçük demektir.
2. Thumb-zone — başparmağın haritası#
Kullanıcılar telefonu tek elle, başparmakla kullanır. Thumb-zone ekranın alt yarısıdır; bu alan başparmağın rahat ulaştığı bölge. Kritik aksiyonlar (CTA, navigation, primary actions) bu zone'da yer almalı.
Uzak (hard-to-reach) bölge ekranın üst kısmı: başlıklar, geri butonu (iOS gesture ile değiştirilebilir), bilgilendirme öğeleri burada. Üst kısımda asla primary CTA olmaz.
Modern pattern: bottom navigation bar (3-5 sekme), bottom sheet modal'lar (action listesi için), floating action button (FAB) sağ-alt köşede. Bu yapı thumb-zone disiplinini doğal olarak getirir.
3. Motion — anlam taşıyan animasyon#
Animasyon süs değil, kullanıcıya bağlam aktarımıdır. "Yeni ekran nereden geldi?", "Bu öğe niye değişti?", "Sistem cevap verdi mi?" sorularına cevap verir. Material Motion ve Apple HIG bu prensibi açıkça yazar.
Süre: standart geçiş 200-300ms; mikro-interaction (button press feedback) 100-150ms. Daha uzun = yavaş hisseder; daha kısa = fark edilmez. Easing curve: ease-out giriş için, ease-in çıkış için.
Performans: animasyonlar 60fps hedefiyle çalışmalı (16.67ms / frame). Layout animasyon yerine transform (translate, scale, opacity) tercih edin — GPU hızlandırması. Düşük cihazlarda
prefers-reduced-motion ile minimize edin.4. Dark mode — varsayılan beklenti#
2026'da dark mode opsiyon değil varsayılan beklentidir. App Store ve Play Store dark mode desteklemeyen uygulamaları downgrade ediyor. iOS ve Android sistem ayarına göre otomatik geçiş yapılmalı (
UITraitCollection / Configuration.uiMode).Doğru implementasyon: semantic color tokens. "primary", "surface", "onSurface" gibi rol-bazlı tokenlar tanımlayın; her token light + dark için ayrı değer alır. Hard-coded hex (#000000) yasak.
Dynamic theming (Material You, iOS dynamic color) bonus puan; ama önce dark mode disiplinini oturtun. Görsel test: tüm ekranları light + dark için screenshot test'iyle doğrulayın (Storybook + Chromatic gibi araçlar mobilde de çalışır).
5. Accessibility — yasal ve etik standart#
Accessibility opsiyonel değildir. WCAG 2.1 AA seviyesi 2026'da kurumsal projelerde sözleşme şartı. Üç temel: kontrast (4.5:1 metin için), dynamic type (kullanıcı yazı boyutunu değiştirebilmeli), screen reader desteği (VoiceOver / TalkBack).
Pratik: her etkileşimli öğeye
accessibilityLabel verin. İkon-only butonlar için label zorunlu ("Sepete ekle", "Menüyü aç"). Form input'lar için accessibilityHint ile beklenen davranış aktarılır.Sonradan retro-fit yapmak 3-5 katı pahalı. Tasarım sisteminin temel parçası olarak kurulmalı; component her oluşturulduğunda accessibility kontrolü zaten yapılmış olur.
Sonuç: 5 prensibi tasarım sisteminde sabitleyin#
Bu 5 prensip ayrı kararlar gibi görünebilir ama hepsi tek bir tasarım sisteminde birleşmelidir. Touch-target token'ı, thumb-zone layout grid'i, motion timing token'ları, semantic color tokens, accessibility kuralları — hepsi component library'de yer alır.
Tasarım sistemi disiplini olmadan bu 5 prensip her ekranda farklı uygulanır; tutarsızlık doğar. Sistem, prensiplerin uygulanmasının garantisidir.
Mobil uygulama tasarımı veya tasarım sistemi kurmayı planlıyorsanız, mobil uygulama geliştirme sayfamız üzerinden iletişime geçebilirsiniz.
İlgili hizmetler
İlgili yazılar
Aynı kararı destekleyen diğer yazılar
AI Araçları
Claude AI Nedir? Yazılımcılar İçin 2026 Kapsamlı Rehberi
Claude AI'ın 2026'daki yetenekleri, Claude Code, MCP, API kullanımı ve enterprise vakalarıyla yazılımcılar için kapsamlı Türkçe rehber.
Maliyet Analizi
Mobil Uygulama Maliyeti 2026: Fiyatı Gerçekte Ne Belirler?
200K mı, 2M mı? Mobil uygulama maliyeti 7 kalemde belirlenir: kapsam, backend, entegrasyon, native ihtiyacı, test+güvenlik, bakım, fazlı yaklaşım. Her kalem için somut aralıklar.
Teknoloji Seçimi
Flutter mi React Native mi? İş Hedefine Göre Karar Verme Rehberi
Hype değil iş hedefi karar versin. 2026'da Flutter ve React Native arasında 7 kriterli kıyas: performans, ekip yapısı, UI tutarlılığı, ekosistem, native köprü, bakım maliyeti, gelecek garanti.
Sonraki adım
Benzer bir proje planlıyorsanız, bağlamınızı netleştirip teklif akışını birlikte kurabiliriz.
Proje talebi oluştur