مبادئ تصميم الحركة: كيف يجب أن تتحرك الواجهات فعلاً في 2026
دليل مصمم عملي لحركة واجهات المستخدم. المبادئ السبعة التي تفصل الحركة الهادفة عن الزخرفة، وجدول المدد، وكيف تشحن حركات تصمد في منتج حقيقي.
الحركة هي أكثر أدوات تصميم الواجهات إساءة في الاستخدام. كل فريق يشحن شريط أنيميشن، وتقريباً لا أحد يشحن نظام حركة. والنتيجة منتج يقفز ويهتز ويتحرك بتأثير البارالاكس حتى يقف في طريق المستخدم. حركة كان يجب حذفها.
هذه الورقة هي نسخة المصمم العامل. سبعة مبادئ تقرر هل تستحق الحركة مكانها، ومرجع للمدة والـ easing ينهي الجدال، وقائمة قصيرة بأنماط تصمد أمام اختبارات المستخدمين الحقيقية. لا حلقات Dribbble ولا أفلام علامات تجارية، فقط حركة منتج تحترم وقت المستخدم.
ما هو تصميم الحركة فعلاً
تصميم الحركة هو طبقة السلوك في المنتج. هو كيف تدخل العناصر وتخرج وتستجيب وترتبط ببعضها عبر الزمن. حين يُنفَّذ جيداً، تخبر الحركة المستخدم أين هو ومن أين جاء وإلى أين يستطيع الذهاب، دون كلمة نص إضافية واحدة.
وحين يُنفَّذ بشكل سيئ، تخبر الحركة المستخدم أن المصمم كان لديه Framer. الأنيميشن الزخرفي والنوابض التي لا تنتهي وفيديوهات الهيرو التي تعمل تلقائياً بصوت كلها الخطأ نفسه بأزياء مختلفة. الحركة تكلّف انتباهاً وعرض نطاق وإتاحة. عليها أن تستحق الفاتورة.
تناولت مقالة تصميم التسلسل البصري كيف تقرأ العين صفحة ثابتة. الحركة هي الطبقة التالية. هي تخبر العين ليس فقط أين تنظر، بل متى.
للحركة وظيفتان فقط لا ثالث لهما
كل أنيميشن في منتج مشحون يؤدي إحدى وظيفتين. إن لم يؤدِّ أياً منهما فهو زخرفة، والزخرفة أول ما يُحذف في مراجعة الأداء.
الوظيفة الأولى: إيصال تغيّر الحالة. زر كان خاملاً صار مضغوطاً. نافذة لم تكن موجودة صارت مفتوحة. صف كان فارغاً صار يحمل بيانات. الحركة تجعل التغيير مفهوماً بعرض الانتقال بدل القفز إلى الحالة الجديدة.
الوظيفة الثانية: توجيه العين. عنصر جديد ينزلق من اليمين لأن المستخدم ضغط زر التقدم. بطاقة تنكمش نحو شريط التنقل السفلي لأنها حُفظت. الحركة تعلّم المستخدم النموذج المكاني للمنتج دون أن تجبره على قراءة وثائق.
الحركة التي لا تنقل حالة ولا توجه العين تسرق انتباه المستخدم مجاناً. احذفها.
المبادئ السبعة لحركة المنتج
هذه هي الرافعات. استخدمها معاً فتبدو الحركة مقصودة. لا تستخدم أياً منها فيبدو المنتج جامداً. أكثر منها فيبدو المنتج لعبة.
المبدأ 1: الغاية قبل الصقل
كل أنيميشن يجيب عن سؤال واحد: ماذا سيخسر المستخدم لو لم تكن هذه الحركة موجودة؟ إن كان الجواب «لا شيء» فالحركة زخرفة. وإن كان «لن يفهم ما حدث» فالحركة بنيوية وتبقى.
المصممون الذين يبدؤون بـ«لنضف بعض الأنيميشن هنا» يشحنون منتجات مزعجة. والذين يبدؤون بـ«ماذا يفوّت المستخدم لو قفز هذا فوراً» يشحنون منتجات حيّة.
المبدأ 2: المدة تطابق الأثر
أنيميشن قصير للأحداث الصغيرة. وأطول للأحداث الأكبر.
ضغطة الزر تنتهي في أقل من 100 مللي ثانية. انتقال الصفحة قد يستغرق حتى 400. والنافذة التي تستحوذ على الشاشة كلها تتحمل 500. وما زاد عن ذلك يبدو بطيئاً في التفاعل العاشر، حتى لو بدا سينمائياً في الأول.
جدول المدد:
| الحدث | المدة | السبب |
|---|---|---|
| التمرير، التركيز، ضغط الزر | 100 إلى 150 ms | يجب أن تبدو الاستجابة فورية |
| تغيّر حالة صغير (مفتاح تبديل، حقل إدخال) | 150 إلى 200 ms | ملحوظ دون أن يقاطع |
| فتح بطاقة أو تلميح أو قائمة منسدلة | 200 إلى 300 ms | مساحة كافية ليبدو الـ easing طبيعياً |
| انتقال صفحة أو نافذة | 300 إلى 400 ms | يحدد السياق المكاني دون تطويل |
| تغيّر تخطيط كبير، كشف الإعداد الأولي | 400 إلى 500 ms | فقط حين تكون اللحظة مهمة فعلاً |
أي شيء فوق 500 ms في منتج (بخلاف صفحة تسويقية) هو ضريبة على كل مستخدم عائد. المشاهدة الأولى سينمائية. المئة تعذيب.
المبدأ 3: الـ easing يحمل العاطفة
الحركة الخطية روبوتية. العالم الفيزيائي لا يتحرك خطياً، والواجهات التي تفعل ذلك تبدو آلية. منحنيات الـ easing هي ما يجعل الحركة تبدو إنسانية.
ثلاثة easings تغطي 90% من عمل المنتجات.
- Ease-out للعناصر الداخلة إلى الشاشة. سريع في البداية بطيء في النهاية. يطابق توقع المستخدم لجسم يستقر في مكانه.
- Ease-in للعناصر الخارجة من الشاشة. بطيء في البداية سريع في النهاية. يرى المستخدم العنصر يقرّ بالخروج قبل أن يغادر.
- Ease-in-out للعناصر المنتقلة من مكان إلى آخر. ناعم من الطرفين. يطابق القصور الذاتي الفيزيائي.
منحنيات النابض هي الخيار الرابع، وتُستخدم بحذر. النوابض تبدو مرحة ومناسبة لتطبيقات المستهلكين ذات الصوت الودود. وتبدو خاطئة في البرمجيات المالية والرعاية الصحية وأي منتج يُقرأ فيه تجاوز الهدف على أنه عدم استقرار.
المبدأ 4: الحركة تحترم تفضيلات الحركة
كل منتج يشحن مساراً لـ prefers-reduced-motion. المستخدمون المصابون باضطرابات دهليزية أو صداع نصفي أو حساسية انتباه يتضررون من حركة يستمتع بها غيرهم. تجاهل هذا الإعداد ليس خياراً أسلوبياً، بل فشل في الإتاحة.
القاعدة ليست تجريد الحركة كلياً عند تفعيل الإعداد، بل استبدال الحركة المبنية على المسافة بحركة مبنية على الشفافية.
بطاقة تنزلق 40 بكسل تصبح بطاقة تظهر تدريجياً. تبقى تغيّر الحالة منقولاً ويزول المحفّز الدهليزي. تشرح مقالة قائمة فحص إتاحة الويب موقع هذا في التدقيق الكامل للإتاحة.
المبدأ 5: الاتساق عبر المنتج
يجب أن تبدو الحركة كأن منتجاً واحداً اتخذ مجموعة واحدة من القرارات. شاشتان بـ easing ومدة مختلفين تبدوان كمنتجين مخيطين معاً. المستخدمون يلاحظون، حتى لو عجزوا عن تحديد ما يبدو خاطئاً.
الحل هو نظام حركة. من ثلاث إلى خمس مدد. من ثلاثة إلى خمسة easings.
رموز مسماة مثل motion.short وmotion.medium وmotion.long وease.enter وease.exit وease.standard. تشرح مقالة دليل أنظمة التصميم أين تعيش هذه بجانب رموز اللون والخط.
رموز الحركة ليست اختيارية في 2026. هي الطريقة الوحيدة لمنع الحركة من الانحراف مع نمو الفريق. فريق من ثلاثة يشحن أنيميشن حرّاً ينتج نظاماً من ثلاثة آراء. الموظف التالي يضيف رابعاً. وبحلول الشاشة العشرين لا يملك المنتج طبقة سلوك متماسكة.
المبدأ 6: الحركة تتبع النموذج المكاني
لكل منتج خريطة ضمنية. الشاشات الجديدة تعيش على اليمين. شاشات التفاصيل تكبر من بطاقة. الطبقات العلوية تنزل من الأعلى. أدراج التنقل تأتي من حافة الشاشة التي تنتمي إليها.
الحركة تعزز الخريطة. شاشة تفاصيل تكبر من البطاقة التي ضغطها المستخدم تعلّم الاستمرارية المكانية. وشاشة التفاصيل نفسها وهي تسقط من الأعلى تربك المستخدم لأنها تكسر الخريطة الضمنية.
حين يخطئ المصممون في هذا فالسبب غالباً أنهم اختاروا الأنيميشن بمعزل عن سياق التدفق. الاختبار: هل تستطيع إرجاع كل انتقال إلى استعارة مكانية متسقة؟ إن لم تستطع فالحركة تزخرف ولا تعلّم.
المبدأ 7: للحركة ميزانية
كل أنيميشن يكلّف معالجاً وبطارية وانتباهاً. ضع ميزانية لكل منها.
ميزانية المعالج والبطارية تعني تحريك transform وopacity فقط، وتجنب الخصائص المحفزة للتخطيط مثل width وheight وtop وleft. المتصفحات الحديثة تعالج transform وopacity على وحدة الرسوميات، وهذا رخيص. تحريك خصائص التخطيط يفرض إعادة حسابات تنهك الأداء على هواتف أندرويد المتوسطة.
ميزانية الانتباه تعني تحديد الأنيميشن المتزامن. شيء واحد يتحرك في كل مرة، تقريباً دائماً. اثنان كثير، وثلاثة تشتيت.
صفحة يتحرك كل عنصر فيها عند التمرير ليست صفحة مصممة، بل فخ لتركيز المستخدم. يغطي مسرد Core Web Vitals أرقام الأداء التي يفسدها عادةً الأنيميشن المرتبط بالتمرير.
أنماط تستحق مكانها
من بين عشرات أنماط الحركة العائمة في Dribbble، قائمة قصيرة فقط تحسّن عمل المنتج. الباقي أزياء تنكرية.
التفاعلات الدقيقة عند الإدخال
الزر الذي ينضغط بكسلين عند الضغط، ومفتاح التبديل الذي ينتقل كالنابض بين حالتيه، وحقل الإدخال الذي يهتز بلطف عند فشل التحقق. هذه أرخص الحركات وأكثرها أثراً في أي منتج. تجيب عن سؤال المستخدم (هل سمعني النظام) في أقل من 150 مللي ثانية دون أي نص.
كل عنصر تحكم أساسي يجب أن يملك تفاعلاً دقيقاً. الأزرار ومفاتيح التبديل وحقول الإدخال ومربعات الاختيار والراديو والمنزلقات. إن لم يستجب عنصر التحكم بصرياً للمسة المستخدم، يبدو المنتج بطيئاً حتى لو كان الخادم سريعاً. يغطي مسرد حالة التركيز قواعد الإتاحة الحاكمة لهذه التفاعلات.
الكشف المتدرج للقوائم
قائمة بطاقات تظهر تدريجياً بفارق 50 ms بين العناصر تُقرأ كأنها مقصودة. والقائمة نفسها حين تظهر دفعة واحدة تُقرأ كأنها مفاجئة. التدرج يستحق دائماً تقريباً المئات القليلة من المللي ثانية الإضافية في أول عرض.
الحد الأقصى أربعة عناصر. بعد الأربعة، أكمل التدرج أسفل الشاشة المرئية ودع تمرير المستخدم يطلق الباقي. تدريج عشرين عنصراً بالتتابع يبدو بطيئاً، والمستخدم لا يرى معظمها على أي حال.
انتقالات العناصر المشتركة
بطاقة يضغطها المستخدم فتصبح ترويسة شاشة التفاصيل. صورة مصغرة تتوسع إلى صورة كاملة. هذه الانتقالات تعلّم النموذج المكاني بوضوح وبتكلفة قليلة، وهي نمط الحركة الأكثر إبهاراً في عمل المنتجات الحديث. لكنها تتطلب تكلفة هندسية، ولهذا تحذفها معظم الفرق. حين تكون اللحظة مهمة (الإعداد الأولي، مسار التحويل الرئيسي، الميزة المميزة)، ادفع التكلفة.
مؤشرات التقدم التي تحترم الوقت
أشرطة تقدم تتحرك في الزمن الحقيقي في العمليات الطويلة. شاشات الهيكل العظمي للبيانات التي يستغرق تحميلها أكثر من 300 ms. والدوّارات فقط للعمليات الأقل من ثانية حيث يومض الهيكل. حركة التقدم هي حركة ثقة. تخبر المستخدم أن النظام يعمل، وهذا الشيء الوحيد الذي يهمه وهو ينتظر.
حالات تحميل ذات معنى
حالة التحميل ليست غياب التصميم، بل تصميم قائم بذاته. يغطي مسرد الكشف التدريجي كيف تكشف حالات التحميل المحتوى على مراحل بدل الانتظار على أبطأ قطعة.
إخفاقات الحركة التي يجب الانتباه لها
كل مراجعة حركة تلتقط الإخفاقات نفسها. إن شُحن المنتج بأي منها، فنظام الحركة يقوّض بقية التصميم.
فيديو يعمل تلقائياً في الهيرو. يختطف الانتباه، ويدمّر الأداء، وينتهك تفضيلات تقليل الحركة. استبدله بصورة ثابتة أو تشغيل يطلقه المستخدم.
بارالاكس لم يطلبه أحد. البارالاكس هو المكافئ الحركي للون العلامة التجارية المستخدم في نص المتن. يبدو فاخراً في لقطة شاشة ويُقرأ كدوار حركة على جهاز حقيقي.
ارتدادات عند كل تغيّر حالة. حركة النابض توابل وليست مكوناً أساسياً. منتج ترتد فيه كل الأزرار وتقفز كل البطاقات وتتجاوز كل النوافذ هدفها هو منتج لا يستطيع تحديد الأولويات. احتفظ بالنوابض للحظات التي يجب أن يشعر بها المستخدم.
انتقالات تسبق الخادم. انتقال شاشة يستغرق 500 ms بينما تصل البيانات في 200 يجعل المنتج يبدو أبطأ مما هو. يجب أن تطابق الحركة العملية الفعلية أو تتأخر عنها، لا أن تحشوها أبداً.
أنيميشن خلفية متكرر. خلفية تتحرك للأبد تُقرأ كتشتيت للأبد. في كل مرة يعود المستخدم بنظره يفقد تركيزه. كرّر فقط حين تكون الحركة هي المقصد (حالة، تصوير بياني، مؤشر نبض).
الحركة داخل النظام
الحركة تنتمي إلى نظام التصميم بجانب اللون والخط. معاملتها كطبقة صقل متأخرة هي سبب شحن معظم المنتجات حركة غير متسقة. الفريق الذي يملك النظام يملك رموز الحركة.
الحد الأدنى من رموز الحركة:
| الرمز | نطاق القيمة | الاستخدام |
|---|---|---|
| motion.duration.short | 100 إلى 150 ms | الاستجابة للإدخال |
| motion.duration.medium | 200 إلى 300 ms | تغيّر الحالة، القائمة المنسدلة، التلميح |
| motion.duration.long | 400 إلى 500 ms | الصفحة، النافذة، الانتقال الكبير |
| motion.ease.enter | cubic-bezier(0, 0, 0.2, 1) | العناصر الداخلة إلى الشاشة |
| motion.ease.exit | cubic-bezier(0.4, 0, 1, 1) | العناصر الخارجة من الشاشة |
| motion.ease.standard | cubic-bezier(0.4, 0, 0.2, 1) | الحركات داخل الشاشة |
سمّها ووثّقها واشحنها كمتغيرات في طبقة رموز التصميم. كل أنيميشن جديد في المنتج يستخدم أحد هذه الرموز، أو يوجد سبب مكتوب لعدم استخدامه. هذا الانضباط هو ما يُبقي الحركة متماسكة عبر فريق من خمسة مصممين وعشرين مهندساً.
كيف تراجع تصميم حركة
مرّر كل أنيميشن على أربعة أسئلة قبل أن يُشحن.
هل ينقل تغيّر حالة أو يوجه العين. إن لم يفعل أياً منهما، احذفه.
هل يناسب جدول المدد. إن كان طويلاً، قصّره حتى يبدو عدوانياً ثم تراجع خطوة واحدة.
هل يستخدم رمزاً. إن كان مصنوعاً يدوياً فسينحرف عن النظام. حوّله إلى رمز أو ارفضه.
هل يجتاز prefers-reduced-motion. بدّل الإعداد. إن بقيت الحركة تطلق استجابة دهليزية، أعد بناءها بالشفافية فقط.
أربعة أسئلة. خمس دقائق لكل أنيميشن. معظم المنتجات تُشحن دون طرح أي منها، ولهذا تبدو معظم المنتجات كأنها زُخرفت لا صُمّمت.
إن أردت فريقاً يجري هذه المراجعة وقت الشحن بدل الاعتذار عن انحراف الحركة في تدقيق ما بعد الإطلاق، وظّف Brainy. نبني العلامة والويب وواجهة المنتج مع حركة داخل النظام منذ الشاشة الأولى.
الحركة في ظروف 2026
ثلاثة تحولات مهمة. على الحركة أن تصمد أمامها جميعاً.
واجهات الذكاء الاصطناعي تتحرك أكثر من الواجهات القديمة. الاستجابات المتدفقة وآثار الاستدلال الحية واستدعاءات الأدوات الديناميكية تخلق حركة دقيقة مستمرة. القاعدة أن تجعل حركة الذكاء الاصطناعي متوقعة وحركة المنتج هادئة. إن تحرك كل شيء دفعة واحدة، لن يُقرأ شيء على أنه مهم.
الأنيميشن المرتبط بالتمرير ميزة متصفح الآن. CSS scroll-timeline يتيح للمصممين التحريك بناءً على موضع التمرير دون JavaScript. هذه رافعة جديدة، ومعظم الفرق تسيء استخدامها بتحريك عناصر كثيرة عند التمرير. القاعدة: أنيميشن واحد مرتبط بالتمرير في كل صفحة، عادةً الهيرو، وأحياناً الدعوة لاتخاذ إجراء.
لوائح الإتاحة تتشدد. قانون الإتاحة الأوروبي وقوانين مشابهة تعني أن تقليل الحركة ليس ميزة اختيارية، بل أمر واجب الإنفاذ. شحن منتج دون مسار لتقليل الحركة مخاطرة امتثال، لا رأي تصميمي. يغطي مسرد wcag خطوط الأساس المنطبقة.
الأسئلة الشائعة
ما أهم مبادئ تصميم الحركة؟
الغاية قبل الصقل، ومدة تطابق الأثر، وeasing يحمل العاطفة، واحترام تفضيلات الحركة، والاتساق عبر المنتج، والوعي بالنموذج المكاني، وميزانية صارمة للأداء والانتباه. سبعة مبادئ مجتمعة، لا أي واحد منها وحده، تنتج حركة تستحق مكانها.
ما المدة المناسبة لأنيميشن واجهة المستخدم؟
بين 100 و500 مللي ثانية لكل تفاعل منتج تقريباً. أنيميشن الاستجابة (التمرير، الضغط) من 100 إلى 150 ms. تغيّرات الحالة الصغيرة من 150 إلى 300 ms. انتقالات الصفحات والنوافذ من 300 إلى 500 ms. أي شيء أطول يصبح ضريبة على المستخدمين العائدين حتى لو بدا سينمائياً في المشاهدة الأولى.
ما الفرق بين تصميم الحركة والأنيميشن؟
تصميم الحركة هو طبقة السلوك في المنتج، والأنيميشن هو التقنية البصرية المستخدمة لإنتاجها. تصميم الحركة يسأل أي تغيّر حالة ينقله الأنيميشن ولماذا هو مطلوب. الأنيميشن يسأل كيف تبدو الحركة. تصميم الحركة استراتيجية والأنيميشن حرفة. عمل المنتجات الجيد يحتاج كليهما.
هل يجب أن يكون لكل تفاعل أنيميشن؟
لا. كل عنصر تحكم أساسي (زر، مفتاح تبديل، حقل إدخال) يستفيد من تفاعل دقيق لأن المستخدم يتوقع استجابة عند اللمس. العناصر الثانوية لا. الاختبار: احذف الأنيميشن وانظر هل يفقد المستخدم معلومة. إن لم يفقد، أبقه محذوفاً.
ما هو prefers-reduced-motion وكيف تتعامل معه؟
هو إعداد في نظام التشغيل يشير إلى أن المستخدم يريد حركة أقل، عادةً لأسباب دهليزية أو متعلقة بالانتباه. المعالجة الصحيحة ليست إزالة الحركة كلياً بل استبدال الأنيميشن المبني على المسافة بأنيميشن مبني على الشفافية. يبقى تغيّر الحالة منقولاً ويزول المحفّز الدهليزي.
كيف تبني نظام حركة؟
ابدأ بثلاث مدد وثلاثة easings كرموز مسماة. وثّق أين يُستخدم كل منها. افرض الرموز في مراجعة الكود. أضف رموزاً أخرى فقط حين تنتج المجموعة الحالية حركة خاطئة فعلاً، لا لاستيعاب تفضيل مصمم لمرة واحدة. من ثلاثة إلى خمسة رموز لكل محور هو عادةً كل ما يحتاجه المنتج.
الحركة حرفة، لا ميزة
المنتجات ذات الحركة الرائعة تبدو حيّة. والمنتجات بدونها تبدو جامدة. والمنتجات ذات الحركة الزائدة تبدو كشريط عرض تجريبي. المسافة بين هذه الثلاثة صغيرة، والطريق الوحيد إلى الأولى هو نظام بقواعد صارمة ومراجعات صادقة.
استخدم المبادئ السبعة معاً. التزم بجدول المدد. اختر الـ easings بقصد. اشحن طبقة رموز للحركة بجانب رموز اللون والخط.
مرّر كل أنيميشن على أربعة أسئلة قبل أن يُشحن. المنتج الناتج لن يبدو كأنه حاول، بل سيبدو كأنه فكّر.
إن أردت فريقاً يطبق هذا الانضباط عبر العلامة والويب وواجهة المنتج كمشروع واحد، وظّف Brainy. الحركة كقرار نظام من الدرجة الأولى، في كل مرة.
قراءات ذات صلة
Want a product that moves with purpose instead of showing off? Brainy ships brand, web, and UI with motion built into the system, not sprinkled on top.
Get Started
