टैप पर प्रतिक्रिया देने वाले पेट इंटरेक्शन एनिमेशन की योजना कैसे बनाएं
एनिमेशन को एक छोटे कार्य-कारण क्रम के रूप में प्लान करें: उंगली के स्पर्श को तुरंत स्वीकार करें, पालतू जीव की प्रतिक्रिया दिखाएं, फिर वापस तैयार अवस्था में लौट आएं। तय करें कि टैप का क्या अर्थ है, उस अर्थ के अनुकूल एक स्पष्ट क्रिया चुनें और डिवाइस पर टाइमिंग का परीक्षण करें। एक रिस्पॉन्सिव एनिमेशन का मतलब अधिक हलचल जोड़ना कम और पहला दृश्य परिवर्तन तुरंत लाना व पूरे क्रम को टैप से जुड़ा हुआ महसूस कराना अधिक है।
1. परिभाषित करें कि टैप को क्या संप्रेषित करना चाहिए
पोज़ स्केच करने से पहले इंटरेक्शन का एक वाक्य का नियम लिखें: "टैप करने पर, पालतू जीव व्यक्ति पर ध्यान देता है और संक्षिप्त अभिवादन के साथ प्रतिक्रिया करता है।" टैप का परिणाम सुसंगत रखें। यदि एक ही टैप कभी कैरेक्टर को खाना खिलाता है, कभी उसके साथ खेलता है और कभी उसका अभिवादन करता है, तो एनिमेशन विश्वसनीय रूप से यह संकेत नहीं दे पाएगा कि क्या हुआ।
इनपुट को दो पलों में विभाजित करें: उंगली नीचे रखना (फिंगर डाउन) और उंगली उठाना (फिंगर अप)। फिंगर डाउन पर एक छोटा प्रेस्ड-स्टेट परिवर्तन यह पुष्टि करता है कि लक्ष्य रजिस्टर हो गया है; जब रिलीज़ पर टैप स्वीकार कर लिया जाता है, तब पालतू जीव की मुख्य प्रतिक्रिया सामने आ सकती है। Apple का रिस्पॉन्सिवनेस गाइडेंस टचस्क्रीन प्रेस और रिलीज़ को अलग-अलग विज़ुअल प्रतिक्रियाओं वाले असतत (डिस्क्रीट) इंटरेक्शन के रूप में वर्णित करता है। यह अंतर टैप को स्वीकृत महसूस कराने में मदद करता है, भले ही बड़े कैरेक्टर एनिमेशन को पूरा होने में अधिक समय लगे। यूज़र इंटरफ़ेस रिस्पॉन्सिवनेस को समझना
2. स्पष्ट विज़ुअल समझ वाली प्रतिक्रिया चुनें
एक ऐसी प्राथमिक गति चुनें जो कैरेक्टर के प्रदर्शित आकार पर उद्देश्य को संप्रेषित करे। अभिवादन के लिए आंखों को घुमाना और उसके बाद सिर को थोड़ा झुकाना हो सकता है; चंचल स्वीकृति के लिए शरीर का हल्का सा उछाल हो सकता है। ये डिज़ाइन के उदाहरण हैं, कोई निर्धारित नियम नहीं। ऐसे सिल्हूट या चेहरे के बदलाव को प्राथमिकता दें जो कैरेक्टर के छोटे होने पर भी पहचानने योग्य रहे, और इससे पहले कि दर्शक पहली क्रिया को समझ पाए, कई इशारों को एक के ऊपर एक जोड़ने से बचें।
प्रतिक्रिया को एंटीसिपेशन (पूर्वाभास), एक्शन (क्रिया) और सेटल (स्थिर होना) से तैयार करें। एंटीसिपेशन टैप के स्थान की ओर एक संक्षिप्त नज़र हो सकती है। एक्शन मुख्य परिभाषित भाव है। सेटल बिना किसी झटके के एक आरामदायक आइडल पोज़ को बहाल करता है। यह क्रम प्लेटफ़ॉर्म मार्गदर्शन से लिया गया एक व्यावहारिक डिज़ाइन निष्कर्ष है ताकि फ़ीडबैक को यथार्थवादी, संक्षिप्त और सटीक बनाया जा सके: गति को क्रिया को पुष्ट करना चाहिए, उसके साथ प्रतिस्पर्धा नहीं करनी चाहिए। Apple ह्यूमन इंटरफ़ेस गाइडलाइन्स: मोशन
3. पहले फ़्रेम से ही टैप को स्वीकार करें
पूरी प्रतिक्रिया की अवधि से अधिक महत्वपूर्ण पहला दृश्य परिवर्तन होता है। शुरुआती डिज़ाइन विकल्प के रूप में, कैरेक्टर या टैप टारगेट को प्रेस करते ही तुरंत बदलें—हल्के स्क्वैश, हाइलाइट या आंखों की दिशा बदलकर—फिर रिलीज़ के बाद भावपूर्ण प्रतिक्रिया में ट्रांज़िशन करें। सटीक समय को एक सार्वभौमिक संख्या मानने के बजाय संदर्भ के अनुसार ट्यून की जाने वाली चीज़ समझें।
यदि एनिमेशन केवल एसेट लोड करने, रिमोट डेटा की जांच करने या असंबंधित काम पूरा करने के बाद ही शुरू होता है, तो ऐसा लग सकता है कि इंटरेक्शन छूट गया है। जब संभव हो, पावती (स्वीकृति) को भारी प्रोसेसिंग वाले कार्यों से स्वतंत्र रखें। Apple डिस्क्रीट इंटरेक्शन में ध्यान देने योग्य देरी को "हैंग" (hang) के रूप में दर्ज करता है, और इसे "हिच" (hitch) से अलग करता है, जो सुचारू गति में रुकावटें होती हैं। व्यवहार में, यह दोनों जांचें कि क्या कैरेक्टर तुरंत प्रतिक्रिया देना शुरू करता है और क्या प्रतिक्रिया शुरू होने के बाद यह सुचारू रूप से चलता है। यूज़र इंटरफ़ेस रिस्पॉन्सिवनेस को समझना
4. काम के अनुसार अवधि और ईज़िंग चुनें
सबसे छोटे क्रम का उपयोग करें जिससे दर्शक प्रतिक्रिया को पहचान सकें और उसे स्थिर होते देख सकें। कान का एक त्वरित झटका तेज़ी से समाप्त हो सकता है; सिर घुमाने की क्रिया को समझने में समय लगता है। यदि एनिमेशन सुस्त लगता है, तो हर पोज़ को छोटा करने से पहले उसकी मुख्य परिभाषित गति से पहले की देरी को कम करें। यदि यह बहुत अचानक लगता है, तो लंबा ठहराव जोड़ने के बजाय क्रिया के अंदर या बाहर के ट्रांज़िशन को समायोजित करें।
गति को एक सोद्देश्य स्पीड प्रोफ़ाइल दें। प्रतिक्रिया तुरंत शुरू हो सकती है और अपने अंतिम पोज़ में सहजता से ढल (ईज़) सकती है, जबकि एक छोटा उछाल थोड़ा ओवरशूट होकर स्थिर हो सकता है। ये उदाहरणात्मक विकल्प हैं: सही वक्र (curve) कैरेक्टर की शैली और गति के आकार पर निर्भर करता है। Apple संक्षिप्त, सटीक फ़ीडबैक की सिफारिश करता है और उपयोगकर्ताओं को आगे बढ़ने से पहले गति समाप्त होने की प्रतीक्षा कराने के प्रति आगाह करता है। Apple ह्यूमन इंटरफ़ेस गाइडलाइन्स: मोशन
5. तय करें कि बार-बार किए गए टैप क्या करेंगे
जब पहली प्रतिक्रिया चल रही हो, तब दूसरे टैप का परीक्षण करें। एक स्पष्ट नियम चुनें: प्रतिक्रिया को फिर से शुरू करना, दूसरी प्रतिक्रिया को कतारबद्ध करना, एक नए पोज़ में ब्लेंड होना, या एक स्पष्ट क्षण तक आगे के टैप को अनदेखा करना। एक साधारण पेट इंटरेक्शन के लिए, एक छोटी प्रतिक्रिया को फिर से शुरू करना या नए पोज़ में ब्लेंड करना कैरेक्टर को उपलब्ध महसूस करा सकता है; कई पूर्ण प्रतिक्रियाओं को कतारबद्ध करने से पालतू जीव व्यक्ति से पीछे छूटता हुआ प्रतीत हो सकता है।
आप चाहे जो भी नियम चुनें, एनिमेशन को आधे-अधूरे रूप में छोड़ने से बचें। एंटीसिपेशन, मुख्य जेस्चर और सेटल के दौरान टैप की जांच करें। इसके अलावा ऐसे टैप का परीक्षण करें जो प्रेस के रूप में शुरू होता है लेकिन लक्ष्य के बाहर समाप्त होता है, यदि आपका प्लेटफ़ॉर्म इसे पूर्ण टैप से अलग मानता है। Apple का बटन गाइडेंस बताता है कि कंट्रोल की सीमाओं के भीतर टच-अप उसकी क्रिया को ट्रिगर करता है; कस्टम टैप हैंडलिंग को अपने समकक्ष व्यवहार को स्पष्ट रूप से परिभाषित करना चाहिए। अपने ऐप में हैंग्स को समझना
6. पूर्ण गति के बिना भी इंटरेक्शन को उपयोग योग्य बनाए रखें
जहाँ प्लेटफ़ॉर्म मोशन प्राथमिकताएं प्रदान करता है, वहाँ प्रतिक्रिया को वैकल्पिक रखें, और ज़रूरत पड़ने पर बिना गति वाले स्टेट परिवर्तन के माध्यम से टैप द्वारा दी जाने वाली जानकारी को सुरक्षित रखें। वेब इंटरफ़ेस के लिए, W3C की प्रलेखित तकनीक prefers-reduced-motion मीडिया क्वेरी का उपयोग करती है ताकि जब कोई उपयोगकर्ता कम गति का अनुरोध करे, तो इंटरेक्शन-ट्रिगर गति को दबाया या बदला जा सके। W3C पेज एक तकनीक का वर्णन करता है, न कि उस सटीक कार्यान्वयन का उपयोग करने की अनिवार्यता का। W3C तकनीक C39: गति को रोकने के लिए CSS prefers-reduced-motion क्वेरी का उपयोग करना
यदि आप ध्वनि या हैप्टिक फ़ीडबैक जोड़ते हैं, तो इसे दृश्य प्रतिक्रिया के सीधे अनुरूप बनाएं और इसे सोच-समझकर प्रदान करें। Apple का हैप्टिक्स गाइडेंस कहता है कि फ़ीडबैक किसी दृश्य परिवर्तन से मेल खाना चाहिए या किसी उपयोगकर्ता क्रिया पर प्रतिक्रिया देना चाहिए, और चेतावनी देता है कि अत्यधिक उपयोग इसके महत्व को कम कर सकता है। एक पेट एनिमेशन को अतिरिक्त फ़ीडबैक चैनलों की आवश्यकता नहीं होती है यदि गति पहले से ही परिणाम को स्पष्ट कर देती है। Apple ह्यूमन इंटरफ़ेस गाइडलाइन्स: प्लेइंग हैप्टिक्स
7. एक केंद्रित टैप परीक्षण चलाएं
केवल टाइमलाइन एडिटर से निर्णय लेने के बजाय, वास्तविक डिस्प्ले आकार पर लक्षित डिवाइस पर परीक्षण करें। कुछ व्यावहारिक प्रश्न पूछें: क्या प्रेस स्पष्ट रूप से रजिस्टर होता है, क्या आप बता सकते हैं कि पालतू जीव ने क्या किया, क्या पोज़ एक इंटरैक्टिव स्थिति में वापस लौटता है, और क्या बार-बार किया गया टैप पूर्वानुमेय व्यवहार करता है? पहले सामान्य गति से देखें; धीमा प्लेबैक पोज़ ट्रांज़िशन का निरीक्षण करने में मदद कर सकता है लेकिन यह स्थापित नहीं कर सकता कि उपयोग में टाइमिंग रिस्पॉन्सिव लगती है या नहीं।
फिर एज केस का परीक्षण करें: तेज़ी से कई बार टैप करें, लक्ष्य सीमा के पास टैप करें, और डिवाइस की रिड्यूस्ड-मोशन सेटिंग सक्षम करें। विलंबित शुरुआत, जमे हुए फ़्रेम, अचानक रीसेट और ऐसी प्रतिक्रियाओं की तलाश करें जो तब तक ओवरलैप होती हैं जब तक कि अर्थ अस्पष्ट न हो जाए। Apple नोट करता है कि एक डिस्प्ले रिफ्रेश इंटरवल की देरी भी मोशन में हिच पैदा कर सकती है, इसलिए सुगमता के साथ-साथ कथित प्रारंभ समय का भी निरीक्षण करें। ऐप की प्रतिक्रियाशीलता में सुधार
एक विश्वसनीय योजना सरल है: टैप के अर्थ को परिभाषित करें, इसे तुरंत स्वीकार करें, एक समझने योग्य प्रतिक्रिया प्रस्तुत करें, वापस उपलब्ध पोज़ में आएं, और तय करें कि रुकावटें कैसे काम करेंगी। डिवाइस पर क्रम को ट्यून करें, फिर मोशन कम करके समान जांच दोहराएं। तैयार व्यवहार से टैप और पालतू जीव की प्रतिक्रिया के बीच के संबंध को समझना आसान होना चाहिए।