पूरी तरह से यूएक्स में एनीमेशन का उपयोग करने के लिए एक गाइड

मैं आपके ध्यान में इंटरफ़ेस एनीमेशन पर एक बहुत ही शांत लेख का अनुवाद लाता हूं।
Taras Skytskyi द्वारा UX में एनीमेशन के उचित उपयोग के लिए अंतिम मार्गदर्शिका ।



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

अवधि और एनीमेशन गति

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



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

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



एनीमेशन की अवधि, जो आपके इंटरफेस में होना बेहतर है

मोबाइल उपकरणों पर, सामग्री डिज़ाइन दिशानिर्देश भी 200-300 ms तक एनीमेशन की अवधि को सीमित करने का सुझाव देते हैं। गोलियों के लिए, अवधि 30% अधिक होनी चाहिए - लगभग 400-450 एमएस। कारण सरल है: स्क्रीन का आकार बड़ा है, इसलिए जब वे स्थिति बदलते हैं, तो ऑब्जेक्ट लंबी दूरी की यात्रा करते हैं। गैजेट पर, अवधि क्रमशः 30% कम होनी चाहिए - लगभग 150-200 एमएस, क्योंकि कवर की गई दूरी छोटी स्क्रीन पर कम है।



मोबाइल उपकरणों का आकार एनीमेशन की अवधि को प्रभावित करता है

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

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



बड़ी कंप्यूटर स्क्रीन = धीमी एनीमेशन? कोई रास्ता नहीं!

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

समान आकार की चलती वस्तुओं के बीच, रोकने के लिए पहली वस्तु सबसे कम दूरी है।

बड़ी वस्तुओं की तुलना में छोटी वस्तुएं धीमी गति से चलती हैं, क्योंकि वे बड़े विस्थापन करती हैं।



एनीमेशन की अवधि वस्तु के आकार और यात्रा की गई दूरी के आधार पर भिन्न होती है।

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



ध्यान भंग होने के कारण उछाल प्रभाव का उपयोग करने से बचें।

ऑब्जेक्ट्स का मूवमेंट स्पष्ट होना चाहिए, इसलिए मोशन ब्लर (हां, आफ्टर इफेक्ट्स यूजर्स का उपयोग न करें, लेकिन इस बार नहीं)। आधुनिक मोबाइल उपकरणों पर भी प्रभाव को पुन: पेश करना मुश्किल है, और इसका उपयोग इंटरफ़ेस के एनीमेशन में बिल्कुल भी नहीं किया गया है।



एनिमेशन में ब्लर इफेक्ट का इस्तेमाल न करें

सूची आइटम (समाचार कार्ड, ईमेल सूची, आदि) में बहुत कम प्रदर्शन में देरी होनी चाहिए। एक नए तत्व की प्रत्येक उपस्थिति 20 से 25 एमएस तक होनी चाहिए। तत्वों की धीमी उपस्थिति उपयोगकर्ता को परेशान कर सकती है।



सूची आइटम के लिए एनीमेशन 20-25 एमएस होना चाहिए

आसान

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



रैखिक की तुलना में गतिहीनता एनीमेशन अधिक प्राकृतिक दिखता है

रेखीय गति

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

सभी एनीमेशन अनुप्रयोगों में एनीमेशन घटता का उपयोग किया जाता है। मैं यह समझाने की कोशिश करूंगा कि उन्हें कैसे पढ़ना है और उनका क्या मतलब है। वक्र दिखाता है कि वस्तु की स्थिति (y अक्ष) एक ही समय अंतराल (एक्स अक्ष) पर कैसे बदलती है। वर्तमान मामले में, आंदोलन रैखिक है, इसलिए ऑब्जेक्ट एक ही दूरी पर एक साथ चलता है



रैखिक गति वक्र।

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

लाभ या त्वरण वक्र

हम वक्र पर देख सकते हैं कि शुरुआत में वस्तु की स्थिति धीरे-धीरे बदलती है, और गति धीरे-धीरे बढ़ती है। इसका मतलब है कि वस्तु एक निश्चित त्वरण के साथ आगे बढ़ रही है।



त्वरण वक्र

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



स्क्रीन से एक मानचित्र को खारिज करने के लिए त्वरण वक्र।

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

और, ज़ाहिर है, घटता को बदलकर, आप ऑब्जेक्ट को यथासंभव वास्तविकता के करीब ले जा सकते हैं।



एक ही अवधि और दूरी, लेकिन अलग मूड

क्षीणन या मंदी वक्र

यह लाभ वक्र के विपरीत है, इसलिए ऑब्जेक्ट जल्दी से एक बड़ी दूरी को कवर करता है, और फिर धीरे-धीरे गति को खो देता है जब तक कि यह बंद न हो जाए।



घटता वक्र

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



स्पष्टता के लिए ब्रेकिंग कर्व

लाभ और उत्थान वक्र या मानक वक्र

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



मानक वक्र

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



सममित और असममित मानक वक्र के बीच अंतर देखें

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



स्क्रीन पर एक तत्व और इसी असममित वक्र को ले जाना

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



नेविगेशन बार मानक वक्र का उपयोग करके स्क्रीन से छिपा हुआ है

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



साइड मेनू की उपस्थिति और गायब क्रमशः एक मंदी और एक मानक वक्र के साथ किया जाता है

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

इसके आधार पर, हमें ग्राफ़ पर केवल दो बिंदुओं का वर्णन करना होगा, जो कि क्यूबिक-बेज़ियर () फ़ंक्शन के चार तर्कों द्वारा दिए गए हैं: पहले दो पहले बिंदु के x और y निर्देशांक हैं, और दूसरे दूसरे बिंदु के x और y निर्देशांक हैं।

घटता के साथ काम को आसान बनाने के लिए, मैं साइटों easings.net और cub-bezier.com का उपयोग करने का सुझाव देता हूं । पहले में सबसे अधिक उपयोग किए जाने वाले वक्रों की एक सूची होती है, जिनमें से पैरामीटर आप प्रोटोटाइप टूल में कॉपी कर सकते हैं। दूसरा स्रोत आपको वक्र के विभिन्न मापदंडों के साथ खेलने का अवसर देता है और तुरंत देखता है कि ऑब्जेक्ट कैसे आगे बढ़ेंगे।



फ़ंक्शन के लिए विभिन्न प्रकार के घटता और उनके पैरामीटर

cubic-bezier() 

एनीमेशन इंटरफेस में कोरियोग्राफी

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

कोरियोग्राफी दो प्रकार की होती है - समान और अधीनस्थ बातचीत।

समान सहभागिता

समान बातचीत का मतलब है कि सभी वस्तुओं की उपस्थिति एक विशिष्ट नियम का पालन करती है।

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



उपयोगकर्ता का ध्यान एक दिशा में निर्देशित किया जाना चाहिए।

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



तत्वों के सारणीबद्ध प्रदर्शन के लिए विकर्ण दृश्य

गुलाम बातचीत

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

इस प्रकार का एनीमेशन आदेश की भावना देता है और मुख्य सामग्री पर अधिक ध्यान आकर्षित करता है।

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



यह केवल एक केंद्रीय वस्तु को पुनर्जीवित करने के लायक है और अन्य सभी इसके अधीनस्थ हैं। अन्यथा, उपयोगकर्ता को पता नहीं होगा कि किस वस्तु पर ध्यान देना है।

मटीरियल डिज़ाइन के अनुसार, जब चलती हुई वस्तुएँ असमान रूप से रूपांतरित हो जाती हैं, तो उन्हें एक चाप में चलना चाहिए, न कि एक सीधी रेखा में। यह आंदोलन को और अधिक प्राकृतिक बनाने में मदद करता है। "आनुपातिक रूप से" मेरा मतलब है कि वृद्धि / घटने से वस्तु की ऊंचाई और चौड़ाई में परिवर्तन विषम रूप से किया जाता है, अर्थात, अलग-अलग गति से (उदाहरण के लिए, एक वर्ग तत्व एक आयत में बदल जाता है)।



ऑब्जेक्ट की गति, जो असमान रूप से अपना आकार बदलती है, को चाप के साथ स्थित होना चाहिए

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



आनुपातिक आकारकरण एक सीधी रेखा में किया जाता है।

एक वक्र के साथ आंदोलन को दो तरीकों से प्राप्त किया जा सकता है: पहला कहा जाता है ऑब्जेक्ट का ऊर्ध्वाधर निकास क्षैतिज रूप से बढ़ना शुरू होता है और एक ऊर्ध्वाधर आंदोलन के साथ समाप्त होता है; दूसरा - वस्तु का क्षैतिज निकास लंबवत चलना शुरू करता है और एक क्षैतिज गति के साथ समाप्त होता है।

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



ऑब्जेक्ट का विस्तार / टकराने की दिशा को इंटरफ़ेस के अक्ष के साथ मेल खाना चाहिए

यदि गतिमान पिंडों के मार्ग एक-दूसरे से टकराते हैं, तो वे एक-दूसरे से नहीं गुजर सकते। ऑब्जेक्ट्स को किसी अन्य ऑब्जेक्ट की गति के लिए पर्याप्त जगह छोड़नी चाहिए, अपनी गति को धीमा करना या तेज करना। एक अन्य विकल्प यह है कि वे बस अन्य वस्तुओं को पीछे हटा देते हैं। ऐसा क्यों? चूंकि हम मानते हैं कि इंटरफ़ेस में सभी ऑब्जेक्ट एक ही विमान में हैं।



आंदोलन के दौरान, वस्तुओं को एक-दूसरे से गुजरना नहीं चाहिए, लेकिन किसी अन्य वस्तु को स्थानांतरित करने के लिए जगह छोड़ दें

एक अन्य मामले में, एक गतिशील वस्तु अन्य वस्तुओं से ऊपर उठ सकती है। लेकिन फिर से अन्य वस्तुओं के साथ प्रतिच्छेद न करें। क्यों? चूंकि हम मानते हैं कि इंटरफ़ेस तत्व भौतिकी के नियमों के अनुसार व्यवहार करते हैं, और वास्तविक दुनिया में कोई ठोस वस्तु ऐसा नहीं कर सकती है।



ऑब्जेक्ट अन्य ऑब्जेक्ट्स से ऊपर उठ सकते हैं और फिर चारों ओर घूम सकते हैं।

निष्कर्ष

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

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

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

स्रोत: UX में एनीमेशन के उचित उपयोग के लिए अंतिम मार्गदर्शिका
द्वारा पोस्ट: Taras Skytskyi