एनिमेशन समय और UX धारणा

1) समय क्यों महत्वपूर्ण है

एनीमेशन एक "सजावट" नहीं है, बल्कि धारणा समय का हेरफेर है। मिलीसेकेंड प्रभाव:

प्रणाली में तत्काल प्रतिक्रिया और विश्वास की भावना;
कारण और प्रभाव की स्पष्टता (जिसमें/से तत्व स्थानांतरित हो गया है);
लंबे सत्रों में थकान और आराम;
क्रियाओं की सटीकता (विशेष रूप से मोबाइल पर और उच्च दरों पर)।

नियम: समय एक उद्देश्य कार्य करता है। यदि एनीमेशन "क्या हुआ" को समझने में मदद नहीं करता है, तो यह हस्तक्षेप करता है।

2) साइकोफिजिक्स और थ्रेसहोल्ड

उत्पाद UI के लिए बेंचमार्क:

≤ 50 एमएस - इको इनपुट (प्रिंट, क्लिक इफेक्ट); तुरंत लगता है।
≤ 100 एमएस - एक्शन द्वारा पहला दृश्य प्रतिक्रिया (बटन "दबाया")।
120-180 एमएस - होवर/फोकस, नरम राज्य संक्रमण।
180-280 एमएस - मॉडल/पैनल; एक "प्राकृतिक" उपस्थिति के रूप में माना जाता है।
300-500 एमएस - साझा तत्व, कदम आगे प्रगति।

💡 700 ms - "सुस्ती" के जोखिम; छोड़ दो केवल अगर यह समझ में आता है (उदाहरण के लिए, एक जीत की पुष्टि)।

≈ 1200-1600 ms - कंकाल/झिलमिलाता चक्र; लंबे समय तक थका देने वाला।

3) आसान और वजन घटता है

तत्व "वजन के साथ" तेजी से शुरू होता है और अंत में "लाठी"। आधार वक्र:

मानक: 'घन-बेजियर (0। 2, 0, 0. 2, 1) '- तटस्थ "सामग्री" गतिशीलता।
दबाया गया: 'घन-बेजियर (0। 4, 0, 1, 1) '- त्वरित लॉगिन, लघु क्लिक।
ओवरले आउट: 'क्यूबिक-बेजियर (0, 0, 0। 2, 1) '- सॉफ्ट आउटपुट।
रेखांकित उच्चारण (दुर्लभ): 'क्यूबिक-बेजियर (0। 2, 0. 8, 0. 2, 1. 2) 'с ओवरशूट ≤ 8 पीएक्स।

वजन प्रकाशिकी: जितना बड़ा घटक (कार्ड, दराज), उतनी ही लंबी अवधि (आधार के लिए + 40-80 एमएस)।

4) चरण और कोरियोग्राफी

आंदोलन को चरणों में विभाजित करें:

1. दीक्षा (10-40 मीटर): हल्का फीका/पैमाना 0। 98→1 - सिग्नल शुरू करें।

2. परिवहन (मुख्य चरण): चलती/खोलना।

3. ड्राफ्ट (20-60 एमएस): छोटा ब्रेक, छाया/फोकस रिंग स्थिरीकरण।

कैस्केड (स्टैगर):

सूची: 20-40 एमएस/आइटम, एक पंक्ति में अधिकतम 6-8 आइटम।
फॉर्म: कोई झरना नहीं; सब कुछ एक ही समय में दिखाई देता है ताकि इनपुट में हस्तक्षेप न करें।

प्रतिवर्ती: "बैक" दर्पण "आगे" और तेजी से 15-30%।

5) बातचीत के प्रकार से समय

परिदृश्य	अवधि	वक्र	नोट्स
होवर/फोकस	120-180 ms	एसटीडी	लघु और पूर्वानुमेय
दबाया/सक्रिय	80-120 ms	त्वरित करें	जड़ ता के बिना "क्लिक" करें
टूलटिप/टोस्ट (इन/आउट)	180-240 / 120-160 ms	std/decelert	होवर पर ठहराव
Drouer/Modalka (इन/आउट)	200-320 / 160-240 ms	std/decelert	पृष्ठभूमि तुरंत अंधेरा
टैब स्विचिंग	180-240 एमएस	एसटीडी	सामान्य बेस-शिफ
साझा तत्व	240-360 एमएस	एसटीडी	पथ छोटा है, बिना लूप के
कंकाल झिलमिलाना	1200-1600 ms	रैखिक	कम चमक आयाम

6) समय की धारणा: वास्तविक त्वरण के बिना "त्वरण" कैसे करें

त्वरित सामर्थ्य: नेटवर्क से पहले भी कर्सर/दबाया शैली ≤ 100 एमएस का त्वरित परिवर्तन।

जटिलता की छुपावट: समानांतर डाउनलोड; पैनल खोलने से पहले पृष्ठभूमि डेटा पुल-अप।

सेंस एंकर: साझा तत्व और गति की दिशा प्रतीक्षा की संज्ञानात्मक लागत को कम करती है।

आशावादी अपडेट: यूआई तुरंत "तैयार" है, सर्वर पुष्टि करता है या वापस रोल करता है।

7) थकान और एनीमेशन स्वच्छता

अंतहीन स्पंदन से बचें; किसी भी चक्र को आंतरायिक या डिस्कनेक्ट होना चाहिए।

प्रत्येक नोड पर ब्लर/बॉक्स-शैडो के बिना तत्वों (तालिका, ग्रिड) की सरणियों पर सूक्ष्म प्रभाव करें।

समर्थन 'प्रीफर्स-कम-गति: कम करें': केवल फीका ≤ 100 मीटर या एक स्थिर स्थिति स्विच छोड़ दें।

css
@media (prefers-reduced-motion: reduce) {
{ animation: none! important; transition-duration:.01ms! important; }
}

8) टाइमिंग टोकन (डिजाइन प्रणाली)

json
{
"motion": {
"duration": { "press": 90, "hover": 160, "focus": 160, "overlayIn": 240, "overlayOut": 180, "tab": 200, "shared": 280 },
"easing": {
"standard": "cubic-bezier(0. 2,0,0. 2,1)",
"accelerate": "cubic-bezier(0. 4,0,1,1)",
"decelerate": "cubic-bezier(0,0,0. 2,1)"
},
"stagger": { "listItem": 30, "maxItems": 8 }
}
}

नामकरण: 'गति। अवधि। {भूमिका} 'и' गति। सहजता। {roile} '- घटक और Figma इंजन के लिए समान हैं।

9) कार्यान्वयन: सीएसएस और फ्रैमर मोशन

सीएसएस प्रीसेट:

css
:root{
--dur-press:90ms; --dur-hover:160ms; --dur-overlay-in:240ms; --dur-overlay-out:180ms;
--ease-std:cubic-bezier(.2,0,.2,1);
--ease-acc:cubic-bezier(.4,0,1,1);
--ease-dec:cubic-bezier(0,0,.2,1);
}
.button{ transition: transform var(--dur-press) var(--ease-acc), box-shadow var(--dur-hover) var(--ease-std); }
.button:active{ transform: scale(.98); }
.modal-enter{ animation: modalIn var(--dur-overlay-in) var(--ease-std) both; }
.modal-exit { animation: modalOut var(--dur-overlay-out) var(--ease-dec) both; }
@keyframes modalIn{ from{opacity:0; transform:translateY(16px) scale(.98)} to{opacity:1; transform:none} }
@keyframes modalOut{ from{opacity:1} to{opacity:0; transform:translateY(8px) scale(.99)} }

फ्रैमर मोशन (एक मोडल का उदाहरण):

tsx import { motion, AnimatePresence } from "framer-motion";

export function Modal({ open, children }) {
return (
<AnimatePresence>
{open && (
<motion. div initial={{opacity:0}} animate={{opacity:1}} exit={{opacity:0}}
transition={{duration:.18, ease:[0. 2,0,0. 2,1]}} className="fixed inset-0 bg-black/50">
<motion. div initial={{y:16, scale:.98, opacity:0}}
animate={{y:0, scale:1, opacity:1, transition:{duration:.24, ease:[0. 2,0,0. 2,1]}}}
exit={{y:8, scale:.99, opacity:0, transition:{duration:.18, ease:[0,0,0. 2,1]}}}
className="m-auto max-w-lg rounded-2xl bg-white p-6">
{children}
</motion. div>
</motion. div>
)}
</AnimatePresence>
);
}

10) समय की संरचना: समानांतर बनाम अनुक्रम

समानांतर (फीका + एक ही समय में अनुवाद करें) - महसूस में तेजी से।

अनुक्रम (कंटेनर पहले, फिर सामग्री) स्पष्ट संरचना है, लेकिन लंबा है। लागू करें जब पदानुक्रम दिखाना महत्वपूर्ण हो।

एक ही ब्लॉक में बारीकी से संबंधित तत्वों के बीच स्टेप> 60 एमएस से बचें।

11) समय और सामग्री

पाठ: उत्पादों में अक्षर/शब्द-दर-शब्द को चेतन न करें; यह एक विपणन तकनीक है।

संख्या/काउंटर: चरण 40-60 एमएस बैचमी, कोई जिटर लेआउट (टैबुलर-नम्स) नहीं।

ग्राफिक्स: श्रृंखला 180-240 एमएस, होवर-हाइलाइट ≤ 120 एमएस।

12) पहुँच और अवधारणात्मक त्रुटि

फोकस शैलियों को बिना देरी के दिखाई देना चाहिए।

चेतावनी/त्रुटियां - न्यूनतम एनीमेशन (≤ 120 एमएस), कोई हिलाना नहीं अगर उपयोगकर्ता एटी (सहायक तकनीक) के साथ है।

फ्लैश> 3/s और बड़े कंट्रास्ट फ्लिकर्स से बचें।

13) iGaming की बारीकियाँ

बोली/खरीदें:

प्रेस ≤ 100 एमएस; स्थिति 'व्यस्त'; अंतिम टोस्ट/संकेतक - कोई देरी नहीं।
UI प्रतिक्रिया समय पुष्टि एनीमेशन से अधिक महत्वपूर्ण है: पुष्टि 120-160 ms छोटी है।

स्पिन/खुलासा:

≤ 200 एमएस, समान चक्र, 300-500 एमएस ब्रेकिंग शुरू करें; कोई अंतहीन झिलमिलाहट नहीं।
विन-फट ≤ 500 एमएस, कोई स्ट्रोब नहीं; राशि पाठ AAA है।

लाइव ऑड्स:

बैचों द्वारा अपडेट (250-1000 एमएस); दृश्य diff ≤ 160 ms; बिना लेआउट कूदता है।
होवर/फोकस पर - डेबंक बैकलाइट 80-120 एमएस ताकि "पलक" न हो।

14) एंटी-पैटर्न

आंदोलनों के लिए रैखिक घटता है ("यांत्रिक" महसूस करना)।

साधारण बटन अवस्थाओं के लिए अवधि> 400 ms।

दर्जनों तत्वों (कर्षण) की सूची के अनुसार कैस्केड 100 + एमएस।

एनीमेशन में सैकड़ों तत्वों पर छाया/धुंधला।

असंगति: एक ही उत्पाद में विभिन्न समय के साथ एक ही क्रिया।

कुंजीपटल सक्रियण पर विलंबित फोकस या विलंब।

15) क्यूए टाइमिंग चेकलिस्ट

स्थिरता

टाइमिंग और घटता टोकन से लिया जाता है, एक ही कार्य के लिए।

प्रतिक्रि

प्रेस/होवर/फोकस 80-180 एमएस के पैमाने पर फिट होते हैं।
पहली दृश्य प्रतिक्रिया ≤ 100 एमएस।

कोरियोग्राफी

इनपुट और आउटपुट सममित हैं; आउटपुट इनपुट की तुलना में 15-30% तेज है।
झरना 8 तत्वों और 40 एमएस कदम से अधिक नहीं है।

A11y

'पसंद-कम-गति' समर्थित; बिना देरी के ध्यान केंद्रित
कोई ब्लिंक> 3/s नहीं।

निष्पादन

केवल 'रूपांतरण/अपारदर्शिता' एनिमेटेड है; कोई बड़े पैमाने पर धब्बा/छाया।

16) डिजाइन प्रणाली में प्रलेखन

"मोशन टोकन": अवधि/सहजता/स्टैगर + एप्लिकेशन मैप (बटन, ओवरले, टैब, सूची)।

"रिदम एंड फेसिंग": कैस्केड और प्रतिवर्ती योजनाएं।

"कम गति": गिरावट नियम और उदाहरण।

"डू/डोंट": टाइमकोड और टारगेट मेट्रिक्स (आईएनपी/फर्स्ट फीडबैक) के साथ छोटी क्लिप।

संक्षिप्त सारांश

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

एनिमेशन समय और UX धारणा

संक्षिप्त सारांश

हमसे संपर्क करें

त्वरित संपर्क

वीडियो जल्द ही अपडेट किया जाएगा

हम इस समय परियोजनाओं में बहुत व्यस्त हैं