रिलीज सिस्टम डिजाइन

समय के साथ एडॉप्टर्स में इंटरकनेक्टेड आउटपुट देना

श्रृंखला के 6 में से # 1 रिलीज सिस्टम डिजाइन:
आउटपुट | ताल | संस्करण | ब्रेकिंग | निर्भरता | प्रक्रिया

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

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

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

ये कहानियां दर्शाती हैं कि मैंने डिस्कवरी एजुकेशन, मॉर्निंगस्टार, टारगेट और REI जैसी टीमों के साथ काम करने वाले सिस्टम को रिलीज़ करने के लिए क्या सीखा है। वे Salesforce, Adobe, Atlassian, Shopify और Financial Times के सहकर्मियों की अंतर्दृष्टि से उन्नत हैं। अपने समय और प्रथाओं को विनम्रतापूर्वक साझा करने के लिए धन्यवाद!

आउटपुट: क्या जारी है?

डिज़ाइन सिस्टम प्रोग्राम कई प्रकार के आउटपुट जारी करते हैं, न कि केवल कोड। नतीजतन, एक सिस्टम को डेवलपर्स, डिजाइनरों, और अन्य ग्राहकों को संस्करण आउटपुट के इस रेंज को अलग करना और संचार करना चाहिए।

कोड, सत्य का स्रोत

अधिकांश सिस्टम प्रस्तुति परत कोड के सत्य का एकल स्रोत प्रदान करते हैं:

  • UI घटक पुस्तकालय HTML मार्कअप और CSS के रूप में। अक्सर "सीएसएस" के रूप में जाना जाता है, इस पैकेज की खपत HTML स्निपेट्स के पुन: उपयोग के साथ मिलकर एक सुसंगत दृश्य शैली आधार रेखा के रूप में सीएसएस का उपयोग या संकलन करने पर टिकी हुई है।

और / या ...

  • जावास्क्रिप्ट के रूप में यूआई कम्पोनेंट्स लाइब्रेरी: कई सिस्टम तर्क को मजबूत करने, स्टाइल को एन्कैप्सुलेट करने, और आसानी से एकीकरण और रखरखाव को सीधे पसंद के ढांचे में अधिक करने के लिए जावास्क्रिप्ट के साथ HTML और CSS लपेटते हैं। जबकि अधिकांश पुस्तकालय एक विशिष्ट ढांचे (रिएक्ट, व्यू, एम्बर, कोणीय, ...) को लक्षित करते हैं, उद्योग के संकेत सभी रूपरेखाओं के लिए वेब घटक बनाने के लिए एक बदलाव का सुझाव देते हैं। मेरे पिछले छह सिस्टम प्रयास? बाद में 2017: वेनिला HTML, वेनिला HTML। 2018 की शुरुआत: रिएक्ट, वीयू। बाद में 2018: वेब घटक, वेब घटक।

इसके अलावा, अन्य प्रमुख आउटपुट अलग से जारी किए जा सकते हैं:

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

डिजाइन एसेट्स

अधिकांश टीमें इस बात की समझ सीमित कर देती हैं कि वे क्या जारी करते हैं, "हम कोड जारी करते हैं।" यह उनके लिए इस बात का एहसास है कि वे समय के साथ बदलते कई अन्य उपकरण प्रकाशित करते हैं। उनमे शामिल है:

  • डिज़ाइन सॉफ्टवेयर में दिए गए टेम्प्लेट फ़ाइलों और प्रतीक पुस्तकालयों के रूप में डिज़ाइन टूलकिट्स। आज, लगभग हमेशा स्केच। कल, Figma, Invision स्टूडियो, और अन्य उभरते प्रतियोगी?
  • इस तरह के पुस्तकालयों के वितरण और संस्करण में सिस्टम की अक्सर अपेक्षित भूमिका के कारण फ़ॉन्ट्स, प्रतीक और यहां तक ​​कि ओरिगेमी की छवि सेट होती है।
  • अन्य डिजाइन संसाधन जैसे चित्रण और रंग स्वैच्छिक ASE / CLR फ़ाइलों के लिए एक स्प्रिंगबोर्ड के रूप में bespoke कलाकृति है। ये संग्रह धीरे-धीरे, कम औपचारिक रूप से बदलते हैं, और समुदाय के सदस्यों द्वारा योगदान के माध्यम से सिस्टम कोर टीम का हिस्सा नहीं होते हैं। फिर भी, ग्राहक के दृष्टिकोण और सिस्टम के संचार से, यह सिस्टम का हिस्सा है।

प्रलेखन साइट

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

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

गंतव्य: यह कहाँ जाता है?

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

कोड के लिए

  • BEST: npmjs (या सोनाटाइप्स नेक्सस की तरह एक आंतरिक समकक्ष) जैसी रजिस्ट्रियां जारी किए गए कोड पैकेजों की पहुंच और प्रबंधन प्रदान करती हैं। डेवलपर्स तब अपने वातावरण में उस कोड को सुचारू रूप से एकीकृत और अपग्रेड करने के लिए बावर, एनपीएम, यार्न, वेबपैक और बैबेल जैसे टूल का उपयोग करते हैं।
  • बेहतर: संस्करण शैली और स्क्रिप्ट के साथ-साथ फोंट और आइकन के लिए सीधे लिंक के लिए सीडीएन पर होस्ट की गई संपत्ति जो अधिक धीरे-धीरे बदलते हैं।
  • बस ठीक: Github, Bitbucket या क्लोन, कांटा, या अन्यथा संकलन का उपयोग करने के लिए रिपॉजिटरी एक्सेस, उपयोग और शायद - अंत में योगदान।
  • IF NECESSARY: डायरेक्ट कोड डाउनलोड, आमतौर पर स्थानीय उपयोग और / या मैन्युअल एकीकरण के लिए डॉक साइट से संकलित या बिना सिस्टम सिस्टम की "ज़िप फ़ाइल" एक अलग रिपॉजिटरी में।

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

डिज़ाइन टूलकिट के लिए

  • BEST: टेम्पलेट से नया उदाहरण बनाने के लिए डिज़ाइन टूल के मेनू में नए को एक सिंक किए गए, एम्बेडेड पथ के रूप में बनाएं।
  • बेहतर: अनुमति-आधारित डिज़ाइन एसेट मैनेजमेंट सॉफ़्टवेयर जैसे कि एब्सट्रैक्ट या लिंगो का उपयोग करके संस्करण और वितरित।
  • GOOD: डायरेक्ट टूलकिट एक डॉक्यूमेंट साइट से डाउनलोड होता है, जिसमें स्पष्ट वर्जन होता है और पास में स्टार्टिंग डॉक से जुड़ा होता है।
  • जस्ट ओके: साझा ड्राइव, अच्छी तरह से प्रचारित और संभवतः सरलीकृत आंतरिक URL के माध्यम से (जैसे http: //system.uitoolkit)।
  • नॉट गुड गुड: कुछ चौथे स्तर के पेज पर बमुश्किल विकी साइट पर दफन कई लोगों को नहीं मिल सकता है।

अगला → # 2 ताल