عندما يتطلب التصميم حركة في موقع أو تطبيق، يُطرح عادةً خياران متجهيان: SVG المتحرك و Lottie. كلاهما يتكيف مع أي شاشة دون تشويش، وكلاهما في الغالب أخف كثيرًا من الفيديو أو GIF في الحركة ذات الطابع التوضيحي. والفرق في طريقة صنع كل منهما وطريقة تشغيله ومن يستطيع صيانته.
SVG المتحرك
SVG صيغة صور متجهية يفهمها المتصفح مباشرة. ويمكن تحريكها باستخدام CSS أو SMIL أو مكتبة JavaScript مثل GSAP. لا تحتاج إلى مشغّل، ويمكن تنسيق كل شكل فيها والتحكم فيه من الشيفرة، كما يمكنها الاستجابة لمرور المؤشر والتمرير والنقر وألوان السمة. لذلك فهي مناسبة جدًا للأيقونات والشعارات ومؤشرات التحميل والتفاعلات الصغيرة في الواجهة. أما نقطة ضعفها فهي الحركة المعقدة: كتابة شيفرة لشخصية تمشي أو لمشهد طويل عمل بطيء، ومعظم مصممي الموشن لا يعملون بهذه الطريقة.
Lottie
Lottie صيغة حركة مبنية على JSON طُوّرت في Airbnb. تُصمَّم الحركات عادةً في Adobe After Effects، وتُصدَّر بإضافة Bodymovin، ثم يشغّلها مشغّل Lottie: مكتبة lottie-web في المتصفح ومكتبات أصلية على iOS و Android. يواصل مصممو الموشن العمل بأداتهم المعتادة، ويعمل الملف نفسه في الموقع وتطبيقات الجوال مع الحفاظ على التوقيت ومنحنيات الحركة. أما المقابل فهو مكتبة مشغّل يجب تحميلها، وميزات في After Effects لا يدعمها Lottie، وملفات يكبر حجمها عندما تتضمن صورًا نقطية. وتساعد صيغة dotLottie في تقليل الحجم عبر ضغط الحركات وتجميعها.
كيف تختار
- اختر SVG للأيقونات والحركات الصغيرة في الواجهة وكل ما يجب أن يتفاعل مع المستخدم أو يتبع ألوان السمة.
- اختر Lottie للمشاهد التوضيحية الأطول وشاشات التعريف بالتطبيق وحركة الشخصيات المصممة في After Effects.
- اختر Lottie عندما يجب أن تعمل الحركة نفسها في الموقع وفي تطبيقات iOS و Android الأصلية.
- اختر الفيديو، مثل MP4 أو WebM، عندما تتضمن الحركة صورًا فوتوغرافية أو مشاهد ثلاثية الأبعاد أو خامات كثيفة، حيث تفقد الرسوم المتجهية كفاءتها.
- وأيًا كان اختيارك، احترم إعداد prefers-reduced-motion، واختبر حجم الملف وسلاسة الحركة على هاتف متوسط الإمكانيات.
اختر الصيغة التي تناسب من يصنع الحركة وكيف يجب أن تتصرف.