3.4تأثيرات الحركة والرسوم المتحرّكة
الأساسي في 30 ثانية
- رسوم الدخول: عنصر يظهر (تلاشٍ، انزلاق)؛ تأثيرات التمرير (Pro): يتحرّك عند التمرير؛ المؤشّر: يتفاعل مع الفأرة.
- المبدأ الموجِّه: «الأقلّ هو الأكثر» — الرسم يُعزّز بتقتير، لا يُشتّت.
- الرسوم المفرطة تُبطئ وتُزعج (أداء، وصولية) — خاصّة التمرير/الفأرة.
الخيط الناظم — نادية تُجرّع التأثيرات
مُغرَاة بالرسوم، تضعها نادية في كل مكان: عناوين تطير، صور بارالاكس، أزرار تومض. النتيجة: الصفحة «تتحرّك» كثيرًا، تبدو بطيئة وتُتعِب. تُنظّف: تلاشٍ خفيف عند ظهور البطاقات، تأثير خفيّ عند التمرير بالمؤشّر على الأزرار. مُقتصِد وواضح.
تكملة 3.3 — عزّز دون إثقال.
1. ثلاث عائلات من التأثيرات
رسوم الدخول تُظهِر عنصرًا بتأثير (تلاشٍ، انزلاق، تكبير) حين يدخل الشاشة. تأثيرات التمرير (Pro) تُحرّك عناصر عند التمرير (بارالاكس، إزاحة). تأثيرات المؤشّر (hover) تتفاعل مع مرور الفأرة (تغيير لون، ارتفاع خفيف).
بجرعة جيّدة، تمنح حياة وتُرشد العين (مثلًا إظهار البطاقات واحدة واحدة).
2. الاعتدال، الأداء، الوصولية
المبدأ الموجِّه: «الأقلّ هو الأكثر». الرسوم تُعزّز بتقتير؛ وبإفراط، تُشتّت، وتُعطي انطباعًا بالـبطء وقد تُزعج الوصولية (بعض الناس حسّاسون للحركة). تأثيرات التمرير والفأرة هي الأكثر كلفة.
قاعدة نادية: رسم فقط إن خدم القراءة؛ خفيّ؛ ومُتحقَّق منه على الجوّال (حيث قد يتباطأ التمرير المُتحرّك).
🔎 مثال ملموس — تجريع التأثيرات (حالة نادية)
أبقِ: تلاشٍ خفيف عند ظهور البطاقات (دخول).
أبقِ: ارتفاع خفيف للأزرار عند التمرير بالمؤشّر.
احذف: بارالاكس على كل الصفحة (ثقيل).
احذف: عناوين «تطير» وأزرار تومض.
→ تحقّق من السلاسة على الجوّال.النتيجة: موقع حيّ لكن مُقتصِد وسلس.
الدرس: «الأقلّ هو الأكثر».
مفردات القسم
- رسوم الدخول
- عنصر يظهر بتأثير (تلاشٍ، انزلاق، تكبير) عند دخوله الشاشة.
مثال بسيط: بطاقات الأعمال تظهر بتلاشٍ.
ما ليس كذلك: جعل كل عنصر يطير ويرتدّ.
رد فعل: دخول خفيّ يُرشد العين.
- تأثيرات التمرير (Pro)
- عناصر تتحرّك عند التمرير (بارالاكس، إزاحة).
مثال بسيط: بارالاكس خفيف على قسم أجواء واحد.
ما ليس كذلك: بارالاكس في كل مكان (ثقيل، مُتعِب).
رد فعل: تمرير مُتحرّك عرضيّ، لا في كل مكان.
- تأثيرات المؤشّر (hover)
- تغيير عند مرور الفأرة (لون، ارتفاع، ظلّ).
مثال بسيط: زر يرتفع قليلًا عند التمرير بالمؤشّر.
ما ليس كذلك: ومضات أو تغييرات حادّة.
رد فعل: مؤشّر خفيّ، متّسق، دون إفراط.
- الاعتدال («الأقلّ هو الأكثر»)
- عزّز بتقتير: الرسم يخدم القراءة، لا يُشتّت.
مثال بسيط: 1-2 تأثير خفيّ ومفيد.
ما ليس كذلك: تكديس الرسوم «للمظهر العصريّ».
رد فعل: عند الشكّ، احذف الرسم.
- الأداء والوصولية
- الرسوم المفرطة تُبطئ وتُزعج (الحساسية للحركة).
مثال بسيط: تحقّق من السلاسة على الجوّال قبل التسليم.
ما ليس كذلك: الحكم بالسلاسة على حاسوب قويّ فقط.
رد فعل: اختبر التأثيرات على جوّال حقيقيّ.
في التطبيق — تجريع الرسوم
- أضف رسم دخول خفيًّا (تلاشٍ) لمجموعة بطاقات.
- أضف تأثير مؤشّر خفيًّا على الأزرار (ارتفاع/لون).
- تجنّب البارالاكس المُعمَّم؛ احجزه لقسم قويّ، إن كان مفيدًا فعلًا.
- اختبر السلاسة على جوّال حقيقيّ واحذف ما يتباطأ أو يُشتّت.
نصّ جاهز للقول — تبرير اقتصاد التأثيرات (20 ث)
«أضفتُ بعض الرسوم الخفيّة — تظهر الأعمال بلطف، وتتفاعل الأزرار عند التمرير بالمؤشّر. أتجنّب عمدًا التأثيرات المُثقَلة: تُبطئ الموقع وتُتعِب الزائر. الهدف موقع حيّ لكن سريع ومريح، خاصّة على الجوّال.»
اجعل الاقتصاد خيار أداء وراحة.
قالب للنسخ واللصق — تحقّق الرسوم
رسم دخول (خفيّ): _______________
تأثير مؤشّر (خفيّ): _______________
بارالاكس / تمرير: لا شيء / قسم قويّ واحد
تأثيرات محذوفة (إفراط): _______________
السلاسة مُختبَرة على الجوّال: نعم / لاموقع تعريفي مُقتصِد
تلاشٍ عند الظهور، مؤشّر خفيّ: كافٍ تمامًا.
قسم أثر
بارالاكس وحيد على الشريط، إن سمح الأداء.
الجوّال
خفّف تأثيرات التمرير، غالبًا نهِمة على الشاشة الصغيرة.
الوصولية
ابقَ خفيًّا: بعض الناس حسّاسون للرسوم.
✓ ممارسات جيدة
- طبّق «الأقلّ هو الأكثر».
- احجز البارالاكس لقسم، لا كل الصفحة.
- اختبر السلاسة على الجوّال.
✗ أخطاء شائعة
- تكديس الرسوم «للمظهر العصريّ».
- بارالاكس مُعمَّم (ثقيل).
- الحكم بالسلاسة على حاسوب جيّد فقط.
النقاط الأساسية
- دخول (ظهور)، تمرير (Pro)، مؤشّر.
- «الأقلّ هو الأكثر»: خفيّ ومفيد.
- الإفراط يُبطئ ويُزعج الوصولية.
- اختبر التأثيرات على جوّال حقيقيّ.
تحدّي 48 ساعة — طبّق غدًا
أضف تلاشي دخول لبعض البطاقات ومؤشّرًا خفيًّا للأزرار، احذف أي بارالاكس مُعمَّم، ثم تحقّق من السلاسة على جوّال حقيقيّ. سجّل ما حذفت. 20 دقيقة.
- أضيف رسومًا خفيّة ومفيدة.
- أتجنّب البارالاكس المُعمَّم.
- أختبر السلاسة على الجوّال.
أسئلة شائعة
هل تُبطئ الرسوم الموقع؟
قد تفعل، خاصّة تأثيرات التمرير (بارالاكس) والفأرة، لا سيّما على الجوّال. ومن هنا مبدأ «الأقلّ هو الأكثر» والاختبار على هاتف حقيقيّ.
أي رسم أُفضّل للبداية؟
رسم دخول خفيّ (تلاشٍ) وتأثير مؤشّر خفيّ على الأزرار يكفيان لمنح حياة دون إثقال.
هل تطرح الرسوم مشكلة وصولية؟
إفراط الحركة قد يُزعج الحسّاسين. ابقَ خفيًّا وتجنّب التأثيرات العدوانية أو الدائمة.
وضعت نادية رسومًا في كل مكان وتبدو الصفحة بطيئة ومضطربة. أي مبدأ تُطبّق؟