App Store स्क्रीनशॉट के लिए कलर पैलेट
अधिकांश App Store स्क्रीनशॉट पैलेट एक ही तरह से फेल होते हैं: 27 इंच के मॉनिटर पर शानदार दिखते हैं और App Store जिस साइज़ पर दिखाता है उस पर कीचड़ बन जाते हैं। कैरोसेल प्रोडक्ट पेज पर फुल रेज़ोल्यूशन में रेंडर होता है, लेकिन सर्च रिज़ल्ट और "More like this" रेल में थंबनेल चौड़ाई पर। अगर आपका पैलेट सिर्फ एक साइज़ पर काम करता है, तो दूसरे पर कन्वर्ज़न घटता है।
तीन देखने के संदर्भ
इन्हें तीन अलग डिज़ाइन बाधाओं के रूप में देखें। एक में जीतने वाला पैलेट दूसरे में हार सकता है।
- फुल साइज़ (iPhone पर 1290 × 2796)। प्रोडक्ट-पेज रेंडर। जहाँ यूज़र टैप करने के बाद पहुँचते हैं। सूक्ष्म ग्रेडिएंट, महीन टेक्स्ट और जटिल लेयर वाले रंग यहाँ पढ़े जाते हैं। ज़्यादातर डिज़ाइनर केवल इसी साइज़ पर टेस्ट करते हैं।
- सर्च थंबनेल (~300 × 650)। App Store सर्च में प्रतिस्पर्धी ऐप आइकन के साथ पहले तीन कैरोसेल पैनल। बारीकियाँ गायब हो जाती हैं। हाई-कंट्रास्ट कलर ब्लॉक पढ़े जाते हैं; सूक्ष्म ग्रेडिएंट समतल हो जाते हैं।
- आसपास का संदर्भ। आपका स्क्रीनशॉट सर्च में अकेला नहीं दिखता। आसपास के सात ऐप्स के अपने पैलेट हैं। अगर आपकी कैटेगरी में सब गर्म रंग चुनते हैं और आप भी यही करते हैं, तो आपका स्क्रीनशॉट दीवार में खो जाता है।
पाँच रंगों का नियम
पाँच रंग अधिकतम सीमा है। एक प्रमुख बैकग्राउंड रंग (या दो के बीच ग्रेडिएंट), एक प्राथमिक टेक्स्ट रंग, एक ज़ोर के लिए एक्सेंट, और आपके ऐप के वास्तविक स्क्रीनशॉट से आने वाले रंग। छठा रंग जोड़ने का मतलब है एक और हटाना, जोड़ना नहीं।
यह सौंदर्यशास्त्र की वजह नहीं है — थंबनेल विज़ुअल जानकारी को जोरदार तरीके से कम्प्रेस करते हैं, और बहुत अधिक रंगों वाला पैलेट बेज धुंध बन जाता है। चार से पाँच रंग वह सीमा है जहाँ 200px पर हर रंग अलग दिखता है।
कंट्रास्ट: WCAG AA ज़रूरी है
पैनल बैकग्राउंड पर कैप्शन टेक्स्ट WCAG AA (बॉडी टेक्स्ट के लिए 4.5:1, 24pt+ बड़े टेक्स्ट के लिए 3:1) तक पहुँचना चाहिए। Apple इसकी जाँच नहीं करता — लेकिन थंबनेल साइज़ पर AA से नीचे कुछ भी सचमुच अपठनीय हो जाता है। एक्सपोर्ट से पहले अपने फाइनल कैप्शन रंग को फाइनल बैकग्राउंड रंग के खिलाफ कंट्रास्ट चेकर से जाँचें।
आम गलती: थोड़े हल्के गहरे ग्रे ग्रेडिएंट पर गहरे ग्रे टेक्स्ट। Figma में परिष्कृत दिखता है। थंबनेल चौड़ाई पर पूरी तरह गायब हो जाता है।
कैटेगरी परंपरा: शुरुआत का बिंदु, नियम नहीं
अपनी App Store कैटेगरी में टॉप 20 ऐप देखें। उनके प्रमुख पैलेट रंग नोट करें। यही आपकी कैटेगरी परंपरा है — वह पैलेट जो यूज़र "इस कैटेगरी में विश्वसनीय ऐप" से जोड़ते हैं। आप इसे अपना सकते हैं (कम जोखिम, कम अंतर) या जानबूझकर तोड़ सकते हैं (अधिक जोखिम, काम करने पर अधिक अंतर)।
परंपरा तोड़ना तब काम करता है जब कोई विशेष कारण हो। Notion की कैटेगरी (प्रोडक्टिविटी) 2022 में चमकीले पेस्टल की ओर थी; Notion लगभग मोनोक्रोम और हल्की गर्माहट के साथ गया और अधिक गंभीर लगा। Headspace की कैटेगरी (मानसिक स्वास्थ्य) मुलायम पेस्टल से भरी थी; Headspace के गहरे-नारंगी ग्रेडिएंट ने बिना आक्रामक हुए ध्यान खींचा। पहले मिलाएं, फिर तोड़ें — पहले प्रोडक्ट लॉन्च के लिए मिलाएं, डेटा मिलने के बाद ही तोड़ें।
"सर्च में आसपास" ऑडिट
शिप करने से पहले यह करें: App Store में उन दो-तीन कीवर्ड पर सर्च करें जिन पर आपका ऐप रैंक करता है (या करना चाहता है)। उन कीवर्ड के टॉप ऐप के नीचे स्क्रीनशॉट स्ट्रिप देखें। क्या आपका डिज़ाइन किया हुआ पैलेट आसपास के ऐप्स से अलग दिखेगा, या उनमें मिल जाएगा?
यह तीस सेकंड का ऑडिट है और अधिकांश टीम इसे छोड़ देती हैं। जो पैलेट अकेले में अनूठा लगा, वह सर्च में आपके ऊपर-नीचे के पाँच प्रतिस्पर्धियों जैसा ही नीले-से-बैंगनी ग्रेडिएंट हो सकता है। आमतौर पर एक एक्सेंट रंग बदलने से काम हो जाता है।
डार्क, लाइट, या कोई नहीं
एक स्पष्ट स्थिति चुनें: मुख्यतः डार्क बैकग्राउंड, मुख्यतः लाइट बैकग्राउंड, या सभी पैनल में एक सुसंगत ग्रेडिएंट परिवार। एक कैरोसेल में डार्क और लाइट पैनल मिलाना सबसे सामान्य गलती है — यह लगता है जैसे डिज़ाइन का कोई निर्देशक नहीं था।
देखें डार्क मोड बनाम लाइट मोड — कैटेगरी के हिसाब से कब कौन जीतता है। संक्षेप में: गेम्स, म्यूज़िक, फोटो/वीडियो, AI में डार्क जीतता है; प्रोडक्टिविटी, शिक्षा, वेलनेस में लाइट; बाकी जगह ब्रांड तय करता है।
रंग और लोकलाइज़ेशन
रंगों के अर्थ लोकेल के हिसाब से अलग होते हैं। लाल रंग चीनी बाज़ार में शुभ होता है, अधिकांश यूरोप में नकारात्मक। सफेद रंग पूर्व एशिया में शोक का प्रतीक है। चमकीला हरा कुछ जगह "आगे बढ़ो" का संकेत है तो कुछ जगह "ईर्ष्या" का। अधिकांश ऐप के लिए ये बदलाव ब्रांड स्थिरता से कम महत्वपूर्ण हैं — एक पैलेट चुनें और दुनियाभर में शिप करें। प्रति-लोकेल पैलेट केवल तभी सोचें जब आपकी ब्रांड के लिए रंग प्रतीकवाद महत्वपूर्ण हो (लक्जरी, वेलनेस, फाइनेंस) और आपके पास डेटा हो।
इस हफ्ते क्या करें
- अपने मौजूदा स्क्रीनशॉट 200px चौड़ाई पर ऑडिट करें। जो उस साइज़ पर अपठनीय हो, उसे बदलें।
- हर कैप्शन को उसके पैनल बैकग्राउंड के खिलाफ WCAG AA कंट्रास्ट वेरिफाई करें।
- अपने टॉप तीन कीवर्ड पर सर्च करें और आसपास का संदर्भ स्क्रीनशॉट करें। क्या आपका पैलेट अलग दिखता है?
- अगर नया डिज़ाइन शिप कर रहे हैं, तो अधिकतम पाँच रंग रखें। छठा जोड़ने का मतलब एक हटाना है।