अंजीर में डिजाइन प्रणाली। घटकों के माध्यम से इंटरफ़ेस को देखें

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

हाल ही में, मैंने फिगमा के लिए अपनी 4 वीं लाइब्रेरी विकसित की और केवल अब मैं इस और पिछले सिस्टम को विकसित करने की प्रक्रिया में प्राप्त ज्ञान और अनुभव को तैयार करने के लिए तैयार हूं।

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

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

आशंका के बाद आशंका होती है

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

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

दुनिया को देखें और घटकों को देखें।

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



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

घटक एकीकरण और पुन: उपयोग

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



आप देखते हैं? दोनों घटक संरचना में समान हैं, केवल फ़ॉन्ट का आयाम और घनत्व अलग है, गोल तत्व में सामग्री।

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

मामला: लैंडिंग साइटों के लिए वेब डिज़ाइन प्रणाली। मिलो Websy!

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

भविष्य की रचना का अनुसंधान और विश्लेषण

घटक दृष्टिकोण लागू करने के लिए लैंडिंग साइट एक आदर्श क्षेत्र है। दो उंगलियां उन सभी ब्लॉकों को गिनने के लिए पर्याप्त हैं जो एक क्लासिक वेबसाइट बनाते हैं जो किसी उत्पाद, सेवा या सेवा का विज्ञापन करता है: हैडर, फुटर, कॉल टू एक्शन, फीचर्स, प्रशंसापत्र, डाउनलोड, वीडियो और इसी तरह। सभी सूचीबद्ध ब्लॉकों के पर्याप्त संयोजनों की उपस्थिति में निर्माण के लिए ऐसी प्रणाली का सिद्धांत। इस प्रकार, किसी भी साइट + मोबाइल संस्करण को एक पहेली के रूप में इकट्ठा करना संभव है। यह केवल सौ ताजा लैंडिंग साइटों का अध्ययन करने और सबसे अधिक उपयोग किए जाने वाले तत्वों को इकट्ठा करने के लिए एक अध्ययन के रूप में बना रहा। मैं उन्हें भविष्य में फिर से तैयार करूंगा, घटक बनाऊंगा, एक निश्चित शैली निर्धारित करूंगा, और अंत में टेम्प्लेट एकत्र करूंगा। आगे देखते हुए, मैं कहता हूँ कि अंत में मैं १ fl पूर्ण-स्क्रीन वाले और ९ मोबाइल संस्करण: १२ पूर्ण-स्तरीय टेम्पलेट एकत्र करने में सफल रहा। मैंने सार्वभौमिक टेम्प्लेट बनाने की कोशिश की जो सेवाओं, अनुप्रयोगों, पोर्टफोलियो और किसी भी अन्य उत्पादों की प्रस्तुति के लिए समान रूप से उपयुक्त होंगे

ज्यादातर साइट्स ज्यादातर फेसलेस होती हैं

यह इन निष्कर्षों पर था कि मैं तब आया था जब मैंने सिर्फ Google करने की कोशिश की थी। संपूर्ण रूप से वेब अप्रचलित हो जाता है और यह सामान्य है। आखिरकार, समकालीन डिजाइन में होना हमेशा एक बदलाव है। और हम परिवर्तनों के प्रति सतर्क और सतर्क हैं। यदि पुरानी साइट काम करती है और किसी तरह खुद को बेचती है, तो यह तंत्र के साथ हस्तक्षेप नहीं करना बेहतर है। लेकिन ऐसी कंपनियां हैं जो आंतरिक प्रक्रियाओं को अनुकूलित करने में लगी हुई हैं। और उनके लिए उत्पाद डिजाइन अंतिम स्थान पर नहीं है। ऑडिट करने के लिए अधिकांश अच्छी साइटें हाइपरपिक्सल.आईओ और www.lapa.ninja पर पाई गईं । मुझे लगता है कि मैंने 100+ अलग-अलग लिंक देखे और यह सूची का एक छोटा सा हिस्सा है। पहले संस्करण के लिए आवश्यक राशि (एमवीपी पढ़ें) को समझने के लिए अनुपात की भावना होनी चाहिए। इसलिए, मैंने तब रोक दिया जब पाठ खंड खंड (विभिन्न पाठ खंड, संभवतः प्रपत्र और बटन के साथ) में घटकों की मात्रा 30 नंबर पर पहुंच गई:

उत्पाद उपस्थिति

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

एक अच्छा फ़ॉन्ट आधी लड़ाई है

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

अंजीर में एक अच्छी डिजाइन प्रणाली है:

• वैश्विक शैलियों का उपयोग करना (टाइपोग्राफी, रंग, छाया)
• एक घटक (बाधाओं) का आकार बदलने पर आंतरिक वस्तुओं के विस्थापन का तर्क माना जाता है
• वस्तुओं की विभिन्न अवस्थाओं (उदाहरण, सक्रिय, आदि) के लिए उदाहरणों का उपयोग करना
• एक सुविधाजनक उदाहरण संरचना बनाने के लिए "/" प्रतीक का उपयोग करके नामकरण
• सरल लोगों से जटिल घटक बनाना (अणु → टेम्प्लेट)
• ऑर्डर किए गए आइकन के साथ एक अंतर्निहित लाइब्रेरी की उपस्थिति

अब मैं प्रत्येक आइटम के बारे में अलग से बात करना चाहूंगा, इसलिए ...

वैश्विक शैलियों का उपयोग करना

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

रंग

सिस्टम में कितने रंग जमा होते हैं? मैं स्केच के लिए डिज़ाइन सिस्टम से मिला, जिसमें इंद्रधनुष के सभी रंगों + प्रत्येक के लिए एक दर्जन रंगों की घोषणा की गई थी। वास्तव में, यह अत्यधिक बड़ा है और ऐसे पैलेट का 80% उपयोग कभी नहीं किया जाएगा। मेरी वेबसी प्रणाली में, जिसके बारे में मैं अभी से विस्तार से बात करना शुरू करता हूं, केवल 8 रंगों को संग्रहीत किया जाता है: सफेद, काला, प्राथमिक रंग (क्रिया), द्वितीयक रंग (द्वितीयक), और काले रंग के 4 उन्नयन। सफेद और काले रंग के साथ, मुझे लगता है कि सब कुछ स्पष्ट है। हम एक्शन और सेकेंडरी रंगों का उपयोग उन तत्वों को रंगने के लिए करते हैं जिनके साथ आप सहभागिता कर सकते हैं (बटन, आइकन, लिंक)। माध्यमिक रंग जोर के लिए इस्तेमाल किया जा सकता है। उदाहरण के लिए, किसी महत्वपूर्ण वाक्यांश, स्लोगन आदि को उजागर करना। रंगों की सफलता / चेतावनी की घोषणा की अनुमति दी जाती है यदि आपका सिस्टम साइटों की तुलना में इंटरफेस के बारे में अधिक है।

छाया

मैं सामग्री डिजाइन का पालन कर रहा हूं, इसलिए मैं सिस्टम को विमान (ऊंचाई) से ऊपर उठाने के लिए कई विकल्प रखता हूं। वेबसी में आपको 4 छाया संयोजन मिलेंगे: 2dp, 4dp, 8dp, 16dp। वे ऑफसेट और ब्लर में भिन्न होते हैं। उदाहरण के लिए, एक नियमित कार्ड के लिए, 2 / 4dp छाया का उपयोग करने की सिफारिश की जाती है। ड्रॉप-डाउन सूचियों, ऑनहॉवर राज्यों और संवादों के लिए, आप 8 / 16dp का उपयोग कर सकते हैं। एक चौकस डिजाइनर ने पहले ही ध्यान दिया है कि कुछ Google उत्पाद अब रिफ्लेक्स छाया और डबल छाया का उपयोग करते हैं, जो अधिक यथार्थवादी हैं। इसलिए, इसके अलावा, सिस्टम में कई बहुपरत छाया घोषित किए जाते हैं, जो बहुत यथार्थवादी प्रभाव देते हैं:


वैश्विक शैलियों के माध्यम से, छाया केवल कुछ क्लिकों में स्विच होती है।

स्ट्रोक

वेब्सी स्ट्रोक पैरामीटर को कई अलग-अलग घटकों के माध्यम से नियंत्रित किया जाता है जो विभिन्न गोलाई मापदंडों में भिन्न होते हैं। स्ट्रोक का उपयोग अक्सर बटन और टेक्स्ट फ़ील्ड के लिए किया जाता है। छाया की तरह, 5 कोने गोल विकल्प घोषित किए जाते हैं: 0px, 4px, 8px, 16px और 99px। इतना क्यों? मैं एक उदाहरण के साथ शुरू करता हूं कि आमतौर पर स्ट्रोक घटक का उपयोग कैसे किया जाता है, उदाहरण के लिए एक बटन के लिए:



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

घटकों के लिए बाधा।

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

मिठाई के लिए, एक छोटा वीडियो।

इस वीडियो में, तैयार किए गए घटकों का उपयोग करते हुए, मैं लेआउट इकट्ठा करता हूं जो सिस्टम के लिए प्रस्तुति स्क्रीन के रूप में उपयोग किया जाएगा। मुझे पहला विकल्प कम पसंद आया, और मैंने मुख्य के रूप में दूसरा ( 1:30 बजे शुरू) लिया: