Android ऐप आइकॉन के लिए एक व्यावहारिक मार्गदर्शिका: अनुकूली आइकॉन की व्याख्या (और अपने आइकॉन को सही तरीके से कैसे उत्पन्न करें)

पहली बार Android डेवलपर्स के लिए यह एक आम आश्चर्य है: आप अपने ऐप आइकन के लिए एक एकल वर्ग पीएनजी को पॉलिश करते हैं, इसे 512x512 पर निर्यात करते हैं, और यह आपके छवि संपादक में बिल्कुल सही दिखता है। फिर आप सैमसंग फोन पर डिबग बिल्ड इंस्टॉल करते हैं और आइकन अचानक कटा हुआ और थोड़ा ऑफ-सेंटर दिखता है, जैसे कि लोगो का हिस्सा काट दिया गया हो। फ़ाइल में कुछ भी ग़लत नहीं है. समस्या यह है कि एक भी वर्गाकार छवि कभी भी Android लॉन्चरों की वास्तविक दुनिया के संपर्क में नहीं रह पाएगी, जिनमें से प्रत्येक अलग-अलग तरह से क्रॉप, मास्क और आइकन को नया आकार देता है। यदि आपने अभी तक इसमें भाग नहीं लिया है, तो यह आपके सामने आने में केवल समय की बात है, तो आइए जानें कि हुड के नीचे क्या हो रहा है और इसे पहली बार में कैसे ठीक किया जाए।

एक एकल वर्ग पीएनजी अब पर्याप्त क्यों नहीं है?

Android के शुरुआती वर्षों में, ऐप आइकन बिल्कुल वैसे ही दिखते थे जैसे वे दिखते थे: एक एकल वर्ग (या कभी-कभी मुक्त आकार) पीएनजी जिसे प्रत्येक लॉन्चर वैसे ही प्रदर्शित करता था। यह तब तक ठीक काम करता रहा जब तक निर्माताओं ने अपने फोन को दृश्य रूप से अलग करना शुरू नहीं किया, और ऐसा करने के लिए सबसे आसान स्थानों में से एक होम स्क्रीन थी। सैमसंग गोल वर्ग चाहता था, कुछ चीनी ओईएम स्किन अलग-अलग कोने का उपचार चाहते थे, और स्टॉक Android अंततः सर्कल पर बस गया। अचानक, वही आइकन फ़ाइल बिल्कुल अलग दिखने लगी, और कभी-कभी तो बदतर भी दिखने लगी, यह इस बात पर निर्भर करता है कि यह किसके फ़ोन पर आई थी।

Android 8.0 Oreo के साथ पेश किया गया Google का उत्तर, अनुकूली आइकन सिस्टम था। एक निश्चित आकार की आपूर्ति करने के बजाय, डेवलपर्स स्तरित कलाकृति प्रदान करते हैं जिसे ऑपरेटिंग सिस्टम किसी दिए गए लॉन्चर द्वारा पसंद किए जाने वाले किसी भी आकार में छिपा देता है। दृश्य पहचान सुसंगत रहती है; केवल बाहरी आकृति बदलती है।

एक अनुकूली चिह्न वास्तव में क्या है?

एक अनुकूली आइकन दो अलग-अलग परतों से बनाया गया है, प्रत्येक 108dp x 108dp कैनवास पर कब्जा करता है: एक पृष्ठभूमि परत और एक अग्रभूमि परत। Android दोनों को एक साथ जोड़ता है और फिर वर्तमान लॉन्चर द्वारा उपयोग किए जाने वाले किसी भी मुखौटा आकार को लागू करता है, चाहे वह एक वृत्त हो, एक गोल वर्ग हो, एक अश्रु हो, या पूरी तरह से कुछ और हो। दो-परत संरचना वह है जो Android को सूक्ष्म लंबन और गति प्रभाव भी जोड़ने की अनुमति देती है, क्योंकि जब आप किसी आइकन को टैप या खींचते हैं तो परतें स्वतंत्र रूप से स्थानांतरित हो सकती हैं।

किसी ऐप के संसाधनों में, इसे आमतौर पर mipmap-anydpi-v26/ic_launcher.xml जैसी XML फ़ाइल के माध्यम से परिभाषित किया जाता है, जो पिक्सेल डेटा को शामिल करने के बजाय केवल पृष्ठभूमि और अग्रभूमि ड्रॉबल्स को इंगित करता है। एक पारंपरिक फ्लैट ic_launcher.png अभी भी Android 7.1 या उससे पहले चलने वाले उपकरणों के लिए फ़ॉलबैक के रूप में रखा गया है, जो पूरी तरह से अनुकूली आइकन सिस्टम से पहले का है।

सुरक्षित क्षेत्र क्यों मायने रखता है

यहां वह हिस्सा है जो लोगों को सबसे ज्यादा परेशान करता है। भले ही प्रत्येक परत के लिए कैनवास 108dp x 108dp है, केवल आंतरिक 66dp x 66dp सर्कल, जो उस कैनवास में केन्द्रित है, दिखाई देने की गारंटी है, चाहे कोई भी मुखौटा आकार लागू हो। इस आंतरिक क्षेत्र को आमतौर पर सुरक्षित क्षेत्र कहा जाता है। इसके बाहर की कोई भी चीज़ एक गोलाकार मुखौटे पर दिखाई दे सकती है और फिर अचानक अधिक आक्रामक स्क्वर्कल या अश्रु मुखौटे पर क्लिप की जा सकती है, या इसके विपरीत।

यह ठीक उसी तरह का मुद्दा है जो तब दिखाई देता है जब एक लोगो को उसके दृश्य आकार को अधिकतम करने के लिए कैनवास के किनारों के करीब खींचा जाता है: यह एक गोलाकार मास्क पर बिल्कुल सही दिख सकता है लेकिन सैमसंग के स्क्विर्कल मास्क पर असमान रूप से क्लिप हो जाता है। सुधार कोई नया डिज़ाइन नहीं है, बस कलाकृति को थोड़ा छोटा करना है ताकि सार्थक सामग्री सुरक्षित क्षेत्र के अंदर रहे, चाहे अंततः कोई भी आकार लागू हो।

लॉन्चर आकृतियाँ जिनका आप सामना करेंगे

व्यावहारिक उपाय यह है कि आपको यह चुनने की ज़रूरत नहीं है कि आपका आइकन इनमें से कौन सा आकार पहनेगा। स्टॉक Android लॉन्चर पर उपयोगकर्ता अक्सर सेटिंग मेनू से अपना पसंदीदा आकार भी चुन सकते हैं। आपका एकमात्र वास्तविक लीवर यह सुनिश्चित करना है कि कलाकृति स्वयं उन सभी को सुंदर ढंग से जीवित रखे, जो गारंटी देने के लिए सुरक्षित क्षेत्र है।

परिसंपत्तियों का निर्माण: आपके लिए आवश्यक आकार और घनत्व

यदि आप iOS पर भी ऐप शिपिंग कर रहे हैं, तो पूरी तरह से एक और सेट जोड़ें, क्योंकि ऐप्पल के ऐप स्टोर आइकन की आवश्यकताएं 1024x1024 पर शीर्ष पर हैं और बिना किसी पारदर्शिता के एक पूरी तरह से अलग, गैर-स्तरित प्रारूप का उपयोग करें।

मैनुअल तरीका बनाम जेनरेटर का उपयोग करना

आप इनमें से हर एक आकार को एक छवि संपादक में हाथ से या Android स्टूडियो के अंतर्निहित इमेज एसेट स्टूडियो के माध्यम से तैयार कर सकते हैं, जो एक ही प्रोजेक्ट के लिए घनत्व स्केलिंग और मास्क पूर्वावलोकन को काफी अच्छी तरह से संभालता है। यह तब कठिन हो जाता है जब आप कई ऐप्स में एक डिज़ाइन सिस्टम बनाए रख रहे होते हैं, एक ही मास्टर आर्टवर्क से मिलान iOS निर्यात की आवश्यकता होती है, या बस यह जांचने का एक त्वरित तरीका चाहते हैं कि कोई डिज़ाइन इसे करने से पहले हर आकार में कैसे व्यवहार करता है।

मौजूदा APK से आइकन निकालना

कभी-कभी आवश्यकता विपरीत दिशा में चलती है। हो सकता है कि आपको कोई प्रोजेक्ट उसकी मूल डिज़ाइन फ़ाइलों के बिना विरासत में मिला हो, या आप यह देखना चाहते हों कि किसी प्रतिस्पर्धी ने अपना आइकन डिज़ाइन करने से पहले अपने आइकन को कैसे संरचित किया है, या आपको किसी संबंधित टूल या मार्केटिंग परिसंपत्ति में पुन: उपयोग करने के लिए किसी निर्मित APK से आइकन को वापस खींचने की आवश्यकता है। चूंकि APK प्रभावी रूप से एक संरचित संग्रह है जिसमें ऐप के सभी संसाधन शामिल होते हैं, इसकी लॉन्चर आइकन फ़ाइलें भौतिक रूप से इसके अंदर मौजूद होती हैं और स्क्रैच से पुनर्निर्माण के बजाय सीधे निकाली जा सकती हैं।

हमारा चिह्न निकालने वाला आपके द्वारा अपलोड किए गए किसी भी APK से बिल्कुल इन फ़ाइलों को खींचता है, जिससे आपको मूल डेवलपर द्वारा भेजे गए किसी भी रिज़ॉल्यूशन पर कच्ची आइकन संपत्ति मिलती है, जो अक्सर खोई हुई स्रोत फ़ाइल को पुनर्प्राप्त करने या अध्ययन करने का सबसे तेज़ तरीका है कि कोई अन्य ऐप उसी डिज़ाइन समस्या से कैसे निपटता है।

सामान्य आइकन गलतियाँ जो समीक्षा में चिह्नित की जाती हैं

• अतिरिक्त पैडिंग या यूआई क्रोम में बेकिंग। छवि के अंदर मैन्युअल रूप से जोड़ा गया एक ड्रॉप शैडो, बॉर्डर या गोल-कोने वाला प्रभाव सिस्टम की स्वयं की मास्किंग के साथ टकराव करता है और अक्सर दोगुना या गलत संरेखित दिखता है।
• बिना किसी स्पष्ट किनारे वाली शुद्ध सफेद पृष्ठभूमि का उपयोग करना। प्रकाश-थीम वाले लॉन्चर पर, आइकन होम स्क्रीन पृष्ठभूमि के खिलाफ लगभग अदृश्य हो सकता है।
• अति सूक्ष्म विवरण. टेक्स्ट और जटिल लाइनवर्क जो 512px पर स्पष्ट दिखते हैं, अक्सर 48px तक कम होने पर एक अपठनीय धुंध में बदल जाते हैं, जो कि अधिकांश उपयोगकर्ता इसे दिन-प्रतिदिन देखते हैं।
• प्ले स्टोर लिस्टिंग आइकन और इंस्टॉल करने वाले आइकन के बीच एक बेमेल। समीक्षक और उपयोगकर्ता दोनों नोटिस करते हैं जब ये दोनों मेल नहीं खाते हैं, और इसे मैला या इससे भी बदतर, संदिग्ध के रूप में पढ़ा जाता है।
• विरासत की वापसी को पूरी तरह से भूल जाना। यदि आपका ऐप अभी भी 8.0 से पहले के Android संस्करणों का समर्थन करता है, तो फ्लैट पीएनजी फ़ॉलबैक को छोड़ने से उन उपयोगकर्ताओं के पास टूटा हुआ या सामान्य दिखने वाला आइकन रह सकता है।

शिप करने से पहले सभी आकृतियों में अपने आइकन का परीक्षण करना

किसी आइकन को अंतिम रूप देने से पहले, यह मानने के बजाय कि यह साफ-सुथरा अनुवाद करेगा, कम से कम एक गोलाकार मुखौटा और एक गोलाकार मुखौटा के तहत इसका पूर्वावलोकन करना उचित है। Android स्टूडियो के इमेज एसेट स्टूडियो में ठीक इसी कारण से कई लॉन्चर आकृतियों में एक लाइव पूर्वावलोकन शामिल है, और किसी समस्या को पकड़ने में केवल एक मिनट का समय लगता है जो अन्यथा केवल प्रकाशन के बाद सामने आएगा, जब "गलत" लॉन्चर आकार पर कोई उपयोगकर्ता वापस रिपोर्ट करता है कि कुछ गड़बड़ लग रहा है।

अक्सर पूछे जाने वाले प्रश्न (FAQ)

इनमें से किसी के लिए आपको डिज़ाइन सिद्धांत में पृष्ठभूमि की आवश्यकता नहीं है, बस एक जागरूकता है कि आपका आइकन इस तरह से नया आकार दिया जाएगा कि आप उस पल को नियंत्रित नहीं कर पाएंगे जब यह आपके हाथ से छूट जाएगा। सुरक्षित क्षेत्र के लिए डिज़ाइन करें, विरासत फ़ॉलबैक को चारों ओर रखें, एक साफ़ मास्टर फ़ाइल से हर आवश्यक आकार उत्पन्न करें, और आपका आइकन कोई फर्क नहीं पड़ता कि यह किस लॉन्चर पर गिरता है।