الرسوم المتحركة على شبكة الإنترنت في عصر ما بعد الفلاش

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

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

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

إذا كانت الصورة الثابتة تساوي ألف كلمة ، فما قيمة الرسوم المتحركة؟

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

كيف بدأت الرسوم المتحركة على الويب ، صعود صور GIF

خلال الأيام الأولى لشبكة الويب العالمية ، كانت الأمور ثابتة إلى حد ما ومملة. كانت صفحات الويب تعتمد في الغالب على التصميم الجرافيكي والتخطيطات من عالم الطباعة. ومع ذلك ، بذل بعض المصممين جهودًا متضافرة - على الرغم من التحديات التقنية والنطاق الترددي - لتضمين الأشكال المبكرة من الرسوم المتحركة على الويب لجعلها أكثر ديناميكية وجاذبية. كانت إحدى الإضافات الأولى للرسوم المتحركة بتنسيق GIF إلى أحد مواقع الويب في فيلم Batman Forever للمخرج Jeffrey Zeldman في عام 1995. وقد تم الترحيب بالزوار من خلال رحلة باتمان نحوهم ، والتي تم تحريكها كسلسلة صور.

كان موقع Batman Forever الترويجي أحد أشهر المواقع في ذلك الوقت. لقد ألهم مصممي الويب والمطورين الآخرين لدمج الرسوم المتحركة على الويب بتنسيق GIF كعنصر ملتوي ولافت للنظر في مواقعهم على الويب.

تقدم سريعًا لمدة 20 عامًا وصور GIF المتحركة موجودة الآن في كل مكان. إنهم على Twitter و Messenger و iMessage و WhatsApp و Skype و Instagram و Facebook. تعد ملفات GIF مناسبة للرسوم المتحركة ذات الحلقات القصيرة وتسلسلات الصور وحتى حلقات الفيديو القصيرة. لكن من العيوب المؤسفة أن تنسيق ملف GIF لا يحتوي على شفافية متغيرة ولا يدعم قناة ألفا ؛ لذلك ، تكون كافة وحدات البكسل إما معتمة بالكامل أو شفافة تمامًا.

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

فجر فلاش ويب للرسوم المتحركة

جاءت الطفرة الكبيرة للرسوم المتحركة على الويب مع تقديم Flash في عام 1996 عندما أعلنت شركة Macromedia عن المكون الإضافي للويب الخاص بها وأداة الرسوم المتحركة المصاحبة القائمة على الإطار: Macromedia Flash (بعد أن استحوذوا على FutureSplash Animator ، وهو برنامج رسوم متحركة متجه). لعب Flash دورًا رائدًا في جلب إمكانات جديدة إلى الويب. من الصوت والرسوم المتحركة إلى التفاعل والفيديو ، ساعد Flash في دفع الإنترنت إلى الأمام.

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

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

بالإضافة إلى ذلك ، تم تمكين التفاعل المعقد في Flash بواسطة ActionScript (AS) ، وهي لغة برمجة موجهة للكائنات تشبه JavaScript. تم تصميم أكشن سكريبت في البداية للتحكم في الرسوم المتحركة البسيطة ثنائية الأبعاد ولكنها تطورت لاحقًا إلى أداة معقدة.

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

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

ستيف جوبز

أنيميشن الويب اليوم

اليوم ، نظرًا لأن Flash أصبح قديمًا ، فلدينا احتياجات مختلفة للرسوم المتحركة على الويب. يجب أن تكون الأدوات مرنة وخفيفة. يجب على مصممي الويب إنشاء محتوى سريع الاستجابة وقابل للتكيف مع أجهزة مختلفة (سطح المكتب والجهاز اللوحي والجوال) ، مع مراعاة أبعاد الشاشة المختلفة والمتصفحات ونسب العرض إلى الارتفاع وكثافة البكسل والمزيد. يجب أن تعمل روائع الرسوم المتحركة على الويب على هاتف محمول مقاس 5 بوصات وبدقة 720 بكسل وحتى جهاز لوحي QXGA مقاس 9.7 بوصة وشاشة Retina 6K مقاس 32 بوصة.

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

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

يبدو أن HTML5 و CSS3 و JavaScript و SVG (رسومات قابلة للتطوير) هي أفضل الحلول للرسوم المتحركة على الويب. سيساعد استخدام تقنيات الويب الحديثة واللغات هذه في معالجة معظم المشكلات المذكورة أعلاه ، وليس كلها. ولكن من الجيد دائمًا أن تخطو بحذر ، خاصة عندما تكون في منطقة مجهولة ، كما أن ضمان الجودة والاختبار الشامل أمران ضروريان.

لماذا استخدام الرسوم المتحركة على شبكة الإنترنت؟

يمكن للرسوم المتحركة على الويب جذب انتباه الناس وجذب انتباههم لفترة أطول من صفحة الويب الثابتة وتوصيل فكرة أو مفهوم بشكل أكثر وضوحًا وفعالية. تنقل الرسوم المتحركة الممتازة على شبكة الإنترنت قصة وراء كل جزء من الحركة. الأمر كله يتعلق بإحياء الرسوم المتحركة بالمعنى و "الروح" (lat. anima).

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

يجب ألا ينظر مصممو الويب إلى الرسوم المتحركة على الويب من منظور تقني بحت ؛ يحتاجون إلى النظر إليه من منظور المستخدم.

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

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

من وجهة نظر منطقية ، يمكننا تقسيم الرسوم المتحركة على الويب إلى نوعين أساسيين:

• رسم متحرك ثابت وغير تفاعلي على الويب ، على سبيل المثال ، رسم متحرك بتنسيق GIF.
• رسم متحرك ديناميكي للويب مع تفاعل وتفاعل المستخدم الذي يتغير عند إدخال المستخدم.

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

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

إيجابيات وسلبيات الرسوم المتحركة على الويب

فيما يلي بعض إيجابيات وسلبيات تقنيات الرسوم المتحركة على الويب ، بما في ذلك الحلول القديمة التي لم تعد قيد الاستخدام.

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

أولاً ، نحتاج إلى التحقق من كيفية تأثير الرسوم المتحركة على تجربة المستخدم. هل ستعمل على تحسين تجربة المستخدم الخاصة بالموقع؟ يجب على المصممين:

• فحص تصميم الموقع الحالي (إن وجد)
• تحقق من الجمهور المستهدف والأنظمة الأساسية للأجهزة التي يستخدمونها
• تحقق من أوقات تحميل الموقع وحمل وحدة المعالجة المركزية
• اكتشف البدائل الأخرى
• راقب قابليتها للاستخدام

ليس من الجيد استخدام الرسوم المتحركة على الويب على موقع ما لمتابعة الاتجاهات ببساطة.

يجب التعامل مع قرار استخدام الرسوم المتحركة على الويب كأي قرار تصميم آخر ؛ يجب أن يوازن مصممو الويب بين الإيجابيات والسلبيات وأن يتأكدوا من عدم المساس بتجربة المستخدم. يجب عليهم أيضًا العمل مع المطورين للتأكد من متطلبات الكود والتأكد من أنهم لن يعلقوا برمز غير فعال قد يتعين تعديله على الطريق.

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

مزيد من القراءة على مدونة Toptal Design:

• كيفية إنشاء رسوم متحركة تحميل مخصصة لتقليل معدلات الارتداد
• إنشاء رسوم توضيحية تنحني العقل باستخدام Sketch و Looper في لمح البصر
• دليل مفصل خطوة بخطوة لرسوم متحركة لواجهة المستخدم مع مبدأ وسكتش
• إلهام أنيميشن الشعار لجعل علامتك التجارية أكثر ارتباطًا
• دليل خطوة بخطوة لإنشاء مقاطع فيديو توضيحية لمنتج متحرك