एक ऑनलाइन नीलामी के उदाहरण का उपयोग करते हुए, बजट में फिगमा में घटक पुस्तकालयों का निर्माण कैसे किया जाता है

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

यह लेख का पहला भाग है, जिसमें फिगमा में घटक बनाने के साथ-साथ एक प्रांतीय सेटिंग =) में सीमित बजट के साथ परियोजनाएं बनाने की बारीकियों, नुकसानों और वास्तविकताओं पर बहुत उबाऊ लेकिन ठोस व्यावहारिक जानकारी होगी।)

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

लेकिन वापस डिजाइन करने के लिए

यह उल्लेखनीय है कि फिगमा ने काम की बहुत ऊंचाई पर एक बहुत ही सुखद अद्यतन किया, इसलिए रंग और पाठ शैलियों के बारे में एक शब्द भी नहीं होगा। हम आशा करते हैं कि एक चौकस पाठक इन बारीकियों के बिना भी अपने लिए कुछ उपयोगी सीखेगा। इसके अलावा, यदि आपको अंजीर में घटकों को व्यवस्थित करने के सिद्धांतों की बुनियादी समझ नहीं है, तो हम habr.com पर खोज की सलाह देते हैं (विषय पर बहुत सारी महान सामग्री हैं)।

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

इस मामले में, अवधारणा इस प्रकार थी:



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

अभी भी कुछ बेहिसाब बारीकियाँ हैं, लेकिन हम ईमानदार होने के लिए सहमत थे और बिना अनावश्यक आसन के, इसलिए हम बताएंगे कि वे इस प्रक्रिया में कैसे सामने आए।



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

आप आंकड़े में चारों ओर से झांकना शुरू कर सकते हैं

डिज़ाइन सिस्टम डेवलपमेंट एल्गोरिथ्म सरल, अविभाज्य घटकों (परमाणुओं) से अधिक जटिल लोगों के लिए एक आंदोलन होगा, और पदानुक्रम के दृश्य प्रदर्शन के लिए, हम प्रत्येक अगले स्तर की जटिलता को एक नए कॉलम में आकर्षित करेंगे।

टेक्स्ट

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



मुख्य फ़ॉन्ट के रूप में मोंटसेराट माध्यम और शीर्षकों और हाइलाइट्स के लिए मोंटसेराट बोल्ड।
आइकन पर जाएं। हमने उन्हें मुक्त पुस्तकालय "पंख" से खींचा

माउस

प्रत्येक आइकन को 24x24 पिक्सेल कंटेनर में रखा गया है और केंद्र में दो अक्षों (बस मामले में) के साथ संरेखित किया गया है। सभी चिह्नों को स्वाद के लिए कहा जाता है, लेकिन "i" उपसर्ग के अतिरिक्त के साथ ताकि नामों में कोई डुप्लिकेट न हो, और उन्हें समूहित करें ताकि परतों के साथ पैनल को अव्यवस्थित न करें।



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

अगला, हम और अधिक जटिल घटकों पर चलते हैं। हम उन्हें दाईं ओर स्थिति देंगे, और उन्हें पहले कॉलम और लाठी से तत्वों से इकट्ठा करेंगे।

चेक बॉक्स

चलो कुछ सरल से शुरू करते हैं।

16x16 पिक्सल के कंटेनरों में चेकबॉक्स और रेडियोबॉटन। प्रत्येक राज्य के लिए, एक अलग घटक बनाएं। यह आवश्यक है ताकि पृष्ठों (इन घटकों से इकट्ठे) के डिजाइन में हम एक राज्य को दूसरे पैनल के माध्यम से प्रतिस्थापित कर सकें।



हम सभी गतिशील तत्वों के साथ ऐसा ही करते हैं, जिसमें मार्गदर्शन की स्थिति, सक्रिय, निष्क्रिय आदि होते हैं।

काउंटर और स्लाइडर

हमें किसी चीज़ की मात्रा प्रदर्शित करने के लिए एक काउंटर की भी आवश्यकता है। यह उसके स्थान के आधार पर अलग-अलग डेटा होगा। हम केंद्र में एक 20x20 फ्रेम और एक आकृति बनाते हैं।

स्लाइडर वस्तुओं के लिए बटन भी हमारे लिए उपयोगी हैं। हम उन्हें 30x30 बनाते हैं और केंद्र में शेवरॉन आइकन को सशर्त रूप से रखते हैं। हम विभिन्न राज्यों के लिए घटक बनाते हैं।

कैटलॉग ट्री

हाल ही में, हमने विभिन्न उपकरणों पर समान घटकों के पुन: उपयोग के सिद्धांत का पालन करना शुरू किया ताकि अनावश्यक संस्थाओं का उत्पादन न हो और कोड की शुद्धता (जितना संभव हो) बनाए रखा जा सके। इसलिए, हम कैटलॉग ट्री करते हैं, जो मोबाइल डिस्प्ले से शुरू होता है। टीके हमें बताता है कि एक पेड़ का अधिकतम घोंसला स्तर 3 है।

हम पहले स्तर से शुरू करते हैं: 60 पिक्सेल की ऊंचाई वाला एक फ्रेम और एक आयाम रहित चौड़ाई (यह कंटेनर के अनुकूल होगा), आइकन को लंबवत रूप से संरेखित किया गया है और बाएं किनारे से 20 पिक्सेल, शाखा का नाम h4 घटक से होगा। यह सब CONSTRAINS पैनल में बाईं ओर चिपका है। बहुत से (भी h4) और दाईं ओर शेवरॉन की संख्या को गोंद करें।

खुली शाखा के लिए घटक को फिर से तैयार करें। हम उसी तरह कैटलॉग के दूसरे स्तर को व्यवस्थित करते हैं, लेकिन क्योंकि हमने इन शैलियों का कहीं भी पुन: उपयोग नहीं किया है - केवल 20-पिक्सेल वेतन वृद्धि में अनुच्छेद लाइनों को क्लोन करें। जैसे फ़ोटोशॉप में - कोई परेशानी नहीं। इसी तरह तीसरे स्तर के लिए + छड़ी + रेखा रंग परिवर्तन।

अगला निरंतर समझौता करने की एक श्रृंखला है

मेन्यू

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

सूचियों

समय में, मुझे इस तरह की एक तिपहिया को याद किया गया जैसे कि गिने और अनपरा लिस्ट। एक संख्या जोड़ने के लिए, हम पहले कॉलम पर लौटते हैं और दो-अंकीय संख्या घटक बनाते हैं।

इनपुट्स और फ़िल्टर

वह क्षण आया जब हमने अपने स्वयं के पदानुक्रम नियमों का उल्लंघन किया और इन घटकों (* _______ *) को एक कॉलम में रखा (याद रखें: नियम उन्हें दाईं ओर रखने के लिए था, उन्हें एक अलग स्थान पर ले जाना)। इसके बिना ऐसा करना संभव था, लेकिन हमने फैसला किया कि ब्लॉक (फ़िल्टर या इनपुट) और इसके ड्रॉपडाउन में विभिन्न राज्यों में एक घटक शामिल होगा। जैसा कि सल्वोर हार्डिन ने कहा: "नैतिकता को कभी भी सही काम करने से मत रोकना।"

हमने निम्नलिखित कारणों से यह समझौता किया है: इनपुट की संरचना और, उदाहरण के लिए, चेकबॉक्स को समान स्तर की कठिनाई (एक स्तंभ) से संबंधित होना चाहिए, लेकिन इनपुट में ड्रॉप-डाउन सूची में भी चेकबॉक्स हो सकते हैं। हम वास्तव में ड्रॉप-डाउन सूचियों को इनपुट के साथ एकल इकाई बनाने के लिए चाहते थे - एक सुंदर छाया के लिए।



आप कह सकते हैं कि तब आपको ड्रॉपडाउन के साथ इनपुट को एक अलग (अगले कॉलम) में डालना होगा और आप सही होंगे। लेकिन इस प्रक्रिया में हमारे लिए यह तुरंत स्पष्ट नहीं हो गया। और जब से कन्वेयर लॉन्च किया गया था, हम, बजट और समय सीमा से प्रेरित थे, परमाणु डिजाइन प्रणालियों के निर्माण के इस अलिखित कानून का उल्लंघन करने के लिए मजबूर थे। मैं आपको अनुभव से बताता हूं - एक भी डिजाइनर या डेवलपर इससे पीड़ित नहीं है।

हम व्यावहारिक विमान पर लौट आएंगे।

इनपुट

60px फ्रेम के अंदर, हम पैराग्राफ घटक को एक प्लेसहोल्डर के रूप में रखते हैं। जब इनपुट फोकस में होगा, तो प्लेसहोल्डर ऊपर जाएगा। हम इसे 20 पिक्सेल का इंडेंट देते हैं और इसे बाएं किनारे पर गोंद करते हैं। ब्लॉक की निचली सीमा पर, 2 पिक्सल (आयतों का उपयोग करें!) की एक पंक्ति जोड़ें, नीचे की ओर लंबवत रूप से गोंद करें। क्षैतिज, आप स्केल का चयन कर सकते हैं। आगे दाईं ओर, विभिन्न स्थितियों में, हमारे पास माप की एक इकाई या ड्रॉपडाउन शेवरॉन हो सकती है। उस दोनों और एक और गोंद जोड़ें और सही किनारे पर। अब सब कुछ बड़े करीने से फैला हुआ है, और इस घटक की सभी प्रतियां माता-पिता के व्यवहार की विरासत हैं।



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



फ़िल्टर के साथ, स्थिति समान है और डिफ़ॉल्ट स्थिति के अपवाद के साथ और रीसेट मान को क्रॉस जोड़ने के लिए, वे इनपुट से भिन्न नहीं होते हैं। भूल गए - इनपुट एक के बाद एक क्षैतिज रूप से जाएंगे, इसलिए दाहिने किनारे पर हम 2px की एक ग्रे लाइन जोड़ते हैं। इसे सही किनारे पर छड़ी करने के लिए मत भूलना।

बटन

हमारी परियोजना में बटन दो प्रकार के होंगे।

पहला: सामान्य बटन जो कि लोटे के प्रीव्यू कार्ड को छोड़कर हर जगह इस्तेमाल किया जाएगा। उनकी शारीरिक रचना यह है: एक पारदर्शी पृष्ठभूमि के साथ एक फ्रेम 30 पिक्सेल ऊंचा, 15 पिक्सल के गोलाई के साथ समान आकार की एक आयत (CONSTRAINTS पैनल में हम दोनों अक्षों में स्केल मान सेट करते हैं) और btn-txt घटक जो हम केंद्र में सभी अक्षों में संरेखित करते हैं (प्रत्येक फायरमैन के लिए, हम अचानक तय करते हैं। बटन की ऊंचाई बढ़ाएं?) एक अलग घटक में, होवर पर बटन शैली का चयन करें और दबाने के लिए एक अलग।



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



हम उन्हें 60px ऊंची आयतों से बनाते हैं, चौड़ाई सामग्री पर निर्भर करेगी। हम आइकन और btn-txt के घटकों को सभी अक्षों पर एम्बेड और केंद्रित करते हैं। हम आइकन पर काउंटर कंपोनेंट लगाते हैं ताकि उसका निचला लेफ्ट कॉर्नर आइकॉन के बीच से मेल खाता हो। बटन को एक के बाद एक व्यवस्थित किया जाएगा, इसलिए हम प्रत्येक पक्ष पर दृश्य पृथक्करण के लिए 2 पिक्सेल की एक ग्रे पट्टी जोड़ते हैं। अनावश्यक तो जगह में बंद करें। इस मामले में, बहुत से पूर्वावलोकन घटक में।

हम घटकों के इस स्तर पर लौट आएंगे, लेकिन अब आगे बढ़ेंगे।

टोपी

नए कॉलम पर जाएं और हेडर को इकट्ठा करना शुरू करें।

हम आधार के रूप में ऊंचाई में समान साठ पिक्सेल का फ्रेम लेते हैं। सबसे नीचे, 2 पिक्सेल की एक ग्रे लाइन जोड़ें। 1440px की चौड़ाई लें, क्योंकि हम इस अनुमति पर सभी डेस्कटॉप टेम्पलेट एकत्र करेंगे। हम पहले से ही मानक योजना का पालन कर रहे हैं: 20 पिक्सल, लोगो, मेनू टैब, खोज के ऊर्ध्वाधर, क्षैतिज इंडेंटेशन के केंद्र के साथ संरेखण (यह दूसरे कॉलम में इनपुट के साथ सादृश्य द्वारा इकट्ठा किया गया था)।



हेडर के दाहिने हिस्से में करंट अकाउंट की जानकारी के साथ एक सूचना पैनल होना चाहिए, और एक ड्रॉप-डाउन सूची के साथ भी। हम पिछले कॉलम पर लौटते हैं और आइकन और टेक्स्ट (आप पहले से ही जानते हैं) से यह अच्छा इकट्ठा करते हैं।



किसी भी टेम्प्लेट पर एक ड्रॉप-डाउन सूची देखने के लिए, हम दो घटकों को एक साथ संलग्न करते हैं (खुली और बंद ड्रॉपडाउन)। लेयर पैनल पर आंख में छेद करके एक को बंद कर दिया जाता है। बैकग्राउंड पैनल पर क्लिप कंटेंट को अनचेक करना न भूलें।



अगला, हम अनावश्यक को क्रॉप करके छोटे स्क्रीन के हेडर को सरल बनाते हैं। हम एक सिद्ध तरीके से कार्य करते हैं। हम क्लोन करते हैं, अलग करते हैं, अनावश्यक हटाते हैं, बर्गर आइकन जोड़ते हैं, इसका नाम बदलते हैं, इसे एक घटक में बदलते हैं।
320 पिक्सेल के लिए, हम आइकन के बीच इंडेंटेशन को थोड़ा आगे बढ़ा सकते हैं।

अब रबर सेट करने का समय है। ऐसा करने के लिए, हमारे "हेडर-डेस्कटॉप" घटक का चयन करें और LAYOUT GRID पर जाएं। वक्ताओं पर स्विच करें। इस मामले में स्तंभों की संख्या मायने नहीं रखती है, मुख्य बात यह है कि ग्रिड (विभिन्न कार्यों के लिए, विभिन्न ग्रिडों का प्रयास करें) 20 पिक्सेल के मार्जिन। अगला, हम हेडर के नेस्टेड घटकों के व्यवहार को कॉन्फ़िगर करते हैं।



टेम्प्लेट की रबर की सेटिंग्स के बारे में अधिक विस्तार से हम इस लेख के दूसरे भाग में बताएंगे।

बर्गर

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

बहुत पूर्वावलोकन

कैटलॉग के लिए पूर्वावलोकन कार्ड पर जाएं। सबसे पहले, यह स्पष्ट हो गया कि आपको मोबाइल डिस्प्ले में बटन के लिए अलग-अलग घटकों को बनाने की आवश्यकता है (आंकड़ा का साधन आपको आइकन को केंद्र में रखने की अनुमति नहीं देता है यदि आप बस बटन पाठ छिपाते हैं)। हम स्क्वायर बटन के साथ कॉलम पर जाते हैं और संकीर्ण स्क्रीन के लिए राज्यों को समाप्त करते हैं। तीन-स्तंभ ग्रिड जोड़ें।



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



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

हमें विश्वास है कि यह दृष्टिकोण अभी भी आदर्श नहीं है, इसलिए हमें इस विषय पर किसी भी टिप्पणी पर खुशी होगी। दौर।