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

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

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

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

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

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

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

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

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

الرسوم المتحركة من واجهة المستخدم الحركية

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

الرسوم المتحركة من دارين على Dribbble

تنشيط موقعك

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

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

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

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

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

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

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

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

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

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

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

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

رسوم متحركة من UXPin لموقع Tom Cole Architecture

تحوم

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

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

الرسوم المتحركة من ديزاين شاك

التمرير

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

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

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

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

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

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

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

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

الرسوم المتحركة من قبل Femme Fatale

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

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

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

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

الرسوم المتحركة من Rollpark

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

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

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

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

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

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

ختاماً

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

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

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

قم بإنشاء الرسوم المتحركة الخاصة بك مع هذه الدروس!

• كيفية إنشاء رسوم متحركة SVG باستخدام CSS
• كيفية استخدام التحولات والتحولات في CSS3 لإنشاء الرسوم المتحركة