دليل تصميم الويب الكامل للرسوم المتحركة

صدق أو لا تصدق ، ليس لديك الكثير من الوقت لإقناع زوار موقعك بالبقاء. نافذتك في الواقع أقصر بكثير مما تفترض.

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

حسنا ، سيغادر بعضهم. لكن قد يختار آخرون البقاء.

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

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

ولكن مع الاستمرار لمدة دقيقة. من وظيفته الاحتفاظ بالزيارات على الويب بمجرد وصوله إلى الموقع؟

حسنًا ، بالطبع ، من الطبيعي أن تلوم مدير محتوى الموقع. و ربما تكون على صواب. لكن جزئيا فقط.

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

ماذا يعني هذا؟

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

أنا أتحدث عن أشياء مثل الرسوم المتحركة على شبكة الإنترنت.

ولماذا نقترح ذلك بالتحديد؟

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

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

صورة شخصية الكارتون المفضلة لديك التمشي عبر الشاشة. أو ربما يرقص شعار هاتفك حول الشاشة عند إعادة تشغيل الجهاز. ما لديهم من القواسم المشتركة؟

حسنا ، كلاهما أمثلة أساسية من الرسوم المتحركة.

يحدث الرسوم المتحركة بشكل أساسي عندما "ينقل عنصر ما إلى الحياة". ثم يبدأ بعرض شكل من أشكال الحركة.

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

ومع ذلك ، فقد بقي شيء واحد ثابت - مبادئ الرسوم المتحركة. في الواقع ، كتب جونسون في جونسون وفرانك توماس في وقت لاحق عنهم في كتابهم ، "وهم الحياة: ديزني للرسوم المتحركة". وهنا القائمة الكاملة:

  • استئناف
  • الرسم الصلب
  • مبالغة
  • توقيت
  • عمل ثانوي
  • قوس
  • بطيء في التباطؤ
  • متابعة وإجراء متداخلة
  • مباشرة إلى الأمام العمل وتشكل لوضع
  • التدريج
  • توقع
  • الاسكواش وتمتد

لا يزال الإثنا عشر إطارًا لتصميم الرسوم المتحركة حاليًا ، بما في ذلك الإعلانات المنشورة على الويب مثل مقاطع الفيديو و WebGL و SVG و CSS و GIF.

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

وهذا يطرح السؤال - متى يفترض استخدام الرسوم المتحركة؟

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

بالطبع ، هم لطيفون. وسيكونون بالتأكيد إضافات مثيرة للاهتمام على تخطيط موقعك.

ولكن هل تعلم؟ مستويات فعاليتها لاحقة هي شيء مختلف تماما. لذلك ، غني عن القول أن الرسوم المتحركة ليست مناسبة لجميع مشاريع مواقع الويب. والأهم من ذلك ، أنها ستكون فكرة سيئة لتبنيها عشوائيا.

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

لذا ، متى يجب أن تستفيد منها؟

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

كيف؟

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

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

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

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

على استعداد لبدء إنشاء الرسوم المتحركة على شبكة الإنترنت؟ في احسن الاحوال! لكن ، أين يجب أن تبدأ؟

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

ومع ذلك ، إليك بعض الأمثلة البارزة ، لكل منها حالة الاستخدام الفريدة الخاصة به:

  • js
  • 3D Lines الرسوم المتحركة مع Three.js
  • js
  • Flubber
  • اللون الرسوم المتحركة
  • jqClouds
  • Scrollissimo
  • سل الرسوم المتحركة
  • js
  • js
  • كسنومك الرسوم المتحركة
  • تحويل عندما
  • js
  • Rellax
  • الدعم الإداري والتشغيلي
  • js
  • ScrollTrigger
  • Scrollanim
  • js
  • js
  • js
  • js
  • Foxholder
  • Animatelo
  • المغلق
  • Animista
  • js
  • CAAT
  • AnimateMate
  • js
  • Stylie
  • GFX
  • js
  • js
  • js
  • jQuery DrawSVG
  • المحرك النفاث
  • لكمة
  • MixItUp
  • المغلق
  • المغلق
  • js
  • سيزر
  • CSSynth
  • الزعفران
  • CSShake
  • المغلق
  • js
  • صاروخ
  • عبور
  • المغلق
  • js
  • Popmotion
  • GSAP by GreenSock
  • js
  • js
  • CSS تحريك
  • إنه الثلاثاء
  • داهية
  • js
  • js
  • js
  • js
  • js
  • انتظر! حي
  • Motion UI
  • js
  • كسول خط الرسام
  • js
  • js
  • js
  • AnijS
  • js
  • الرسوم المتحركة السحرية
  • المغلق

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

تأثيرات تحوم

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

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

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

الرسوم المتحركة الخلفية

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

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

الرسوم المتحركة على غرار GIF

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

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

الرسوم المتحركة الانتقالية

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

صورة ائتمانات: شترستوك

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

تحميل الرسوم المتحركة

الحقيقة هي- 47٪ من المستهلكين عبر الإنترنت توقع أن يتم تحميل صفحات الويب خلال ثوانٍ 2 على الأقل. إذا فشلت في تحقيق ذلك ، فإن كل ثانية إضافية تترجم إلى عدد أقل من التحويلات بنسبة 7٪.

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

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

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

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

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

الملاحة والقائمة الرسوم المتحركة

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

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

معرض وعرض الشرائح

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

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

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

النتيجة

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

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

رأس الصورة مجاملة من ألفري دافيلا vaneltia

بوجدان رانسيا

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