Rasio aspek dan area aman.
Rasio aspek iPhone
Rasio aspek aktual per kelas iPhone modern:
- 6.9" (16 Pro Max):
1320 × 2868= 2.173 (≈ 19.5:9) - 6.7" (15 Pro Max, 15 Plus, 14 Plus, 13 Pro Max, 12 Pro Max):
1290 × 2796= 2.167 - 6.1" (16, 15, 14, 13, 12, 11):
1170 × 2532= 2.164 - 5.5" (8 Plus, 7 Plus, 6s Plus):
1242 × 2208= 1.778 (16:9)
Kelas 5.5" adalah pengecualian — perangkat lama menggunakan 16:9. Jika kamu mendesain untuk keduanya, jangkarkan konten kritis ke jalur vertikal tengah agar tetap terlihat di kedua rasio.
Area aman
App Store merender tangkapan layar dengan sudut membulat (sesuai bingkai perangkat) dan mungkin melapisi metadata aplikasi di beberapa posisi korsel. Secara empiris:
- 80 px teratas bisa terpotong oleh overlay status bar atau radius sudut.
- 60 px tepi di setiap sisi adalah gutter aman yang realistis.
- 100 px bawah kadang tertutup oleh affordance "gulir untuk lebih banyak" di ponsel yang lebih kecil.
Teks dan CTA harus berada antara 80 dan 600 px dari atas desain — terlihat pada ukuran thumbnail, tidak terpotong pada ukuran penuh.
Di mana mata tertuju pertama kali
Studi pelacakan mata pada korsel App Store (konsisten di beberapa analisis firma ASO, 2024-2026) menempatkan perhatian terkuat di kuadran kiri atas setiap panel. Teks paling terbaca saat membentang di seperempat atas panel dan menggunakan warna kontras tinggi terhadap latar belakang. Render perangkat lebih efektif saat sedikit dimiringkan (8-15° di sekitar sumbu Y) daripada tegak lurus.
Overlay zona aman praktis
Jika kamu mendesain di Figma atau Photoshop, letakkan panduan ini di kanvasmu (menggunakan 6.9" sebagai dasar, skalakan secara proporsional untuk kelas lain):
- Margin atas: 80 px
- Margin bawah: 100 px
- Margin samping: 60 px masing-masing
- Zona teks: 80–600 px dari atas
- Zona perangkat: 600–2400 px dari atas