كيفية إنشاء رسوم متحركة تحميل مخصصة لتقليل معدلات الارتداد

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

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

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

في هذا البرنامج التعليمي ، سنستخدم Sketch لإنشاء أشكال أساسية ومبدأ لإنشاء رسوم متحركة بسيطة مخصصة للتحميل بسرعة. (كلا التطبيقين مخصصان لنظام التشغيل Mac.) ستتعلم كيفية إنشاء الرسوم المتحركة الملونة للتحميل التي يستخدمها Trello و Flickr و Slack والمزيد.

دعنا نذهب اليها.

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

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

ضع الأشكال الأربعة بطريقة تنشئ مربعًا وهميًا بمسافة 150 بكسل بين كل جانب. قم بتطبيق أربعة ألوان مختلفة (# 35BA90 أخضر ، # 69CADD أزرق ، # EBA900 أصفر ، # E20661 وردي).

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

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

قم بتطبيق مشغل "تلقائي" على لوح الرسم ، ثم قم بتمديد كل مستطيل مستدير الزوايا إلى الجانب الآخر من لوح الرسم بطول 295 بكسل. امنح عتامة بنسبة 75٪ لكل شكل على لوحتي الرسم.

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

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

نصيحة: عند الانتقال إلى "الرجوع إلى الأصل" ، يمكنك تدوير المجموعة الرئيسية بمقدار -30 درجة لتبدو أكثر شبهاً بتطبيق Slack. أيضًا ، يمكنك تغيير وتيرة الرسوم المتحركة داخل لوحة "Animate" وتطبيق تأثير "Ease both" لتنعيم الانتقالات.

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

باستخدام Sketch ، ارسم مربعًا أزرق بحجم 100 بكسل. ارسم مستطيلًا أبيض بعرض 60 بكسل وارتفاع 140 بكسل. قم بمحاذاة أعلى يسار المربع السابق بهامش علوي وأيسر بمقدار 30 بكسل. قم بتكرار ذلك المستطيل الأبيض ، وقم بمحاذاة إلى يمين المربع بهامش أيمن 30 بكسل ، وقم بتقليل ارتفاعه إلى 70 بكسل.

قم باستيراد اللوحة الفنية إلى Principle وقم بتطبيق المشغل "Auto" لإنشاء إطار رئيسي جديد. على اللوحة الفنية الجديدة ، قم بعكس ارتفاعات المستطيلات البيضاء (اجعل ارتفاع المستطيل الأيسر 70 بكسل والمستطيل الأيمن 140 بكسل). قم بتطبيق تأثير "Ease-both" في لوحة "Animate" لتسهيل الانتقال.

دائرة المتداول

تتبع دائرة على سكتش. قم بتطبيق حد 10 بكسل بقيمتي "Dash" و "Gap" وبدون تعبئة. استخدم لون "التدرج الزاوي" للحدود التي ستبرز تأثير التدوير الذي ستنشئه لاحقًا.

افتح ملف رئيسي جديد واستخدم زر "استيراد" لنقل الدائرة من سكتش. تطبيق اثنين من المشغلات "تلقائي" على التوالي.

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

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

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

ارسم دائرة زرقاء ودائرة وردية جنبًا إلى جنب. قم باستيرادها إلى Principle وقم بتطبيق مشغل "تلقائي" لإنشاء لوحة فنية جديدة.

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

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

نوع التحميل

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

تطبيق مشغل "تلقائي" خمس مرات على التوالي. اجعل المشغل الخامس من آخر حلقة للوح الرسم يعود إلى لوح الرسم الأولي.

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

تحميل LOADING. LOADING .. LOADING… LOADING .. LOADING.

الآن يمكنك معاينة الرسوم المتحركة التي أنشأتها للتو.

النقاط النابضة

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

تطبيق مشغل "تلقائي" أربع مرات على التوالي.

على لوح الرسم الثاني ، قم بتقليل النقطة الثانية إلى 30 بكسل.

على لوح الرسم الثالث ، قلل النقطة الثانية إلى 0 بكسل والأولى إلى 30 بكسل.

على لوح الرسم الرابع ، قم بتغيير حجم النقطة الثانية إلى 30 بكسل وتقليل النقطة الأولى إلى 0 بكسل.

على لوح الرسم الخامس ، قلل من حجم النقطة الأولى إلى 30 بكسل واربط لوح الرسم مرة أخرى باللوحة الأولى باستخدام مشغل "تلقائي".

رولينج دوت

ضع خمس نقاط في الترتيب الذي قد تجده على زهر من ستة جوانب. قم باستيراد لوح الرسم إلى Principle وقم بتوسيطه.

قم بتطبيق مشغل "تلقائي" على لوح الرسم.

على لوح الرسم الجديد ، قم بتدوير مجموعة النقاط بمقدار 360 درجة.

اربط لوحة الرسم الثانية مرة أخرى بالأول باستخدام مشغل "تلقائي".

الدائرة النابضة

ابدأ بدائرة مقاس 50 بكسل محاذاة للوسط داخل دائرة مقاس 150 بكسل لها حد 5 بكسل ولكن بدون تعبئة.

تطبيق مشغل "تلقائي" ثلاث مرات متتالية.

على لوح الرسم الأول ، صغّر حجم دائرة الخط إلى 50 بكسل والدائرة الداخلية إلى 10 بكسل.

على لوح الرسم الثالث ، قم بقياس دائرة الخط حتى 200 بكسل واعطها عتامة بنسبة 0٪. مقياس الدائرة الداخلية حتى 150 بكسل ومنحها عتامة بنسبة 50٪.

على لوح الرسم الأخير ، قم بقياس الدائرة الداخلية حتى 200 بكسل ومنحها عتامة بنسبة 0٪. قلص دائرة الخط إلى 50 بكسل واعطها عتامة بنسبة 25٪.

قم بتطبيق مشغل "تلقائي" على لوح الرسم الأخير. تصغير حجم الدائرة الداخلية إلى 10 بكسل مع عتامة 50٪.

اربط آخر لوحة فنية بأول لوحة باستخدام مشغل "تلقائي".

القفز النقاط

اصطف ثلاث دوائر مثالية بارتفاع 50 بكسل مع تباعد 50 بكسل بينها.

تطبيق مشغل "تلقائي". على لوح الرسم الثاني ، حرك الدائرة الأولى للأعلى بمقدار 50 بكسل.

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

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

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

قم بتطبيق مشغل "تلقائي" على اللوحة الخامسة. على لوح الرسم السادس ، حرك الدائرتين الأخيرتين لأسفل بمقدار 50 بكسل.

أخيرًا ، ارجع إلى أول لوح رسم ، وانقل النقطة الأولى بمقدار 50 بكسل لأعلى ، واربط لوح الرسم الأخير بالأول باستخدام مشغل "تلقائي". يمكنك معاينة النتيجة النهائية.

محمل كلاسيكي

تتبع دائرة في Sketch ، واعطها حدًا رماديًا 20 بكسل بدون تعبئة.

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

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

انتقل إلى Principle واستورد عمل الرسم التخطيطي باستخدام الزر "استيراد".

قم بتطبيق مشغل "تلقائي" على لوح الرسم الأول وقم بتدوير الدائرة الزرقاء 360 درجة.

قم بتطبيق مشغل "تلقائي" ثانٍ على لوح الرسم الثاني. أعد تسمية طبقة الدائرة الثالثة التي تم إنشاؤها إلى "نسخ" واربطها مرة أخرى بلوحة الرسم الأولى باستخدام مشغل "تلقائي".

خاتمة

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

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

• • •

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

• تجربة مستخدم التجارة الإلكترونية - نظرة عامة على أفضل الممارسات (باستخدام مخطط المعلومات الرسومي)
• أهمية التصميم المتمحور حول الإنسان في تصميم المنتج
• أفضل مجموعات مصممي UX - أمثلة ودراسات حالة ملهمة
• مبادئ ارشادية للواجهات المتنقلة
• التصميم التوقعي: كيفية إنشاء تجارب مستخدم سحرية