دوره آموزشی فیگما: انیمیشن‌سازی پروتوتایپ‌های طراحی

دوره آموزشی فیگما: انیمیشن‌سازی پروتوتایپ‌های طراحی

1 ساعت 47 دقیقهمتوسط2024-10-08

مدرسین

Joseph Labrecque

Joseph Labrecque

University Professor, Adobe Educator, Studio Head

جزئیات دوره

فیگما به عنوان یکی از قدرتمندترین ابزارهای طراحی، امکانات زیادی برای طراحی رابط کاربری و تجربه کاربری فراهم می‌آورد. این دوره، فرصتی عالی برای گسترش مهارت‌های شما در طراحی رابط‌های پیچیده و پویا با استفاده از فیگما است. در حالی که پروتوتایپ‌های استاتیک، اساس طراحی‌ها را تشکیل می‌دهند، افزودن انیمیشن و انتقال‌های پیچیده می‌تواند تجربه کاربری شما را بهبود بخشیده و تعاملات را واقعی‌تر و جذاب‌تر کند.

در این دوره، شما یاد خواهید گرفت که چگونه از ویژگی‌های پیشرفته مانند Smart Animate برای ساخت انیمیشن‌های روان و سریع استفاده کنید، چطور تنظیمات خاص انیمیشن‌ها را به دلخواه خود تغییر دهید و چطور الگوهای معمول طراحی مانند انیمیشن‌های بارگذاری، انتقال‌ها و صفحه‌های معرفی را به پروتوتایپ‌های خود اضافه کنید. این مهارت‌ها شما را قادر می‌سازد تا رابط‌های کاربری پویا و حرفه‌ای بسازید که تجربه بهتری برای کاربران فراهم کند.

مهارت ها

User Interface PrototypingFigmaInteraction DesignUser ExperienceDeep Dive (X:Y)

سرفصل ها

مقدمه

  • متحرک سازی نمونه‌های اولیه با Figma
  • کار با فایل‌های تمرین
  • نمای کلی پروژه طراحی

مبانی انتقال متحرک

  • پیش نیاز انیمیشن Figma
  • انتقال‌های فوری در Figma
  • انتقال‌ها را در Figma حل کنید
  • انتقال متحرک هوشمند در Figma
  • انتقال به داخل و خارج شدن در Figma
  • انتقال فشار در Figma
  • انتقال اسلاید به داخل و خارج در Figma

اصلاح ویژگی‌های انیمیشن

  • تنظیم مدت زمان انتقال
  • اعمال تعامل تاخیری
  • تنظیم مجدد موقعیت اسکرول
  • متحرک سازی لایه‌های تطبیق
  • بررسی انتقال‌های خطی
  • طراحی آسان افکت
  • طراحی افکت‌های فنری
  • اعمال از پیش تنظیم حرکت

طراحی انیمیشن‌های مشترک UI

  • متحرک سازی یک دکمه
  • متحرک سازی سوئیچ ضامن
  • متحرک سازی یک دکمه پر انرژی
  • سیم کشی نوار پیشرفت به متغیرها
  • استفاده از انیمیشن‌های همپوشانی
  • ایجاد نشانگر حلقه ای

متحرک سازی تجربیات اضافی

  • راه‌اندازی از صفحه اصلی
  • ایجاد حالت‌های splash screen
  • متحرک سازی حالات چلپ چلوپ
  • استفاده از فیلم‌ها برای افزودن حرکت
  • طراحی با فایل‌های متحرک GIF

نتیجه گیری

  • مراحل بعدی انیمیشن سازی در فیگما
۴۰,۰۰۰ تومان