الرموز
الحركة
نظام حركة يحكم ثلاثة أبعاد لكل انتقال: كم يستغرق (المدة)، وكيف يتسارع (التسارع)، وكم يقطع في الفضاء (المسافة). ثلاث طبقات، مع طبقة تكيّف للحركة المخفّضة.
الحركة تنقل سلوكاً لا زخرفة
المعمار
ثلاث طبقات، والتغيير يتدفّق من الأعلى للأسفل. الأولية قيم خام (١٥). الدلالية أسماء قائمة على السلوك تشير للأولية (٢٠ رمزاً في ٧ مجموعات). طبقة الحركة المخفّضة تكيّف الدلالية عند تفعيل تقليل الحركة. السلسلة: تجاوز الوضع ← دلالي ← أولي.
الطبقة ١
الأولية
١٥ قيمة: ٥ مدد، ٥ منحنيات، ٥ مسافات.
الطبقة ٢
الدلالية
٢٠ رمزاً في ٧ مجموعات سلوكية.
الطبقة ٣
تجاوز الوضع
تكيّف الحركة المخفّضة، إلزامي.
الرموز الأولية
القيم الخام لكل بُعد. لا تستخدمها مباشرة في المكوّنات، بل عبر الرموز الدلالية. اضغط إعادة لرؤية كل مدة ومنحنى.
الأطول للتغيّر الأكبر، والأقصر للمس. انقر أي شريط لنسخ رمزه.
المسافة تحدّد المقدار لا الاتجاه؛ الاتجاه يُضبط في الشيفرة.
السلوكيات
سبع مجموعات دلالية، كل منها تعرّف ما تعنيه الحركة لا كيف تبدو. لكل مجموعة عرض حيّ: اضغط إعادة لتشغيله. كل مجموعة تحمل قيمها للحركة المخفّضة.
كيف يصل المحتوى إلى الواجهة. تباطؤ عند الاستقرار ليُقرأ الوصول بوضوح.
استخدم · فتح النوافذ، انزلاق اللوحات، ظهور القوائم والتلميحات، تحميل النتائج.
تجنّب · تبديل الظهور في المكان دون حركة مكانية.
حركة مخفّضة · المدة ١٦٠ms، التسارع قياسي، المسافة 0.
كيف يغادر المحتوى. أسرع من الدخول ٨٠ms كي لا تبدو الواجهة محجوبة.
استخدم · إغلاق النوافذ، طيّ اللوحات، اختفاء القوائم، إزالة عنصر من قائمة.
تجنّب · حركة الدخول؛ الخروج دائماً أسرع.
حركة مخفّضة · المدة 0ms (فوري)، المسافة 0.
حالة تصبح أخرى في المكان نفسه، مع حفظ علاقة قبل/بعد.
استخدم · تبديل التبويبات، تحديث محتوى بطاقة، خطوات نموذج، تغيير عرض لوحة.
تجنّب · عناصر تصل من خارج التخطيط (استخدم الدخول).
حركة مخفّضة · المدة ١٦٠ms، المسافة 0.
استجابة فورية لفعل المستخدم. دائماً في المكان، بلا انتقال مكاني.
استخدم · ضغط الأزرار، تبديل مربعات الاختيار، تأكيد التحديد والتفعيل.
تجنّب · الانتقالات البنيوية أو على مستوى الصفحة.
حركة مخفّضة · دون تغيير.
رفع أولوية بصرية محلية لتوجيه الانتباه. باعتدال، فالتأكيد يفقد أثره بالإفراط.
استخدم · بطاقة تتلقى نشاطاً، قيمة شارة تتحدّث، حقل يتحقّق بنبضة صغيرة.
تجنّب · التغيّرات الروتينية أو الأنماط المتكرّرة كثيراً.
حركة مخفّضة · المدة ١٦٠ms، التسارع قياسي، المسافة 0.
حركة مستمرة لعملية جارية. دورات متكرّرة لا انتقال لمرة واحدة. بلا مسافة.
استخدم · دوران المؤشّر، دورة شريط التقدّم، وميض الهيكل، أي إشارة نشاط خلفي.
تجنّب · الانتقالات المنفصلة؛ التحميل للحركة المستمرة فقط.
حركة مخفّضة · دون تغيير (فكّر في إيقافها أو إبطائها).
حركة تعيد توجيه تركيز المستخدم لموضع محدّد. أبطأ من التغذية الراجعة وأوضح. نادرة.
استخدم · ظهور تنبيه خطأ، تحديث شارة إشعار، تحذير يتطلّب إقراراً.
تجنّب · التأكيدات الروتينية؛ ليست بديلاً عن التغذية الراجعة.
حركة مخفّضة · المدة ٢٤٠ms، التسارع قياسي، المسافة 0.
المبادئ
عشرة مبادئ حاكمة تفسّر كيف تُطبَّق الحركة عبر النظام.
الحركة تنقل سلوكاً لا زخرفة. استخدمها فقط حين تفسّر تغيّراً أو علاقة أو استجابة.
الحركة تحفظ علاقة مرئية بين حالة وأخرى. لا قطع حاد ولا استبدال منفصل بلا رابط.
الحركة تُظهر التغيّر لحظة حدوثه: ماذا تغيّر وأين وبأي قوة.
الحركة تُبقي المستخدم مستقرّاً مكانياً. دع الحركة تتبع بنية الواجهة لا اتجاهاً عشوائياً.
الحركة تضيف أولوية بصرية حين تحسّن الفهم. احجز الأقوى للحظات المهمة.
الحركة سريعة الاستجابة ومتناسبة مع حجم التغيّر. طابق التوقيت مع المسافة والأهمية.
الحركة تبدو سلسة ومتوقّعة. اختر التسارع حسب سلوك الحركة: دخول، خروج، تأكيد.
الحركة خفيّة افتراضياً، ومعبّرة فقط عند الحاجة. لا حركة مفرطة أو زخرفية.
الحركة تستخدم المنطق نفسه في المواقف المتشابهة. أعد استخدام القرار نفسه للقصد نفسه.
الحركة تتكيّف حين تقلّل الراحة أو الاستخدام. وفّر بدائل أقل حركة دون فقد وضوح التغيّر.
إمكانية الوصول
الحركة تؤثر في ثلاثة معايير: تواتر الوميض، وإيقاف المحتوى المتحرّك، والحركة من التفاعل. طبقة الحركة المخفّضة إلزامية لا اختيارية.
| المعيار | المستوى | لماذا ينطبق |
|---|---|---|
| 2.3.1 · ثلاث ومضات أو أقل | AA | الحركات المتكرّرة (تحميل، انتباه) يجب ألّا تومض أكثر من ٣ مرات بالثانية. |
| 2.2.2 · إيقاف، إيقاف مؤقت، إخفاء | AA | المحتوى المتحرّك تلقائياً أكثر من ٥ ثوانٍ يحتاج آلية إيقاف أو إخفاء. |
| 2.3.3 · الحركة من التفاعل | AAA | الحركة الناتجة عن التفاعل يمكن تعطيلها. طبقة تقليل الحركة تحقّق هذا. |
تواتر الوميض
للحركات المتكرّرة التي تُحدث تغيّراً في الإضاءة: التواتر = ١٠٠٠ ÷ المدة. الحد ٣ هرتز. الدوّارات لا تومض وتُستثنى.
| الرمز | القيمة | التواتر | الخطر |
|---|---|---|---|
| motion.duration.fast | 160ms | 6.25 Hz | تحذير — يتجاوز ٣ هرتز في حلقة وميض. |
| motion.duration.moderate | 240ms | 4.17 Hz | تحذير — يتجاوز ٣ هرتز في حلقة وميض. |
| motion.duration.slow | 320ms | 3.13 Hz | تحذير — يتجاوز ٣ هرتز بقليل. |
| motion.duration.expressive | 400ms | 2.5 Hz | يمرّ — دون ٣ هرتز. |
الحركة المخفّضة إلزامية
الشيفرة للمطوّرين
التسليم الأساسي لطبقة الحركة هو متغيّرات CSS المخصّصة. المكوّنات تستهلك رموز السلوك الدلالية فقط (enter، exit، replace، feedback، وغيرها)، ولا تلمس القيم الأولية ولا مدداً أو منحنيات ثابتة أبداً. تكيّف الحركة المخفّضة يجري تلقائياً عبر @media، فلا تكتب استعلاماً لكل مكوّن.
سلسلة المتغيّرات
المتغيّرات تُبنى على ثلاث طبقات: مدرّج أوّلي، ثم رمز أوّلي، ثم رمز دلالي يُحلّ حسب الوضع. المكوّنات تستهلك الطبقة الدلالية فقط.
/* Tier 1 — primitives (raw values) */
--motion-duration-fast: 160ms;
--motion-duration-moderate: 240ms;
--motion-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
--motion-easing-decelerate: cubic-bezier(0, 0, 0.2, 1);
--motion-distance-sm: 8px;
/* Tier 2 — semantic behavior tokens; components consume THESE */
:root {
--motion-enter-duration: var(--motion-duration-moderate);
--motion-enter-easing: var(--motion-easing-decelerate);
--motion-enter-distance: var(--motion-distance-sm);
--motion-feedback-duration: var(--motion-duration-fast);
--motion-feedback-easing: var(--motion-easing-standard);
}
/* Tier 3 — reduced-motion override (required, not optional) */
@media (prefers-reduced-motion: reduce) {
:root {
--motion-enter-duration: var(--motion-duration-fast);
--motion-enter-easing: var(--motion-easing-standard);
--motion-enter-distance: var(--motion-distance-none);
}
}جدول المرجع
| الرمز | متغيّر CSS | القيمة | الاستخدام |
|---|---|---|---|
| motion.enter.duration | --motion-enter-duration | 240ms → 160ms | دخول عنصر إلى الشاشة |
| motion.enter.easing | --motion-enter-easing | decelerate | منحنى الدخول (يهدأ عند الوصول) |
| motion.enter.distance | --motion-enter-distance | 8px → 0px | مقدار إزاحة الدخول |
| motion.feedback.duration | --motion-feedback-duration | 160ms | استجابة اللمس والضغط |
| motion.exit.duration | --motion-exit-duration | 160ms → 0ms | خروج عنصر (فوري عند التخفيض) |
| motion.replace.duration | --motion-replace-duration | 240ms | استبدال محتوى مكانه |
| motion.loading.duration | --motion-loading-duration | 320ms | دورة الدوّار والتحميل |
الاستخدام
.toast {
transition:
opacity var(--motion-enter-duration) var(--motion-enter-easing),
transform var(--motion-enter-duration) var(--motion-enter-easing);
}
.button:active {
transition: transform var(--motion-feedback-duration) var(--motion-feedback-easing);
}
/* No manual reduced-motion query needed: the tokens collapse their
duration and distance under prefers-reduced-motion automatically. */أخطاء شائعة
| الخطأ | ما يفسد | الصواب |
|---|---|---|
transition: all 300ms ease | خارج السلّم ويتجاهل تقليل الحركة | var(--motion-feedback-duration) var(--motion-feedback-easing) |
| استهلاك أولية مباشرة | يتجاوز القصد، والتخفيض يكيّف الدلالي--motion-duration-fast | var(--motion-feedback-duration) |
| استعلام prefers-reduced-motion لكل مكوّن | يكرّر عملاً تؤدّيه الرموز أصلاً | استخدم الرمز الدلالي؛ فهو يتكيّف وحده |
| كتابة cubic-bezier خام في المكوّن | ينحرف عن مجموعة المنحنيات | var(--motion-enter-easing) |
كيف تُستهلك
الرموز مصدرها واحد آلي القراءة (tokens.json في المهارة). حزمة @mercato/tokens تولّد منه: متغيّرات CSS (التسليم الأساسي)، وإعداد Tailwind جاهز، وكائن سمة مطبوع بـ TypeScript. أهداف المنصّات الأخرى (Style Dictionary وDTCG وiOS وAndroid وCompose) تتولّد من المصدر نفسه عند الطلب.
// CSS variables (canonical) — import once at the app root
import "@mercato/tokens/css";
// Tailwind preset
// tailwind.config: { presets: [require("@mercato/tokens/tailwind")] }
// Typed theme object (JS/TS)
import { tokens } from "@mercato/tokens";