2018 में प्रोटोटाइप के लिए टूल कैसे चुनें?

नमस्कार, हेब्र! मेरा नाम साशा बहादुर है, मैं Sberbank और Sbertech के डिजिटल बिजनेस प्लेटफॉर्म की एक टीम के रूप में काम करता हूं, और मैं मोबाइल एप्लिकेशन और वेब परियोजनाओं के डिजाइन में लगा हुआ हूं। मेरे ज्यादातर कामों में अलग-अलग उद्देश्यों के लिए अलग-अलग डिग्री के प्रोटोटाइप इकट्ठे होते हैं। डिजाइन और प्रोटोटाइप के लिए नए उपकरण और सेवाएं हर दिन जारी और अद्यतन की जाती हैं। मैंने आज बाजार पर औजारों का पूर्ण और गहन अध्ययन किया है और उन्हें समझने में मदद करेगा।

मैंने कार्यक्षमता के अनुसार सूची को तीन बड़े समूहों में विभाजित किया है और मैं प्रत्येक का अलग-अलग विश्लेषण करूंगा:



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

पहला समूह - संरचना, कम परिदृश्य

पहले समूह के उपकरण लिंक द्वारा लिंक किए गए स्क्रीन छवियों का उपयोग करते हैं। लिंक हॉटस्पॉट या ऑब्जेक्ट से बंधे हैं। परिणाम स्थिर प्रोटोटाइप है जो साझा करना, प्रतिक्रिया एकत्र करना और संपादित करना आसान है।



उनकी मदद से, आप कुछ मिनटों में परिकल्पना का परीक्षण कर सकते हैं, प्रारंभिक विश्लेषण के लिए एक स्क्रिप्ट को इकट्ठा कर सकते हैं। लेकिन सम्मेलन की उच्च डिग्री के कारण, प्रोटोटाइप एक मोबाइल एप्लिकेशन से काफी अलग व्यवहार करते हैं, जो उत्तरदाताओं को भ्रमित कर सकता है और परीक्षण की गुणवत्ता को कम कर सकता है।
आज तक, सबसे उल्लेखनीय उपकरण Marvel, Invision, और देशी उपकरण Adobe XD, Figma, और Sketch (49 वें संस्करण से) हैं।

मार्वल - एक मुफ्त संस्करण है
सबसे सरल प्रोटोटाइप ऑनलाइन सेवा। यह संपादकों को डिजाइन करने और वेब सेवा के रूप में स्वतंत्र रूप से काम करता है। हाल ही में मुझे अपना सरल संपादक मिला। मोबाइल एप्लिकेशन न केवल देखने, बल्कि प्रोटोटाइप बनाने और संपादित करने की भी अनुमति देता है। नि: शुल्क संस्करण में परियोजनाओं की संख्या की सीमा होती है, लेकिन आवेदन में इसे बंद कर दिया जाता है और आप कानूनी रूप से किसी भी संख्या में परियोजनाएं बना सकते हैं।



आकर्षण आते हैं
+ सादगी और सुविधा
+ स्वायत्तता (आप संपादकों के बिना काम कर सकते हैं)
+ सशर्त मुक्त
+ सहयोग और परीक्षण उपकरण
विपक्ष
- देखा नहीं

Invision App - $ 13 प्रति माह से
इनविटेशन (स्टूडियो नहीं) संपादकों के लिए एक ऐड-ऑन भी है, लेकिन, मार्वल के विपरीत, यह आपको स्क्रीन को सीधे स्केच में लिंक करने और संक्रमण और लिंक स्थापित किए बिना पहले से तैयार प्रोटोटाइप को निर्यात करने की अनुमति देता है। इसमें बड़ी संख्या में सहायक कार्य और एक विकसित बुनियादी ढांचा भी है। प्रोटोटाइप टूल के साथ, सहयोग, लाइब्रेरी स्टोरेज, अपने स्वयं के स्टॉक और बहुत कुछ के लिए सेवाओं की एक विस्तृत श्रृंखला है।



आकर्षण आते हैं
+ अतिरिक्त सेवाओं का विकसित पारिस्थितिकी तंत्र
+ सीधे स्केच में कनेक्शन कॉन्फ़िगर करने की क्षमता
विपक्ष
- देखा नहीं



Adobe XD - 644 (प्रति माह (एक मुफ्त स्टार्ट-अप योजना है जो आपको केवल 1 प्रोजेक्ट को रुमर करने की अनुमति देती है)
स्केच - प्रति वर्ष $ 99
अंजीर - एक मुफ्त संस्करण है

डिजाइन संपादकों में निर्मित प्रोटोटाइपिंग उपकरण व्यक्तिगत वेब सेवाओं की कार्यक्षमता को पूरी तरह से बंद कर देते हैं। संपादकों के विकास से संबंधित मामूली अंतर हैं। उदाहरण के लिए, Adobe XD अपने प्रतिद्वंद्वियों से बहुत पीछे है, और स्केच (50) में अभी भी कोई सुविधाजनक साझा तंत्र नहीं है, लेकिन सामान्य क्षणों में, हर कोई एक आम अनुभव के लिए प्रयास करता है जो कि Figma में सबसे अच्छा कार्यान्वित होता है।



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

दूसरा समूह - स्क्रीन, स्तरित एनीमेशन के बीच संक्रमण

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


इनविज़न स्टूडियो में एनीमेशन सेटिंग्स स्क्रीन का एक उदाहरण

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

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



आकर्षण आते हैं
+ सरल एनिमेशन और लघु परिदृश्यों के लिए एक अच्छा उपकरण
+ प्रशिक्षण सामग्री, विकसित समुदाय के बहुत सारे
विपक्ष
- जटिल परिदृश्यों के साथ काम करना एक बुरे सपने में बदल जाता है
- कोड के लिए कोई निर्यात नहीं
- मैक पर ही काम करता है
- कोई ऑनलाइन साझा नहीं

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



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

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



आकर्षण आते हैं
+ आसानी से आयोजित वर्कफ़्लो आपको जटिल स्क्रिप्ट और एनिमेशन के साथ काम करने की अनुमति देगा
विपक्ष
- कोई ऑनलाइन साझा नहीं
- मैक पर ही काम करता है

पतंग संगीतकार - $ 99 प्रति लाइसेंस
पतंग संगीतकार इन उपकरणों के लिए उन लोगों के लिए एक महान प्रतिस्थापन है, जिनका उपयोग After Effects में एनिमेशन करने के लिए किया जाता है। ऑपरेशन का सिद्धांत, जिसमें समयरेखा मुख्य उपकरण बन जाता है, और मापदंडों और घटनाओं को फिल्टर जैसी वस्तुओं पर लटका दिया जाता है, आपको एनीमेशन की गुणवत्ता पर ध्यान केंद्रित करने की अनुमति देता है। MacOS \ iOS और एक अंतर्निहित इंस्पेक्टर के लिए कोड निर्यात भी है।



आकर्षण आते हैं
+ कम से कम एई के समान वर्कफ़्लो
+ कोड पर निर्यात करें
विपक्ष
- मैंने इसका पता नहीं लगाया

तीसरा समूह - प्रोग्राम करने योग्य व्यवहार

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


फ्रामर में प्रोटोटाइप व्यवहार की स्थापना

प्रत्येक उपकरण की प्रक्रिया के लिए अपना दृष्टिकोण है, और इसकी प्रोग्रामिंग विधि - फ्रेजर में सरलीकृत जावास्क्रिप्ट से लेकर ओरिजनल स्टूडियो में विजुअल क्वार्ट्ज कम्पोजर तक।


ओरिगेमी स्टूडियो में प्रोटोटाइप इकट्ठे हुए। लिंक स्रोत फ़ाइल है जिसे ओरिगेमी लाइव एप्लिकेशन में फोन पर खोला जा सकता है।

हाइकु फ्री बीटा

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

परिणाम Lottie.js लाइब्रेरी का उपयोग करके सभी संभावित प्लेटफार्मों और प्रारूपों के लिए निर्यात किया जाता है।



आकर्षण आते हैं
+ चंचलता
विपक्ष
- आप घटनाओं और राज्यों को संभालने के लिए जावास्क्रिप्ट जानने की जरूरत है
- मैक केवल बीटा


Proto.io - प्रति माह $ 24 से
Atomic.io - एक मुफ्त संस्करण है
मल्टीफ़ंक्शनल वेब सेवाएं जो आपको सीधे ब्राउज़र में जटिल तर्क को पंजीकृत करने की अनुमति देती हैं। उनकी कार्यक्षमता में मूलभूत अंतर नहीं है। वेरिएबल्स और राज्यों और घटनाओं के ठीक ट्यूनिंग एनीमेशन टूल के परिचित तर्क को पूरक करते हैं। दुर्भाग्य से, इस प्रारूप में विशेष साधनों की तुलना में कनेक्शन एकत्र करना और संपादित करना अधिक कठिन है। साथ ही, ब्राउज़र में काम करने की आवश्यकता प्रक्रिया पर अपनी सीमाएं लगाती है।



आकर्षण आते हैं
+ प्रोग्रामिंग भाषाओं को जानने की कोई आवश्यकता नहीं है
विपक्ष
- वेब संस्करण

फ्रैमर - प्रति माह $ 12 से
कॉफीस्क्रिप्ट पर अपने स्वयं के डिजाइन संपादक और प्रोग्रामिंग वातावरण के साथ सबसे लोकप्रिय उपकरणों में से एक - जावास्क्रिप्ट का एक सरलीकृत संस्करण।

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



आकर्षण आते हैं
+ प्रोटोटाइप तर्क प्रोग्रामिंग और परिणाम साझा करने के लिए सुविधाजनक वातावरण
विपक्ष
- कॉफ़ीस्क्रिप्ट जानना आवश्यक है
- डिजाइनर बहुत समय डिबगिंग कोड खर्च करता है

Origami स्टूडियो - नि: शुल्क
फेसबुक से मुक्त उपकरण क्वार्ट्ज संगीतकार दृश्य प्रोग्रामिंग वातावरण का उपयोग करता है।

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

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



आकर्षण आते हैं
+ नि: शुल्क
+ असीमित कार्यक्षमता - आप JSON और gyro डेटा दोनों का उपयोग कर सकते हैं
+ जटिल तर्क के लिए सरल प्रक्रिया
विपक्ष
- अनुकूलन के साथ समस्या
- पर्याप्त प्रशिक्षण सामग्री नहीं

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