الحركة في واجهات المواقع والتطبيقات: متى تفيد وكيف تُصمَّم

الحركة في واجهات المستخدم ليست زينة، بل وسيلة لإجابة أسئلة يطرحها المستخدم دون أن يقولها: هل وصلت ضغطتي؟ من أين جاءت هذه القائمة؟ ما الذي تغيّر في الصفحة؟ الحركة الجيدة قصيرة تكاد لا تُلاحظ، وتجعل الواجهة أوضح وأسهل؛ والحركة السيئة تبطئ المستخدم وتشتته، وقد تسبب له الدوار. يشرح هذا الدليل وظائف الحركة في المواقع والتطبيقات، والمدد والمنحنيات الشائعة، وقواعد الأداء، واحترام تفضيل تقليل الحركة، واتجاه الحركة في الواجهات العربية. وهو جزء من الدليل الشامل للأنيميشن والموشن جرافيك.

لماذا نحرّك عناصر الواجهة؟

قبل أن تضيف أي حركة، حدّد وظيفتها. إذا لم تستطع تسمية هذه الوظيفة، فالأرجح أن الواجهة أفضل بدونها.

التغذية الراجعة (Feedback)

تؤكد للمستخدم أن فعله وصل: زر يتغير قليلًا عند الضغط، ومفتاح تبديل ينزلق إلى وضعه الجديد، وحقل نموذج يهتز اهتزازًا خفيفًا عند إدخال خاطئ، وعلامة صح تظهر بعد إتمام الدفع. وفي العمليات التي تستغرق وقتًا، يطمئن مؤشر التحميل أو الهيكل المؤقت للمحتوى (Skeleton) المستخدمَ بأن شيئًا ما يحدث.

التوجيه (Orientation)

تبني الحركة خريطة ذهنية للمكان: القائمة الجانبية تنزلق من الجهة التي «تسكن» فيها، والنافذة المنبثقة تكبر من الزر الذي فتحها، والرجوع إلى الشاشة السابقة يعكس اتجاه الدخول. هكذا يعرف المستخدم أين هو وكيف يعود.

الاستمرارية (Continuity)

عندما تتحول الصورة المصغرة لمنتج في قائمة إلى الصورة الكبيرة في صفحة المنتج، يدرك المستخدم أن الشاشتين مرتبطتان ولا يفقد سياقه. هذا النوع من الانتقالات عبر عنصر مشترك (Shared Element Transition) يخفف الجهد الذهني عند تغيّر الشاشات.

لفت الانتباه والشخصية

يمكن للحركة أن توجه النظر إلى إشعار مهم أو خطأ يحتاج تصحيحًا، ويمكنها أن تضيف لمسة من شخصية العلامة. لكن الاستخدام هنا يجب أن يكون مقتصدًا: إذا تحرك كل شيء لم يعد شيء لافتًا، وإذا أبطأت لمسة الشخصية المستخدمَ صارت عبئًا. ولأساسيات تجربة المستخدم عمومًا راجع أساسيات تصميم واجهات المستخدم وتجربة المستخدم.

المدد الزمنية: أرقام استرشادية لا قواعد

حركة الواجهات أقصر بكثير من حركة الفيديو. المدى الشائع لمعظمها بين 100 و500 ميلي ثانية تقريبًا، وتقع أغلب التفاعلات الدقيقة (Micro-interactions) بين 150 و300 ميلي ثانية. الجدول التالي نقطة انطلاق، والحكم النهائي للاختبار على أجهزة حقيقية:

قواعد تساعدك على ضبط المدة:

• المسافة والحجم: العنصر الذي يقطع مسافة أطول أو يغطي جزءًا أكبر من الشاشة يحتاج وقتًا أطول قليلًا.
• الخروج أسرع من الدخول: العنصر المغادر لم يعد محل اهتمام، فلا داعي لأن يأخذ من وقت المستخدم.
• التكرار يقصّر المدة: الحركة التي يراها المستخدم عشرات المرات يوميًا يجب أن تكون الأسرع، فما يبدو لطيفًا في المرة الأولى يصبح مزعجًا في المرة العشرين.
• التتابع المحسوب (Stagger): عند ظهور قائمة عناصر تكفي إزاحة صغيرة بعشرات الميلي ثانية بين كل عنصر والذي يليه، مع حد أقصى للزمن الكلي حتى لا تستغرق القائمة الطويلة ثواني.

منحنيات التسارع في الواجهات

المنطق هنا امتداد لما تشرحه مقالة التوقيت ومنحنيات الحركة، مع تطبيقه على الواجهة:

• العناصر الداخلة: تباطؤ عند الوصول (Ease Out)، فتصل سريعًا وتستقر بهدوء.
• العناصر الخارجة: تسارع عند المغادرة (Ease In)، فتنطلق وتختفي.
• العناصر التي تنتقل داخل الشاشة: بطء في الطرفين (Ease In-Out).
• الحركة الخطية: للحركات المستمرة فقط، كمؤشرات التحميل الدائرية وأشرطة التقدم.

وفي الأنظمة التصميمية (Design Systems) يُفضّل تحويل هذه القيم إلى رموز ثابتة (Tokens): مدة قصيرة ومتوسطة وطويلة، ومنحنى قياسي ومنحنى للدخول وآخر للخروج. بذلك يتحرك المنتج كله بشخصية واحدة بدل أن يختار كل مطوّر قيمه الخاصة. أما الإيماءات، مثل السحب ثم الإفلات، فتوفر لها كثير من المنصات والمكتبات حركة قائمة على محاكاة النوابض (Spring Animation)، وهي تبدو طبيعية وتتعامل جيدًا مع مقاطعة الحركة في منتصفها.

الأداء: حرّك ما يسهل على المتصفح تحريكه

الحركة المتقطعة أسوأ من غياب الحركة. للحصول على 60 إطارًا في الثانية يملك المتصفح نحو 16.7 ميلي ثانية لإنتاج كل إطار، وأي تجاوز يظهر تقطعًا واضحًا، خاصة على الهواتف متوسطة الإمكانات.

• حرّك الإزاحة والتحجيم والتدوير (transform) والشفافية (opacity): يستطيع المتصفح غالبًا معالجتها في مرحلة التركيب دون إعادة حساب تخطيط الصفحة.
• تجنب تحريك العرض والارتفاع والهوامش والمواضع (top وleft): هذه الخصائص تجبر المتصفح على إعادة حساب التخطيط وإعادة الرسم في كل إطار.
• استخدم خاصية will-change باعتدال: الإفراط فيها يستهلك الذاكرة بدل أن يسرّع.
• اختر الصيغة المناسبة للرسوم المعقدة: ملفات Lottie أو Rive أو فيديو قصير مضغوط بدل صور GIF الكبيرة. وتعرض مقالة برامج الموشن جرافيك والأنيميشن الفرق بين هذه الأدوات.
• لا تحجب المحتوى: يجب أن يظهر المحتوى المهم فورًا، وأن تبقى الحركات قابلة للمقاطعة، فلا ينتظر المستخدم انتهاء حركة ليضغط مرة أخرى. وأثر ذلك في تجربة التصفح تشرحه مقالة سرعة الموقع: لماذا تهم وكيف تحسّنها.

وهذا مثال قصير يجمع التحريك الملائم للأداء مع احترام تفضيل تقليل الحركة ودعم الاتجاه من اليمين إلى اليسار:

.card { transition: transform 200ms cubic-bezier(0.2, 0, 0, 1), opacity 200ms ease-out; }
.card:hover { transform: translateY(-4px); }

.drawer { transform: translateX(-100%); transition: transform 300ms ease-out; }
[dir="rtl"] .drawer { transform: translateX(100%); }
.drawer.open { transform: translateX(0); }

@media (prefers-reduced-motion: reduce) {
  .card, .drawer { transition: opacity 150ms linear; }
  .card:hover { transform: none; }
}

احترام تفضيل تقليل الحركة

بعض المستخدمين يعانون الدوار أو الغثيان أو صعوبة التركيز مع الحركة الكبيرة، ولذلك توفر أنظمة التشغيل إعدادًا لتقليل الحركة، مثل «Reduce Motion» في أجهزة Apple، وإعدادات مماثلة في Android وWindows. تستطيع المواقع قراءة هذا التفضيل عبر استعلام الوسائط prefers-reduced-motion في CSS أو عبر جافاسكربت، وللتطبيقات الأصلية واجهات برمجية مماثلة.

ماذا تفعل عندما يكون هذا التفضيل مفعّلًا؟

• استبدل الإزاحات الكبيرة والتكبير والدوران وتأثيرات المنظر المتوازي (Parallax) بتلاشٍ بسيط أو تغيير فوري.
• أوقف التشغيل التلقائي لفيديوهات الخلفية والشرائح الدوّارة.
• لا تلغِ التغذية الراجعة الأساسية؛ فتغيّر حالة الزر وعلامة النجاح يبقيان، لكن بحركة أهدأ.

وتذكّر مبدأين عامين من إرشادات إمكانية الوصول (WCAG): تجنب أي محتوى يومض أكثر من ثلاث مرات في الثانية، ووفّر وسيلة لإيقاف أي حركة تبدأ تلقائيًا وتستمر أكثر من خمس ثوانٍ. وللمزيد راجع إمكانية الوصول في المواقع.

اتجاه الحركة في الواجهات العربية (RTL)

الحركة تتبع اتجاه القراءة. وفي الواجهة العربية يقع «التالي» إلى اليسار، لذلك:

• التنقل إلى الأمام: تدخل الشاشة الجديدة من اليسار وتخرج الحالية نحو اليمين، والرجوع يعكس ذلك.
• القائمة الجانبية: تنزلق من جهة البداية، أي من اليمين.
• الشرائح الدوّارة (Carousels) ومؤشرات الخطوات وأشرطة التقدم: تتقدم من اليمين إلى اليسار، وتنعكس إيماءات السحب تبعًا لذلك.
• الأيقونات الاتجاهية: أسهم الرجوع والتقدم تُعكس.
• ما لا يُعكس عادةً: مؤشرات التحميل الدائرية التي تحاكي دوران عقارب الساعة، وأزرار تشغيل الوسائط، والشعارات. وعند الشك راجع إرشادات الاتجاه الثنائي في المنصة التي تعمل عليها.

وفي CSS تساعد الخصائص المنطقية مثل margin-inline-start على عكس التخطيط تلقائيًا، لكن قيم الإزاحة في transform لا تنعكس وحدها، ولهذا يحتاج الدرج الجانبي في المثال السابق قاعدة خاصة بالاتجاه من اليمين إلى اليسار. وملفات Lottie التي تحمل اتجاهًا واضحًا تحتاج نسخة معكوسة، أو قلبًا أفقيًا إن لم يكن فيها نص. وتفاصيل بناء الموقع باللغتين في مقالة بناء موقع ثنائي اللغة بالعربية والإنجليزية.

أخطاء شائعة

• تحريك كل شيء للزينة، حتى تفقد الحركة معناها.
• حركات دخول طويلة لكل قسم عند التمرير، تجعل الصفحة بطيئة ومرهقة.
• مدد ومنحنيات مختلفة بلا نظام بين شاشة وأخرى.
• تحريك خصائص التخطيط بدل transform وopacity.
• تجاهل تفضيل تقليل الحركة.
• نقل حركة الواجهة الإنجليزية إلى العربية دون عكس اتجاهها.
• مؤشر تحميل يدور بلا نهاية دون أي إشارة إلى التقدم أو إلى حدوث خطأ.

قائمة تحقق قبل الإطلاق

1. لكل حركة وظيفة محددة: تغذية راجعة، أو توجيه، أو استمرارية.
2. المدد ضمن المدى الاسترشادي، والحركات المتكررة هي الأسرع.
3. الدخول بتباطؤ، والخروج بتسارع، والحركة الخطية للحركات المستمرة فقط.
4. التحريك مقتصر على transform وopacity حيث أمكن، ومختبر على هاتف متوسط الإمكانات.
5. تفضيل تقليل الحركة محترم، ولا وميض ولا حركة تلقائية طويلة بلا وسيلة إيقاف.
6. اتجاه الحركة مختبر في النسختين العربية والإنجليزية.
7. المدد والمنحنيات موثقة في النظام التصميمي رموزًا ثابتة.