حركات الويب ما بعد عصر الفلاش (Flash)

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

فكرة جيدة أن نستخدام نوعًا من التصوُّر لرسم صورة كاملة للقصة التي نحاول سردها، إلا أن استخدام الحركات لتوصيل الرسالة يمكن أن يكون أفضل؛ إذا كانت الصورة تستحق ألف كلمة، فكم ستستحق من الحركات لوصفها؟

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

كيف بدأت حركات الويب

منذ أيام شبكة الويب القديمة، كان هناك جهودًا لتنفيذ العناصر المتحركة في نوافذ منبثقة لأجزاء مهمة من الموقع؛ ليبدو أكثر ديناميكية وجاذبية، كما في موقع Jeffrey Zeldman لِباتمان 95، إذ كان تحليق باتمان نحو المستخدم عبارة عن حركة مؤلفة من سلسلة من الصور، كانت GIF واحدة من الرسوم المتحركة الأولى على صفحة الويب وفي ذلك الموقع الذي كان واحدًا من أكثر الصفحات شيوعًا في ذلك الوقت، ما أَلْهم مطوري الويب للجمع بين الرسوم المتحركة GIF كعنصر مُراوغة في مواقعهم.

الصور التي من النوع GIF مناسبة لتكرار قصير لحركة تمتد على نطاق ضيق من البكسلات، أو حتى بعض الفيديوهات. لكن ليس لديها شفافية متغيرة، ولا تدعم قناة الشفافية (alpha) في لوحة ألوانها، وجميع البكسلات فيها إما غير شفافة أو شفافة تمامًا.

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

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

قدَّم Flash لمحة عن إمكانيات تصميم الويب الديناميكي، الذي يتيح للمصممين إعادة الفحص وتجريب الأأداء ما سبب فترة من التطور السريع في حركات الويب.

رسوم Flash المتحركة بُنيَت بِواسطة Flash أو برمجات التحريك المماثلة، وغالبًا ما يتم توزيعها بتنسيق ملف SWF، وهي خفيفة الحجم وسهلة الصنع. فملف يستخدم الصوت مع وضوح وبدون فقدان في دقة رسومات المتجهات وبحجم كيلوبايتات قليلة يجعل التحريك عملية بسيطة ولا تضيف كثيرا إلى وقت تحميل الصفحة. التفاعل في Flash ممكنًا من خلال (Action Script (AS، لغة برمجة كائنية التوجه مثل javascript. تم تصميم AS في البداية لتدير تحريكات المتجهات ذات بعدين (2d).

حركات Flash لم تصمَّم لتكون متجاوبة مع جميع أحجام الشاشات، و لم تعمل بشكل جيد على جميع الأجهزة وفي النهاية استُبعدت من الأجهزة المحمولة الشهيرة. رغم كون حجم الملف صغيرًا موازنةً بغيره، إلا أن Flash لم تكن هي الأمثل، نظرًا لبعض المشكلات التي شملتها، أهمها المتعلق بالاستهلاك الكبير لوحدة المعالجة المركزية (CPU)، فقد كانت هذه بالطبع مشكلة على الهواتف الذكية والأجهزة الأخرى. جاءت نهاية عصر Flash بعدما قرر Steve Job عدم دعمها على أجهزة Apple المحموله.

قال Jobs:

اقتباس

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

حركات الويب هذه الأيام

لدينا في هذه الأيام احتياجات مختلفة ويجب أن تكون أدوات تصميم الحركات مرنة وخفيفة. يجب على المطورين إنشاء محتوى للعرض على أجهزة مختلفة، ومراعاة طرق الإدخال المختلفة، والمتصفحات، ونسب الارتفاع، وكثافة نقاط الشاشة (pixel)، وهلم جرًا. من الواضح أن الحركات يجب أن تعمل تمامًا ابتداءً من هاتف ذكي بدقة 720 بكسل 5 بوصة وحتى جهاز QXGA بحجم 9.7 بوصة أو شاشة UHD مقاس 29 بوصة.

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

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

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

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

لماذا تستخدم الحركات في المواقع

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

اقتباس

لا تنظر إلى الحركات من منظور تقني بحت، بل عليك أن تنظر لها من منظور المستخدم أيضًا.

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

إن لم تكن الحركات سلسة، يمكن أن ينظر إليها المستخدم على أنها خطأ ويَفقِد الحافز لمزيد من الاستكشافات حول الموقع نفسه.

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

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

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

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

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

إيجابيات وسلبيات حركات الويب

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

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

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

• تفحُّص عن كثب للتصميم الحالي (إن وجد).
• تفحص الجمهور المستهدف ومنصات أجهزته.
• تحقق من زمن تحميل الموقع وتحمُّل وحدة المعالجة المركزية CPU.
• استعرِض البدائل الأخرى.
• دائما ضع خاصية سهولة الإستخدام في الحسبان.

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

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

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

ترجمة -وبتصرف- للمقال Web Animation In The Post-Flash Era لصاحبته Ana Gregurec