محملات GIF مقابل الرسوم المتحركة المتجهة: لماذا تستبدل الفرق GIFs المتحركة في واجهة المستخدم
لماذا تعتبر GIFs المتحركة غير مناسبة لمحملات واجهة المستخدم والأيقونات، وما الذي يجب استخدامه بدلاً من ذلك (CSS، SVG، Lottie، الفيديو، أوقات التشغيل المستندة إلى الحالة) وكيفية الاختيار.
الوجبات الجاهزة الأساسية
تقتصر صور GIF المتحركة على لوحات مكونة من 256 لونًا على الأكثر، ولها شفافية تشغيل أو إيقاف تشغيل، وطمس عند تغيير الحجم، ولا يمكنها التفاعل مع حالة التطبيق. بالنسبة لمحملات واجهة المستخدم والأيقونات، عادةً ما تكون الرسوم المتحركة CSS أو SVG أخف وأكثر وضوحًا؛ تعمل Lottie على الرسوم التوضيحية الأكثر ثراءً؛ وتكون أوقات التشغيل المستندة إلى الحالة مثل ExodeUI أو Rive هي الأفضل عندما يجب أن تتغير الرسوم المتحركة مع التحميل والنجاح والخطأ.
ما يمكن لـ GIF فعله وما لا يمكنه فعله
يوضح دليل تنسيق الصورة الخاص بـ MDN أن كل بكسل GIF عبارة عن فهرس في لوحة مكونة من 256 لونًا على الأكثر، ويلاحظ أن أداء التنسيقات القديمة مثل GIF ضعيف مقارنة بالتنسيقات الأحدث مثل WebP وAVIF. بالنسبة لواجهة المستخدم، تتمثل المشكلات العملية في التدرجات اللونية، والحواف الخشنة على الخلفيات الشفافة، والقياس الضبابي على الشاشات عالية الكثافة، وعدم وجود طريقة للاستجابة لما يفعله التطبيق.
ما يجب استخدامه بدلا من ذلك
اختر ما يجب أن تفعله الرسوم المتحركة:
- الدوار البسيط أو النبض: الرسوم المتحركة CSS أو SVG المضمنة. صغيرة وحادة وسهلة الإيقاف مؤقتًا لتقليل الحركة.
- حلقة أو أيقونة مصورة: Lottie أو SVG المتحركة. ناقل، قابل للتطوير، صغير للأعمال الفنية البسيطة.
- لقطات فوتوغرافية أو معقدة: فيديو (WebM أو MP4) أو WebP/AVIF متحرك، وليس GIF.
- أداة التحميل التي تتحول إلى نجاح أو خطأ: وقت تشغيل قائم على الحالة مثل ExodeUI أو Rive، مدفوعًا بحالة تطبيقك.
يجب أن يعرف اللوادر ما يحدث
يتكرر GIF بنفس الطريقة سواء استغرق الطلب ثانية واحدة أو دقيقة واحدة، ولا يمكن أن يصبح علامة اختيار عند انتهاء العمل. يمكن للمحمل المستند إلى الحالة الانتقال من التحميل إلى النجاح أو الخطأ وإظهار التقدم، وهو ما يخبر الأشخاص بما هو أكثر بكثير من مجرد صورة تدور.
إمكانية الوصول
لا يمكن أن تحترم حلقات GIFs إعداد الحركة المنخفضة من تلقاء نفسها. يمكن إيقاف الرسوم المتحركة CSS وSVG ووقت التشغيل مؤقتًا أو تبسيطها عندما يطلب المستخدم حركة أقل. قم أيضًا بمنح أدوات التحميل تسمية يمكن الوصول إليها، مثل "جاري تحميل النتائج"، حتى يعرف مستخدمو قارئ الشاشة ما يحدث.
مفتاح Principle للتذكر
- تحتوي لوحات GIF على 256 لونًا على الأكثر ويكون مقياسها سيئًا
- استخدم CSS أو SVG للرافعات البسيطة
- استخدم Lottie للحلقات المصورة والفيديو للقطات
- استخدم وقت تشغيل يعتمد على الحالة عندما يتحول التحميل إلى نجاح أو خطأ
- دعم الحركة المنخفضة وإضافة تسميات يمكن الوصول إليها
الأسئلة المتداولة
المصادر
- Image file type and format guide — MDN مستندات الويب
- lottie-web — جيثب (إير بي إن بي)
- prefers-reduced-motion — MDN مستندات الويب