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
Korsel toko dipindai, bukan dibaca: orang menggeser dengan cepat pada ukuran thumbnail dan menangkap bagian atas tiap panel lebih dulu. Teks caption paling terbaca saat membentang di seperempat atas panel dan menggunakan warna kontras tinggi terhadap latar belakang. Sedikit kemiringan bisa menambah kedalaman, tapi yang benar-benar terbaca pada ukuran thumbnail adalah konsistensi: sudut apa pun yang kamu pilih, gunakan sudut yang sama di setiap panel.
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