उत्तरदायी आंकड़ा टेम्पलेट्स: iOS मोबाइल नेविगेशन के लिए एक लचीली डिजाइन घटक बनाना

जब भी एक नया उत्पाद बनाते हैं, तो मैं इसे पिछले एक से बेहतर बनाना चाहता हूं, फिजी में डिजाइन सिस्टम के सुविधाजनक और लचीले घटक बनाने के लिए एक सुरुचिपूर्ण समाधान चुनें।

फिगमा के लिए घटक आईओएस टेम्प्लेट का एक सेट बनाते समय, मैंने टैब बार घटक के साथ प्रयोग करने का निर्णय लिया। आपको याद दिला दूं कि iOS दिशानिर्देशों में यह सबसे नीचे का नेविगेशन है। मैं चाहता था कि इसकी सामग्री एक तार्किक और इष्टतम आकार देने वाला व्यवहार हो। मैं इसे सभी आईओएस उपकरणों के लिए अनुकूली बनाना चाहता था, जितना कि फिगमा और बाधाओं की अनुमति देता है।

वैसे, यदि आप फिम्मा का उपयोग करते हैं , तो मैं हमारे तैयार-किए गए डिज़ाइन सिस्टम पर ध्यान देने की सलाह देता हूं। वे फ्रीलांसरों को प्रति माह अधिक ऑर्डर पूरा करने में मदद करते हैं, प्रोग्रामर को अपने दम पर सुंदर एप्लिकेशन बनाने की अनुमति दी जाती है, और टीम के काम के लिए तैयार डिजाइन सिस्टम का उपयोग करके टीम "स्प्रिंट" तेजी से आगे बढ़ती है।

और अगर आपके पास एक गंभीर परियोजना है, तो हमारी टीम हमारी सर्वोत्तम प्रथाओं के आधार पर संगठन के भीतर एक डिजाइन प्रणाली को तैनात करने के लिए तैयार है और यह Figma का उपयोग करके विशिष्ट कार्यों के लिए दर्जी है। वेब / डेस्कटॉप, और कोई भी मोबाइल। हम React / React Native से भी परिचित हैं। टी को लिखें: @kamushken

टैब बार में क्या होता है?

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

अनुकूली घटक

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



तत्व उनके बीच के इंडेंटेशन के अनुपात में चलते हैं। नीचे मैं बात करूंगा कि इस व्यवहार को सरल तरीके से कैसे प्राप्त किया जाए।

समस्या आइकन में है।

अंजीर में एक अच्छी डिजाइन प्रणाली में आवश्यक रूप से माउस का एक पुस्तकालय होता है। कम से कम बुनियादी व्यवस्था। यह SVG फ़ाइलों से हर बार उन्हें मैन्युअल रूप से आयात करने की आवश्यकता को समाप्त करता है।

एक अच्छे तरीके से, प्रत्येक घटक-आइकन के लिए जिससे आप समय के साथ एक सुविधाजनक पुस्तकालय का निर्माण करेंगे, स्केल मोड में निरंतर होना चाहिए। फिर आपको एक लचीला आइकन मिलेगा जो किसी भी आयाम में उपयोग किया जा सकता है: 16x16, 44x44 और इसी तरह।

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



समस्या को हल करने के कई तरीके हैं।

पहला तरीका आइकन को तुरंत डिस्कनेक्ट करना है

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

• प्लस : गति।
• माइनस : सिस्टम से घटक को डिस्कनेक्ट कर रहा है।

आइकन घटक के लिए संदर्भ मेनू में डिटैच इंस्टेंस कार्यक्षमता का उपयोग करें

दूसरा तरीका यह है कि सिस्टम में दो तरह के आइकन स्टोर किए जाएं

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

• प्लस : लचीलापन।
• माइनस : यदि कई आइकन हैं, तो उन्हें व्यवस्थित करना अधिक कठिन है।

बाएं आइकन आनुपातिक रूप से फैला हुआ है, जबकि दाईं ओर आइकन के चारों ओर केवल फ्रेम फैला हुआ है

विधि तीन - एक मध्यवर्ती घटक जोड़ना

परमाणु डिजाइन की अवधारणा के अनुसार, इस तरह के एक घटक को एक अणु माना जाएगा। आप इसमें आइकन और सिग्नेचर पैक करते हैं, फिर साहसपूर्वक केंद्र स्थिरांक को दोनों में सेट करें, और अणु के लिए, स्केल मोड सेट करें जब आप उन्हें अपने टैब बार में डालते हैं। इस प्रकार, आइकन की बाधा को खुद ही नजरअंदाज कर दिया जाएगा।

इसके अलावा, हस्ताक्षर आइकन एक प्रभावी नेविगेशन पैटर्न है। तो क्यों नहीं इस घटक को परियोजना में कहीं और पुनः उपयोग करें?

• प्लस : दक्षता।
• माइनस : सिस्टम का एक अतिरिक्त घटक।

व्यक्तिगत रूप से, मैं तीसरी विधि का उपयोग करता हूं। मुझे लगता है कि वह अधिक सुरुचिपूर्ण और पेशेवर है। शायद आपके अपने तरीके हैं? टिप्पणियों में लिखें।

वैसे, हाल ही में किसी भी डिजाइन अनुसंधान के दौरान मैं अपने विचारों को अपने टेलीग्राम चैनल उपयोगी डिजाइनर पर लाइव साझा कर रहा हूं।

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