أساسيات التخفيف

تعرَّف على كيفية تخفيف الصور المتحركة وترجيحها.

Paul Lewis

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

ملخّص

• يساعد التخفيف على جعل الصور المتحركة تبدو طبيعية أكثر.
• اختر الرسوم المتحركة المريحة لعناصر واجهة المستخدم.
• تجنب الرسوم المتحركة المبسّطة قليلاً للداخل أو الخارج ما لم تتمكن من إبقائها قصيرة؛ أنهم يميلون إلى الشعور بالبطء تجاه المستخدمين النهائيين.

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

تحسين الكلمات الرئيسية

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

في ما يلي بعض الكلمات الرئيسية التي يمكنك استخدامها في CSS:

• linear
• ease-in
• ease-out
• ease-in-out

المصدر: CSS Transitions, W3C

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

الرسوم المتحركة الخطية

يُشار إلى الصور المتحركة التي لا تستخدم أي نوع من الإرخاء على أنها خطية. يبدو الرسم البياني للانتقال الخطي كما يلي:

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

سواء كنت تعمل على ترميز الصور المتحركة باستخدام CSS أو JavaScript، ستجد دائمًا خيارًا للحركة الخطية.

مشاهدة صورة متحركة خطية

لتحقيق التأثير أعلاه باستخدام CSS، ستبدو التعليمة البرمجية على النحو التالي:

transition: transform 500ms linear;

تكبير الصور المتحركة

يتسبب الإرخاء في بدء الرسوم المتحركة بسرعة أكبر من الرسوم الخطية، كما أن لها أيضًا تباطؤ في النهاية.

عادةً ما يكون التخفيف هو الأفضل لعمل واجهة المستخدم، لأن البدء السريع يمنح الرسوم المتحركة شعورًا بالاستجابة، مع الاستمرار في السماح بالبطء الطبيعي في النهاية.

مشاهدة صورة متحركة بسيطة

هناك العديد من الطرق التي تتيح لك تنفيذ ذلك بسهولة، ولكن أبسطها هو الكلمة الرئيسية ease-out في CSS:

transition: transform 500ms ease-out;

تحريك الصور المتحركة بسهولة

تبدأ الرسوم المتحركة المبسّطة ببطء وتنتهي بسرعة، وهو عكس الصور المتحركة المبسّطة.

يشبه هذا النوع من الصور المتحركة سقوط حجر ثقيل، حيث يبدأ ببطء ويرتطم بالأرض بسرعة مع ارتداد قاتِل.

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

مشاهدة صورة متحركة سريعة

لاستخدام رسم متحرك يسهُل الانتقال إليه، تمامًا كما هو الحال مع الرسوم المتحركة الخطية والسريعة، يمكنك استخدام الكلمة الرئيسية الخاصة بها:

transition: transform 500ms ease-in;

تكبير الصور المتحركة وإفلاتها

إنّ الراحة في الداخل والخارج يشبهون إرخاء السيارة أو تباطؤها، وفي حال استخدامها بحكمة، يمكن أن يكون لها تأثير كبير بدلاً من التخفيف من حدّتها.

لا تستخدم مدة طويلة جدًا من الرسوم المتحركة، نظرًا إلى بطء بدء الرسم المتحرك. شيء ما في النطاق من 300-500 مللي ثانية عادة ما يكون مناسبًا، ولكن العدد الدقيق يعتمد بشكل كبير على مظهر مشروعك. ومع ذلك، بسبب البداية البطيئة وسرعة المنتصف وبطء النهاية، هناك تباين متزايد في الرسوم المتحركة، وهو ما قد يكون مُرضيًا تمامًا للمستخدمين.

الاطّلاع على صورة متحركة تظهر في وضع الإرخاء

للحصول على صورة متحركة يسهُل الانتقال إليها، يمكنك استخدام كلمة CSS الرئيسية واحدة (ease-in-out):

transition: transform 500ms ease-in-out;