آموزش Figma UI/UX - طراحی یک برنامه بودجه UI/UX - با استفاده از Figma - (پروژه کامل)
Figma UI/UX - Design a Budget App UI/UX - Using Figma - (Complete Project)
Figma یکی از بهترین ابزارها برای طراحی UI/UX است. به صورت آنلاین اجرا می شود و می توانید از آن در هر دستگاهی استفاده کنید. بسیاری از سازمان های بزرگ برای طراحی رابط کاربری موبایل و اپلیکیشن وب خود به سمت Figma حرکت می کنند. بنابراین، آینده روشنی برای طراح UI/UX Figma وجود دارد. این دوره برای هر کسی که مایل به تبدیل شدن به یک طراح متخصص UI/UX (سطح مبتدی تا پیشرفته) است.
در این دوره آموزشی، نحوه طراحی یک اپلیکیشن موبایل کامل با استفاده از Figma را خواهید آموخت. پس از اتمام این دوره، با استفاده از Figma یک UI/UX اپلیکیشن موبایل کاملا کاربردی طراحی خواهید کرد.
وقتی این دوره آموزشی Figma UI/UX را تمام کردید، قرار است کاربردهای اساسی همه ابزارهای Figma و نحوه پیاده‌سازی آن را در یک پروژه واقعی بیاموزید. در پایان این دوره، نحوه طراحی رابط کاربری (UI) و تجربه کاربری (UX) برای برنامه تلفن همراه را خواهید آموخت.
در این دوره، من به شما یاد خواهم داد که چگونه یک برنامه مدیریت بودجه کامل UI/UX را با استفاده از انواع مختلف ابزارهای Figma و نحوه استفاده از نمونه سازی طراحی کنید. Figma ابزار متفاوتی برای طراحی UI/UX دارد و در این دوره، شما قصد دارید همه ابزارها را پیاده سازی کنید.
در این دوره آموزشی هیجان انگیز Figma، در پایان به شما نشان خواهم داد که چگونه می توانید نمونه سازی و انیمیشن را در حین حرکت از یک صفحه به صفحه دیگر اضافه کنید. علاوه بر این، شما می خواهید یاد بگیرید که چگونه با انواع مختلف گزینه ها در نمونه اولیه Figma بازی کنید. به عنوان مثال، On Tap، Open Overlay، Close Overly و غیره.
در حالی که می خواهید یک برنامه مدیریت بودجه طراحی کنید، می خواهید یاد بگیرید:
1. نحوه کار با ابزارهای Figma Rectangle و اینکه چرا باید به طور مکرر از این ابزار در UI/UX برنامه خود استفاده کنیم.
2. نحوه استفاده از ابزار Figma Elipse و نحوه طراحی تصویر و شکل پروفایل کاربر.
3. نحوه استفاده از ابزارهای متنی Figma و نحوه استفاده از آن در برنامه UI/UX.
4. نحوه انتخاب رنگ Figma و گرادیان رنگ مانند گرادیان خطی، گرادیان شعاعی و غیره.
5. نحوه ایجاد گروه و استفاده مجدد از آن.
6. نحوه ساخت کامپوننت در Figma و نحوه استفاده مجدد از آن.
7. پیمایش افقی و عمودی Figma.
8. نحوه ساخت قاب در Figma و استفاده از آن.
9. پلاگین Figma برای افزودن نمادها و نمودارها.
10. انیمیشن Figma هنگام حرکت از یک صفحه به صفحه دیگر.
11. انیمیشن Figma با نمونه اولیه.
12. نمونه اولیه Figma و انواع مختلف گزینه های نمونه اولیه.
13. نحوه طراحی یک گفتگوی هشدار سفارشی با استفاده از Figma.
14. نحوه نصب افزونه Figma و نحوه استفاده از آن در UI/UX.
15. شما یاد خواهید گرفت که چگونه طراحی Figma را در قالب های مختلف صادر کنید.
16. نحوه کشیدن طرح کارت با استفاده از ابزار Figma Pen.
17. نحوه اضافه کردن تصاویر و استفاده از ابزار Add Images برای افزودن چندین تصویر یک به یک.
18. شما یک صفحه نمایه خیره کننده با استفاده از Figma طراحی خواهید کرد.
در این کلاس، نحوه طراحی یک رابط کاربری کامل اپلیکیشن موبایل با استفاده از Figma را یاد می گیرید. در حالی که این کلاس را به پایان رساندید، به نوعی از ابزارهای Figma استفاده کردید.
وظیفه شما برای ایجاد یک پروژه مرتبط با برنامه‌ای که به شما نشان داده‌ام در اینجا است:
1. مطمئن شوید که یک صفحه ورود به سیستم و ثبت نام اضافه می کنید.
2. از ابزار Eclipse در بالای صفحه ورود و ثبت نام استفاده کنید.
3. برای طراحی کارت از ابزار قلم استفاده می شود و مطمئن شوید که از گرادیان رنگ خطی استفاده می کنید.
4. یک نمودار خطی به جای نمودار دایره ای اضافه کنید.
5. در صفحه نمایه یک تصویر اضافه کنید و یک دکمه بازگشت اضافه کنید. یک نماد برای خروج به جای متن اضافه کنید.
6. سعی کنید دو طرح کارت اضافه کنید و مطمئن شوید که طرح‌های مختلفی دارند و البته باید مطمئن شوید که نمای اسکرول افقی کار می‌کند.
7. برای ارسال هر صفحه سعی کنید انواع مختلفی از انیمیشن اضافه کنید.
8. مطمئن شوید که یک نمونه اولیه برای هر صفحه اضافه می کنید.
افزودن انواع طراحی ذکر شده در بالا، یک برنامه کامل طراحی کنید و آن را در بخش پروژه آپلود کنید.
درس ها Lessons
-
معرفی Introduction
-
ElipseDesign قسمت 10 ElipseDesign Part 10
-
داشبورد دیزاین قسمت 14 DashboardDesign Part 14
-
HorizontalList ExpenseData قسمت 13 HorizontalList ExpenseData Part 13
-
FoodUI PlaceImagesTool قسمت 16 FoodUI PlaceImagesTool Part 16
-
صادرات همه رابط کاربری قسمت 17 Export All UI Part 17
-
AppbarDesign قسمت 9 AppbarDesign Part 9
-
بخش 3 طراحی گفتگوی CustomAlert CustomAlert Dialog Design Part 3
-
CustomColor قسمت 7 CustomColor Part 7
-
افزودن به‌روزرسانی AlertDialog قسمت 12 Add Update AlertDialog Part 12
-
BillsUI CustomAlertDialog قسمت 15 BillsUI CustomAlertDialog Part 15
-
گروه و VerticaleScroll قسمت 11 Group and VerticaleScroll Part 11
-
طراحی صفحه ورود به سیستم قسمت 2 Design SignIn Page Part 2
-
صفحه اصلی UI قسمت 4 HomePage UI Part 4
-
رابط کاربری صفحه نمایه قسمت 8 Profile Page UI Part 8
-
طراحی صفحه ثبت نام قسمت 1 Design SignUp Page Part 1
-
نمودار و رابط کاربری صفحه اصلی قسمت 6 Chart And Home UI Part 6
-
CardDesign HorizontalScrollView قسمت 5 CardDesign HorizontalScrollView Part 5
درس ها Lessons
-
صفحه اصلی UI قسمت 4 HomePage UI Part 4
-
CustomColor قسمت 7 CustomColor Part 7
-
معرفی Introduction
-
طراحی صفحه ورود به سیستم قسمت 2 Design SignIn Page Part 2
-
FoodUI PlaceImagesTool قسمت 16 FoodUI PlaceImagesTool Part 16
-
داشبورد دیزاین قسمت 14 DashboardDesign Part 14
-
CardDesign HorizontalScrollView قسمت 5 CardDesign HorizontalScrollView Part 5
-
BillsUI CustomAlertDialog قسمت 15 BillsUI CustomAlertDialog Part 15
-
نمودار و رابط کاربری صفحه اصلی قسمت 6 Chart And Home UI Part 6
-
ElipseDesign قسمت 10 ElipseDesign Part 10
-
AppbarDesign قسمت 9 AppbarDesign Part 9
-
طراحی صفحه ثبت نام قسمت 1 Design SignUp Page Part 1
-
گروه و VerticaleScroll قسمت 11 Group and VerticaleScroll Part 11
-
رابط کاربری صفحه نمایه قسمت 8 Profile Page UI Part 8
-
افزودن به روز رسانی AlertDialog قسمت 12 Add Update AlertDialog Part 12
-
بخش 3 طراحی گفتگوی CustomAlert CustomAlert Dialog Design Part 3
-
HorizontalList ExpenseData قسمت 13 HorizontalList ExpenseData Part 13
-
صادرات همه رابط کاربری قسمت 17 Export All UI Part 17
https://donyad.com/d/96905b
Yazdani Chowdhury
کارشناس UI/UX، توسعه دهنده اپلیکیشن موبایل و وب
نمایش نظرات