دوره آموزشی طراحی Microinteractions با Figma
1 ساعت 33 دقیقهمبتدی2023-04-26
مدرسین

Tetiana Gulei
UX Designer | Teaching Figma and UX Design
جزئیات دوره
فیگما یکی از محبوبترین ابزارهای طراحی برای طراحان UX هست که برای ساخت میکرواینترکشنها (تعاملات کوچک در رابط کاربری) استفاده میشه.
تو این دوره، تتیانا گولِی، متخصص UX، به شما یاد میده که:
🎨 میکرواینترکشن چیه؟ چرا توی طراحی تجربه کاربری انقدر مهمه؟
🔄 چطور با فیگما انیمیشن و نمونهسازی (Prototype) بسازیم؟
🖱️ یادگیری میکرواینترکشنهای ساده مثل کشیدن (Drag)، اسکرول (Scroll) و نمایش لایهها (Overlays)
⚙️ ساخت میکرواینترکشنهای پیچیدهتر مثل اسپینر بارگذاری (Loading Spinner)، منوهای کشویی (Dropdowns)، دکمههای تعاملی و اسلایدرهای حجم صدا
📌 هر فصل این دوره یه سری چالش عملی داره که میتونید مهارتهاتون رو باهاش تست کنید!
اگه میخواین طراحیهای زنده و جذاب با فیگما انجام بدین و مهارتهای میکرواینترکشنتون رو به سطح بالاتری ببرید، این دوره یه گزینه عالی براتونه! 🚀
اهداف یادگیری این دوره
✅ آشنایی با میکرواینترکشنها و نقش اونها در UX
✅ یادگیری ایجاد انیمیشن و پروتوتایپینگ در فیگما
✅ طراحی میکرواینترکشنهای ساده مثل اسکرول و درگ
✅ پیادهسازی تعاملات پیشرفته مثل اسپینر، دکمه و منوی کشویی
✅ تقویت مهارتهای طراحی تعاملی و انیمیشن در UX
✅ حل چالشهای عملی برای تقویت درک مفاهیم
✅ ایجاد تجربه کاربری روان و جذاب با انیمیشنهای کوچک
✅ یادگیری روشهای خلاقانه برای طراحی تعاملات کاربرپسند
تو این دوره، تتیانا گولِی، متخصص UX، به شما یاد میده که:
🎨 میکرواینترکشن چیه؟ چرا توی طراحی تجربه کاربری انقدر مهمه؟
🔄 چطور با فیگما انیمیشن و نمونهسازی (Prototype) بسازیم؟
🖱️ یادگیری میکرواینترکشنهای ساده مثل کشیدن (Drag)، اسکرول (Scroll) و نمایش لایهها (Overlays)
⚙️ ساخت میکرواینترکشنهای پیچیدهتر مثل اسپینر بارگذاری (Loading Spinner)، منوهای کشویی (Dropdowns)، دکمههای تعاملی و اسلایدرهای حجم صدا
📌 هر فصل این دوره یه سری چالش عملی داره که میتونید مهارتهاتون رو باهاش تست کنید!
اگه میخواین طراحیهای زنده و جذاب با فیگما انجام بدین و مهارتهای میکرواینترکشنتون رو به سطح بالاتری ببرید، این دوره یه گزینه عالی براتونه! 🚀
اهداف یادگیری این دوره
✅ آشنایی با میکرواینترکشنها و نقش اونها در UX
✅ یادگیری ایجاد انیمیشن و پروتوتایپینگ در فیگما
✅ طراحی میکرواینترکشنهای ساده مثل اسکرول و درگ
✅ پیادهسازی تعاملات پیشرفته مثل اسپینر، دکمه و منوی کشویی
✅ تقویت مهارتهای طراحی تعاملی و انیمیشن در UX
✅ حل چالشهای عملی برای تقویت درک مفاهیم
✅ ایجاد تجربه کاربری روان و جذاب با انیمیشنهای کوچک
✅ یادگیری روشهای خلاقانه برای طراحی تعاملات کاربرپسند
مهارت ها
FigmaInteraction DesignUser ExperienceProject
سرفصل ها
0. مقدمه
- 01 - ریز اندرکنشها در Figma
- 02 - در مورد ریز فعل و انفعالات
1. مبانی نمونه سازی Figma
- 03 - نمونه سازی را در Figma شروع کنید
- 04 - از حالت ارائه Figma استفاده کنید
- 05 - میکرواینتراکشنها را روی دستگاههای مختلف تست کنید
- 06 - محرکهای تعامل را تعریف کنید
- 07 - از انواع انیمیشنهای بومی Figma استفاده کنید
- 08 - از انیمیشن هوشمند برای ریز تعاملات سیال استفاده کنید
2. ریز تعاملات ساده
- 09 - یک کلید On Click ایجاد کنید
- 10 - اجرای درگ با On Drag
- 11 - یک افکت اسکرول افقی ایجاد کنید
- 12 - یک افکت اسکرول عمودی ایجاد کنید
- 13 - یک افکت شناور ایجاد کنید
- 14 - همپوشانیها را برای پیامها و اعلانها باز کنید
- 15 - یک تاخیر ماشه ای برای اقدام خود تعیین کنید
- 16 - چالش - ایجاد یک ریز تعامل پس زمینه
- 17 - راه حل - یک ریز تعامل پس زمینه ایجاد کنید
3. ریز تعاملات پیشرفته
- 18 - کامپوننتهای تعاملی در Figma ایجاد کنید
- 19 - یک اسپینر دانلود ایجاد کنید
- 20 - یک دکمه دانلود را اجرا کنید
- 21 - یک نوار لغزنده صدا ایجاد کنید
- 22 - یک منوی کشویی ایجاد کنید
- 23 - چالش - یک دکمه لایک ایجاد کنید
- 24 - راه حل - یک دکمه لایک ایجاد کنید
نتیجه
- 25 - از طراحی ریزاینتراکشن Figma خود مطمئن باشید
دوره های مرتبط
- دوره آموزشی موفقیت پس از راهاندازی با تفکر طراحی
- دوره آموزشی چجوری انیمیشنهای Lottie رو توی فیگما استفاده کنیم
- دوره آموزشی کاوش جریانهای کاری هوش مصنوعی در طراحی با Figma
- دوره آموزشی راهاندازی ایدهات با تفکر طراحی (Design Thinking)
- دوره آموزشی ساخت نمونه اولیه (پروتوتایپ) برای غیرطراحها
- دوره آموزشی طراح محصول مبتنی بر هوش مصنوعی
- دوره آموزشی یادگیری جامع فیگما
- دوره آموزشی FigJam برای تفکر طراحی و همکاری