Use Adobe XD to create micro interactions

Use Adobe XD to create micro interactions

Adobe XD प्रोटोटाइप के साथ मदद कर सकता है, डिजाइन जीवनचक्र में सबसे महत्वपूर्ण प्रक्रियाओं में से एक, विकास में एक महत्वपूर्ण भूमिका निभा रहा है, डिजाइनरों और विकास टीमों को वर्कफ़्लो बनाए रखने में मदद करता है।

हाल ही में, प्रोटोटाइप परिदृश्य में कुछ महत्वपूर्ण बदलाव हुए हैं: डिजाइनरों के पास कई विकल्प हैं।

अन्य विषयों के साथ, एक भी डिजाइन और प्रोटोटाइप उपकरण नहीं है जो सब कुछ पूरा करने में सक्षम है।

चरणों के लिए उपकरणों के एक विशिष्ट सेट की आवश्यकता होती है। यह एक ऐसा समय था जब डिजाइनरों ने केवल फ़ोटोशॉप और स्केच का उपयोग किया था।

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

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

एन्कोडिंग इन इंटरैक्शन को बनाने का एक तरीका है। लेकिन एक लंबा समय लगता है

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

यह अवधारणा सरल है: ऑटो-चेतन डिजाइनरों को केवल कलाकृतियों या वस्तु गुणों को संशोधित करके यथार्थवादी एनिमेशन के साथ इंटरैक्टिव प्रोटोटाइप बनाने की अनुमति देता है।

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

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

इसका उपयोग दृश्य पदानुक्रम, CTA या पाठ बनाने के लिए भी किया जा सकता है जो अस्थायी रूप से या स्क्रीन के बाहर फीका हो जाता है।

इस लेख में, मैं समझाऊंगा कि एडोब एक्सडी के नए ऑटो चेतन फीचर का उपयोग करके सरल मिनी एनिमेशन कैसे बनाएं। इसके अलावा, हम शुरू करते हैं, स्वचालित एनीमेशन के लिए वस्तुओं में हेरफेर करने पर विचार करने के लिए कुछ चीजें हैं।

ऑटो-चेतन का उपयोग करके राज्य परिवर्तन करें

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

डिफ़ॉल्ट आर्टबोर्ड पर, एक आकृति बनाएं – हमारे उदाहरण में यह एक 500px X 200px ग्रीन आयत है। इस आर्टबोर्ड को खोलें और दूसरे आर्टबोर्ड पर आयत का चयन करें।

हमें आयत के गुणों को 1000 और 500 की चौड़ाई बढ़ाकर संशोधित करना है। आप आगे के समायोजन जैसे कि अपारदर्शिता को 50% तक बदल सकते हैं या रंग को गुलाबी बना सकते हैं।

अब ऊपरी बाएँ कोने में प्रोटोटाइप टैब पर क्लिक करें, पहले आर्टबोर्ड का चयन करें और दूसरे आर्टबोर्ड पर तीर का उपयोग करके इसे लिंक करें।

जब आप ऐसा करते हैं, तो ऐप के दाईं ओर एक इंटरैक्शन टैब होता है, जिसका उपयोग कार्रवाई ट्रिगर, गंतव्य और सहजता जैसे पैरामीटर सेट करने के लिए किया जा सकता है।

प्रत्येक पैरामीटर को अपनी आवश्यकताओं के अनुसार अनुकूलित किया जा सकता है। पाँच प्रकार के ट्रिगर्स हैं: एनीमेशन शुरू करने के लिए टाइमर को टैप, ड्रैग और सेट करें।

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

शीर्ष दाईं ओर स्थित प्ले आइकन पर क्लिक करके देखें कि ऑटो चेतन अपना जादू करता है और आयत को चेतन करता है।

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

कार्ड का विस्तार करें

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

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

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

हेडर और विवरण नीचे नहीं बदले जाने चाहिए। अब उन वस्तुओं को जोड़ने का समय है, जिनके बारे में हमने पहले बात की थी।

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

Leave a Comment

Your email address will not be published.