ما هي استخدامات الحركات؟

اقتباس

"يتمحور التحريك إلى خلق شعور بالحياة". براد بيرد

هذه المقالة جزء من سلسلة من المقالات حول التحريك في CSS:

قبل الدخول في الجانب الفني من التحريك (Animation) في CSS، سنناقش سبب القيام بالتحريك في المقام الأول.

أبلغُ من الكلمات

التحريك يمكن أن يوصل المعلومات بكفاءة، ويمكن استخدامه لجذب الانتباه، ولكن في جميع الحالات، فالهدف النهائي هو التواصل.

إدراج الحركة في التصميمات يجعلها أكثر كفاءة في إيصال المعلومة. الصور المتحركة أبلغ من الكلمات الملفوظة أو المكتوبة.

التحريك المعبّر والملائم يمكن أن يضيف جاذبية إلى تصاميمنا، و يعطي مصداقية إلى عملنا. ذلك لأننا اعتدنا على رؤية الحركة طوال الوقت في العالم "الحقيقي". لذلك، فإدخال الحركة إلى عملنا يجعله أكثر حيوية.

مع التحسن المستمر في دعم المتصفحات للتحريك، فقد أصبحت خيارًا قابلًا للتطبيق أكثر من أي وقت مضى. من نواح كثيرة، التحريك قد يكون بنفس أهمية الخطوط التي نستخدمها، والتخطيطات التي ننشئها.

ما المقصود بالتحريك في مجال تطوير المواقع؟

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

يمكن أن يكون التحريك معبرًا، كما يحدث عندما يتململ زر الحفظ في CodePen ليذكرنا بضرورة حفظ عملنا:

نحن ماهرون في رصد الحركة. لذلك، فإنّ إضافة القليل من الحركة إلى عناصر الصفحة يمكن أن يضفي على الصفحة الحيوية.

يمكننا أيضًا استخدام التحريك لتقديم المحتوى على الصفحة:

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

يمكننا استخدام التحريك لرواية قصة:

‎‏ما سبق مقتبس من فيديو تعليمي للعبة "Portal". كتابة القصص لا يحتاج دائمًا إلى أن يكون حرفيًا. إذ يمكننا إضافة حركة معبّرة، مثل إظهار تغييرات البيانات في المخطط. بحيث يمكن للبيانات نفسها أن تروي قصة عبر الحركة.

مع القوة العظيمة تأتي المسؤولية

التحريك يفتح أمامنا آفاقًا كثيرة. إلا أنّ وجود الكثير من الأشياء المتحركة على الصفحة قد يشتت الانتباه. من الأفضل تجنّب التحريك عندما لا يكون ضروريًا، بحيث تكون لكل حركة تضيفها تأثير إيجابي.

قد يعني هذا الاكتفاء بتحريك عنصر صغير فقط على صفحتك. فالأفضل ما قل ودل كما قيل.

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

مصدر إلهام

التحريك له تاريخ طويل وغني. كتبت مؤخرًا منشورًا حول مبادئ التحريك على الويب بعنوان مبادئ التحريك في صفحات الويب باستخدام CSS. المبادئ مستمدة من كتاب ديزني (1981) Illusion of Life: Disney Animation.

إذا كنت ترغب في التعمق في موضوع التحريك، فابحث عن مقاطع الفيديو التي تخص Animator’s Survival Kit videos. يوتيوب مليء بمصادر الإلهام والأفكار.

للحصول على أمثلة متميزة وإبداعية، خصص بعض الوقت لتصفح Hover States. يعرض هذا الموقع جميع أنواع الأمثلة المبدعة للتحريك على الشبكة. موقع Dribbble.com مفيد أيضًا.

على سبيل المثال، إليك مثالًا رائعًا من Dribbble يعرض مبادئ التصميم الخاصة بجوجل (Google’s Material Design principles. البحث عن "animation" هو أحد الطرق الجيدة للعثور على أفكار ملهمة.

أتحقق كذلك بانتظام من مستجدات موقع CodePen. فهو مصدر رائع لصور وأمثلة التحريك.

ملخص

التحريك تقنية نافعة ومفيدة للغاية
إذا استُخدِم بشكل صحيح، يمكن أن يكون أداةً مفيدةً في التصميم
استخدمه لجذب الانتباه أو توصيل المعلومات
لا تبالغ فيه
إذا كنت تريد أن تتميز، فالتحريك قد يساعدك على ذلك

تمرين

فكّر في عملك ومشاريعك، وكيف يمكن أن يساعدك التحريك.

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

أخيرًا، ألق نظرة على مواقع مثل Hover States و Little Big Details و Dribbble. هذه المواقع ستساعدك كلما تحيّرت وأُغلِق عليك.