Tỷ lệ khung hình và vùng an toàn.
Tỷ lệ khung hình iPhone
Tỷ lệ khung hình thực tế theo từng loại iPhone hiện đại:
- 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)
Loại 5.5" là ngoại lệ — thiết bị cũ hơn dùng 16:9. Nếu bạn thiết kế cho cả hai, neo nội dung quan trọng vào dải dọc trung tâm để nó vẫn hiển thị ở cả hai tỷ lệ.
Vùng an toàn
App Store render ảnh chụp màn hình với góc bo (khớp với khung thiết bị) và có thể phủ metadata ứng dụng ở một số vị trí carousel. Theo thực tế:
- 80 px trên cùng có thể bị cắt bởi lớp phủ thanh trạng thái hoặc bán kính góc.
- 60 px cạnh mỗi bên là lề an toàn thực tế.
- 100 px dưới cùng đôi khi bị che bởi khả năng "cuộn để xem thêm" trên điện thoại nhỏ hơn.
Chú thích và CTA nên nằm giữa 80 và 600 px từ trên cùng của thiết kế — hiển thị ở kích thước thumbnail, không bị cắt ở kích thước đầy đủ.
Mắt nhìn vào đâu đầu tiên
Carousel cửa hàng được lướt qua, không phải đọc kỹ: người dùng vuốt qua ở kích thước thumbnail và chỉ nhìn phần trên cùng của mỗi bảng trước tiên. Văn bản chú thích quan trọng đọc tốt nhất khi trải dài phần tư trên cùng của bảng và dùng màu tương phản cao với nền. Một chút nghiêng có thể tạo chiều sâu, nhưng thứ thực sự có tác dụng ở kích thước thumbnail là sự nhất quán: dù bạn chọn góc nghiêng nào, hãy dùng đúng góc đó trên mọi bảng.
Lớp phủ vùng an toàn thực tế
Nếu bạn thiết kế trong Figma hoặc Photoshop, thêm các guide này vào canvas (dùng 6.9" làm cơ sở, chia tỷ lệ tương ứng cho các loại khác):
- Lề trên: 80 px
- Lề dưới: 100 px
- Lề bên: 60 px mỗi bên
- Vùng chú thích: 80–600 px từ trên
- Vùng thiết bị: 600–2400 px từ trên