Ama burada dikkatli olmak lazım.

Bu konu sadece “hangi iPhone kaç piksel?” sorusu değil.

Gerçek tasarım tarafında daha önemli sorular var.

Hangi ölçüyle Figma frame açacağım?

Safe area nerede başlıyor?

Dynamic Island içeriği etkiler mi?

Küçük iPhone ekranında buton aşağıda kalır mı?

Büyük iPhone ekranında içerik fazla dağılır mı?

Bu yüzden iPhone ekran boyutlarını sadece cihaz listesi olarak değil, mobil arayüz tasarımı kararı olarak düşünmek daha doğru.

iPhone ekran boyutları neden tasarımcı için önemli?

iPhone tarafında fiziksel piksel, point ve scale kavramları birlikte düşünülür.

Bir cihazın piksel çözünürlüğü yüksek olabilir ama tasarım yaparken çoğu zaman point ölçüsüyle çalışırsın.

Mesela Apple Human Interface Guidelines içinde iPhone modelleri point ve pixel değerleriyle listelenir.

Bu bilgi tasarımcı için şunu sağlar:

• Doğru Figma frame seçimi
• Safe area kontrolü
• Küçük ekran testi
• Büyük ekran testi
• Geliştiriciyle daha net iletişim
• Responsive mobil UI kararları

Yani ekran boyutu bilgisi tek başına teknik değil, tasarım kalitesiyle doğrudan ilgili.

Güncel iPhone ekran ölçüleri

Güncel iPhone modellerinde sık kullanılan ölçüler kabaca şöyle düşünülebilir:

Burada her cihazı tek tek ezberlemek gerekmiyor.

Benim için daha pratik olan, üç farklı kontrol noktası seçmek:

• Küçük ekran: 375 x 667 veya 375 x 812 pt
• Standart modern ekran: 390 x 844 veya 393 x 852 pt
• Büyük ekran: 430 x 932 veya 440 x 956 pt

Bu üç kontrol çoğu mobil UI problemini erken gösterir.

Point ve pixel farkı neden önemli?

Yeni başlayanlar bazen pixel ölçüsüne fazla takılıyor.

iPhone ekranı 1179 x 2556 piksel diye Figma’da direkt o ölçüyle çalışmaya gerek yok.

iOS tasarım tarafında point ölçüsü daha anlamlıdır.

Çünkü geliştirici tarafında layout çoğu zaman point üzerinden düşünülür.

Scale değeri ise bu point değerinin fiziksel piksele nasıl çevrildiğini anlatır.

Basit düşünelim:

Sen tasarımcı olarak kullanılabilir alanı, spacing’i, safe area’yı ve component davranışını doğru kurmaya odaklanmalısın.

Pixel yoğunluğu cihaz tarafından yönetilir.

Safe area iPhone UI tasarımında neden kritik?

iPhone ekranında her alan rahat kullanılabilir alan değildir.

Üstte Dynamic Island veya notch alanı olabilir.

Altta home indicator alanı vardır.

Kenarlar yuvarlatılmıştır.

Bu yüzden tasarımda safe area dikkate alınmalı.

Özellikle şu alanlarda safe area hatası çok görünür:

• Header ve navigation alanı
• Alt sabit butonlar
• Tab bar
• Full screen modal
• Video veya görsel ağırlıklı ekranlar
• Form ekranlarında keyboard davranışı

Figma’da ekran güzel görünüyor diye gerçek cihazda da iyi çalışacak diye düşünmemek lazım.

Safe area bu yüzden mobil arayüz tasarımının temel kontrol noktalarından biri.

Dynamic Island tasarımı etkiler mi?

Evet, bazı ekranlarda etkiler.

Dynamic Island her ekranı komple değiştirmez ama üst alanı ve gerçek kullanılabilir bölgeyi düşünmeni sağlar.

Özellikle tam ekran deneyimler, medya ekranları, harita, kamera, takip ekranları ve canlı aktivite benzeri durumlarda bu alan daha önemli hale gelir.

Normal liste veya form ekranlarında ise daha çok safe area rehberine sadık kalmak yeterli olabilir.

Yine de tasarımcı olarak üst alanı rastgele doldurmamak gerekir.

Küçük iPhone ekranında neyi test etmelisin?

Küçük ekran testi çok değerlidir.

Çünkü tasarımın gerçek dayanıklılığını gösterir.

Küçük ekranda şu problemler hızlı ortaya çıkar:

• Buton aşağıda kaybolur
• Form alanları keyboard altında kalır
• Başlık çok uzun görünür
• Kartlar fazla sıkışır
• Liste öğeleri okunmaz hale gelir
• Boşluklar fazla lüks kalır

Bu yüzden sadece büyük modern iPhone frame’i ile tasarım yapmak risklidir.

Özellikle onboarding, ödeme, kayıt ve form ekranlarını küçük iPhone ölçüsünde kontrol etmek iyi alışkanlık.

Büyük iPhone ekranında neyi test etmelisin?

Büyük ekran da ayrı problem çıkarır.

Küçük ekranda sıkışan tasarım, büyük ekranda fazla boş görünebilir.

Özellikle tek kartlı ekranlar, boş state tasarımları ve kısa formlar büyük ekranda zayıf kalabilir.

Büyük iPhone ekranında şunlara bakarım:

• İçerik fazla yukarıda mı kalıyor?
• Ana aksiyon parmak erişimi için doğru yerde mi?
• Kartlar gereksiz büyüyor mu?
• Form alanları çok uzun mu görünüyor?
• Alt navigation rahat mı?

Yani büyük ekran sadece daha fazla alan demek değil.

Daha iyi yerleşim kararı demek.

iPhone ekran boyutları ve responsive mobil UI

Responsive düşünmek sadece web sitesi için değil.

Mobil uygulamada da farklı iPhone ölçülerine göre arayüzün davranışı düşünülmeli.

Bir ekran küçük iPhone’da tek kolon ve scroll çalışabilir.

Daha büyük iPhone’da görsel alan biraz genişleyebilir.

Tab bar sabit kalabilir.

Alt buton safe area içinde korunabilir.

Burada amaç her cihaz için ayrı ekran çizmek değil.

Arayüzün farklı ölçülerde bozulmadan çalışacağını göstermektir.

Bu konuya daha geniş yer verdiğim Mobil UI Tasarımda Farklı Ekran Boyutları Göz Korkutmasın yazısı da işine yarayabilir.

Figma’da hangi iPhone frame ile çalışmalı?

Tek doğru cevap yok.

Ben genelde standart modern iPhone ölçüsünü ana çalışma alanı olarak seçmeyi mantıklı buluyorum.

Mesela 393 x 852 pt veya 390 x 844 pt iyi başlangıç olabilir.

Ama sadece bu frame ile bırakmam.

Mutlaka küçük ve büyük ekran kontrolü yaparım.

Çünkü bir tasarımın iyi olması için tek bir frame’de güzel görünmesi yetmez.

Farklı iPhone ekran boyutlarında anlamını koruması gerekir.

Benim kısa iPhone UI kontrol listem

• Standart iPhone frame’de tasarım net mi?
• Küçük iPhone ekranında içerik taşıyor mu?
• Büyük iPhone ekranında boşluklar dengeli mi?
• Safe area dikkate alındı mı?
• Dynamic Island / notch alanı problem yaratıyor mu?
• Home indicator alanına buton fazla yakın mı?
• Keyboard açılınca form bozuluyor mu?
• Uzun metinler test edildi mi?
• Tab bar ve navigation erişilebilir mi?
• Geliştiriciye point ölçüsü ve davranış notu verildi mi?

Benim düşüncem

iPhone ekran boyutları listesini bilmek faydalı.

Ama tasarımcı için asıl değer, bu ölçüleri tasarım kararına çevirmek.

Küçük ekran bize sıkışmayı gösterir.

Büyük ekran bize boşluk yönetimini gösterir.

Safe area bize gerçek kullanılabilir alanı gösterir.

Point ölçüsü ise geliştiriciyle aynı dili konuşmamızı sağlar.

Bu yüzden iPhone UI tasarımı yaparken sadece en popüler cihazı açıp çalışmak yeterli değil.

En az üç ölçüde kontrol yapmak daha sağlıklı.

Mobil arayüz tasarımı temelini daha geniş okumak istersen Mobil Arayüz Tasarımı Nedir?, daha genel arayüz mantığı için de Arayüz Tasarımı Nedir? yazılarına bakabilirsin.

Kaynak Sinyalleri

• Apple Human Interface Guidelines – Layout
• Apple – iPhone 16 Technical Specifications
• Apple Support – iPhone 16e Technical Specifications
• Apple Support – iPhone 15 Technical Specifications
• Apple Human Interface Guidelines

The post iPhone Ekran Boyutları: UI/UX Tasarımcılar İçin Güncel Liste first appeared on Burak Poryaz - Web ve Mobil Arayüz Tasarımı - UX Ui Tasarım.