12 دروس مجانية AE لالمحترفين UX
يتضمن تصميم الويب الحديث الكثير من الأجزاء المتحركة مثل تصميم المحتوى وأيقونة العمل و استراتيجيات تصميم UX . أحد الاتجاهات الأحدث هو الاستخدام من microinteractions على الويب ومشاريع المحمول.
هذه تبدو رائعة في المشروع النهائي ولكن ليس من السهل جدا مع نموذج ثابت بالحجم الطبيعي. لذلك قام المصممون بجمع برامج الرسوم المتحركة مثل After Effects لإنشاء نماذج بالأحجام الطبيعية.
إذا كنت تحاول تعلم هذه المهارات ، أوصيك بشدة بمقاطع الفيديو المجانية هذه على YouTube. لن يقوموا بتعليمك كل شيء ، لكنهم سوف يقومون بتغطية الأساسيات وتعطيك أساسًا قويًا لتعزيز مهاراتك.
1. زر واجهة المستخدم الرسوم المتحركة
هذا جدا موجز واجهة المستخدم الرسوم المتحركة البرنامج التعليمي مثالية للمبتدئين مع تجربة AE قليلا إلى لا. يتطلب الأمر بعض الصبر للعمل من خلال الواجهة ولكن التعليمات واضحة تمامًا.
ستتعلم كيفية إنشاء تأثير حركة زر صغير يمكن أن يعمل بشكل جيد لمواقع الويب أو تطبيقات الجوال.
هذا ليس شيئًا مدهشًا ولكن في النهاية سيكون لديك فهم أكثر قوة حول هذا المفهوم.
2. نموذج الحركة
آخر الرسوم المتحركة البسيطة التي يمكنك القيام بها هي قائمة انزلاق مثل في هذا الفيديو . وهو يعلمك كيفية تحريك قائمة في After Effects وكيفية العمل مع الطبقات الفردية في البرنامج.
إنه برنامج تعليمي طويل إلى حد ما مع أكثر من 40 دقيقة من الإرشادات التفصيلية خطوة بخطوة. ولكنها تستحق الوقت إذا تمكنت من رؤيتها حتى النهاية.
3. AE رمز الرسوم المتحركة
لا تضيف رسوم متحركة صغيرة إلى الواجهة مباشرة ، ولكنها يمكن أن تعزز تجربة المستخدم. هذه الاقتراحات رمز تتصل تلك microinteractions الصغيرة المذكورة في وقت سابق.
و هذا رمز الرسوم المتحركة توت يتحدث عن microinteractions مع سهولة اتباع التوجيهات. هل يمكن حتى تحميل أيقونات مجانية في تنسيق PSD / AI واستخدامها للصور المتحركة.
ولكن هذا مفيد أيضًا لمصممي الأيقونات الذين ينشئون رموزًا خاصة بهم من البداية ويريدون تنشيطها للإنتاج.
4. مؤشرات UI / UX المتحركة
ينشئ العديد من المصممين رسومًا متحركة لـ UX لعرض كيفية عمل الواجهة. يتضمن هذا بطبيعة الحال نقرات الماوس / الضربات الشديدة لأنك تريد معرفة كيف ينتقل المحتوى عبر الصفحة.
أذا أردت إضافة حركات المؤشر إلى نماذجك الطبيعية ، فهذا البرنامج التعليمي مخصص لك. إنه دليل قصير جدًا ، طوله 15 دقيقة فقط ، ولكن المعلومات ذات قيمة فائقة وذات صلة بمصممي الجوّال والمواقع على الويب.
5. iPhone التطبيق واجهة المستخدم
مثال جيد آخر على الرسوم المتحركة التي تركز على المستخدم هو هذا بعد إدخال تطبيق iPhone نموذجي. أنت بصدد إنشاء مسار مستخدم من خلال تطبيق iPhone لملء حقول نموذج فردية.
في حد ذاته قد لا يبدو هذا كثيرًا نظرًا لأن الناس يعرفون ما تبدو عليه هذه العملية.
ولكن إذا كنت تقوم بتصميم صفحة ويب أو تطبيق له تدفق فريد ، فإنه يساعد على إظهار سلوك المستخدم بأكمله من إدخال المعلومات لتسجيل الدخول ، وربما المزيد.
6. تطبيقات الصفحة الضربات الشديدة
يمكن لمصممي تطبيقات الجوّال استخدام تمريهات الصفحة للواجهات متعددة الصفحات. هذه الأعمال كبيرة بالنسبة للمعارض والمؤثرات المرقمة.
في هذا البرنامج التعليمي وجيزة ستتعرف على كيفية إنشاء رسوم متحركة للصفحات باستخدام After Effects باستخدام بعض النماذج الطبيعية الموجودة. هذا الفيديو يأتي مجانًا UX in Motion حيث لديهم الكثير من الدروس المماثلة وورش العمل الخاصة.
لم يتم تغطية موضوع حركة UX كثيرًا على الويب ، ولكن هؤلاء الأشخاص هم أحد الأشخاص الجيدين القلائل الذين يتعمقون في التفاصيل. تحقق من قناتهم على YouTube بالكامل إذا كنت تريد معرفة المزيد.
7. جيلي واجهة المستخدم الرسوم المتحركة
ربما تكون قد رأيت قوائمًا سائلة جيليًا غريبة في تطبيقات Android أو حتى عبر الويب. هذه ليست شائعة للغاية لأنه من الصعب إعادة إنشائها في الكود ، ولكن مع هذا البرنامج التعليمي جيلي واجهة المستخدم يمكنك على الأقل بناء الرسوم المتحركة من نقطة الصفر.
انها الهدية الترويجية الأخرى من UX في Motion ومجاميع فقط حوالي 5 دقائق.
ولكنك ستتعلم الكثير عن After Effects وعملية UX الشاملة للرسوم المتحركة. على وجه التحديد ، كيفية استيراد المتجهات والعمل مع تلك الملفات عبر جدول زمني - في الحقيقة تعمل أساسيات الرسوم المتحركة للواجهة.
8. تتكشف الرسوم المتحركة
على الرغم من أني لا أستطيع أن أقول أن هذا الرسم المتحرك يؤثر بشكل مباشر على الواجهة ، إلا أنه شيء رائع يمكنك إضافته إلى شعار موقع الويب الخاص بك. الرسوم المتحركة تتكشف تستخدم في الغالب في مقدمات الفيديو لإنشاء مرئى مرئي.
ولكن يمكن أن تحتوي مواقع الويب أيضًا على رسوم متحركة متشابهة باستخدام رسومات SVG والرسوم المتحركة الأساسية JS.
حتى إذا كنت لا تريد إنشاء رسوم متحركة للشعار ، فإن هذا البرنامج التعليمي لا يزال قادراً على إرشادك خلال سير عمل بسيط لواجهة AE. مثالية لتعلم الحبال دون الكثير من الضغط.
9. Basic UI Prototype الرسوم المتحركة
تأتي قوائم تطبيقات الجوّال في العديد من الأساليب المختلفة مع تقنيات الرسوم المتحركة المختلفة. هذا البرنامج التعليمي واجهة المستخدم يعلمك كيفية تنشيط قائمة رمز الفقاعة المنبثقة.
تمت الإشارة إلى ذلك لأول مرة في تطبيق Path ، ولكن تطور منذ ذلك الحين إلى اتجاه شائع لأجهزة Android و iOS.
خلال هذا الفيديو الذي تبلغ مدته 20 دقيقة ، ستحصل على أفكار للرموز المتحركة وتصميم القائمة. من السهل التعامل معه ويمكنك استخدام أيقونات مصممة مسبقًا لسير العمل لتوفير الوقت.
10. 3D تقسيم الطبقات
تُعد الرسوم المتحركة التقديمية قيّمة لعمل العميل أو لمشاركة أفكارك أمام فريق. هذا هو المكان هذه الرسوم المتحركة طبقة ثلاثية الأبعاد البرنامج التعليمي يمكن أن يساعد.
إنه يعلمك كيفية فصل عناصر الطبقة المختلفة وفصلها عن الواجهة الكاملة. يمكنك أيضًا عرض عناصر مختلفة للصفحة لعرض كيفية عمل التطبيق / موقع الويب.
لا أستطيع أن أتخيل أن هذا سيكون قيماً للعمل الشخصي ، لكنه تأثير رائع للتعلم خاصة بالنسبة إلى العربات التجارية.
11. iOS 8 مفاتيح
ظهرت أولاً مفاتيح التشغيل / إيقاف التشغيل المتحركة في الإصدارات المبكرة من نظام التشغيل iOS وانتشرت منذ ذلك الحين إلى Android والمواقع العامة.
تحتوي أفضل رموز واجهة المستخدم على صور متحركة مخصصة ويمكنك إنشاء مقاطعك الخاصة عن طريق اتباعها هذا البرنامج التعليمي 25 دقيقة . يفترض أن لديك بالفعل تبديل الرسومات ولكن يمكنك أيضًا تنزيلها الهبة الترويجية واستخدام ذلك بدلا من ذلك.
بالإضافة إلى ذلك ، يمكنك إعادة توظيف هذه الرسوم المتحركة لأي نوع من المفاتيح التي تصممها في المستقبل. برنامج تعليمي رائع لشخص ما بمجرد الدخول إلى After Effects لواجهة المستخدم / UX.
12. السلس أيقونة متحركة
آخر على قائمتي هو هذا الرمز التفصيلي اقتراح توت باستخدام عدد قليل من أشكال ناقلات مختلفة. إنه دليل تفصيلي إلى حد كبير يبلغ طوله ما يزيد عن 30 دقيقة ، ويغطي بعض التقنيات المختلفة.
بمجرد أن تعرف طريقك حول After Effects ، يمكنك تطبيق هذه الأفكار على أنماط الرموز الأخرى. هذا هو السبب في أن هذا البرنامج التعليمي هو عظيم جدا للمبتدئين. يعلمك كيفية العمل في واجهة AE مع تقنيات محددة لمصممي UI / UX.
ولكن أي من هذه البرامج التعليمية ستحسّن مهاراتك في رسوم متحركة UX ، لذا احرص على وضع إشارة على أي شيء يلفت انتباهك.
