สัดส่วนและ 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 จากด้านบนของงานดีไซน์มองเห็นได้ที่ขนาดย่อไม่ถูกตัดที่ขนาดเต็ม
สายตาตกอยู่ที่ไหนก่อน
คารูเซลในสโตร์ถูก 'กวาดตา' ไม่ใช่ 'อ่าน': ผู้คนปัดผ่านในขนาดเธมบ์เนลและมองด้านบนของแต่ละพาเนลก่อนเป็นอันดับแรก คำบรรยายสำคัญอ่านได้ดีที่สุดเมื่อพาดหัวส่วนบนหนึ่งในสี่ของพาเนลและใช้สีที่ contrast สูงกับพื้นหลัง การเอียงเล็กน้อยช่วยเพิ่มมิติได้ แต่สิ่งที่อ่านออกจริงในขนาดเธมบ์เนลคือความสม่ำเสมอ: ไม่ว่าจะเลือกมุมไหน ให้ใช้มุมเดียวกันในทุกพาเนล
Safe-zone overlay ในทางปฏิบัติ
ถ้าออกแบบใน Figma หรือ Photoshop วาง guides เหล่านี้บน canvas (ใช้ 6.9" เป็นฐานปรับขนาดตามสัดส่วนสำหรับ class อื่น):
- ขอบบน: 80 px
- ขอบล่าง: 100 px
- ขอบข้าง: 60 px แต่ละด้าน
- โซนคำบรรยาย: 80-600 px จากด้านบน
- โซนอุปกรณ์: 600-2400 px จากด้านบน