ما هو نظام الحركة؟ دليل عملي لفرق واجهة المستخدم
نظام الحركة هو القواعد والرموز والمكونات المشتركة التي تحدد كيفية تحرك المنتج. ما ينتمي إلى واحد، وكيفية إدارته، وأين يناسب ExodeUI.
الوجبات الجاهزة الأساسية
نظام الحركة هو مجموعة مشتركة من القواعد والرموز والمكونات والتعليمات البرمجية التي تحدد كيفية تحرك المنتج. ويغطي الفترات والتخفيف والينابيع وتصميم الرقصات وحالات التفاعل بحيث تعيد الفرق استخدام الحركة المعتمدة بدلاً من إعادة بنائها شاشة تلو الأخرى. يعد نظام الحركة مشكلة إدارية بقدر ما هو مشكلة تصميم: فهو يحتاج إلى مالك ومصدر للحقيقة وطريق إلى الإنتاج.
ما هو نظام الحركة؟
نظام الحركة هو جزء من نظام التصميم الذي يصف الحركة. فهو يجيب على الأسئلة التي لا تستطيع مكتبة المكونات الثابتة الإجابة عليها: مدى سرعة فتح القائمة، وكيف يتفاعل الزر عند الضغط عليه، وماذا يحدث عندما يقاطع المستخدم عملية انتقال، وما هي قيم الزنبرك التي تنتمي إلى أي سطح. الإخراج ليس صفحة دليل النمط. الناتج عبارة عن مجموعة صغيرة من القرارات القابلة لإعادة الاستخدام والتي يمكن للمصممين والمطورين تطبيقها دون اختراع رسوم متحركة جديدة في كل مرة.
ما ينتمي إلى نظام الحركة
يتكون نظام الحركة المفيد من خمسة أجزاء. تخطي واحدًا وسيصبح النظام مجلدًا من الملفات التي لا يستخدمها أحد.
Principles
القواعد المختصرة التي تشرح شخصية المنتج. على سبيل المثال: تؤكد الحركة الإدخال على الإطار الأول، أو تتحرك الأسطح الكبيرة بشكل أقل من الأسطح الصغيرة.
الرموز
القيم المسماة للمدة والتخفيف والينابيع، مثلmotion.enter.fast أوmotion.spring.snappy. تجعل الرموز المميزة الحركة قابلة للمراجعة وتحافظ على اتساق القيم.
أنماط
السلوكيات القابلة لإعادة الاستخدام للوظائف الشائعة: الدخول والخروج والتوسيع وإعادة الترتيب والسحب والرفض والنجاح والخطأ.
عناصر
كتل البناء المباشرة التي تستخدم الأنماط بالفعل، بحيث يمكن للفريق إدراج واحدة بدلاً من قراءة مستند وإعادة بنائه.
الحكم
من يمكنه تغيير النظام، وكيف تتم مراجعة التغييرات، وكيف يتم إيقاف الحركة المهملة.
نظام الحركة مقابل نظام التصميم مقابل رموز الحركة
يغطي نظام التصميم اللون والنوع والتباعد والمكونات وقواعد الاستخدام. نظام الحركة هو طبقة الحركة بداخله، وغالباً ما يكون له مالك خاص به لأن الحركة تتغير لأسباب مختلفة عن اللون. رموز الحركة هي أصغر وحدة في تلك الطبقة: القيم المسماة للتوقيت والفيزياء. مكتبة الرموز المميزة ضرورية ولكنها ليست كافية. بدون الأنماط والمكونات الحية، تصبح الرموز المميزة قائمة من الأرقام التي يفسرها المصممون بشكل مختلف على كل شاشة.
لماذا تفشل أنظمة الحركة
تفشل معظم أنظمة الحركة لأسباب تشغيلية، وليس لأسباب جمالية. توجد الرموز المميزة في مستند منفصل عن المكونات. الحركة المعتمدة موجودة فقط في نموذج أولي لا يمكن للمطورين تشغيله. يتبنى أحد الفرق النظام بينما يحتفظ فريق آخر بالشحن على فترات مشفرة. النظام ليس له مالك، لذلك ينجرف. ويعني إصلاح ذلك وضع النظام في مكان يتم فيه العمل بالفعل: في ملف التصميم وفي مكتبة المكونات وفي مراجعة التعليمات البرمجية.
كيفية إدارة نظام الحركة
ابدأ بسطح صغير مملوك واجعل النظام هو المسار السهل.
- اختر مصدرًا واحدًا للحقيقة للرموز المميزة واربطه من ملف التصميم وقاعدة التعليمات البرمجية
- قم بتسمية الرموز حسب النية، وليس حسب القيمة:motion.exit.fast أكثر فائدة منmotion.200ms
- قم بشحن مجموعة صغيرة من الأنماط قبل إضافة المزيد من الرموز المميزة
- قم بمراجعة تغييرات الحركة مثل تغييرات التعليمات البرمجية، مع التسجيل قبل وبعد
- إعادة استخدام المسار: كم عدد المكونات الجديدة التي تستخدم الأنماط المعتمدة بدلاً من التوقيت المخصص
- قم بسحب القيم القديمة وفقًا لجدول زمني حتى لا يقوم النظام بتراكم التكرارات
حيث يناسب ExodeUI
يحتفظ ExodeUI بالحركة داخل ملف .exode مفتوح وليس في مواصفات منفصلة. يعيش التخطيط والحالات والجداول الزمنية وفيزياء الربيع والمنطق والمدخلات معًا، وتقوم حزم وقت التشغيل بتشغيل الملف في React وVue وSvelte وAngular وSolid وReact Native وSwiftUI وFlutter. وهذا يعطي نظام الحركة مرجعًا عمليًا: يمكن للمصمم فتح المكون المعتمد، ويمكن للمطور فحص الملف نفسه، ويمكن لأداة ترميز الذكاء الاصطناعي تحريره من خلال خادم 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 بالحركة والحالات والمنطق في ملف واحد مفتوح يمكن تشغيله في أوقات التشغيل