🖖 🀄️ 🙅🏻 इंटरएक्टिव डिजाइन जटिल नहीं है। 👨🏽‍⚕️ 🙇🏼 🛳️

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

कहाँ से शुरू करें?

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

संक्रमण पैटर्न

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

कंटेनर आधारित संक्रमण
एक कंटेनर के बिना संक्रमण।

कंटेनर आधारित संक्रमण

तत्व, जैसे कि पाठ, चिह्न और चित्र कंटेनर के अंदर समूहीकृत होते हैं।

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

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

* एनीमेशन तत्वों की उपस्थिति और गायब होने की व्याख्या करने के लिए धीमा हो गया

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

* एनीमेशन यह बताने के लिए धीमा हो गया कि कंटेनर द्वारा शुरुआती और अंत की रचनाएं कैसे जुड़ी हुई हैं

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

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

* एक तत्व के क्रमिक परिवर्तन (स्केलिंग, दिखाई देना और गायब हो जाना) के कारण कंटेनर कैसे उत्पन्न हो सकते हैं, यह बताने के लिए एनीमेशन को धीमा कर दिया गया है

एक कंटेनर के बिना संक्रमण

कुछ रचनाओं में एक कंटेनर नहीं होता है जिस पर संक्रमण आधारित होता है, उदाहरण के लिए, निचले नेविगेशन में आइकन पर क्लिक करके, जो उपयोगकर्ता को एक नए गंतव्य में प्रदर्शित करता है। इन मामलों में, दो-चरण टेम्पलेट का उपयोग किया जाता है:

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

* एनिमेशन को यह दिखाने के लिए धीमा किया जाता है कि तत्वों के स्केलिंग, उपस्थिति और गायब होने का उपयोग करके कंटेनर के बिना संक्रमण कैसे होता है

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

* एनिमेशन यह बताने के लिए धीमा हो गया कि ऊर्ध्वाधर और क्षैतिज गति कैसे होती है

सर्वोत्तम अभ्यास

बेहतर सरल है

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

* एनीमेशन आंदोलन की विभिन्न शैलियों को चित्रित करने के लिए धीमा हो गया

सही अवधि और शमन चुनें

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

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

* विभिन्न प्रकार के नरमी के उदाहरण के लिए एनीमेशन धीमा हो गया

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

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

निजीकृत एनीमेशन एक गंभीर गलती को कम कर सकता है

यदि आप आंदोलन की संभावना के बारे में अधिक जानने में रुचि रखते हैं, तो बातचीत करने वाले तत्वों के लिए हमारे दिशानिर्देशों को पढ़ना सुनिश्चित करें।

इंटरएक्टिव डिजाइन जटिल नहीं है।