تُسمى رموز الحركة بقيم نظام التصميم للرسوم المتحركة: الفترات، ومنحنيات التخفيف، وإعدادات الزنبرك، وأحيانًا المسافات. بدلاً من كتابة 300 مللي ثانية في كل مكون، تستخدم الفرق أسماء مثلmotion.duration.medium أوmotion.spring.gentle، بحيث تظل الحركة متسقة ويمكن تغييرها في مكان واحد.
الوجبات الجاهزة الأساسية
تخزن رموز الحركة قرارات التوقيت: المدة، والتخفيف، وصلابة الزنبرك، والتخميد
قم بتسميتها حسب الغرض (الدخول، الخروج، التركيز) أو الحجم (قصير، متوسط، طويل)
احتفظ بمجموعة صغيرة: فترات قليلة وبعض المنحنيات أو الزنبركات
تضمين متغير الحركة المنخفضة لإمكانية الوصول
قم بتخزينها في نفس مسار الرمز المميز مثل اللون والتباعد
تستخدم أنظمة التصميم بالفعل الرموز المميزة للون والمسافات والطباعة. تطبق رموز الحركة نفس الفكرة على الرسوم المتحركة. إنهم يحولون القرارات مثل "العناصر الصغيرة تتحرك بسرعة وتستقر بلطف" إلى قيم محددة يستخدمها كل مصمم ومطور.
تتضمن المجموعة النموذجية فترات (قصيرة، متوسطة، طويلة)، منحنيات تخفيف (قياسية، دخول، خروج)، وعلى نحو متزايد، نوابض محددة بالصلابة والتخميد والكتلة. تحظى النوابض بشعبية لأنها تبدو طبيعية وتتعامل بشكل جيد مع الانقطاعات في التعليمات البرمجية.
التسمية مهمة. الأسماء المستندة إلى الغرض، مثلmotion.enter أوmotion.emphasis، هي أسهل في التطبيق بشكل صحيح من الأرقام الأولية. أبقِ المجموعة صغيرة. إذا حصل كل مكون على منحنى خاص به، فستتوقف الرموز المميزة عن القيام بعملها.
إمكانية الوصول تنتمي إلى الرموز المميزة أيضًا. حدد ما يحدث عندما يقوم المستخدم بتشغيل الحركة المنخفضة، على سبيل المثال، الخبو الأقصر بدلاً من الحركة الكبيرة، بحيث يتعامل كل مكون مع الأمر بنفس الطريقة.
عادةً ما يتم تخزين الرموز المميزة في JSON وتحويلها إلى متغيرات CSS أو Swift أو Kotlin أو JavaScript بواسطة أداة إنشاء الرمز المميز. يقوم برنامج Motion Token Generator المجاني الخاص بنا بإنتاج مجموعة بداية يمكنك التكيف معها.
الأسئلة المتداولة
كم عدد رموز الحركة التي أحتاجها؟
أقل مما تعتقد. ثلاث أو أربع فترات واثنين أو ثلاثة منحنيات أو نوابض تخفيفية تغطي معظم المنتجات.
هل يجب على رموز الحركة استخدام الينابيع أو الفترات؟
كلاهما يمكن أن يعمل. تبدو النوابض أكثر طبيعية للحركة التفاعلية والمتقطعة؛ تكون المدد أبسط بالنسبة للخبو والانتقالات CSS.
كيف تتعامل رموز الحركة مع الحركة المنخفضة؟
حدد قيمًا بديلة، مثل التحولات الأقصر أو الانتقالات ذات العتامة فقط، والتي يتم تطبيقها عندما يقوم المستخدم بتشغيل تقليل الحركة.
هل يمكن لـ Figma تخزين رموز الحركة؟
يمكنك تخزين القيم الرقمية في متغيرات Figma، ولكن كيفية اتصالها بانتقالات النموذج الأولي محدودة. تحتفظ معظم الفرق بمصدر الحقيقة في ملف رمزي.