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

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

"हम उच्च गुणवत्ता वाले यूजर इंटरफेस के तेजी से अन्वेषण और कार्यान्वयन की अनुमति कैसे दे सकते हैं?"

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

• स्क्रीन का आकार: बड़ा या छोटा।
• इनपुट विधि: माउस, कीबोर्ड या टच।

सभी संदर्भों के लिए एक पुस्तकालय

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

1. बड़ी और छोटी स्क्रीन
2. बड़ी स्क्रीन हो या छोटी स्क्रीन
3. केवल बड़ी स्क्रीन
4. छोटी स्क्रीन ही

1. बड़ी और छोटी स्क्रीन

यह हमारे पास सबसे सामान्य प्रकार का घटक है। स्क्रीन आकार और इनपुट विधियों में आकार, पैडिंग और शैलियों को समान रखा जाता है। बटन, टैब, बैज और कई अन्य इस श्रेणी में आते हैं।

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

2. बड़ी स्क्रीन या छोटी स्क्रीन

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

3. केवल बड़ी स्क्रीन

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

4. छोटी स्क्रीन ही

यह उपरोक्त प्रकार का प्रतिरूप है, जहां छोटे स्क्रीन संस्करण एक अलग नेविगेशन पैटर्न प्रदान करता है। छोटे स्क्रीन पर ऐसे घटक का एक उदाहरण Tabbar है।

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

बोनस: घटकों के निर्माण के लिए हमारा मीट्रिक

दत्तक ग्रहण हमारा प्राथमिक मीट्रिक नहीं है, कम से कम अभी के लिए। चूँकि हमने अभी-अभी नया डिज़ाइन किया है, इसलिए 100% प्लेटफ़ॉर्म हमारे डिज़ाइन सिस्टम का उपयोग करके बनाया गया है। इसके बजाय, हम घटकों और टोकन की उपलब्धता पर ध्यान केंद्रित करते हैं। जैसा कि हम इन तत्वों को सुधारने के तरीके ढूंढते हैं, हम किसी अवसर/बग की पहचान करते समय आइटम को "ज्ञात समस्या" के रूप में फ़्लैग करते हैं। जो तब हमारी डिजाइन सिस्टम टीम के लिए एक कार्य बन जाता है।

हमारा परिदृश्य अपेक्षाकृत अनूठा है। भले ही हमारे पास चार उत्पाद डिजाइनरों ( हम काम पर रख रहे हैं! ) और 20+ यूआई इंजीनियरों के साथ एक छोटी टीम है, हमारे पास एक समर्पित डिजाइन सिस्टम टीम है। एक निवेश जो हमें इस प्रकार की पहल पर काम करने की अनुमति देता है।

Caio Manzotti एम्स्टर्डम स्थित मोली में डिज़ाइन सिस्टम के लिए एक वरिष्ठ उत्पाद डिज़ाइनर है ।