Languageالعربية
الدعامة 06 · أنظمة التصميم
رموز الحركة: البنية الكاملة لأنظمة التصميم
توحيد الحركة عبر النظام البيئي للمنتج بأكمله. أوقف الترميز الثابت للوحدات المكعبة بحجم 300 مللي ثانية عبر العشرات من مستودعات المطورين.
What is رموز الحركة: in ExodeUI?
رموز الحركة هي رموز تصميمية موحدة تحدد معلمات الرسوم المتحركة - مثل صلابة الزنبرك، ونسبة التخميد، والكتلة، والمنحنيات المخففة، والمدة - بتنسيق يمكن قراءته آليًا. يقوم برنامج Motion Token Generator المجاني الخاص بنا بإنشاء مجموعة بداية يمكنك تصديرها إلى CSS وJSON، وتقوم أدوات إنشاء الرموز المميزة بتحويلها إلى تعليمات برمجية لكل نظام أساسي.
العمارة الأساسية
لماذا يختار المهندسون والمصممون ExodeUI
Design, logic and motion in one file that runs inside your app.
رموز الفيزياء الربيعية
حدد الحركة باستخدام الرموز المادية (التصلب، والتخميد، والكتلة) بدلاً من أرقام التوقيت التعسفية.
توليد الكود الآلي
قم بتحويل الرموز المميزة إلى متغيرات CSS ورمز النظام الأساسي باستخدام خط أنابيب إنشاء الرمز المميز الموجود لديك.
التسلسل الهرمي الدلالي
قم بتنظيم الرموز المميزة للحركة في المستويات العالمية والدلالية والمكونة (على سبيل المثال،motion.spring.snappy،motion.feedback.success).
مزامنة أدوات التصميم
مزامنة الرموز المميزة للحركة بسلاسة بين متغيرات Figma وقواعد كود Git للإنتاج.
التقييم الموضوعي
كيف يقارن ExodeUI بـ Traditional Design Tokens (Color/Type Only)
Where ExodeUI is stronger, and what to weigh before you switch.
ExodeUI
- دعم كامل من الدرجة الأولى لرموز الربيع المادية ومنحنيات السرعة
- يتم التصدير إلى تنسيقات الويب والهواتف المحمولة الأصلية (SwiftUI/Compose) في وقت واحد
- يتيح المفتش البصري للمصممين الشعور بالفيزياء الرمزية في الوقت الفعلي
- إجراءات احتياطية لإمكانية الوصول التلقائي للحركة المفضلة ذات الحركة المنخفضة
Traditional Design Tokens (Color/Type Only)
- تدعم معظم أدوات الرمز المميز الألوان الثابتة والطباعة والمسافات فقط
- يتم تقليل الحركة إلى سلاسل ذات مدة بدائية مثل "300 مللي ثانية سهولة الدخول"
- لا توجد طريقة مرئية لاختبار ديناميكيات الرمز المميز قبل الشحن إلى الكود
- يجب على المهندسين تفسير مواصفات الحركة يدويًا إلى رمز إطار العمل
تسليم المطور
استخدامه في التعليمات البرمجية الخاصة بك
Your app loads the compiled file through the ExodeUI runtime and talks to it through inputs and events.
استيراد { ExodeUICanvas } من 'exodeui'؛
// الينابيع والحالات والتوقيت موجودة في ملف .exode (المصمم في ملف
// المحرر). يمرر الكود الخاص بك المدخلات ويسمع الأحداث مرة أخرى.
وظيفة التصدير SnappyButton () {
العودة (
<ExodeUICanvas
src = "/snappy_button.bexode"
onTrigger={(name) => console.log('حدث ExodeUI:', الاسم)}
/>
);
}لماذا تفشل أنظمة التصميم عند الحركة؟
تتميز أنظمة التصميم الحديثة بإتقان لوحات الألوان، ومقاييس الطباعة، وظلال الارتفاع، وشبكات المسافات. لكن الحركة تظل رمز التصميم المنسي. في معظم المؤسسات، يتكون توثيق الحركة من إرشادات غامضة مثل "يجب أن تكون الرسوم المتحركة سريعة" أو متغير مدة ثابت يبلغ 250 مللي ثانية.
- الشعور غير المتسق بالعلامة التجارية: يستخدم أحد المهندسين ميزة "سهولة الخروج"، بينما يستخدم آخر ميزة "سهولة الخروج"، بينما يستخدم الهاتف المحمول إعدادات Apple الافتراضية.
- منحنيات المدة الهشة: الرسوم المتحركة الموقوتة تبدو بطيئة على العناصر الصغيرة ومتسارعة على الأوراق السفلية الكبيرة.
- إهمال إمكانية الوصول: تفشل الفرق في تنفيذ تجاوزات متماسكة لتقليل الحركة عبر جميع المكونات.
التسلسل الهرمي لرموز الحركة المكونة من 3 طبقات
تقوم ExodeUI بتصميم الرموز المميزة للحركة عبر ثلاث مستويات منظمة:
المستوى 1: الرموز البدائية العالمية
الثوابت الرياضية الخام (على سبيل المثال، الصلابة 400، التخميد 25، الكتلة 1).
المستوى 2: رموز النية الدلالية
الأسماء الوظيفية المرتبطة بالقصد (على سبيل المثال،motion.interactive.snappy،motion.modal.enter).
المستوى 3: الرموز المميزة للمكونات
التجاوزات المرتبطة بمكونات محددة (على سبيل المثال، Button.toggle.switch).
Topic Cluster Network
استكشف المفاهيم والأدوات المتصلة
هل لديك أسئلة؟
الأسئلة المتداولة
بناء مكونات حية بحركة حقيقية.
Start free in the browser or download the desktop app. Compile spring physics and state machines directly to React and SwiftUI.