मोशन सिस्टम क्या है? यूआई टीमों के लिए एक व्यावहारिक मार्गदर्शिका
एक गति प्रणाली साझा नियम, टोकन और घटक हैं जो तय करते हैं कि कोई उत्पाद कैसे चलता है। एक में क्या है, इसे कैसे प्रबंधित करें, और ExodeUI कहाँ फिट बैठता है।
कोर टेकअवे
मोशन सिस्टम नियमों, टोकन, घटकों और कोड का साझा सेट है जो यह तय करता है कि कोई उत्पाद कैसे चलता है। इसमें अवधि, सहजता, स्प्रिंग्स, कोरियोग्राफी और इंटरैक्शन स्थितियां शामिल हैं, इसलिए टीमें स्क्रीन दर स्क्रीन इसे फिर से बनाने के बजाय स्वीकृत गति का पुन: उपयोग करती हैं। एक गति प्रणाली एक डिज़ाइन समस्या के समान ही एक प्रबंधन समस्या है: इसे एक मालिक, सत्य का एक स्रोत और उत्पादन के लिए एक मार्ग की आवश्यकता होती है।
गति प्रणाली क्या है?
मोशन सिस्टम एक डिज़ाइन सिस्टम का हिस्सा है जो गति का वर्णन करता है। यह उन प्रश्नों का उत्तर देता है जो एक स्थिर घटक पुस्तकालय नहीं दे सकता है: एक मेनू कितनी तेजी से खुलता है, बटन दबाए जाने पर कैसे प्रतिक्रिया करता है, जब कोई उपयोगकर्ता संक्रमण को बाधित करता है तो क्या होता है, और कौन से स्प्रिंग मान किस सतह से संबंधित होते हैं। आउटपुट कोई स्टाइल गाइड पेज नहीं है. आउटपुट पुन: प्रयोज्य निर्णयों का एक छोटा सा सेट है जिसे डिजाइनर और डेवलपर्स हर बार एक नए एनीमेशन का आविष्कार किए बिना लागू कर सकते हैं।
गति प्रणाली में क्या शामिल है
एक उपयोगी गति प्रणाली के पाँच भाग होते हैं। एक को छोड़ें और सिस्टम फ़ाइलों का एक फ़ोल्डर बन जाता है जिसका कोई उपयोग नहीं करता है।
Principles
संक्षिप्त नियम जो उत्पाद के व्यक्तित्व की व्याख्या करते हैं। उदाहरण के लिए: गति पहले फ्रेम पर इनपुट की पुष्टि करती है, या बड़ी सतहें छोटी सतहों की तुलना में कम चलती हैं।
टोकन
अवधि, सहजता और स्प्रिंग्स के लिए नामित मान, जैसे मोशन.एंटर.फास्ट या मोशन.स्प्रिंग.स्नैपी। टोकन गति को समीक्षा योग्य बनाते हैं और मूल्यों को सुसंगत रखते हैं।
पैटर्न्स
सामान्य कार्यों के लिए पुन: प्रयोज्य व्यवहार: दर्ज करें, बाहर निकलें, विस्तार करें, पुन: व्यवस्थित करें, खींचें, ख़ारिज करें, सफलता और त्रुटि।
अवयव
लाइव बिल्डिंग ब्लॉक पहले से ही पैटर्न का उपयोग करते हैं, इसलिए एक टीम किसी दस्तावेज़ को पढ़ने और उसे फिर से बनाने के बजाय एक को छोड़ सकती है।
शासन
सिस्टम को कौन बदल सकता है, परिवर्तनों की समीक्षा कैसे की जाती है, और अस्वीकृत प्रस्ताव को कैसे समाप्त किया जाता है।
मोशन सिस्टम बनाम डिज़ाइन सिस्टम बनाम मोशन टोकन
एक डिज़ाइन प्रणाली में रंग, प्रकार, रिक्ति, घटक और उपयोग नियम शामिल होते हैं। एक गति प्रणाली इसके अंदर गति परत होती है, और इसका अक्सर अपना स्वामी होता है क्योंकि गति रंग की तुलना में विभिन्न कारणों से बदलती है। मोशन टोकन उस परत की सबसे छोटी इकाई हैं: समय और भौतिकी के लिए नामित मान। एक टोकन लाइब्रेरी आवश्यक है लेकिन पर्याप्त नहीं है। पैटर्न और लाइव घटकों के बिना, टोकन संख्याओं की एक सूची बन जाते हैं जिनकी डिजाइनर हर स्क्रीन पर अलग-अलग व्याख्या करते हैं।
मोशन सिस्टम विफल क्यों होते हैं
अधिकांश गति प्रणालियाँ परिचालन कारणों से विफल होती हैं, सौंदर्य संबंधी कारणों से नहीं। टोकन एक दस्तावेज़ में रहते हैं जो घटकों से अलग हो जाता है। स्वीकृत प्रस्ताव केवल एक प्रोटोटाइप में मौजूद है जिसे डेवलपर्स नहीं चला सकते। एक टीम सिस्टम को अपनाती है और दूसरी हार्ड-कोडित अवधि तक शिपिंग जारी रखती है। सिस्टम का कोई मालिक नहीं है, इसलिए यह भटक जाता है। इसे ठीक करने का मतलब है कि सिस्टम को ऐसी जगह पर रखना जहां काम पहले से ही होता है: डिज़ाइन फ़ाइल में, घटक लाइब्रेरी में और कोड समीक्षा में।
गति प्रणाली का प्रबंधन कैसे करें
एक छोटी, स्वामित्व वाली सतह से शुरुआत करें और सिस्टम को आसान रास्ता बनाएं।
- टोकन के लिए सत्य का एक स्रोत चुनें और इसे डिज़ाइन फ़ाइल और कोडबेस से लिंक करें
- टोकन को मूल्य के आधार पर नहीं, बल्कि इरादे के आधार पर नाम दें: मोशन.एक्सिट.फ़ास्ट, मोशन.200एमएस से अधिक उपयोगी है
- अधिक टोकन जोड़ने से पहले पैटर्न का एक छोटा सेट शिप करें
- रिकॉर्डिंग से पहले और बाद में, कोड परिवर्तन जैसे गति परिवर्तनों की समीक्षा करें
- पुन: उपयोग को ट्रैक करें: कितने नए घटक कस्टम टाइमिंग के बजाय स्वीकृत पैटर्न का उपयोग करते हैं
- पुराने मानों को एक शेड्यूल पर रिटायर करें ताकि सिस्टम डुप्लिकेट जमा न करे
जहां ExodeUI फिट बैठता है
ExodeUI एक अलग विनिर्देश के बजाय एक खुली .exode फ़ाइल के अंदर गति रखता है। लेआउट, स्थिति, समयरेखा, स्प्रिंग भौतिकी, तर्क और इनपुट एक साथ रहते हैं, और रनटाइम पैकेज React, Vue, Svelte, Angular, Solid, React Native, SwiftUI और Flutter में फ़ाइल चलाते हैं। यह मोशन सिस्टम को एक कार्यशील संदर्भ देता है: एक डिज़ाइनर स्वीकृत घटक को खोल सकता है, एक डेवलपर उसी फ़ाइल का निरीक्षण कर सकता है, और एक AI कोडिंग टूल इसे MCP सर्वर के माध्यम से संपादित कर सकता है। फ़ाइल शासन का प्रतिस्थापन नहीं है. यह शासन को इंगित करने के लिए कुछ ठोस जानकारी देता है।
एक स्प्रिंट में मोशन सिस्टम कैसे शुरू करें
अपने सबसे अधिक उपयोग किए जाने वाले दस घटकों का ऑडिट करें और उनमें प्रत्येक अवधि, वक्र और स्प्रिंग की सूची बनाएं। समान कार्य करने वाले मानों को समूहित करें और समूहों को नाम दें। पाँच पैटर्न चुनें जो अधिकांश इंटरैक्शन को कवर करते हैं। प्रति पैटर्न एक संदर्भ घटक बनाएं, दस्तावेज़ बनाएं कि इसका उपयोग कब करना है, और अपने डिज़ाइन और कोड लाइब्रेरी में टोकन जोड़ें। फिर नए सिस्टम के माध्यम से एक एकल सुविधा चलाएं और मापें कि उसे अभी भी कितने कस्टम मानों की आवश्यकता है। वह संख्या अगले स्प्रिंट के लिए आपकी आधार रेखा है।
उत्पादन कार्यान्वयन स्निपेट
import { ExodeUICanvas } from 'exodeui';
// The motion system lives in the .exode file. Your app supplies inputs
// and listens for events; it does not restate spring values in code.
export function SystemButton({ pressed, onConfirm }) {
return (
<ExodeUICanvas
src="/system_button.exode"
inputs={{ pressed }}
onTrigger={(name) => name === 'confirm' && onConfirm()}
/>
);
}याद रखने योग्य कुंजी Principle
- मोशन सिस्टम एक डिज़ाइन सिस्टम की मूवमेंट परत है, प्रोटोटाइप वीडियो का फ़ोल्डर नहीं
- इसके लिए सिद्धांतों, टोकन, पैटर्न, लाइव घटकों और शासन की आवश्यकता है
- उपयोग नियमों के बिना टोकन ऐसे नंबर बन जाते हैं जिनकी हर टीम अलग-अलग व्याख्या करती है
- गति परिवर्तन की समीक्षा कोड परिवर्तन की तरह की जानी चाहिए
- ExodeUI गति, स्थिति और तर्क को एक खुली फ़ाइल में रखता है जिसे रनटाइम चला सकते हैं