الحركة جزء وظيفي من الواجهة لا زخرفة. فهي، حين تُحسَن، تخبر الناس من أين جاءت اللوحة الجديدة، وما الذي يُحمَّل، وأي عنصر أثّروا فيه، وهل نجح الإجراء — دون كلمة إرشاد واحدة. وحين تُسَاء، تجعل المنتج يبدو بطيئاً، وتُسبب لبعض المستخدمين توعّكاً جسدياً فعلياً.
نتعامل معها كتصميم مربوط بغرض: على كل حركة أن تجيب عن سؤال كان على المستخدم أن يستنتجه بنفسه.
ما يشمله العمل
حركة الواجهات
التفاعلات الدقيقة
استجابة الأزرار والمفاتيح وحقول النماذج التي تؤكد أن الإجراء سُجِّل.
الانتقالات
تغيّرات الصفحات واللوحات التي تحفظ السياق المكاني، بحيث لا يبدو التنقل انتقالاً آنياً.
التحميل والتقدم
هياكل مؤقتة ومؤشرات دوران وأشرطة تقدم تضع توقعاً صادقاً، مع الحالات التفاؤلية التي تجعل التطبيق يبدو فورياً.
حالات الفراغ والنجاح
قدر بسيط من الشخصية في المكان الذي سيبدو فيه المنتج ميتاً لولاها.
التعريف بالمنتج والتلميحات
حركة تلفت الانتباه إلى الشيء الوحيد الذي يجب أن يلاحظه المستخدم الجديد.
تمثيل البيانات
رسوم بيانية تتحرك عند الظهور وعند التغيّر، بحيث يكون تحديث القيمة مرئياً لا مُستبدَلاً بصمت.
مواصفة حركة
المُدد ومنحنيات التسارع وقواعد التزامن كجزء من نظام تصميمك، ليطبّقها كل مطور بالطريقة نفسها.
حركة العلامة والمحتوى
- شعارات متحركة ومقدمات قصيرة لافتتاحيات الفيديو وشاشات بدء التطبيقات ومحتوى التواصل الاجتماعي.
- فيديوهات توضيحية — المقطع من دقيقتين الذي يشرح منتجاً أو خدمة أفضل من صفحة نص.
- حركة لمنصات التواصل — فيديو عمودي قصير ومنشورات متحركة وتنسيق للترجمات والتعليقات، بمقاسات كل منصة لا باقتطاعها من نسخة واحدة.
- عروض المنتجات والجولات التعريفية — تسجيلات شاشة وتتابعات متحركة للإطلاق والبيع والدعم.
- رسوم متحركة للإعلانات، بما فيها النسخ المتعددة التي تحتاجها الحملة المدفوعة للاختبار.
- رسوم العروض والمعارض — محتوى الشاشات لإطلاق أو مؤتمر أو معرض.
الانضباط هو المهارة
أشهر مشكلة في الحركة هي الإفراط فيها. فحركة بثلاث مئة جزء من الثانية على إجراء يقوم به أحدهم أربعين مرة يومياً ليست لمسة بهجة، بل تأخير سيبدأ بكرهه. قواعدنا الافتراضية:
- سريعة للإجراءات المتكررة، وأبطأ فقط حيث تنقل الحركة بنيةً فعلاً.
- حركة تحاكي الفيزياء الحقيقية، لأن الواجهات التي تتباطأ طبيعياً تبدو مستجيبة بينما تبدو الحركة الخطية آلية.
- لا شيء يحجب الإدخال. لا ينبغي أن ينتظر المستخدم انتهاء حركة ليتابع.
- لا شيء يزيح التصميم بشكل غير متوقع أو يشتّت عن المحتوى المقروء.
الوصولية والأداء
اضطرابات التوازن شائعة، والتأثيرات الكبيرة من نوع البارالاكس والتكبير قد تسبب غثياناً ودواراً حقيقيين. وكل تنفيذ نسلّمه يحترم إعداد «تقليل الحركة» في نظام التشغيل، فيستبدل الحركة بتلاشٍ بسيط أو بلا شيء بدل تجاهل التفضيل. ونحفظ الحركة أيضاً على الخصائص التي يستطيع المتصفح تحريكها بكلفة قليلة، حتى لا تكلّف الحركة معدل الإطارات على هاتف متوسط — فالحركة المتقطعة أسوأ من غيابها.
وفي الواجهات العربية يجب أن تُعكس الحركة ذات الاتجاه أيضاً: فاللوحة التي تنزلق من اليسار في الإنجليزية ينبغي أن تأتي من اليمين في العربية، والخطأ في ذلك يلاحظه المستخدم العربي فوراً.
عن العمل مع Codigoo
كنا نلوم التنظيمات منذ عامين. أمضوا أسبوعًا في مشاهدة التسجيلات وأثبتوا لنا أن السبب هو ترتيب الأسئلة.
أسئلة تتكرر علينا
- هل سيبطّئ هذا موقعنا؟
لا، إن نُفِّذ كما يجب، وهذا تحديداً سبب استحقاق الحركة للعمل مع المطورين بدل تسليم فيديو ليقارِبه أحدهم. فحركة الواجهات المبنية جيداً تكلّف قليلاً جداً، وقد تجعل الواجهة تبدو أسرع من الساكنة بمنحها استجابة أثناء عمل يجري في الخلفية.
- هل يمكنكم تحريك هويتنا الحالية؟
نعم — وهذا عمل شائع. فالهوية المصممة للطباعة كثيراً ما لا يكون لها سلوك محدد، وإضافة مواصفة حركة إليها تمنحك حضوراً متسقاً في الفيديو والتواصل الاجتماعي دون إعادة تصميم أي شيء.
- هل تنتجون محتوى الفيديو أيضاً؟
نعم. التصوير والمونتاج والصوت والمعالجة اللاحقة يتولاها فريق الإنتاج الإعلامي عندنا، فيمكن إنتاج تتابع متحرك ومشاهد حقيقية كقطعة واحدة بدل تجميعها من مورّدين.
- كيف تسلّمون الحركة للمطورين؟
كمواصفة لا كفيديو يُنسَخ: المُدد وقيم التسارع وشروط التشغيل والحالات والبديل عند تقليل الحركة. وحيث تكون الحركة معقدة نبنيها نحن، لأن التسليم الذي يعتمد على التأويل هو موضع فقدان جودة الحركة.
إن كان منتجك يبدو ساكناً أو علامتك بلا حضور في الفيديو، فجلسة استشارية هي الموضع المناسب لمعرفة أي الاثنين يكلّفك أكثر.
حدّثنا عن الحركة والرسوم المتحركة
ثلاثون دقيقة مع مهندس ومختص استراتيجيات يعملان في هذا المجال — لا فريق مبيعات. ستحصل على إجابة صادقة عمّا إذا كان هذا هو الشيء المناسب لتشتريه، وعن كلفته الواقعية.