क्यूआईडब्ल्यूआई में यूआई किट से डिजाइन सिस्टम में संक्रमण

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



हमने कैसे समझा कि यह यूआई किट से स्केच करने के लिए कोड में शैलियों को प्रदर्शित करने के लिए स्विच करने का समय है - कट के नीचे।

हमने कहां से शुरुआत की?

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

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



पहले चरण में, हमें एक विज़ुअल डिज़ाइन सिस्टम मिला, जिसके आधार पर अब हम कोड में एक डिज़ाइन सिस्टम तैनात कर सकते हैं।

अब क्या

हमने इस गर्मियों में डिजाइन प्रणाली को भरना शुरू किया। अब अलग-अलग टीमों के डेवलपर्स और सभी QIWI वॉलेट डिजाइनर डिजाइन सिस्टम पर काम कर रहे हैं।

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

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

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

हालाँकि, सभी QIWI उत्पाद डिज़ाइन सिस्टम में शामिल नहीं हैं। उदाहरण के लिए, विवेक इसमें शामिल नहीं है - इस उत्पाद की दृश्य शैली जानबूझकर अलग है।

काम कैसा है?

जब एक नया घटक दिखाई देता है, तो हम इसे डिज़ाइन टीम के अंदर समन्वयित करते हैं और इसे UI किट में डालते हैं, फिर यह Zeplin और Abstract में हो जाता है। सार आपको लेआउट को संस्करण करने की अनुमति देता है, यह डिजाइनरों के लिए एक प्रकार का गिट है। UI किट से, तैयार घटक GitHub पर रिपॉजिटरी में जाता है, जहां डेवलपर्स इसे पा सकते हैं।



अब डिजाइन प्रणाली भरने की प्रक्रिया में है, इसमें पहले से ही मूल घटक हैं। अगली पंक्ति में बड़े पैटर्न और पैटर्न + अद्वितीय उत्पाद घटक हैं।

उत्पाद प्रक्रियाओं में सभी प्रतिभागियों के लिए डिजाइन प्रणाली उपयोगी है:

• व्यवसाय के लिए - डिजाइन प्रणाली नए समाधान और परीक्षण उत्पाद परिकल्पना को लॉन्च करने के लिए 2 गुना तेजी से अनुमति देता है;
• टीम के लिए - परीक्षण किए गए घटकों का एक एकल डेटाबेस है, जो काम की गति और गुणवत्ता को बढ़ाता है;
• उपयोगकर्ताओं के लिए - QIWI उत्पाद परिवार में एकीकृत उपयोगकर्ता अनुभव बनाने में मदद करता है।

अब हम नई शैलियों के लिए डिजाइन प्रणाली को लचीला और अनुकूलन योग्य बनाने के लिए काम कर रहे हैं।

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