สัดส่วนและ safe area
สัดส่วน iPhone
สัดส่วนจริงต่อ iPhone class สมัยใหม่:
- 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)
5.5" คือข้อยกเว้นอุปกรณ์เก่าใช้ 16:9 ถ้าออกแบบสำหรับทั้งสองยึดเนื้อหาสำคัญไว้ในแถบแนวตั้งตรงกลางเพื่อให้มองเห็นได้ในทั้งสองสัดส่วน
Safe area
App Store แสดงภาพหน้าจอด้วยมุมโค้ง (ตรงกับกรอบอุปกรณ์) และอาจวาง metadata ของแอปทับในบางตำแหน่งของคารูเซลจากประสบการณ์จริง:
- 80 px บนสุด อาจถูกตัดโดย status-bar overlays หรือรัศมีมุมโค้ง
- 60 px ขอบ แต่ละด้านเป็น safe gutter ที่สมเหตุสมผล
- 100 px ล่างสุด บางครั้งถูกปิดโดย affordance "scroll for more" บนโทรศัพท์ขนาดเล็ก
คำบรรยายและ CTA ควรอยู่ระหว่าง 80 ถึง 600 px จากด้านบนของงานดีไซน์มองเห็นได้ที่ขนาดย่อไม่ถูกตัดที่ขนาดเต็ม
สายตาตกอยู่ที่ไหนก่อน
การศึกษา eye-tracking ของคารูเซล App Store (สอดคล้องกันในการวิเคราะห์ของหลายบริษัท ASO ปี 2024-2026) ชี้ให้เห็นว่าความสนใจที่แข็งแกร่งที่สุดอยู่ที่มุมบนซ้ายของแต่ละพาเนลข้อความคำบรรยายสำคัญอ่านได้ดีที่สุดเมื่อพาดหัวส่วนบนหนึ่งในสี่ของพาเนลและใช้สีที่ contrast สูงกับพื้นหลังการ render อุปกรณ์ทำงานได้ดีกว่าเมื่อเอียงเล็กน้อย (8-15° รอบแกน Y) แทนการตั้งตรง
Safe-zone overlay ในทางปฏิบัติ
ถ้าออกแบบใน Figma หรือ Photoshop วาง guides เหล่านี้บน canvas (ใช้ 6.9" เป็นฐานปรับขนาดตามสัดส่วนสำหรับ class อื่น):
- ขอบบน: 80 px
- ขอบล่าง: 100 px
- ขอบข้าง: 60 px แต่ละด้าน
- โซนคำบรรยาย: 80-600 px จากด้านบน
- โซนอุปกรณ์: 600-2400 px จากด้านบน