मोशन डिजाइन और इंटरफ़ेस एनिमेशन

1) उत्पाद में एनीमेशन क्यों

• कारण संबंधों की व्याख्या करता है (जहां यह गायब हो गया, जहां से तत्व आया),
• मुख्य कार्रवाई पर ध्यान देता है,
• परिणाम (प्रतिक्रिया) की पुष्टि करता है और संज्ञानात्मक भार को कम करता है,
• संक्रमणों को अनुमानित और "मूर्त" बनाता है।

नियम # 1: अर्थ> शैली। कोई भी एनीमेशन इस सवाल का जवाब देता है "क्या हुआ और यह मुझसे कैसे संबंधित है? ».

2) बुनियादी सिद्धांत

1. मोशन पदानुक्रम: कंटेनर पहले चलते हैं, फिर सामग्री, फिर भागों।

2. स्थिरता: समान कार्यों के लिए समान पैटर्न।

3. बचत: न्यूनतम गुण, न्यूनतम फ्रेम; बेहतर छोटा और स्पष्ट।

4. यथार्थवादी भौतिकी: शुरुआत में त्वरण, अंत में मंदी; कोई "झटके" नहीं हैं।

5. रिवर्सिबिलिटी: "बैक" दर्पण की तरह "फॉरवर्ड" महसूस करता है।

6. पहुँच: एनीमेशन रिडक्शन सिस्टम सेटिंग का सम्मान करें।

3) अवधि और घटता (सिफारिशें)

3. 1 अवधि (डेस्कटॉप/मोबाइल)

होवर: 120-180 मीटर

फोकस/दबाया: 80-120 мс

टूलटिप/टोस्ट: इनपुट 180-240 मीटर, आउटपुट 120-160 मीटर

Modals/Drouers: 200-320 ms

स्क्रीन संक्रमण: 240-360 एमएस

स्क्रॉलिंग/लंबन: ≤ 200ms प्रति सेगमेंट, अनंत छोरों से बचें

3. 2 घटता

मुख्य: 'घन-बेजियर (0। 2, 0. 0, 0. 2, 1) '- प्राकृतिक "सामग्री" गति

इनपुट तेजी से, आउटपुट नरम: 'घन-बेजियर (0. 05, 0. 7, 0. 1, 1)`

लोच (दुर्लभ, उच्चारण): 'क्यूबिक-बेजियर (0। 2, 0. 8, 0. 2, 1. 2) 'ओवरशूट सीमा ≤ 8px/8 ° के साथ

नियम: एक ही समय में आंदोलनों और अपारदर्शिता के लिए रैखिक प्रक्षेप का उपयोग न करें - "यांत्रिकी" की भावना।

4) संक्रमण कोरियोग्राफी

उपस्थिति: प्रकाश का पैमाना 0। 98→1. 0 + फीका-इन, मूल अक्ष के साथ 8-16 पीएक्स ऑफसेट।

गायब: रिवर्स ऑर्डर, एंट्री से तेज (− 20-30%)।

टर्निंग/चेंजिंग टैब: सामान्य "बेस" (कंटेनर) को 16-24 पीएक्स द्वारा स्थानांतरित किया जाता है; गति शुरू होने से पहले सक्रिय टैब को हाइलाइट किया जाता है।

सूची: कैस्केड को ढीला करें (स्टैगर 20-40 एमएस/तत्व, 6-8 से अधिक तत्व नहीं)।

5) माइक्रो-इंटरैक्शन (पैटर्न)

बटन (होवर/प्रेस): छाया + प्रकाश सबस्क्रीन/स्केल 0। 98; दबाया उछाल ≤ 80 मीटर।

फोकस: धुंधले के बिना कंट्रास्ट रिंग; चमक के बजाय मोटाई/पारदर्शिता को चेतन करें।

इनपुट: फोकस पर गाड़ी/फील्ड रोशनी; त्रुटियाँ - हिलाना ≤ 6 px, ≤ 140 ms, 1 चक्र।

टॉगल/चेकबॉक्स: अंतिम स्थिति में स्नैप करें, 60-80 एमएस से अधिक देरी पर क्लिक करें।

कंकाल/भार: चमकदार 1200-1600 ms, चमक आयाम ≤ 20%, तेज चमक के बिना।

6) सामग्री राज्य

→ सफलता/खाली/त्रुटि लोड किया जा रहा है: आंदोलन का एक "चैनल"; अलग दिशाओं का मिश्रण मत करो।

टोस्ट/अलर्ट: घटना के स्रोत की ओर से पहुंचें (उदा। उपयोगकर्ता कार्यों के लिए नीचे-दाएं)।

ताज़ा करने के लिए खींचें: लोचदार वसंत तनाव; वापसी समय ≤ 250 एमएस।

7) पहुँच (A11y) और सुरक्षा

समर्थन 'प्रीफर्स-कम-मोशन: कम करें': फीका/स्केल ≤ 1% या स्थैतिक संक्रमण के साथ चालें बदलें।

चमक> 3 प्रति सेकंड और बड़े विपरीत चमक (फोटोसेंसिटिव मिर्गी) से बचें।

मोशन बीमारी इतिहास वाले उपयोगकर्ताओं में मजबूत लंबन/जूम का उपयोग न करें; डिस्कनेक्ट विकल्प बनाएं।

फ़ोकस शैली हमेशा एनीमेशन के बिना दिखाई देती है (सिर्फ रंग/गति नहीं)।

8) प्रदर्शन (लक्ष्य के रूप में 60 एफपीएस)

केवल अपारदर्शिता और परिवर्तन को एनिमेट करें (अनुवाद/स्केल/घुमाएं); 'शीर्ष/बाएँ/चौड़ाई/ऊंचाई' से बचें।

कंपोजिटिंग शामिल करें: 'ट्रांसफॉर्म: ट्रांसलेटजेड (0)' या 'विल-चेंज: ट्रांसफॉर्म, अपारदर्शिता'।

कई तत्वों पर बड़े धुंधले छाया और फिल्टर को एनिमेट नहीं करके पुनरावृत्ति को कम करें।

बैचों में बड़े बदलाव को तोड़ें; एनिमेशनफ्रेम का उपयोग करें।

सूचियों के लिए, ऑफ-स्क्रीन वर्चुअलाइजेशन/री-लेआउट।

9) डिजाइन प्रणाली में मोशन टोकन

json
{
"motion": {
"duration": { "xs": 100, "sm": 160, "md": 220, "lg": 280, "xl": 340 },
"easing": {
"standard": "cubic-bezier(0. 2, 0. 0, 0. 2, 1)",
"emphasis": "cubic-bezier(0. 05, 0. 7, 0. 1, 1)",
"decelerate": "cubic-bezier(0. 0, 0. 0, 0. 2, 1)",
"accelerate": "cubic-bezier(0. 4, 0. 0, 1, 1)"
},
"stagger": { "listItem": 30, "maxItems": 8 }
}
}

Именование: 'गति। {अवधि' stagger}। {roile} '-' hover ',' foccounce ',' overlayIn ',' पेजट्रांजिशन ',' लिस्टआइटम '।

10) कार्यान्वयन (सीएसएस/जेएस/प्रतिक्रिया)

css
:root {
--motion-dur-sm: 160ms;
--motion-dur-md: 220ms;
--motion-ease: cubic-bezier(0. 2, 0, 0. 2, 1);
}
@media (prefers-reduced-motion: reduce) {
{ animation: none! important; transition-duration: 0. 01ms! important; }
}

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

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

Lottie/SVG: चित्रण खाली राज्यों और ऑनबोर्डिंग के लिए उपयोग करें; महत्वपूर्ण नियंत्रण के लि अनुकूलन और कैश।

11) लोडिंग पैटर्न

एक स्पिनर के बजाय कंकाल जहां सामग्री संरचना ज्ञात है।

प्रगति: प्रगति ज्ञात होने पर नियतात्मक पट्टी; अनिश्चित - एक समान गति के साथ, "झटके" के बिना।

पुनर्निर्माण के दौरान "फ्लोटिंग" कंकाल से बचें - ताला आयाम।

12) पृष्ठ/स्क्रीन संक्रमण

ध्यान देने की बात रखें (साझा तत्व संक्रमण) - कार्ड भाग में "विस्तारित" है।

नेविगेशन "डीप" आगे/दाएं/ऊपर जाता है, "बैक" - बैक; दिशा मंच के लिए समान है।

बैकग्राउंड सब्सट्रेट ओवरले में 40-60% तक काला हो जाता है।

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

स्पिन/रिवील: एक छोटा त्वरण (≤ 200 ms) + वर्दी रोटेशन + नरम क्षीणन; कार्रवाई के बिना अनंत चक्रों का निषेध।

विन/जैकपॉट: लाइट स्पलैश ≤ 500 एमएस, कोई स्ट्रोब नहीं; कम मात्रा में दोहरी ध्वनि; विजय पाठ पढ़ ने योग्य है (इसके विपरीत एएए)।

टूर्नामेंट/रेटिंग: खाता वृद्धि - सारणीबद्ध संख्याओं के साथ काउंटर और "जंप" लेआउट के बिना 40-60 एमएस/यूनिट (बैच) के हल्के चरण।

जिम्मेदार नाटक: विचलित करने वाले प्रभावों के बिना सूचनाएं और सीमाएं एनीमेशन न्यूनतम है, पढ़ाई पर जोर।

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

प्रतिक्रिया पर क्लिक करने के लिए विलंब> 120ms।

अपारदर्शिता + स्केल 0 से "लिफ्ट"। 9→1. 05→1. 0 हर छोटी चीज़ के लिए ओवरशूट के साथ।

पृष्ठभूमि लंबन जो स्क्रॉल के साथ विरोध करता है।

अनंत झिलमिलाहट/स्पंदन।

तत्वों के सेट पर एनिमेट लेआउट/पेंट गुण ('ऊंचाई', 'बाएं', 'फ़िल्टर: ब्लर ()').

एक ही क्रिया के लिए गैर-स्थिर घटता और अवधि।

15) प्रक्रिया और क्यूए

• समय/घटता के साथ प्रोटोटाइप; फ्रेम-स्तरीय कोरियोग्राफी।
• घटकों के लिए गति टोकन और उदाहरणों की सूची।

• इकाई दृश्यता/राज्य परीक्षण (संक्रमण अपेक्षित के अनुसार
• दृश्य परीक्षण (एनिमेशन के अंत के स्नैपशॉट)।
• अधिकतम भार वाले दृश्यों पर प्रदर्शन/समयरेखा।

• 'पसंद-कम-गति' समर्थित।
• केवल परिवर्तन/अपारदर्शिता।
• अवधि और घटता टोकन के अनुरूप है।
• कोई चमक> 3/सेकंड और मजबूत स्ट्रोब।
• जहां संभव हो स्पिनर के बजाय कंकाल।
• संक्रमण प्रतिवर्ती और अनुमानित हैं।

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

मोशन टोकन: उदाहरणों के साथ अवधि/सहजता/स्टैगर।

"संक्रमण पैटर्न": मोडल, सूची, टैब, पृष्ठ।

"" और प्रदर्शन ": कम-गति और कंपोजिटिंग के लिए गाइड।

"डू/डोंट": अच्छे/बुरे उदाहरणों के साथ छोटी क्लिप।

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

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