لطفا جهت اطلاع از آخرین دوره ها و اخبار سایت در
کانال تلگرام
عضو شوید.
آموزش الگوهای طراحی UI UX - توسط مدرس دانشگاه UX - 2022
UI UX Design Patterns - by University UX Instructor - 2022
نکته:
آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.
نمونه ویدیوها:
توضیحات دوره:
به عمق الگوهای طراحی رابط کاربری و اجزای رابط کاربری بروید + این الگوهای طراحی را با استفاده از ابزار طراحی ایجاد کنید figma طراحی رابط کاربری طراحی رابط کاربری الگوهای طراحی رابط کاربری بهترین روش ها برای طراحی رابط کاربری طراحی UX طراحی تجربه کاربر طراحی Figma پیش نیازها:همه مهارت ها و عالی برای مبتدیان
بخش 1:
الگوهای طراحی مجموعه ای از دستورالعمل ها و قوانین رابط کاربری هستند که به نحوه استفاده کاربران از محصولات و عناصر رابط کاربری مربوط می شود. درک این الگوهای طراحی برای هر طراح UX یا UI ضروری است. مواردی مانند فیلدهای فرم، کشویی، نوارهای پیمایش، نوارهای برگه، انتخابگرهای تاریخ و غیره.
استفاده از الگوهای طراحی می تواند بسیار مفید باشد، بیشتر به این دلیل که در زمان (پول) صرفه جویی می کنند و نتایج بهتر و سریعتر به ما می دهند. که فلسفه اصلی توسعه اپلیکیشن چابک است. بهعنوان طراح، میتوانیم از این الگوها استفاده کنیم و در تصمیمگیریهای طراحی روزانه خود از آنها استفاده کنیم، زیرا این الگوها و اجزاء هر روز در بسیاری از تجربیات کاربر استفاده میشوند و کاربران به نحوه عملکرد این الگوها عادت کردهاند. این الگوها نسبت به طراحی چیزی از ابتدا یا ایجاد یک رابط کاربری کاملاً جدید، ریسک کمتری دارند. ما نیازی نداریم که آنها را دقیقاً همانطور که هستند برای هر مشکلی که با آن مواجه میشویم به کار ببریم، بلکه میتوانیم با استفاده از تجربیات خود برای تصمیمگیریهایمان از آنها استفاده کنیم، زیرا میدانیم که این الگوها کار میکنند.
مواد دوره و فایل طراحی فیگما پیوست شده است.
در رابطه با فایل Figma دستورالعمل هایی در ویدئو به نام "مطالب دوره" وجود دارد و من نیز دستورالعمل ها را پیوست کرده ام مواد درسی خاصی نیز به هر موضوع ویدئو پیوست شده است، اما می توانید همه آنها را دانلود کنید. در کلاسی به نام "مواد دوره"
PART 2 - FIGMA DESIGN: من یک فایل Figma ارائه کرده ام که از آن به عنوان پروژه استفاده می کنیم که می توانید دانلود کنید. سپس گام به گام پیش می رویم و اجزای طراحی را در نمونه های اولیه زنده با هم با استفاده از ابزار طراحی figma
می سازیم.
امیدواریم از کلاس لذت ببرید
سرفصل ها و درس ها
معرفی
Introduction
ساختار کلاس
Class Structure
مواد درسی
Course Material
مقدمه ای بر متریال طراحی
Introduction to Design Material
فیلدهای فرم
Form Fields
دکمه ها
Buttons
کشویی
Dropdowns
انتخاب کنندگان تاریخ
Date Pickers
دکمههای رادیویی، کادر بررسی و جابجایی
Radio buttons, Check box and Toggles
فرم های آدرس و فرم های جستجو
Address Forms and Search Forms
نوارهای برگه و نوار عنوان
Tab bars and Title Bars
آکاردئون ها و زبانه ها
Accordions and Tabs
نکات ابزار و سایه ها
Tool-tips and Shadows
ریز عکسها و چرخ فلک ها
Thumbnails and Carousels
مدال ها و لایت باکس ها
Modals and Lightboxes
منوها و کشوها
Menus and Drawers
جادوگران
Wizards
پودرهای سوخاری
Breadcrumbs
صفحه بندی
Pagination
نمادها
Icons
عکس ها
Photos
بخش پروژه کلاس:
Project Section of Class:
مقدمه ای بر بخش پروژه
Introduction to the Project Section
آپلود فایل پروژه
Project File Upload
ایجاد - دکمه های رادیویی وب
Create - Web -Radio Buttons
ایجاد - وب - کشو منو
Create - Web - Menu Drawer
ایجاد - وب - مدال و آکاردئون
Create - Web - Modals and Accordions
ایجاد -وب - ایجاد حساب + اعتبارسنجی درون خطی
Create -Web - Account Creation + Inline Validation
ایجاد - وب - کشویی
Create - Web - Dropdown
ایجاد - آیفون - حالت تمام صفحه
Create - Iphone - full screen modal
ایجاد - آیفون - کشویی
Create - Iphone - Dropdown
ایجاد - آیفون - مدال، نوار عنوان و منو
Create - Iphone - Modal, Title-Bar and Menu
ایجاد - آیفون - نوار برگه
Create - Iphone - Tab Bar
نمایش نظرات