🖖🏼 👩🏽‍🎨 💆🏻 Acronis डिजाइन: अतिरिक्त डिजाइनर उपकरण 👋🏾 😞 👩🏿‍🎓

मैं सर्गेई, Acronis में लीड डिजाइनर हूँ। इस लेख में मैं उन उपकरणों के बारे में बात करूंगा जिन्हें हम न केवल लागू करते हैं, बल्कि कंपनी के भीतर अन्य डिजाइनरों के लिए भी विकसित होते हैं। यह Chrome के लिए स्केच, कंसोल उपयोगिताओं और एक्सटेंशन के प्लगइन्स के बारे में है।

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

बेसिक स्केच प्लगइन्स

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

डेटा

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

पैलेट

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

https://github.com/andrewfiorillo/sketch-palettes

बटन

बटनों के साथ काम करने के लिए, हम केन मूर से रेलबेल बटन प्लगइन का उपयोग करते हैं।

https://github.com/kenmoore/sketch-relabel-button

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

अनुवाद करना

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

रूसी, अंग्रेजी और जर्मन ग्रंथों में शब्द लंबाई का वितरण।
वी.वी. बॉयकोव, एन.ए. ज़ुकोवा, एल.ए. रोमानोव। टवर इंस्टीट्यूट ऑफ इकोनॉमिक्स एंड मैनेजमेंट

हस्तक्षेप से पहले, प्रक्रिया इस प्रकार थी: डिजाइनर स्केच से विवादास्पद पाठ की प्रतिलिपि बनाता है, इसे यैंडेक्स या Google ट्रांसलेट का उपयोग करके अनुवाद करता है, इसे स्केच, चेक और चक्र दोहराता है। ज्यादातर मामलों में, किसी ने व्यवस्थित रूप से किसी चीज का परीक्षण नहीं किया, और इंटरफ़ेस विकास में चला गया। इस दृष्टिकोण का तार्किक परिणाम परीक्षण स्टैंड के लिए स्थानों को जोड़ने के बाद UI पर बग का एक गुच्छा है।

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

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

स्वत: पूर्ण

प्लगइन एक नया चरित्र बनाने के लिए देशी संवाद में स्वत: पूर्ण जोड़ता है। जिन लोगों ने कम से कम एक बार स्केच में पात्रों का निर्माण किया और उन्हें एक पदानुक्रमित संरचना में बनाया, बस रोने के लिए डेमो देखें।

हमने ग्रिफिन स्टीवी से मूल SymbolNameAutocomplete प्लगइन लिया और बिना किसी बदलाव के इसे हमारे पारिस्थितिकी तंत्र में जोड़ा।

https://github.com/griffin-stewie/SymbolNameAutocomplete

स्केच प्लगइन्स का अन्वेषण करें

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

https://github.com/skpm/skpm
https://github.com/skpm/sketch-module-web-view

खेल का मैदान और डॉक्स

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

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

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

पोस्टफिक्स पाए जाने के बाद, मुख्य स्क्रिप्ट yanks config.js और शब्दकोश में नाम के साथ स्केच से प्रतीक के नाम की तुलना करती है। जैसे ही एक मैच मिलता है, वेब दृश्य या ज़ेपलिन को एक संक्रमण होता है। ज़ेपलिन के मामले में, आप लिंक के रूप में https: // और zpl: // दोनों का उपयोग कर सकते हैं। Https: // के लिए Zeplin का वेब संस्करण खुलेगा, और zpl: // आवेदन के लिए।

मेरे कार्य

प्लगइन आपको जीरा में वर्तमान कार्यों की सूची में जाने की अनुमति देता है जो कि NEW, OPEN, DRAFTING, IN PROGRESS की स्थिति से फ़िल्टर होते हैं। स्वाभाविक रूप से, हर कोई जो प्लगइन का उपयोग करता है, केवल अपने कार्यों की वर्तमान सूची देखता है।

अद्यतन रखें या appcast.xml

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

संस्करण 45 के साथ शुरू, स्केच एक आधिकारिक प्लगइन अपडेट तंत्र प्रदान करता है। मैनिफ़ेस्ट.जॉसन में, URL को Appcast.xml फ़ाइल में जोड़ा जाता है जिसमें उपलब्ध अपडेट के बारे में जानकारी होती है। प्लगइन में परिवर्तन किए जाने और अनुरोध पूल भेजे जाने के बाद, जेनकिंस जुड़ा हुआ है, जो प्लगइन के नए संस्करण को आंतरिक सर्वर पर डालता है और इसके लिए appcast.xml में संबंधित प्रविष्टि जोड़ता है।

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

कंसोल बर्तन

साफ और iconfont गुलाब

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

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

Acronis डिजाइन प्रणाली भाग दो प्रतीक, एसवीजी फ़ॉन्ट्स, गुल

क्रोम एक्सटेंशन

निरीक्षण

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

एक निष्कर्ष के बजाय

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

उनकी मदद, धैर्य और समर्थन के लिए किरिल सेवलोव, दिमित्री कोज़लोव और शॉन जू के लिए विशेष धन्यवाद।

Acronis डिजाइन: अतिरिक्त डिजाइनर उपकरण