دليل مفصل خطوة بخطوة لرسوم متحركة لواجهة المستخدم مع مبدأ وسكتش
نشرت: 2022-03-11يعد تصميم واجهة مستخدم مع وضع الرسوم المتحركة والانتقالات في الاعتبار طريقة رائعة للتخطيط لتجربة مستخدم أفضل (UX) لتطبيقك التالي. التفاعلات الدقيقة المتحركة هي الطريقة المثلى لتحفيز تفاعل المستخدم ، في عالم من فترات الاهتمام القصيرة. لهذا السبب قدمت Airbnb مؤخرًا Lottie - "أداة جديدة مفتوحة المصدر تجعل إضافة الرسوم المتحركة إلى التطبيقات الأصلية أمرًا سهلاً."
تُظهر مشاريع مثل Lottie الأهمية المتزايدة لإضافة الحركة كعنصر جديد لتصميم تجربة مستخدم محسّنة لكل من التطبيقات ومواقع الويب.
في هذا البرنامج التعليمي ، ستتعلم تقنيات الرسوم المتحركة الفعالة لواجهة المستخدم باستخدام Principle for Mac. بعد استعراض هذا الدليل ، ستكون قادرًا على تحويل نماذج بالأحجام الطبيعية الباهتة والثابتة إلى نموذج أولي تفاعلي لعرض عملك بشكل أفضل. يمكنك تطبيق ما ستتعلمه هنا لتحسين لقطات واجهة المستخدم وطلقات Dribbble التالية.
هيا بنا نبدأ.
قم بتنزيل هذه الموارد المجانية للمتابعة.
ستحتاج فقط إلى تطبيقات Principle و Sketch للمتابعة. إذا لم يكن لديك بالفعل ، يمكنك تنزيل نسخة تجريبية مجانية باستخدام الروابط أدناه.
قم بتنزيل نسخة تجريبية مجانية من Principle هنا.
قم بتنزيل نسخة تجريبية مجانية من Sketch هنا.
قم بتنزيل ملف مصدر البرنامج التعليمي المجاني هنا.
نظرة عامة على واجهة المبدأ
إذا كنت معتادًا على نظام التشغيل Mac OS ، فستبدو واجهة Principle مألوفة جدًا. يحتوي على ثلاثة أقسام رئيسية: الشريط الجانبي ، ومنطقة التصميم التي تُظهر اللوحات الفنية ، ونافذة المعاينة التي يمكنك تغيير حجمها والتحرك فيها.
فهم مفاهيم الرسوم المتحركة الأساسية من حيث المبدأ
من السهل نسبيًا التحريك باستخدام Principle. لست بحاجة إلى أن يكون لديك خلفية رسوم متحركة لتبدأ. في الواقع ، تتم أتمتة معظم عمليات الرفع الثقيل بواسطة Principle ، وتحتاج فقط إلى التركيز على ما يبدأ الرسوم المتحركة (على سبيل المثال ، زر ، رابط ، حدث تمرير) ، وكيف تبدأ الرسوم المتحركة ، وكيف تنتهي.
لمساعدتك على المتابعة بشكل أفضل ، إليك معجم موجز للمصطلحات التي ستراها في جميع أنحاء الدليل.
- المكون: المكون هو نوع من التجميع يساعد في احتواء العناصر وحتى الرسوم المتحركة. إنه يعادل "كائن ذكي" في Photoshop أو "رمز" في Illustrator.
- Trigger: طريقة لبدء رسم متحرك - على سبيل المثال عن طريق النقر والتمرير والتمرير وما إلى ذلك. من حيث المبدأ ، يمكن تحديد المشغل عن طريق تحديد أي عنصر داخل Principle والنقر على الرمز الذي يظهر على جانبه الأيمن مع رمز صاعقة البرق.
- الانتقال: تغيير الحالة من لوح رسم إلى آخر ، أي الانزلاق إلى اليسار أو اليمين.
- تأثير التخفيف: مستوى نعومة الانتقال بناءً على كيفية بدء الرسم المتحرك وانتهائه.
A. الزناد والانتقال
تتمثل الخطوة الأولى للتحريك باستخدام Principle في إعداد مشغل (السلوك أو الإجراء الذي يبدأ الرسم المتحرك) على عنصر (أي زر أو رابط) ، وتغيير حالته الأولية و / أو النهائية (أي موضعه أو مقياسه من بداية الرسم المتحرك إلى نهايته).
- حدد حالة أولية: كيف تبدو عناصر واجهة المستخدم الخاصة بك في البداية قبل ظهور الرسوم المتحركة.
- حدد المشغل: عن طريق تحديد عنصر التفاعل والإجراء الذي ينشط الحركة.
- تحديد الحالة النهائية: كيف يتم عرض العناصر في نهاية الرسم المتحرك.
بمجرد تعيين الرسوم المتحركة ، يمكنك معاينتها في نافذة المعاينة.
ب. طول الرسوم المتحركة وتأثير التخفيف
بشكل افتراضي ، تنشئ Principle حركة مدتها نصف ثانية. في بعض الأحيان لا يكفي ذلك لرؤية تأثير الانتقال بالتفصيل. يمكنك تغيير المدة وتأثير التخفيف من لوحة الرسوم المتحركة باتباع هذه الخطوات الثلاث.
- افتح لوحة الرسوم المتحركة: حدد الأسهم السوداء بين لوحتي رسم ، وانقر على زر "تحريك" الموجود في الشريط العلوي.
- تمديد طول الرسم المتحرك: حرك نقاط نهاية الخطوط الزرقاء.
- تطبيق التيسير: حدد جميع نقاط شكل الماس ، واختر "Ease both" من القائمة المنسدلة لتسهيل الانتقالات.
ما ستحصل عليه
يوضح لك هذا الفيديو ما يمكنك إنشاؤه بمجرد متابعة هذا البرنامج التعليمي. يعرض التطبيق التجريبي لوحة ألوان التصميم متعدد الأبعاد من Google ويمنحك مزيدًا من التفاصيل بمجرد تحديد اللون. ستنشئ رسمًا متحركًا للتحميل ، وبعض انتقالات الصفحة مع تأثير المنظر السلس ، وشريط تمرير القائمة.
تأكد من تنزيل ملف مصدر البرنامج التعليمي المجاني هنا.
هيا بنا نبدأ.
الانتقال من ملف رسم إلى مبدأ
- حرك اللوحات الفنية للتحضير للانتقالات الطبيعية بينها: على سبيل المثال ، يجب أن تلمس الشاشة المنزلقة من اليمين الحافة اليمنى للشاشة التي تحل محلها فوق الرسم المتحرك.
- بمجرد تعيين ملف Sketch الخاص بك ، انتقل إلى Principle ، وأنشئ مستندًا فارغًا يطابق نسبة 360x640 ، وانقر فوق الزر "استيراد".
إزالة رؤوس الشاشات للتمرير السلس
لإنشاء انتقال سلس بين الصفحات ، يمكنك إزالة كل رأس باستثناء الأول. تمت إضافة الرؤوس في البداية فقط لعرض مظهر التطبيق وأسلوبه. ستحتفظ بالرأس فقط على شاشة "الترحيب" ، وستكون بمثابة شريط لاصق مع القائمة وعنوان التطبيق.
إنشاء الرسوم المتحركة للتحميل - الأشكال
- حدد مجموعة أشكال التحميل ، وانقر على "إنشاء مكون" يحتوي على أشكال التحميل والنص. قم بإنشاء مكون للنص داخل الرمز الأول ؛ سنقوم بتحريك النص بشكل منفصل بعد ذلك مباشرة.
- حدد الأشكال المجمعة. اختر مشغل "النقر" ، واسحب وأفلت أعلى لوحة الرسم نفسها لإنشاء نسخة مكررة.
- يمثل لوح الرسم الثاني الحالة النهائية للرسوم المتحركة ، ويمكنك تدوير المجموعة باستخدام خاصية الزاوية. أعط قيم زاوية مختلفة لـ "تعبئة" و "مخطط تفصيلي" لإنشاء تأثير أكثر تشويقًا.
- للإنهاء ، حدد الأسهم بين ألواح الرسم ، وانقر على "تحريك" لفتح "لوحة الرسوم المتحركة" ، وقم بتغيير المدة عن طريق تحريك نقاط النهاية إلى حوالي 1.00 ثانية.
إنشاء الرسوم المتحركة للتحميل - النص
- أولاً ، قم بإنشاء الرسوم المتحركة المنزلق لأعلى. حدد شكل الزر ، وقم بتطبيق حدث التشغيل "Tap". في لوح الرسم الجديد ، انقل جميع الشاشات لأعلى بمقدار 640 بكسل (يساوي ارتفاع لوح الرسم الحالي).
- الآن ، لنقم بإنشاء اختلاف المنظر. انتقل إلى لوحة الرسم السابقة ، على شاشة الترحيب ، انقل الأشكال الهندسية والنص لأسفل عند قيم Y مختلفة.
- أخيرًا ، داخل لوحة الرسوم المتحركة ، قم بتمديد الخط الزمني ، قل لـ 1s. قم بتطبيق تأثير "Ease Both" على المخطط الزمني (تأكد من أنك حددت جميع النقاط ذات الشكل الماسي ، وانقر على أي خط أزرق لتطبيق التأثير على الكل).
- قم بمعاينة الرسوم المتحركة الخاصة بك وحرك الأشكال حولها حتى يبدو تأثير المنظر جيدًا بالنسبة لك.
إنشاء تأثير اختلاف المنظر - صفحة الترحيب
- حدد مكون التحميل وقم بتطبيق مشغل "Tap" عن طريق سحب سهم منه في أي مكان في اللوحة الفنية.
- حدد جميع الشاشات (من المجموعة الرئيسية) ، وحركها لأعلى بمقدار 640 بكسل. تُظهر هذه الخطوة شاشة الترحيب في العرض.
- ارجع إلى لوحة الرسم السابقة ، وانقل الأشكال الموجودة على شاشة "الترحيب" إلى أسفل. هذا يخلق تأثير الانزلاق غير المتزامن يسمى المنظر.
- اضبط الرسم المتحرك بإضافة الوقت إلى الانتقال داخل لوحة الرسوم المتحركة: حدد السهم الموجود بين لوح الرسم ، ثم اسحب نقاط النهاية على الخطوط الزرقاء إلى حوالي 1 ثانية.
إنشاء تأثير المنظر - حول الصفحة
- حدد زر السهم لأسفل (تأكد من تحديد المجموعة بأكملها) ، وقم بتطبيق المشغل "Tap" عن طريق سحب سهم منه في أي مكان في اللوحة الفنية.
- حدد جميع الشاشات (من المجموعة الرئيسية) ، وانقل كل شيء بمقدار 640 بكسل. تُظهر هذه الخطوة شاشة "حول" في العرض.
- ارجع إلى اللوحة الفنية السابقة ، وانقل الأشكال الموجودة على شاشة "حول" إلى أسفل. هذا يخلق تأثير الانزلاق غير المتزامن يسمى المنظر.
إنشاء تأثير المنظر - صفحة الألوان
- قم بتطبيق المشغل "Tap" على زر السهم لأسفل (تأكد من تحديد المجموعة بأكملها) ، وسيؤدي ذلك إلى إنشاء لوحة فنية جديدة.
- على لوح الرسم الجديد ، حدد جميع الشاشات وحركها لأعلى بمقدار 640 بكسل.
- على لوح الرسم السابق ، حرك الألوان والنص لأسفل. لاحظ أنه كلما حركت كائنًا إلى الأسفل ، كلما استغرق الانزلاق احتياطيًا وقتًا أطول ، لذا تأكد من استخدام موضع مختلف لإنشاء تأثير أكثر ديناميكية.
- أخيرًا ، من خلال تمديد الرسوم المتحركة ، وتطبيق "سهولة الاثنين" على جميع المخططات الزمنية الزرقاء داخل لوحة الرسوم المتحركة.
انزلاق صفحة من الجانب - صفحة تحديد اللون
- قم بتطبيق مشغل "النقر" على زر "تحميل المزيد" على شاشة "الألوان".
- في اللوحة الفنية الجديدة ، انقل محتوى "الألوان" و "التحديد" إلى اليسار بمقدار 360 بكسل (عرض لوح الرسم)
- ارجع إلى اللوحة الفنية السابقة وحرك محتوى الشاشة في الاتجاه المعاكس - اليمين.
- لاحظ أنه يمكنك أيضًا تحريك عتامة الشاشة المنزلق للداخل من صفر بالمائة إلى 100 بالمائة.
- العب مع مدة الرسوم المتحركة وتأثير التخفيف لتعديل تأثير الانتقال.
تحريك أيقونة القائمة
- لاحظ أن أي طبقة وشكل له تأثير (مثل الظلال) من ملف Sketch الأصلي يتم استيراده إلى Principle كصورة. إذا كنت بحاجة إلى تحرير الأشكال داخل Principle ، فحاول عدم إضافة أي تأثير خاص إلا بعد الاستيراد.
- ومع ذلك ، باستخدام الرمز الموجود كدليل ، ارسم ثلاثة مستطيلات رفيعة ، وقم بتجميعها لإنشاء رمز قائمة الهامبرغر. الآن ، يمكنك حذف أو إخفاء أيقونة القائمة السابقة.
- حدد الرمز الذي تم إنشاؤه حديثًا ، وقم بتطبيق مشغل "النقر" عليه.
- في لوحة الرسم الجديدة ، قم بتدوير المستطيل العلوي والسفلي على أيقونة القائمة ، وتأكد من محاذاة المركز ، وإعطاء عتامة بنسبة صفر بالمائة للمستطيل الأوسط.
- لمشاهدة الرسم المتحرك الذي أنشأته للتو ، اربط رمز القائمة الذي تم تغييره مرة أخرى بلوحة المعاينة الفنية باستخدام مشغل "Tap" ، واختبره.
إنشاء تأثير القائمة المنزلق
- في لوحة الرسم في الحالة النهائية ، انقل الشاشات إلى اليمين حتى تتم محاذاة روابط القائمة إلى يسار رمز قائمة الإغلاق.
- حدد كل شيء داخل مجلد "الألوان" باستثناء محتوى القائمة والخلفية ذات اللون الرمادي الفاتح ، وقم بتقليل التعتيم إلى 25 بالمائة. ستؤدي الرسوم المتحركة إلى تلاشي محتوى الصفحة للتركيز على القائمة.
- قم بتمديد مدة الرسوم المتحركة ، وانتقل إلى اللوحة الفنية السابقة لتحريك محتوى القائمة قليلاً لإنشاء تأثير سلس.
الانتقال إلى شاشة جهة الاتصال
- في القائمة المفتوحة ، قم بتطبيق مشغل "Tap" على زر "اتصل بنا".
- على لوح الرسم الذي تم إنشاؤه حديثًا ، انقل جميع الشاشات لأعلى بمقدار 640 بكسل.
- ثم ارجع إلى لوحة الرسم للمعاينات ، وانقل العناصر من صفحة "النموذج" إلى أسفل.
- انقل العناصر عند قيم Y المختلفة لإنشاء تأثير اختلاف المنظر.
- أخيرًا ، حدد الأسهم بين ألواح الرسم ، وقم بتمديد طول الرسم المتحرك وقم بتطبيق "Ease both" على الخطوط الزمنية الزرقاء.
تنتهي بصفحة الشكر
- قم بتطبيق مشغل "الحنفية" على زر "إرسال رسالة".
- على لوح الرسم الجديد ، انقل جميع الشاشات لأعلى بمقدار 640 بكسل.
- ثم ارجع إلى لوحة الرسم للمعاينات وانقل العناصر من صفحة "التأكيد" إلى أسفل.
- العب بالمقياس والدوران للرمز الملون لإنشاء تأثير أكثر ديناميكية.
- تأكد من إضافة طول الرسوم المتحركة لإدراك تأثير الانتقال بشكل أفضل.
بساطة إضافة الرسوم المتحركة مع المبدأ.
Principle هي أداة رائعة لجعل أفكار تفاعل واجهة المستخدم الخاصة بك تنبض بالحياة.
الواجهة متوافقة مع نظام Mac وتم تصميمها للعمل بسلاسة مع ملفات Sketch.
يقوم Principle بأتمتة معظم الرسوم المتحركة وتأثير الانتقال من أجلك. كل ما عليك فعله هو تطبيق مشغل على شكل على لوح رسم واحد ، وتغيير أي خاصية للعناصر التي تريد تحريكها على لوح الرسم النهائي.
يرجى ترك أي أسئلة في التعليقات أدناه. يسعدني الرد عليهم.