كيفية إضافة الرسوم المتحركة استراتيجيًا إلى موقعك

استخدام الرسوم المتحركة في تصميم الويب ليس شيئًا جديدًا تمامًا.

تذكر حقبة طويلة من تدوير صور متحركة ثلاثية الأبعاد؟

ماذا عن حياة وموت الفلاش؟

بعد أن حظرت Apple استخدام Flash على جميع أجهزتهم المحمولة ، سارع المصممون إلى اكتشاف طريقة لاستعادة الرسوم المتحركة في اللعبة. بفضل إبداع مطوري الويب والمصممين ، لدينا الآن سحر انتقالات CSS3 ، ورسوم متحركة SVG ، وصور GIF عالية الجودة ، وبالطبع مقاطع الفيديو المتحركة التي تم إنشاؤها باستخدام برامج مثل After Effects و Blender.

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

أصبحت الرسوم المتحركة الآن توقعًا.

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

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

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

تنشيط موقعك

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

يمكن أن يساعد استخدام برنامج مثل Adobe XD في عملية تجربة الرسوم المتحركة المختلفة لوضعها بشكل استراتيجي على موقعك. إذا كنت ترغب في البناء مباشرة في WordPress ، فإن الخيار الرائع هو Divi Builder ، والذي يأتي مع الكثير من إمكانيات الرسوم المتحركة داخل كل وحدة.

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

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

وظيفية أو جمالية

الرسوم المتحركة لها استخدامان في تصميم الويب ؛ الوظيفة والجماليات.

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

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

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

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

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

تحوم

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

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

التمرير

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

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

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

مع المقدار المناسب من الرسوم المتحركة الجمالية ، يمكن أن يكون موقعك لا يُنسى.

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

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

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

إبداع غير محدود

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

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

أو ضع التوضيح متساوي القياس والتمرير المتحرك معًا وستحصل على موقع رائع مثل RollPark.

التحسين دائمًا للجوال!

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

في كلتا الحالتين ، فإن التحقق دائمًا من الهاتف المحمول وتحسين الرسوم المتحركة الخاصة بك لجميع التنسيقات سيجعل موقعك أفضل بكثير!

أدوات لمساعدتك على تحريك موقعك

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

• مجموعة من مكتبات الرسوم المتحركة المجانية
• قدرات الرسوم المتحركة DIVI Builder
• منشئ خلفية الجسيمات
• طريقتان لإنشاء خلفيات جسيمات بسيطة باستخدام CSS
• استخدام الرسوم المتحركة SVG

ختاماً

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

عند إنشاء موقعك الإلكتروني التالي (أو تحديث موقعك الحالي) ، هل ستضيف بعض الرسوم المتحركة إلى التصميم؟ تذكر: من الأفضل أن تقوم بالتجربة على موقع مرحلي أو موقع محلي قبل إضافة أي كود جديد بشكل دائم إلى المواقع الحية!

ما نوع الرسوم المتحركة لموقع الويب الذي ستجربه بعد ذلك؟