फ्रैमर में इंटरैक्टिव प्रोटोटाइप डिजाइन करें

विषय

• स्केच से आयात करें
• मुखौटा और अवतार परतें बनाएं
• राज्यों को परिभाषित करें
• राज्यों के बीच चेतन
• इसे वास्तविक मोबाइल डिवाइस पर आज़माएं

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

फ्रैमर एक नया कोड-आधारित प्रोटोटाइप टूल है। आप स्केच (या फोटोशॉप) में वैसे ही मॉकअप बना सकते हैं जैसे आप आमतौर पर बनाते हैं, और उन्हें फ्रैमर में आयात कर सकते हैं। फिर, थोड़ा CoffeeScript लिखें और आप बहुत कुछ हासिल कर सकते हैं।

मैं आपको दो दृश्यों के साथ एक आईओएस ऐप प्रोटोटाइप के उदाहरण का उपयोग करते हुए फ्रैमर में प्रोटोटाइप की मूल बातें सिखाने जा रहा हूं: एक प्रोफ़ाइल दृश्य और उपयोगकर्ता की अवतार छवि का ज़ूम-इन दृश्य। हम प्रोटोटाइप करेंगे कि विस्तारित फोटो दृश्य कैसे खुलेगा और बंद होगा, और हम इसे एनिमेट भी करेंगे। यहां ऑनलाइन डेमो देखें (स्रोत कोड देखने के लिए, बस ऊपरी-बाएं कोने में स्थित आइकन पर क्लिक करें)। आपको फ्रैमर के नि:शुल्क परीक्षण की भी आवश्यकता होगी, जिसे आप framerjs.com पर प्राप्त कर सकते हैं।

स्केच से आयात करें

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

स्केच = Framer.Importer.load "आयातित/प्रोफ़ाइल"

आयातित परतों तक पहुँचने के लिए उस चर का उपयोग करें। उदाहरण के लिए, स्केच फ़ाइल में 'सामग्री' नाम की परत को संदर्भित करने के लिए, आप फ्रैमर में स्केच.कंटेंट टाइप करेंगे।

मुखौटा और अवतार परतें बनाएं

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

इस तरह हैडरमास्क लेयर बनाएं:

हेडरमास्क = नई परत की चौड़ाई: स्क्रीन की चौड़ाई, ऊंचाई: 800 पृष्ठभूमि रंग: "पारदर्शी"

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

अगला, मुखौटा परत बनाएं:

मुखौटा = नई परत की चौड़ाई: १०००, ऊंचाई: १००० पृष्ठभूमिरंग: "पारदर्शी", सीमात्रिज्या: ५०० y: स्केच.हेडर.हाइट - १०० सुपरलेयर: हैडरमास्क स्केल: ०.२, मूलवाई: ०

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

शेष संपत्ति, सुपरलेयर, इस नई परत के माता-पिता के रूप में हमारे द्वारा बनाई गई हेडरमास्क परत सेट करती है। फ्रैमर में मास्किंग इस तरह काम करता है। बस सुपरलेयर प्रॉपर्टी सेट करें, और पैरेंट लेयर बच्चे को मास्क कर देगी।

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

अवतार = नई परत छवि: "छवियां/अवतार.पीएनजी" चौड़ाई: मुखौटा। चौड़ाई, ऊंचाई: मुखौटा। ऊंचाई सुपरलेयर: मुखौटा, बल 2 डी: सच

ध्यान दें कि हमने अवतार के सुपरलेयर को मास्क लेयर के रूप में सेट किया है। दोनों अब हेडरमास्क में नेस्टेड हैं। हम चौड़ाई और ऊंचाई भी निर्धारित करते हैं ताकि छवि नकाबपोश क्षेत्र को पूरी तरह से भर दे।

अंत में, हम एनीमेशन के लिए उपयोग किए जाने वाले मास्क की Y स्थिति को संग्रहीत करने के लिए एक चर बनाएंगे। हम इसे क्षैतिज रूप से केन्द्रित करेंगे, क्योंकि यह स्क्रीन से बड़ा है।

मास्कवाई = मास्क.वाई मास्क.सेंटरएक्स ()

राज्यों को परिभाषित करें

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

राज्यों के लिए वाक्य रचना बहुत सरल है। परत का संदर्भ लें, layer.states.add() विधि का उपयोग करें, और फिर शामिल किए जाने वाले गुणों को सूचीबद्ध करें।

स्केच.कंटेंट.स्टेट्स.एड (छिपाएं: {अपारदर्शिता: 0}) हैडरमास्क.स्टेट्स.एड (चाल: { y: १२०}) mask.states.add (ग्रो: {स्केल: १.१, y: मास्कवाई -420})

सामग्री परत के लिए दूसरा राज्य, जिसे स्केच से आयात किया गया था और जिसमें अन्य सभी प्रोफ़ाइल स्क्रीन तत्व शामिल हैं, पूरी तरह से पारदर्शी होना चाहिए। इस तरह, जब अवतार का विस्तार किया जाता है, तो हमारे पास एक काली पृष्ठभूमि होगी और शेष आयातित आइकन और तत्व दिखाई देंगे।

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

अंत में, मुखौटा परत के लिए एक नया राज्य दोनों इसे बढ़ाएंगे और इसे ऊपर ले जाएंगे, हमने पहले बनाए गए मास्कवाई चर का उपयोग करके। चूंकि मुखौटा परत का मूल (या लंगर बिंदु) इसका शीर्ष किनारा है, इसलिए हमें इसे 420 पिक्सेल तक ऊपर ले जाने की आवश्यकता है ताकि छवि का केंद्र दिखाई दे।

राज्यों के बीच चेतन

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

अवतार.ऑन इवेंट्स.क्लिक, -> हैडरमास्क.स्टेट्स.नेक्स्ट () मास्क.स्टेट्स.नेक्स्ट () स्केच.कंटेंट.स्टेट्स.नेक्स्ट ()

इस ब्लॉक की पहली पंक्ति अवतार परत पर क्लिक हैंडलर सेट करती है। जब भी इसे टैप किया जाता है, इससे कोई फर्क नहीं पड़ता कि इसे कैसे काटा गया है या यह किस आकार का है, इसके बाद आने वाले स्टेटमेंट चलेंगे।

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

हम जैसे राज्यों का उपयोग करते समय, आप आसानी से प्रत्येक एनीमेशन वक्र को लेयर.स्टेट्स.एनीमेशनऑप्शन प्रॉपर्टी का उपयोग करके अलग से बदल सकते हैं। केवल तीन मामूली समायोजन के साथ, एनीमेशन पूरी तरह से अलग लगता है:

स्केच.कंटेंट.स्टेट्स.एनिमेशनऑप्शन्स = कर्व: "ईज़ी", टाइम: 0.3 हैडरमास्क.स्टेट्स.एनीमेशनऑप्शन्स = कर्व: "स्प्रिंग (150, 20, 0)" मास्क.स्टेट्स.एनीमेशनऑप्शन्स = कर्व: "स्प्रिंग (300, 30, 0)"

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

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

इसे वास्तविक मोबाइल डिवाइस पर आज़माएं

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

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

शब्दों: जारोड ड्रायस्डेल

जारोड ड्रायस्डेल एक लेखक, डिज़ाइन सलाहकार, डिजिटल उत्पाद निर्माता हैं। यह लेख मूल रूप से नेट पत्रिका के अंक २७० में प्रकाशित हुआ था।

ये पसंद आया? ये पढ़ सकते हैं!

• स्केच में क्लिक करने योग्य, लाइव प्रोटोटाइप बनाएं
• ब्लॉग को कैसे शुरू करना है
• सबसे अच्छा फोटो संपादक