अनुकूली प्रतीक डिजाइन करना

Android O एक नया ऐप आइकन प्रारूप पेश करता है: अनुकूली आइकन। अनुकूली आइकन सभी ऐप आइकन के आकार को एकजुट करके और दिलचस्प दृश्य प्रभावों के लिए दरवाजा खोलकर उपकरणों को अधिक सुसंगत बना सकते हैं। यह पोस्ट बताती है कि वे कैसे काम करते हैं और उन्हें डिजाइन करने के लिए कुछ तकनीकों की खोज करते हैं।

वापस देखने के लिए कि यह सुविधा कहां से आई है, देखें:

बुनियादी बातों

आकार और आकृति

अनुकूली चिह्न 108dp * 108dp आकार के होते हैं लेकिन अधिकतम 72dp * 72dp के होते हैं। विभिन्न उपकरण अलग-अलग मास्क की आपूर्ति कर सकते हैं जो आकार में उत्तल होना चाहिए और स्थानों से केंद्र से न्यूनतम 33dp तक पहुंच सकता है।

विभिन्न आकार के मुखौटे के उदाहरण लागू किए जा रहे हैं

मास्क की न्यूनतम पहुंच के कारण, आप 66dp व्यास वाले वृत्त को एक सुरक्षित क्षेत्र मान सकते हैं, जिसकी क्लिपिंग नहीं होने की गारंटी है।

एक गोल वर्ग मास्क के भीतर सुरक्षित क्षेत्र

Keylines

आइकन की कुंजी

कीलाइन आकार आइकन ग्रिड की नींव है जो आपके आइकन के दृश्य अनुपात को अन्य एप्लिकेशन के आइकन के अनुरूप बनाने में मदद करता है। कीलाइन आकार हैं:

  • मंडलियाँ: 52dp और 36dp व्यास
  • स्क्वायर: 44dp * 44dp, 4dp कॉर्नर त्रिज्या
  • आयताकार: 52dp * 36dp और 36dp * 52dp, 4dp कोने त्रिज्या

इस लेख के अंत में शामिल टेम्प्लेट देखें।

परतें

अनुकूली चिह्न वास्तव में दो परतों से बने होते हैं; एक अग्रभूमि और एक पृष्ठभूमि। दोनों परतें 108dp * 108dp हैं; पृष्ठभूमि पूरी तरह से अपारदर्शी होनी चाहिए, जबकि अग्रभूमि में पारदर्शिता शामिल हो सकती है। ये परतें एक दूसरे के ऊपर खड़ी होती हैं।

तत्वों को दो अलग-अलग परतों में प्रदान करना जो प्रदर्शित (यानी नकाबपोश) आकार से बड़े होते हैं, दिलचस्प दृश्य उपचार और एनिमेशन के लिए अवसर पैदा करते हैं। वास्तव में क्या प्रभाव लागू किया जा सकता है और जब अभी भी एक खुले सवाल का कुछ है; यह तय करने के लिए डिवाइस और लॉन्चर निर्माताओं पर निर्भर है। यहां कुछ सरल उदाहरण हैं जिनकी आप कल्पना कर सकते हैं: मास्क लगाने से पहले प्रत्येक परत का स्वतंत्र रूप से अनुवाद या स्केलिंग करके लंबन या स्पंदन।

जैसा कि 108dp * 108dp के आइकन 72dp * 72dp तक के होते हैं, प्रत्येक तरफ बाहरी 18dp को "अतिरिक्त" सामग्री माना जा सकता है, जो केवल गति के दौरान प्रकट होता है।

रचना विवेचन

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

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

कतरन

अनुकूली आइकन की गतिशील प्रकृति के कारण, आपको सटीक मुखौटा आकार नहीं पता चल सकता है जो लागू किया जाएगा। इस कारण से आपके ब्रांड चिह्न जैसे किसी भी महत्वपूर्ण तत्व को सुरक्षित-क्षेत्र के अंदर रखना और मुखौटा किनारों से दूर रहना सबसे अच्छा है।

बैकग्राउंड एंकरिंग

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

विभिन्न परतों पर तत्व लेयरिंग पर जोर देते हैं

यह गति के लिए दिलचस्प अवसर पैदा करता है जहां आप चमकीले रंग ब्लॉक पर नेत्रहीन लंगर डालते हैं, लेकिन यह अग्रभूमि तत्वों से कम चलता है, जिससे गहराई की अनुभूति होती है।

नकाबपोश लोग

मुझे लगता है कि अग्रभूमि में मास्किंग तत्वों को रखने के लिए दिलचस्प अवसर हो सकते हैं - वे ठोस तत्व हैं जो कट आउट वाले क्षेत्र हैं। Google Play Store के लिए एक संभावित आइकन पर विचार करें, इसका निर्माण ‘स्पष्ट’ तरीके से किया जा सकता है, जो सफेद पृष्ठभूमि के ऊपर अग्रभूमि में रंगीन त्रिकोण को रखता है।

एक 'मानक' अग्रभूमि एक सफेद पृष्ठभूमि के ऊपर रखा गया

ऐसा करने के बजाय, हम एक रंगीन पृष्ठभूमि और त्रिकोण के साथ एक सफेद अग्रभूमि का उपयोग कर सकते हैं, जो एक ही स्थिर आउटपुट का उत्पादन करने के लिए घटाया गया है:

मास्किंग अग्रभूमि के साथ एक वैकल्पिक रंगीन पृष्ठभूमि

यह सेटअप ed के माध्यम से झांकने ’की अनुमति देता है, जब ed अनुवादित या स्केल किए जाने पर पृष्ठभूमि के विभिन्न हिस्सों को प्रकट करने वाले मुखौटे से स्वतंत्र रूप से आगे बढ़ता है।

वाम एक नियमित रचना है; राइट एक मास्किंग अग्रभूमि के साथ

प्रकाश और छाया

अलग-अलग परतों में लगाए गए प्रकाश प्रभाव और छाया की परस्पर क्रिया के दिलचस्प परिणाम हो सकते हैं। उदाहरण के लिए अग्रभूमि तत्व पर लंबी-छाया तकनीक का उपयोग करके एक चंचल बातचीत हो सकती है क्योंकि यह नकाबपोश क्षेत्र के भीतर चलती है। इसी प्रकार प्रकाश प्रभाव को पृष्ठभूमि में बेक किए जाने के बजाय अग्रभूमि की परत में रखा जा सकता है। उदाहरण के लिए, प्रकाश स्रोत का अनुकरण करने के लिए अग्रभूमि में एक a फिनिश ’परत रखी जा सकती है। इसे अग्रभूमि में रखने का अर्थ है कि यह गति के दौरान पृष्ठभूमि की परत के ऊपर खेलेगा, एक अलग दर पर चलते हुए।

अग्रभूमि छाया का उदाहरण और (अतिरंजित) प्रकाश स्रोत पृष्ठभूमि पर डाली

सावधान रहें कि ऐसा प्रभाव न बनाएं जिससे समझ में न आए एक अग्रभूमि तत्व से अलग या एक पृष्ठभूमि तत्व के पीछे चलती एक छाया। यह भी याद रखें कि कई आइकन एक साथ देखे जाने की संभावना है इसलिए बिसपोक प्रकाश प्रभाव के साथ रूढ़िवादी रहें और सामग्री दिशानिर्देशों के करीब रहें।

बेहिदों को छोड़ो

आप उन तत्वों को पृष्ठभूमि परत में रख सकते हैं जो अग्रभूमि परत द्वारा पूरी तरह से अस्पष्ट हैं और केवल गति के तहत ही प्रकट हुए हैं।

तत्वों को केवल गति के तहत पता चला

संसाधन और उपकरण

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

यदि आपके पास आपकी चीज़ है तो मैंने Adobe Illustrator टेम्पलेट भी अपलोड किया है।

इसके अतिरिक्त इन अन्य संसाधनों की जाँच करें जो मैं भर आया हूँ:

  • अनुकूली आइकन पूर्वावलोकन उपकरण
  • एफिनिटी डिज़ाइनर टेम्पलेट
  • Bjango टेम्पलेट्स में अनुकूली आइकन शामिल हैं
  • अंजीर टेम्पलेट (प्रवेश की आवश्यकता है)
  • एडोब एक्सडी टेम्पलेट

अनुकूली चिह्न खेल का मैदान

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

आपके आइकन पर लागू मास्क और गति प्रभाव के साथ प्रयोग

एप्लिकेशन आपके डिवाइस पर अनुकूली आइकन के साथ इंस्टॉल किए गए सभी एप्लिकेशन प्रदर्शित करता है। ग्रिड को स्क्रॉल करने से आइकन पर लंबन प्रभाव लागू होता है और आइकन को छूने से स्केल इफेक्ट लागू होता है। आप प्रभावों की ताकत को कॉन्फ़िगर कर सकते हैं और सभी आइकन पर लागू मास्क को बदल सकते हैं। उम्मीद है कि यह उपकरण आपको यह अनुमान लगाने में मदद करता है कि आपका आइकन कैसे दिखाई देगा और विभिन्न उपकरणों पर आगे बढ़ सकता है।

आप एपीके डाउनलोड कर सकते हैं या जीथूब पर स्रोत की जांच कर सकते हैं:

आगे बढ़ो और अनुकूलन करें

उम्मीद है कि इस पोस्ट ने आपको अपने ऐप के लिए एक बढ़िया अनुकूली आइकन डिज़ाइन करने के लिए जानकारी और कुछ प्रेरणा दी है। एक उपयोगकर्ता के रूप में, मैं अपने ऐप्स का अधिक सुसंगत बनने के लिए इंतजार नहीं कर सकता। हालांकि मुझे इससे भी अधिक उत्साहित करता है, हम एक समुदाय के रूप में क्या रचनात्मक समाधान देख रहे हैं।

यदि आप एक अनुकूली आइकन बनाने वाले एक डेवलपर हैं, तो मुझे भाग 3 में शामिल करें: अनुकूली आइकन लागू करना।