मोशन डिज़ाइन के सिद्धांत: 2026 में इंटरफ़ेस को असल में कैसे चलना चाहिए
UI मोशन के लिए एक काम करने वाले डिज़ाइनर की गाइड। वे सात सिद्धांत जो उद्देश्यपूर्ण मोशन को सजावट से अलग करते हैं, अवधि की तालिका, और ऐसे एनिमेशन कैसे शिप करें जो असली प्रोडक्ट में टिकें।
मोशन आधुनिक इंटरफ़ेस डिज़ाइन का सबसे ज़्यादा दुरुपयोग होने वाला औज़ार है। हर टीम एनिमेशन रील शिप करती है, लगभग कोई भी मोशन सिस्टम शिप नहीं करता। नतीजा: ऐसा प्रोडक्ट वर्क जो उछलता है, हिलता है, और पैरालैक्स करता हुआ यूज़र के रास्ते में आ खड़ा होता है। वह मोशन जिसे काट देना चाहिए था।
यह पेपर काम करने वाले डिज़ाइनर का संस्करण है। सात सिद्धांत जो तय करते हैं कि कोई मोशन अपनी जगह कमाता है या नहीं, अवधि और ईज़िंग का एक रेफ़रेंस जो बहस खत्म कर दे, और असली यूज़र टेस्टिंग में टिकने वाले पैटर्न की एक छोटी सूची। कोई Dribbble लूप नहीं, कोई ब्रांड फ़िल्म नहीं, सिर्फ़ ऐसा प्रोडक्ट मोशन जो यूज़र के समय की इज़्ज़त करता है।
मोशन डिज़ाइन असल में क्या है
मोशन डिज़ाइन प्रोडक्ट की व्यवहार परत (behavior layer) है। यह बताती है कि एलिमेंट समय के साथ कैसे आते हैं, जाते हैं, प्रतिक्रिया देते हैं और आपस में जुड़ते हैं। अच्छी तरह किया जाए तो मोशन यूज़र को बताता है कि वह कहाँ है, कहाँ से आया है और कहाँ जा सकता है, कॉपी का एक भी अतिरिक्त शब्द लिखे बिना।
बुरी तरह किया जाए तो मोशन यूज़र को बस इतना बताता है कि डिज़ाइनर के पास Framer था। सजावटी एनिमेशन, अंतहीन स्प्रिंग, और हीरो वीडियो जो आवाज़ के साथ ऑटोप्ले होते हैं, एक ही गलती के अलग-अलग कॉस्ट्यूम हैं। मोशन ध्यान, बैंडविड्थ और एक्सेसिबिलिटी की कीमत वसूलता है। उसे अपना बिल जायज़ ठहराना पड़ेगा।
विज़ुअल हायरार्की डिज़ाइन वाला पीस बताता है कि आँख स्थिर पेज को कैसे पढ़ती है। मोशन अगली परत है। यह आँख को सिर्फ़ यह नहीं बताता कि कहाँ देखना है, बल्कि यह भी कि कब।
मोशन के दो काम हैं, सिर्फ़ दो
शिप हो चुके प्रोडक्ट का हर एनिमेशन दो में से एक काम कर रहा होता है। अगर वह कोई भी नहीं कर रहा, तो वह सजावट है, और परफ़ॉर्मेंस रिव्यू में सजावट सबसे पहले कटती है।
पहला काम: स्टेट बदलाव बताना। जो बटन खाली पड़ा था अब दबा है। जो मोडल मौजूद नहीं था अब खुला है। जो पंक्ति खाली थी उसमें अब डेटा है। मोशन नए स्टेट पर झटके से कूदने के बजाय ट्रांज़िशन दिखाकर बदलाव को समझने लायक बनाता है।
दूसरा काम: आँख को राह दिखाना। नया एलिमेंट दाईं ओर से स्लाइड होकर आता है क्योंकि यूज़र ने आगे वाला बटन दबाया। कार्ड नीचे के नेविगेशन की ओर सिकुड़ जाता है क्योंकि वह सेव हुआ। मोशन यूज़र को प्रोडक्ट का स्थानिक मॉडल सिखाता है, बिना डॉक्यूमेंटेशन पढ़वाए।
जो मोशन न स्टेट बता रहा है न आँख को राह दिखा रहा है, वह मुफ़्त में यूज़र का ध्यान खा रहा है। उसे काट दो।
प्रोडक्ट मोशन के सात सिद्धांत
ये लीवर हैं। इन्हें मिलाकर खींचो तो मोशन सोचा-समझा लगता है। एक भी न खींचो तो प्रोडक्ट अकड़ा हुआ लगता है। ज़्यादा खींच दो तो खिलौना लगता है।
सिद्धांत 1: पॉलिश से पहले उद्देश्य
हर एनिमेशन एक सवाल का जवाब देता है: अगर यह मोशन न होता तो यूज़र क्या खोता? अगर जवाब "कुछ नहीं" है, तो मोशन सजावट है। अगर जवाब "उन्हें समझ नहीं आता कि क्या हुआ" है, तो मोशन ढाँचागत है और रहेगा।
जो डिज़ाइनर "यहाँ थोड़ा एनिमेशन डाल देते हैं" से शुरू करते हैं, वे शोरगुल वाले प्रोडक्ट शिप करते हैं। जो "अगर यह झटके से बदला तो यूज़र क्या मिस करेगा" से शुरू करते हैं, वे ज़िंदा लगने वाले प्रोडक्ट शिप करते हैं।
सिद्धांत 2: अवधि असर के हिसाब से
छोटी घटनाओं के लिए छोटे एनिमेशन। बड़ी घटनाओं के लिए लंबे।
बटन प्रेस 100 मिलीसेकंड से कम में पूरा होता है। पेज ट्रांज़िशन 400 तक ले सकता है। जो मोडल पूरे व्यूपोर्ट पर कब्ज़ा कर ले वह 500 झेल सकता है। इससे ऊपर कुछ भी दसवीं बार इस्तेमाल पर सुस्त लगता है, भले ही पहली बार सिनेमाई लगे।
अवधि की तालिका:
| घटना | अवधि | क्यों |
|---|---|---|
| हover, फ़ोकस, बटन प्रेस | 100 से 150 ms | फ़ीडबैक तुरंत महसूस होना चाहिए |
| छोटा स्टेट बदलाव (टॉगल, इनपुट) | 150 से 200 ms | दिखे पर बाधा न बने |
| कार्ड, टूलटिप, ड्रॉपडाउन खुलना | 200 से 300 ms | ईज़िंग को स्वाभाविक लगने की जगह मिलती है |
| पेज या मोडल ट्रांज़िशन | 300 से 400 ms | खिंचे बिना स्थानिक संदर्भ तय करता है |
| बड़ा लेआउट शिफ़्ट, ऑनबोर्डिंग रिवील | 400 से 500 ms | सिर्फ़ तब जब पल सच में मायने रखता हो |
प्रोडक्ट में (मार्केटिंग पेज में नहीं) 500 ms से ऊपर कुछ भी हर लौटने वाले यूज़र पर टैक्स है। पहला व्यू सिनेमाई होता है। सौवाँ यातना।
सिद्धांत 3: ईज़िंग भावना ढोती है
लीनियर मोशन रोबोट जैसा होता है। भौतिक दुनिया सीधी रेखा में नहीं चलती, और जो इंटरफ़ेस चलते हैं वे मशीनी लगते हैं। ईज़िंग कर्व ही मोशन को इंसानी बनाते हैं।
तीन ईज़िंग 90% प्रोडक्ट काम निपटा देती हैं।
- Ease-out स्क्रीन में आने वाले एलिमेंट के लिए। शुरू में तेज़, अंत में धीमा। यह उस उम्मीद से मेल खाता है कि कोई चीज़ अपनी जगह पर टिकती है।
- Ease-in स्क्रीन से जाने वाले एलिमेंट के लिए। शुरू में धीमा, अंत में तेज़। यूज़र देखता है कि एलिमेंट जाने से पहले विदाई स्वीकार करता है।
- Ease-in-out एक जगह से दूसरी जगह जाने वाले एलिमेंट के लिए। दोनों सिरों पर मुलायम। यह भौतिक जड़ता से मेल खाता है।
स्प्रिंग कर्व चौथा विकल्प है, सावधानी से इस्तेमाल करें। स्प्रिंग चंचल लगते हैं और दोस्ताना आवाज़ वाले कंज़्यूमर ऐप्स के लिए सही हैं। फ़ाइनेंशियल सॉफ़्टवेयर, हेल्थकेयर, या ऐसे किसी प्रोडक्ट के लिए गलत लगते हैं जहाँ ओवरशूट अस्थिरता जैसा पढ़ा जाता है।
सिद्धांत 4: मोशन, मोशन प्रेफ़रेंस का सम्मान करे
हर प्रोडक्ट prefers-reduced-motion का रास्ता शिप करता है। वेस्टिबुलर विकार, माइग्रेन या ध्यान की संवेदनशीलता वाले यूज़र उस मोशन से नुकसान उठाते हैं जिसका बाकी यूज़र मज़ा लेते हैं। सेटिंग को नज़रअंदाज़ करना स्टाइल की पसंद नहीं, एक्सेसिबिलिटी की विफलता है।
नियम यह नहीं है कि सेटिंग ऑन होने पर मोशन पूरी तरह हटा दो। नियम है दूरी-आधारित मोशन को ओपेसिटी-आधारित मोशन से बदलना।
जो कार्ड 40 पिक्सल स्लाइड होकर आता था वह अब फ़ेड होकर आता है। स्टेट बदलाव अब भी बताया जाता है, वेस्टिबुलर ट्रिगर हट जाता है। वेब एक्सेसिबिलिटी चेकलिस्ट वाला विश्लेषण बताता है कि पूरे एक्सेसिबिलिटी ऑडिट में यह कहाँ फ़िट बैठता है।
सिद्धांत 5: पूरे प्रोडक्ट में एकरूपता
मोशन ऐसा लगना चाहिए जैसे एक प्रोडक्ट ने एक ही सेट के फ़ैसले लिए हों। अलग-अलग ईज़िंग और अवधि वाली दो स्क्रीन ऐसी लगती हैं जैसे दो प्रोडक्ट सिलकर जोड़े गए हों। यूज़र नोटिस करते हैं, भले ही बता न पाएँ कि क्या अटपटा है।
इलाज है मोशन सिस्टम। तीन से पाँच अवधियाँ। तीन से पाँच ईज़िंग।
motion.short, motion.medium, motion.long, ease.enter, ease.exit, ease.standard जैसे नामित टोकन। डिज़ाइन सिस्टम गाइड वाला विश्लेषण बताता है कि ये रंग और टाइप टोकन के साथ कहाँ रहते हैं।
2026 में मोशन टोकन वैकल्पिक नहीं हैं। टीम बढ़ने पर मोशन को भटकने से रोकने का यही एकमात्र तरीका है। तीन लोगों की टीम जो फ़्रीहैंड एनिमेशन शिप करे, तीन राय का सिस्टम बनाती है। अगला हायर चौथी जोड़ देता है। बीसवीं स्क्रीन तक प्रोडक्ट की कोई सुसंगत व्यवहार परत नहीं बचती।
सिद्धांत 6: मोशन स्थानिक मॉडल का पालन करे
हर प्रोडक्ट का एक निहित नक्शा होता है। नई स्क्रीन दाईं ओर रहती हैं। डिटेल व्यू कार्ड से ज़ूम होकर आते हैं। ओवरले ऊपर से उतरते हैं। नेविगेशन ड्रॉअर उस स्क्रीन के किनारे से आते हैं जहाँ वे रहते हैं।
मोशन इस नक्शे को मज़बूत करता है। जो डिटेल स्क्रीन यूज़र के टैप किए कार्ड से ज़ूम होकर आती है वह स्थानिक निरंतरता सिखाती है। वही डिटेल स्क्रीन ऊपर से गिरे तो यूज़र उलझ जाता है क्योंकि वह निहित नक्शा तोड़ती है।
जब डिज़ाइनर इसे गलत करते हैं, तो लगभग हमेशा इसलिए कि उन्होंने एनिमेशन को फ़्लो के संदर्भ में नहीं, अलग-थलग चुना। कसौटी: क्या आप हर ट्रांज़िशन को एक सुसंगत स्थानिक रूपक तक वापस ले जा सकते हैं। नहीं, तो मोशन सजा रहा है, सिखा नहीं रहा।
सिद्धांत 7: मोशन का एक बजट होता है
हर एनिमेशन CPU, बैटरी और ध्यान की कीमत लेता है। हर एक का बजट बनाओ।
CPU और बैटरी बजट का मतलब है सिर्फ़ transform और opacity को एनिमेट करना, और width, height, top, left जैसी लेआउट-ट्रिगर करने वाली प्रॉपर्टी से बचना। आधुनिक ब्राउज़र transform और opacity को GPU पर संभालते हैं, जो सस्ता है। लेआउट प्रॉपर्टी एनिमेट करने से रीकैलकुलेशन होते हैं जो मिड-रेंज Android फ़ोन पर परफ़ॉर्मेंस डुबो देते हैं।
ध्यान बजट का मतलब है एक साथ चलने वाले एनिमेशन सीमित रखना। लगभग हमेशा एक समय में एक ही चीज़ चले। दो चालें पहले ही काफ़ी हैं, तीन ध्यान भंग करती हैं।
जिस पेज पर स्क्रॉल पर हर एलिमेंट एनिमेट होता है वह डिज़ाइन किया पेज नहीं, एकाग्रता का ट्रैपडोर है। core web vitals ग्लॉसरी वे परफ़ॉर्मेंस नंबर बताती है जिन्हें स्क्रॉल-ट्रिगर्ड एनिमेशन आमतौर पर बिगाड़ देता है।
जो पैटर्न अपनी जगह कमाते हैं
Dribbble पर तैरते दर्जनों मोशन पैटर्न में से सिर्फ़ एक छोटी सूची प्रोडक्ट काम को सच में बेहतर बनाती है। बाकी कॉस्ट्यूम हैं।
इनपुट पर माइक्रो-इंटरैक्शन
वह बटन जो प्रेस पर 2 पिक्सल दब जाए, वह टॉगल जो स्टेट के बीच स्प्रिंग करे, वह इनपुट जो वैलिडेशन फ़ेल होने पर हल्के से हिले। ये किसी भी प्रोडक्ट के सबसे सस्ते और सबसे असरदार मोशन हैं। ये यूज़र के सवाल (क्या सिस्टम ने मुझे सुना) का जवाब 150 मिलीसेकंड से कम में, बिना किसी कॉपी के, दे देते हैं।
हर प्राइमरी कंट्रोल में माइक्रो-इंटरैक्शन होना चाहिए। बटन, टॉगल, इनपुट, चेकबॉक्स, रेडियो, स्लाइडर। अगर कंट्रोल यूज़र के स्पर्श पर दिखकर प्रतिक्रिया नहीं देता, तो बैकएंड तेज़ होने पर भी प्रोडक्ट सुस्त लगता है। फ़ोकस स्टेट ग्लॉसरी इन इंटरैक्शन को चलाने वाले एक्सेसिबिलिटी नियम बताती है।
लिस्ट के लिए स्टैगर्ड रिवील
कार्ड की जो लिस्ट आइटम के बीच 50 ms के स्टैगर से फ़ेड होकर आती है वह सोची-समझी लगती है। वही लिस्ट एक साथ आ जाए तो अचानक लगती है। पहले रेंडर पर कुछ सौ मिलीसेकंड अतिरिक्त देकर स्टैगर करना लगभग हमेशा सार्थक है।
सीमा चार आइटम है। चार के बाद फ़ोल्ड के नीचे स्टैगर जारी रखो और बाकी को यूज़र के स्क्रॉल पर छोड़ दो। बीस आइटम क्रम से स्टैगर करना सुस्त लगता है, और यूज़र उनमें से ज़्यादातर देखता भी नहीं।
शेयर्ड-एलिमेंट ट्रांज़िशन
यूज़र का टैप किया कार्ड डिटेल व्यू का हेडर बन जाता है। थंबनेल फैलकर पूरी इमेज बन जाता है। ये ट्रांज़िशन स्थानिक मॉडल को ज़ोर से और सस्ते में सिखाते हैं, और आधुनिक प्रोडक्ट काम में सबसे प्रभावशाली महसूस होने वाला मोशन पैटर्न यही है। इनमें इंजीनियरिंग की लागत भी लगती है, इसीलिए ज़्यादातर टीमें इन्हें काट देती हैं। जब पल मायने रखता हो (ऑनबोर्डिंग, मुख्य कन्वर्ज़न फ़्लो, सिग्नेचर फ़ीचर), तो कीमत चुकाओ।
समय का सम्मान करने वाले प्रोग्रेस इंडिकेटर
लंबे ऑपरेशन पर रियल टाइम में चलने वाले प्रोग्रेस बार। 300 ms से ज़्यादा में लोड होने वाले डेटा पर स्केलेटन स्क्रीन। स्पिनर सिर्फ़ 1 सेकंड से कम के ऑपरेशन के लिए जहाँ स्केलेटन बस झलक कर गायब हो जाता। प्रोग्रेस मोशन भरोसे का मोशन है। यह यूज़र को बताता है कि सिस्टम काम कर रहा है, और इंतज़ार करते समय उन्हें बस यही परवाह होती है।
सार्थक लोडिंग स्टेट
लोडिंग स्टेट डिज़ाइन की गैरमौजूदगी नहीं, अपने आप में एक डिज़ाइन है। प्रोग्रेसिव डिस्क्लोज़र ग्लॉसरी बताती है कि लोडिंग स्टेट सबसे धीमे हिस्से पर अटकने के बजाय कंटेंट को चरणों में कैसे दिखा सकते हैं।
मोशन की वे विफलताएँ जिन पर नज़र रखें
हर मोशन रिव्यू वही विफलताएँ पकड़ता है। अगर प्रोडक्ट इनमें से किसी के साथ शिप होता है, तो मोशन सिस्टम बाकी डिज़ाइन को कमज़ोर कर रहा है।
हीरो में ऑटोप्ले वीडियो। ध्यान हड़प लेता है, परफ़ॉर्मेंस डुबो देता है, और reduced-motion प्रेफ़रेंस का उल्लंघन करता है। इसे स्टिल इमेज या यूज़र-ट्रिगर्ड प्ले से बदलो।
वह पैरालैक्स जो किसी ने माँगा नहीं। पैरालैक्स मोशन की दुनिया में वैसा है जैसे ब्रांड रंग को बॉडी टेक्स्ट पर इस्तेमाल करना। स्क्रीनशॉट में प्रीमियम दिखता है और असली डिवाइस पर चक्कर जैसा लगता है।
हर स्टेट बदलाव पर उछाल। स्प्रिंग मोशन मसाला है, मुख्य सामग्री नहीं। जिस प्रोडक्ट में हर बटन उछले, हर कार्ड स्प्रिंग करे और हर मोडल ओवरशूट करे, वह प्राथमिकता तय नहीं कर सकता। स्प्रिंग उन पलों के लिए रखो जिन्हें यूज़र को महसूस करना चाहिए।
सर्वर से हारने वाले ट्रांज़िशन। स्क्रीन ट्रांज़िशन जो 500 ms लेता है जबकि डेटा 200 ms में आ जाता है, प्रोडक्ट को उससे धीमा दिखाता है जितना वह है। मोशन को असली ऑपरेशन के बराबर या उसके पीछे रहना चाहिए, कभी उसे खींचना नहीं चाहिए।
लूप होता बैकग्राउंड एनिमेशन। हमेशा चलता बैकग्राउंड हमेशा के लिए ध्यान भंग करता है। जब भी यूज़र नज़र लौटाता है, फ़ोकस खो देता है। लूप तभी करो जब मोशन ही मुद्दा हो (स्टेटस, विज़ुअलाइज़ेशन, हार्टबीट इंडिकेटर)।
सिस्टम में मोशन
मोशन डिज़ाइन सिस्टम के अंदर रंग और टाइप के साथ रहता है। इसे आखिरी चरण की पॉलिश परत मानना ही वजह है कि ज़्यादातर प्रोडक्ट असंगत मोशन शिप करते हैं। जो टीम सिस्टम की मालिक है, वही मोशन टोकन की मालिक है।
न्यूनतम मोशन टोकन सेट:
| टोकन | मान की सीमा | किसके लिए |
|---|---|---|
| motion.duration.short | 100 से 150 ms | इनपुट पर फ़ीडबैक |
| motion.duration.medium | 200 से 300 ms | स्टेट बदलाव, ड्रॉपडाउन, टूलटिप |
| motion.duration.long | 400 से 500 ms | पेज, मोडल, बड़ा ट्रांज़िशन |
| motion.ease.enter | cubic-bezier(0, 0, 0.2, 1) | स्क्रीन में आते एलिमेंट |
| motion.ease.exit | cubic-bezier(0.4, 0, 1, 1) | स्क्रीन से जाते एलिमेंट |
| motion.ease.standard | cubic-bezier(0.4, 0, 0.2, 1) | स्क्रीन के भीतर चालें |
इन्हें नाम दो, दस्तावेज़ बनाओ, और डिज़ाइन टोकन परत में वेरिएबल की तरह शिप करो। प्रोडक्ट का हर नया एनिमेशन इन्हीं टोकन में से एक इस्तेमाल करता है, या उसके न करने की लिखित वजह होती है। यही अनुशासन पाँच डिज़ाइनर और बीस इंजीनियरों की टीम में मोशन को सुसंगत रखता है।
मोशन डिज़ाइन की समीक्षा कैसे करें
हर एनिमेशन को शिप होने से पहले चार सवालों से गुज़ारो।
क्या यह स्टेट बदलाव बताता है या आँख को राह दिखाता है। दोनों नहीं, तो काट दो।
क्या यह अवधि तालिका में फ़िट होता है। अगर लंबा चलता है, तो तब तक छोटा करो जब तक आक्रामक न लगे, फिर एक कदम पीछे हटो।
क्या यह टोकन इस्तेमाल करता है। अगर हाथ से बना है, तो सिस्टम से भटक जाएगा। इसे टोकन में रीफ़ैक्टर करो या अस्वीकार करो।
क्या यह prefers-reduced-motion पास करता है। सेटिंग टॉगल करो। अगर मोशन फिर भी वेस्टिबुलर प्रतिक्रिया ट्रिगर करता है, तो इसे सिर्फ़ ओपेसिटी से दोबारा बनाओ।
चार सवाल। हर एनिमेशन पर पाँच मिनट। ज़्यादातर प्रोडक्ट इनमें से एक भी पूछे बिना शिप होते हैं, इसीलिए ज़्यादातर प्रोडक्ट सजाए हुए लगते हैं, डिज़ाइन किए हुए नहीं।
अगर आप ऐसी टीम चाहते हैं जो शिप के समय यह रिव्यू चलाए, न कि लॉन्च के बाद के ऑडिट में मोशन ड्रिफ़्ट पर माफ़ी माँगे, तो Brainy को हायर करें। हम ब्रांड, वेब और प्रोडक्ट UI बनाते हैं जिसमें मोशन पहली स्क्रीन से सिस्टम के भीतर होता है।
2026 की परिस्थितियों में मोशन
तीन बदलाव मायने रखते हैं। मोशन को इन सब में टिकना होगा।
AI-संचालित इंटरफ़ेस पुराने UI से ज़्यादा चलते हैं। स्ट्रीमिंग जवाब, लाइव रीज़निंग ट्रेस और डायनामिक टूल इनवोकेशन लगातार हल्का मोशन बनाते हैं। नियम है AI मोशन को पूर्वानुमेय और प्रोडक्ट मोशन को शांत रखना। अगर सब कुछ एक साथ एनिमेट हो, तो कुछ भी ज़रूरी नहीं लगता।
स्क्रॉल-ड्रिवन एनिमेशन अब ब्राउज़र का फ़ीचर है। CSS scroll-timeline डिज़ाइनरों को JavaScript के बिना स्क्रॉल पोज़ीशन के आधार पर एनिमेट करने देता है। यह नया लीवर है, और ज़्यादातर टीमें स्क्रॉल पर बहुत सारे एलिमेंट एनिमेट करके इसका गलत इस्तेमाल कर रही हैं। नियम है प्रति पेज एक स्क्रॉल-ड्रिवन एनिमेशन, आमतौर पर हीरो, कभी-कभी CTA।
एक्सेसिबिलिटी नियम कड़े हो रहे हैं। European Accessibility Act और ऐसे ही कानूनों का मतलब है कि reduced-motion अब अच्छा-हो-तो-बेहतर नहीं, लागू कराने योग्य है। reduced-motion रास्ते के बिना प्रोडक्ट शिप करना अनुपालन जोखिम है, डिज़ाइन की राय नहीं। wcag ग्लॉसरी लागू होने वाले बेसलाइन बताती है।
FAQ
सबसे ज़रूरी मोशन डिज़ाइन सिद्धांत कौन से हैं?
पॉलिश से पहले उद्देश्य, असर के अनुसार अवधि, भावना ढोने वाली ईज़िंग, मोशन प्रेफ़रेंस का सम्मान, पूरे प्रोडक्ट में एकरूपता, स्थानिक मॉडल की समझ, और सख़्त परफ़ॉर्मेंस व ध्यान बजट। सातों सिद्धांत मिलकर, कोई अकेला नहीं, वह मोशन बनाते हैं जो अपनी जगह कमाता है।
UI एनिमेशन कितना लंबा होना चाहिए?
लगभग हर प्रोडक्ट इंटरैक्शन के लिए 100 से 500 मिलीसेकंड के बीच। फ़ीडबैक एनिमेशन (hover, प्रेस) 100 से 150 ms चलते हैं। छोटे स्टेट बदलाव 150 से 300 ms। पेज और मोडल ट्रांज़िशन 300 से 500 ms। इससे लंबा कुछ भी लौटने वाले यूज़र पर टैक्स बन जाता है, भले ही पहले व्यू में सिनेमाई लगे।
मोशन डिज़ाइन और एनिमेशन में क्या फ़र्क है?
मोशन डिज़ाइन प्रोडक्ट की व्यवहार परत है, जबकि एनिमेशन उसे बनाने में इस्तेमाल होने वाली विज़ुअल तकनीक है। मोशन डिज़ाइन पूछता है कि एनिमेशन कौन सा स्टेट बदलाव बताता है और उसकी ज़रूरत क्यों है। एनिमेशन पूछता है कि हरकत कैसी दिखती है। मोशन डिज़ाइन रणनीति है, एनिमेशन शिल्प। अच्छे प्रोडक्ट काम को दोनों चाहिए।
क्या हर इंटरैक्शन में एनिमेशन होना चाहिए?
नहीं। हर प्राइमरी कंट्रोल (बटन, टॉगल, इनपुट) को माइक्रो-इंटरैक्शन से फ़ायदा होता है क्योंकि यूज़र स्पर्श पर फ़ीडबैक की उम्मीद करता है। सेकेंडरी एलिमेंट को नहीं। कसौटी: एनिमेशन काटो और देखो कि क्या यूज़र जानकारी खोता है। नहीं, तो उसे कटा ही रहने दो।
prefers-reduced-motion क्या है और इसे कैसे संभालें?
यह ऑपरेटिंग सिस्टम की सेटिंग है जो संकेत देती है कि यूज़र कम मोशन चाहता है, आमतौर पर वेस्टिबुलर या ध्यान संबंधी कारणों से। सही तरीका मोशन को पूरी तरह हटाना नहीं, बल्कि दूरी-आधारित एनिमेशन को ओपेसिटी-आधारित एनिमेशन से बदलना है। स्टेट बदलाव फिर भी बताया जाता है, वेस्टिबुलर ट्रिगर हट जाता है।
मोशन सिस्टम कैसे बनाएँ?
तीन अवधियों और तीन ईज़िंग से नामित टोकन के रूप में शुरू करो। दस्तावेज़ बनाओ कि हर एक कहाँ इस्तेमाल होता है। कोड रिव्यू में टोकन लागू कराओ। और टोकन तभी जोड़ो जब मौजूदा सेट ऐसा मोशन दे जो सच में गलत हो, किसी एक डिज़ाइनर की एकबारगी पसंद को समायोजित करने के लिए कभी नहीं। प्रति अक्ष तीन से पाँच टोकन आमतौर पर किसी भी प्रोडक्ट के लिए काफ़ी हैं।
मोशन एक शिल्प है, फ़ीचर नहीं
बेहतरीन मोशन वाले प्रोडक्ट ज़िंदा लगते हैं। उसके बिना वाले अकड़े हुए। ज़रूरत से ज़्यादा मोशन वाले डेमो रील जैसे। इन तीनों के बीच की दूरी छोटी है, और पहले तक पहुँचने का एकमात्र रास्ता कड़े नियमों और ईमानदार रिव्यू वाला सिस्टम है।
सातों सिद्धांतों को मिलाकर खींचो। अवधि तालिका के भीतर रहो। ईज़िंग इरादे से चुनो। रंग और टाइप टोकन के बगल में मोशन टोकन परत शिप करो।
हर एनिमेशन को शिप से पहले चार सवालों पर परखो। जो प्रोडक्ट बनेगा वह ऐसा नहीं दिखेगा कि उसने कोशिश की, वह ऐसा दिखेगा कि उसने सोचा।
अगर आप ऐसी टीम चाहते हैं जो यह अनुशासन ब्रांड, वेब और प्रोडक्ट UI में एक प्रोजेक्ट की तरह चलाए, तो Brainy को हायर करें। मोशन, हर बार, एक प्रथम श्रेणी का सिस्टम फ़ैसला।
संबंधित पढ़ाई
- विज़ुअल हायरार्की डिज़ाइन
- डिज़ाइन सिस्टम गाइड
- वेब एक्सेसिबिलिटी चेकलिस्ट
- Figma से डेव तक डिज़ाइन हैंडऑफ़
Want a product that moves with purpose instead of showing off? Brainy ships brand, web, and UI with motion built into the system, not sprinkled on top.
Get Started
