स्विफ्टयूआई के साथ डिजाइन सिस्टम कैसे बनाएं

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

मैं यह लेख क्यों लिखूं

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

स्विफ्टयूआई क्या है

Apple ने WWDC 2019 में इस अभूतपूर्व नए ढांचे को जारी किया, जो वर्षों में सर्वश्रेष्ठ में से एक है। एक वेब डेवलपर के रूप में, परियोजना विकास का अनुभव SwiftUI . में है पारंपरिक फ़्रंट-एंड स्टैक और फ़्रेमवर्क में जिसके करीब है।

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

डेमो प्रोजेक्ट

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

परियोजना GitHub पर सार्वजनिक है, और मैं Xcode 11 Beta 5 . का उपयोग कर रहा हूँ विकास के लिए। डिज़ाइन सिस्टम प्रबंधन हब के रूप में एक एयरटेबल बेस (वर्कफ़्लो प्रबंधन के बारे में और पढ़ें) संदर्भ के लिए भी सार्वजनिक है।

बिल्डिंग डिजाइन सिस्टम के सिद्धांत

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

1. टोकन के साथ संचार करें

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

2. पदानुक्रम के स्तर

आठ आकार के लेख में, यह बताता है कि हमें "पहले विकल्प दिखाना चाहिए, फिर निर्णय बाद में", क्योंकि "आप विकल्पों के बिना निर्णय नहीं ले सकते।"

इस प्रकार का ऑर्डरिंग आर्किटेक्चर विभिन्न स्तरों के बीच युग्मन की डिग्री को कम करता है, इसलिए संभावित संशोधन के लिए अधिक लचीलापन और गतिशील प्रदान करता है। जिस तरह से मैं स्तरों की संरचना करता हूं वह इस क्रम में नीचे से ऊपर तक है:सामग्री → आधार → टोकन। लेकिन यह वैसे भी टीम के लिए सुविधाजनक हो सकता है।

कोड में गोता लगाना

निम्नलिखित अनुभाग हाइलाइट्स की एक सूची है जिसे हम अपने अनुभव के आधार पर इंगित करना चाहते हैं। कृपया संपूर्ण कोड के लिए GitHub रेपो पर जाएं। सुधार के लिए किसी भी प्रतिक्रिया या आलोचकों का स्वागत है।

1. पदानुक्रम के स्थापत्य स्तर

उच्चतम स्तर पर टोकन बनाने के लिए निचले स्तर पर सामग्री को ढेर करने के दो तरीके हैं:

• enum का प्रयोग करें टाइप सुरक्षा और कोड साक्षरता के लिए

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

हम फ़ॉन्ट आकार (CGFloat . सहित कच्चे मानों को हमेशा स्टोर करते हैं ) और फ़ॉन्ट नाम (String ), सबसे निचले स्तर पर, क्योंकि हम इसके साथ खिलवाड़ नहीं करना चाहते। लेकिन क्योंकि कच्चे मूल्य को एनम में शाब्दिक होना चाहिए, हम केवल case . असाइन नहीं कर सकते हैं अन्य एनम से एक मूल्य होने के लिए।

इस समस्या को हल करने के लिए, हम एक फ़ंक्शन लागू करते हैं getValue , जो switch . में कच्चा मान लौटाता है मामला जब आवश्यक हो।

• struct का प्रयोग करें आसान संरचना के लिए

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

2. API . का स्पष्ट और सीधा नामकरण समापन बिंदु

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

3. रंग सेट को दो मोड में गतिशील रूप से प्रबंधित करें

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

सफ़ेद . जैसे शब्दों का उपयोग करके गतिशील रूप से ग्रे स्केल रंगों के बारे में सोचने और संवाद करने के लिए , प्रकाश , काला या अंधेरा काम नहीं करता। क्योंकि अगर हम एक गतिशील रंग #000000 . को संदर्भित करते हैं (हेक्स में काला) काला या अंधेरा light color scheme . में , आप इस विशेष रंग के बारे में कैसे बात करते हैं, जो #FFFFFF . में बदल जाना चाहिए (HEX में सफ़ेद), dark color scheme . में ? डिफ़ॉल्टडार्क या लाइटडार्क ?

पारंपरिक दृष्टिकोण में ग्रे स्केल डायनेमिक कलर सेट को नाम देना बहुत भ्रमित करने वाला है। इस भ्रम से बचने के लिए हम theme . का प्रयोग करते हैं और contrast light . में रंग के एक सेट को प्रबंधित करने के लिए और dark इसके बजाय योजनाएं।

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

एक बार जब हम इस नामकरण पद्धति के चारों ओर अपना सिर लपेट लेते हैं, तो रंग पैलेट के इस आर्किटेक्चर को प्रबंधित करना आसान होता है Xcode . रंग सेट बनाने के लिए, बस एक नया Asset Catalog बनाएं फ़ाइल → एक नया जोड़ें Color Set → और बदलें Appearances करने के लिए Any, Light, Dark करेंगे।

4. environment सेटिंग

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

5. buttonStyle और बटन लेबल

UIKit में पुराने दिनों की तुलना में, SwiftUI में पुन:प्रयोज्य बटन बनाना बहुत आसान है। बटन दृश्य में दो भाग होते हैं, जो action . हैं क्लोजर (बटन दबाए जाने पर सक्रिय होने वाली घटना) और label (बटन का शरीर)। तब दृश्य को एक संशोधक buttonStyle . के साथ जंजीर में बांधा जा सकता है . पुन:प्रयोज्य बटन बनाने के बारे में विवरण जानने के लिए, मैं एलेजांद्रो के ट्यूटोरियल को पढ़ने की सलाह देता हूं, जो व्यापक और उपयोगी है।

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

दूसरी ओर, चार प्रमुख प्रकार की बटन शैलियाँ हैं:वृत्त चिह्न, चिह्न, कैप्सूल और पाठ। ButtonStyle का पालन करने के लिए प्रोटोकॉल, एक makeBody func को लागू करना होगा। यह फ़ंक्शन हमें एक configuration लाता है संपत्ति, एक देशी isPressed providing प्रदान करता है बटन दबाया गया है या नहीं, इसकी निगरानी के लिए मूल्य।

अंत में, TokenButtonLabel के शीर्ष पर स्टैकिंग करना और TokenButtonStyle , बटन घटक एपीआई का समापन बिंदु होगा TokenButton - एक समूह जो दृश्य डिजाइन प्रणाली में बटन प्रकारों के अनुरूप सामग्री और बटन की शैली को एक साथ लपेटता है।

6. AnyView आवरण के रूप में

जैसा कि हम makeBody . के साथ काम कर रहे हैं फ़ंक्शन ButtonStyle . द्वारा लाया गया प्रोटोकॉल, हमें View . के साथ काम करने के लिए एक उपयोगी युक्ति मिली . किसी दृश्य को एक चर में संग्रहीत करने के लिए, प्रकार एनोटेशन को AnyView . के रूप में दर्शाया जा सकता है , जो स्विफ्टयूआई में विचारों के एक सामान्य कंटेनर के रूप में काम करता है।

हमारे मामले में, क्योंकि हम अस्पष्टता संशोधक को configuration.label . में जोड़ना चाहते हैं प्रत्येक switch . में बार-बार ऐसा करने के बजाय, सभी प्रकार के बटनों के लिए मामले में, संशोधक को अंत में पूरी तरह से श्रृंखलाबद्ध करना अधिक समझ में आता है। हम AnyView . के लाभ का उपयोग करके इस पैटर्न को प्राप्त कर सकते हैं इस तरह:

7. mutating with के साथ व्यू मॉडिफायर बनाएं समारोह

बटनों की शैलियों को गतिशील रूप से अद्यतन करने के लिए, हम अपना स्वयं का संशोधक बना सकते हैं। पहले कस्टमाइज्ड म्यूटेबल स्टेट प्रॉपर्टीज को देखते हुए इंस्टेंट करें, और फिर एक mutating बनाएं फ़ंक्शन जो Self . देता है लक्ष्य राज्य संपत्ति को अद्यतन करने के बाद टाइप करें।

8. मुश्किल सीमा शैली

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

निष्कर्ष

SwiftUI एक अविश्वसनीय सुधार है जो Apple बनाता है। हालांकि खामियां अभी भी मौजूद हैं, इसके साथ एक मजबूत और लचीली डिजाइन प्रणाली का निर्माण, और इसके अलावा आईओएस में जटिल यूआई पहले से कहीं ज्यादा कुशल है। मुझे उम्मीद है कि यह लेख किसी भी iOS टीम के लिए मददगार होगा जो UI बनाने की कोशिश कर रहा है, और किसी भी प्रतिक्रिया का हमेशा स्वागत है!

? मेरे और काम vinceshao.com पर पढ़ें / मुझे ट्विटर या लिंक्डइन पर फॉलो करें