الدرس 6: الحركة والتفاعلات الدقيقة — الجرعة وإمكانية الوصول
أضفت حركة ارتداد مدتها 600ms إلى كل زر وبدت رائعة — إلى أن أبلغ مستخدم لديه حساسية للحركة بأن الشاشة تصيبه بالدوار. يعلّمك هذا الدرس الحركة المبنية على التوكنات: انتقالات خفيفة، وتفاعلات دقيقة ذات هدف، واحترام `prefers-reduced-motion` — ليس بإلغاء التغذية الراجعة، بل باستبدال الحركة الكبيرة بتغذية
الحركة مثل التوابل: القليل منها يحسّن الطبق، والكثير يفسده، وبعض الناس حساسون لها. لمن طلب حركة أقل لا تقدّم طبقًا أسوأ — بل تقدّم نسخة أهدأ: تستبدل التابل الحاد بآخر خفيف، دون أن تفقد النكهة. والرسوم المتحركة تعمل بالطريقة نفسها: تزيل الحركة الكبيرة، لكنك تحتفظ بالتغذية الراجعة.
- توكن الانتقال
- قيمة مدة (duration) وتخفيف (easing) ثابتة من مجموعة صغيرة — على سبيل المثال `duration-200 ease-out` — بحيث يبدو كل انتقال في الواجهة موحّدًا بدلاً من أن يكون عشوائيًا.
- تفاعل دقيق
- تغذية راجعة بصرية صغيرة لإجراء المستخدم — تغيير طفيف عند التمرير (hover) أو الضغط أو التركيز (focus) — تؤكد أن شيئًا ما قد حدث، دون تشتيت الانتباه.
- prefers-reduced-motion
- تفضيل على مستوى النظام يطلب فيه المستخدم تقليل الحركة (غالبًا بسبب حساسية دهليزية). 'التقليل' ليس 'الإزالة': الواجهة المتاحة للجميع تجرّد الحركة الكبيرة لكنها تحتفظ بالتغذية الراجعة — مثلاً تغيير حالة فوري بدلاً من رسم متحرك.
- الـ variant الخاص بـ motion-reduce
- الـ variant في Tailwind الذي يطبّق classes فقط عندما يطلب المستخدم حركة أقل — مثل `motion-reduce:transition-none` الذي يلغي الانتقال بالنسبة له.
