Neden Önemli?
Navigasyon, kullanıcının uygulamada yolunu bulmasını sağlar. Kötü navigasyon = kayıp kullanıcı. İyi navigasyon = yüksek engagement ve retention. 2026 itibarıyla bottom sheet ve gesture tabanlı navigasyon giderek daha popüler hale gelmektedir.
Tab Bar / Bottom Navigation
En yaygın kalıp. Ekranın altında 2-5 sekme.
Ne Zaman?
- 3-5 eşit önemde ana bölüm
- Bölümler arası sık geçiş
- Hem iOS hem Android'de standart
Best Practices
- Max 5 tab (fazlası karışık)
- İkon + etiket birlikte kullan
- Aktif tab belirgin olsun
- Her tab'ın kendi navigasyon geçmişi olsun
- iOS 18+ ile özelleştirilebilir tab bar desteği
- Badge ile bildirim sayısı göster
Stack Navigation
Hiyerarşik sayfa geçişi. İleri git, geri dön.
Ne Zaman?
- Ana sayfa → detay sayfa → alt detay
- Doğal hiyerarşi olan içerikler
- Settings, profil gibi derinlemesine sayfalar
Best Practices
- Geri butonu her zaman erişilebilir
- iOS: sol kenardan swipe ile geri
- Başlıkta mevcut konumu göster
- Derin navigasyonda "pop to root" seçeneği sun
Drawer / Hamburger Menu
Yandan açılan menü.
Ne Zaman?
- 5'ten fazla bölüm
- Seyrek erişilen bölümler
- Web benzeri uygulamalar
Dikkat
- "Hidden navigation" problemi (kullanıcı görmezden gelebilir)
- Tab bar'a kıyasla daha düşük engagement
- Android'de yaygın, iOS'ta nadir
- 2026 itibarıyla drawer kullanımı azalıyor; bottom navigation + more tab tercih ediliyor
Bottom Sheet
Alttan yukarı kayan panel.
Ne Zaman?
- Ek seçenekler, filtre
- İçerik detayı, harita pin bilgisi
- Modal alternatifi (daha native hissiyat)
Best Practices
- Half-open ve full-open durumları
- Sürükleyerek kapatılabilir
- Arka plan karartılabilir
- Gesture handle (üstte küçük çizgi) göster
- Apple Maps, Google Maps tarzı kullanım yaygınlaşıyor
Modal
Tam ekran veya partial overlay.
Ne Zaman?
- Bağımsız görevler (form doldurma, ödeme)
- Kullanıcının dikkatini gerektiren akışlar
- Onay/uyarı diyalogları
Best Practices
- iOS: pageSheet veya formSheet presentation style tercih et
- Kapatma butonu açıkça görünür olsun
- Swipe down ile kapatmayı destekle
Segmented Control / Top Tabs
Sayfa içi bölüm değiştirme.
Ne Zaman?
- Aynı veri setinin farklı görünümleri
- Filtre benzeri geçiş
- 2-4 bölüm arası
Platform Farkları
| Kalıp | iOS | Android |
|---|---|---|
| Tab Bar | Alt (standart) | Alt (Material) |
| Geri | Sol swipe | Sistem geri |
| Drawer | Nadir | Yaygın |
| Modal | Slide up | Bottom sheet popüler |
| Gesture nav | Kenardan swipe | Kenardan swipe (Android 10+) |
React Native Navigasyon
- React Navigation: En popüler, Stack + Tab + Drawer desteği
- Expo Router: Dosya tabanlı routing (Next.js benzeri), 2026'da standart haline geliyor
- react-native-screens: Native ekran yönetimi (performans)
- Navigasyon state'i deep link ve notification handling için önemli
Navigasyon seçimi uygulamanın yapısına bağlı. Kullanıcı testleri ile doğrulayın. Basit başlayıp karmaşıklaştırmak, tam tersinden daha kolaydır.