आस्पेक्ट रेशियो और सेफ एरिया।
iPhone आस्पेक्ट रेशियो
आधुनिक iPhone क्लास के वास्तविक आस्पेक्ट रेशियो:
- 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 इस्तेमाल करते थे। अगर आप दोनों के लिए डिज़ाइन कर रहे हैं, तो महत्वपूर्ण कंटेंट को केंद्रीय वर्टिकल पट्टी से जोड़ें ताकि दोनों रेशियो में दिखे।
सेफ एरिया
App Store स्क्रीनशॉट को गोल कोनों के साथ रेंडर करता है (डिवाइस फ्रेम से मेल खाते) और कुछ कैरोसेल पोज़िशन में ऐप मेटाडेटा ओवरले कर सकता है। अनुभव के आधार पर:
- शीर्ष 80 px स्टेटस-बार ओवरले या कॉर्नर रेडियस से क्लिप हो सकता है।
- हर तरफ Edge 60 px व्यावहारिक सेफ गटर है।
- नीचे 100 px कभी-कभी छोटे फोन पर "scroll for more" अफोर्डेंस से ढक जाता है।
कैप्शन और CTA डिज़ाइन के शीर्ष से 80 से 600 px के बीच रखें — थंबनेल साइज़ पर दिखें, फुल साइज़ पर क्लिप न हों।
आँख पहले कहाँ जाती है
स्टोर कैरोसेल स्कैन किए जाते हैं, पढ़े नहीं जाते: लोग थंबनेल साइज़ पर स्वाइप करते हुए गुज़रते हैं और सबसे पहले हर पैनल का ऊपरी हिस्सा देखते हैं। महत्वपूर्ण कैप्शन टेक्स्ट तब सबसे अच्छा पढ़ा जाता है जब यह पैनल के ऊपरी चौथाई में फैला हो और बैकग्राउंड के विपरीत हाई-कंट्रास्ट रंग में हो। हल्का सा टिल्ट गहराई जोड़ सकता है, लेकिन थंबनेल साइज़ पर असल में जो चीज़ पढ़ी जाती है वह है निरंतरता: जो भी एंगल चुनें, हर पैनल पर वही इस्तेमाल करें।
व्यावहारिक सेफ-ज़ोन ओवरले
अगर आप Figma या Photoshop में डिज़ाइन कर रहे हैं, तो इन गाइड्स को अपने कैनवास पर डालें (6.9" को बेस मानकर, दूसरी क्लास के लिए आनुपातिक स्केल करें):
- शीर्ष मार्जिन: 80 px
- नीचे मार्जिन: 100 px
- साइड मार्जिन: 60 px प्रत्येक
- कैप्शन ज़ोन: शीर्ष से 80-600 px
- डिवाइस ज़ोन: शीर्ष से 600-2400 px