آموزش طراحی رابط کاربری با فیگما و متریال یو آی (UI / UX) - آخرین آپدیت

سرفصل ها و درس ها

مقدمه Introduction

• سلام و خوش آمدید Hello and welcome

• صنعت طراحی (زمینه) Design industry (context)

• مرور کلی ماژول‌ها Modules overview

• خلاصه Summary

• ! به‌روزرسانی ! رابط کاربری جدید فیگما ! UPDATE ! Figma new UI

ماژول ۱ - MUI (متریال UI) Module 1 - MUI (Material UI)

• بررسی اجمالی Overview

• ورودی‌ها / تکمیل خودکار Inputs / Autocomplete

• ورودی‌ها / دکمه Inputs / Button

• ورودی‌ها / گروه دکمه Inputs / Button group

• ورودی‌ها / چک‌باکس Inputs / Checkbox

• ورودی‌ها / دکمه FAB (دکمه اکشن شناور) Inputs / FAB (Floating Action Button) Button

• ورودی‌ها / گروه رادیویی Inputs / Radio Group

• ورودی‌ها / امتیازدهی Inputs / Rating

• ورودی‌ها / انتخاب Inputs / Select

• ورودی‌ها / اسلایدر Inputs / Slider

• ورودی‌ها / سوئیچ Inputs / Switch

• ورودی‌ها / فیلد متنی Inputs / Text field

• ورودی‌ها / لیست انتقال Inputs / Transfer list

• ورودی‌ها / دکمه تغییر وضعیت Inputs / Toggle button

• نمایش داده / آواتار Data Display / Avatar

• نمایش داده / نشان Data Display / Badge

• نمایش داده / چیپ Data Display / Chip

• نمایش داده / جداکننده Data Display / Divider

• نمایش داده / آیکون‌ها Data Display / Icons

• نمایش داده / آیکون‌های متریال Data Display / Material Icons

• نمایش داده / لیست Data Display / List

• نمایش داده / جدول Data Display / Table

• نمایش داده / تولتیپ Data Display / Tooltip

• نمایش داده / تایپوگرافی Data Display / Typography

• بازخورد / هشدار + اسنک‌بار Feedback / Alert + Snackbar

• بازخورد / بک‌دراپ + دیالوگ Feedback / Backdrop + Dialog

• بازخورد / پیشرفت Feedback / Progress

• بازخورد / اسکلتون Feedback / Skeleton

• سطوح / آکاردئون Surfaces / Accordion

• سطوح / نوار برنامه Surfaces / App Bar

• سطوح / کارت Surfaces / Card

• سطوح / کاغذ Surfaces / Paper

• ناوبری / نوار ناوبری پایین Navigation / Bottom Navigation

• ناوبری / بردکرامب Navigation / Breadcrumbs

• ناوبری / دراور Navigation / Drawer

• ناوبری / لینک Navigation / Link

• ناوبری / منو Navigation / Menu

• ناوبری / صفحه‌بندی Navigation / Pagination

• ناوبری / شماره‌گیر سریع Navigation / Speed Dial

• ناوبری / استپر Navigation / Stepper

• ناوبری / تب‌ها Navigation / Tabs

• چیدمان Layout

ماژول ۲ - UX (تجربه کاربری) Module 2 - UX (User Experience)

• مقدمه ماژول Module intro

• مقدمه ماژول [ویدئو] Module intro [VIDEO]

• بیایید جریان را برنامه‌ریزی و طراحی کنیم Let's plan and design the flow

• ماژول ورود / ثبت‌نام - داستان کاربر [ویدئو] Login / Register module - User Story [VIDEO]

• ماژول ورود / ثبت‌نام - جریان [ویدئو] Login / Register module - Flow [VIDEO]

• ماژول فیلم‌ها / مقدمه Movies module / Intro

• ماژول فیلم‌ها / داستان کاربر [ویدئو] Movies module / User Story [VIDEO]

• ماژول فیلم‌ها / جریان [ویدئو] Movies module / Flow [VIDEO]

• ماژول سینماها / مقدمه Cinemas module / Intro

• ماژول سینماها / داستان کاربر [ویدئو] Cinemas module / User Story [VIDEO]

• ماژول سینماها / جریان [ویدئو] Cinemas module / Flow [VIDEO]

• ماژول حساب کاربری / مقدمه Account module / Intro

• ماژول حساب کاربری / داستان کاربر [ویدئو] Account module / User Story [VIDEO]

• ماژول حساب کاربری / جریان [ویدئو] Account module / Flow [VIDEO]

• ماژول بلیط‌ها / مقدمه Tickets module / Intro

• ماژول بلیط‌ها / داستان کاربر [ویدئو] Tickets module / User Story [VIDEO]

• ماژول بلیط‌ها / جریان [ویدئو] Tickets module / Flow [VIDEO]

• ماژول پیشنهادها / مقدمه Offers module / Intro

• ماژول پیشنهادها / داستان کاربر [ویدئو] Offers module / User Story [VIDEO]

• ماژول پیشنهادها / جریان [ویدئو] Offers module / Flow [VIDEO]

ماژول ۳ - سیستم طراحی Module 3 - Design System

• مقدمه Intro

• ایجاد کامپوننت تایپوگرافی Create Typography component

• تعریف رنگ‌ها Define colors

• ایجاد کامپوننت تب‌ها Create Tabs component

• ایجاد کامپوننت هشدار Create Alert component

• ایجاد کامپوننت دکمه Create Button component

• ایجاد کامپوننت فیلد ورودی Create Input Field component

• ایجاد کامپوننت چیپ Create Chip component

• ایجاد کامپوننت سوئیچ Create Switch component

• ایجاد کامپوننت آیتم لیست Create List Item component

• ایجاد کامپوننت کارت Create Card component

• ایجاد کامپوننت استپر Create Stepper component

• ایجاد کامپوننت دکمه رادیویی Create Radio Button component

• ایجاد کامپوننت صفحه‌بندی Create Pagination component

• ایجاد کامپوننت جداکننده Create Divider component

• متدولوژی B.E.M. (بلاک > المنت > مودیفایر) B.E.M. (Block > Element > Modifier) methodology

ماژول ۴ - UI / دسکتاپ / ماژول ورود (بخش ۱) Module 4 - UI / Desktop / Login module (part 1)

• ماژول ورود / مقدمه Login Module / Intro

• ماژول ورود / ساختار اصلی Login module / Basic structure

• ماژول ورود / بازطراحی دکمه‌ها و تب‌ها Login module / Buttons and Tabs rework

• ماژول ورود / بازطراحی فیلد جستجو Login module / Search input rework

• ماژول ورود / فرم ورود Login module / Login form

• ماژول ورود / تب‌ها Login module / Tabs

• ماژول ورود / بازطراحی فیلد ورودی Login module / Input rework

• ماژول ورود / بخش پایینی Login module / Down section

• ماژول ورود / تنظیم آرت‌بورد Login module / Aartboard setup

• ماژول ورود / تب ثبت‌نام Login module / Register tab

• ماژول ورود / آخرین اصلاحات + وایرفریمینگ Login module / Last fixes + Wireframing

• ماژول ورود / ارائه Login module / Presentation

ماژول ۴ - UI / دسکتاپ / ماژول فیلم‌ها (بخش ۲) Module 4 - UI / Desktop / Movies module (part 2)

• ماژول فیلم‌ها / مقدمه Movies module / Intro

• ماژول فیلم‌ها / فرم - بخش ۱ Movies module / Form - part 1

• ماژول فیلم‌ها / فرم - بخش ۲ Movies module / Form - part 2

• ماژول فیلم‌ها / وایرفریمینگ Movies module / Wireframing

• ماژول فیلم‌ها / بازبینی Movies module / Review

• ماژول فیلم‌ها / جزئیات فیلم Movies module / Movie details

• ماژول فیلم‌ها / جزئیات فیلم (بیشتر) Movies module / Movie details (more)

• ماژول فیلم‌ها / جزئیات فیلم (یک سانس) Movies module / Movie details (single seance)

• ماژول فیلم‌ها / جزئیات فیلم (انتخابگر تاریخ) Movies module / Movie details (date picker)

• ماژول فیلم‌ها / جزئیات فیلم (آرت‌بورد + دیالوگ) Movies module / Movie details (artboard + dialog)

• ماژول فیلم‌ها / جزئیات فیلم (بازطراحی تریلر) Movies module / Movie details (trailer rework)

• ماژول فیلم‌ها / جزئیات فیلم (بررسی) Movies module / Movie details (review)

• ماژول فیلم‌ها / جزئیات فیلم (بلیط‌ها) Movies module / Movie details (tickets)

• ماژول فیلم‌ها / جزئیات فیلم (صندلی‌ها) Movies module / Movie details (seats)

• ماژول فیلم‌ها / جزئیات فیلم (تایید ۱) Movies module / Movie details (confirmation 1)

• ماژول فیلم‌ها / جزئیات فیلم (تایید ۲) Movies module / Movie details (confirmation 2)

• ماژول فیلم‌ها / وایرفریمینگ Movies module / Wireframing

ماژول ۴ - UI / دسکتاپ / ماژول سینماها (بخش ۳) Module 4 - UI / Desktop / Cinemas module (part 3)

• ماژول سینماها / مقدمه Cinemas module / Intro

• ماژول سینماها / سینماها Cinemas module / Cinemas

• ماژول سینماها / جزئیات سینما Cinemas module / Cinema details

• ماژول سینماها / وایرفریمینگ Cinemas module / Wireframing

ماژول ۴ - UI / دسکتاپ / ماژول حساب کاربری (بخش ۴) Module 4 - UI / Desktop / Account module (part 4)

• ماژول حساب کاربری / مقدمه Account module / Intro

• ماژول حساب کاربری / جزئیات حساب Account module / Account details

• ماژول حساب کاربری / تنظیمات حساب Account module / Account settings

• ماژول حساب کاربری / وایرفریمینگ Account module / Wireframing

ماژول ۴ - UI / دسکتاپ / ماژول بلیط‌ها (بخش ۵) Module 4 - UI / Desktop / Tickets module (part 5)

• ماژول بلیط‌ها / مقدمه Tickets module / Intro

• ماژول بلیط‌ها / بلیط‌ها Tickets module / Tickets

• ماژول بلیط‌ها / جزئیات بلیط Tickets module / Ticket details

• ماژول بلیط‌ها / وایرفریمینگ Tickets module / Wireframing

ماژول ۴ - UI / دسکتاپ / ماژول پیشنهادها (بخش ۶) Module 4 - UI / Desktop / Offers module (part 6)

• ماژول پیشنهادها / مقدمه Offers module / Intro

• ماژول پیشنهادها (همه در یک) Offers module (all in one)

ماژول ۴ - UI / موبایل / ماژول ورود (بخش ۷) Module 4 - UI / Mobile / Login module (part 7)

• ماژول ورود / مقدمه Login module / Intro

• ماژول ورود / ساختار اصلی Login Module / Basic structure

• ماژول ورود / ناوبری Login Module / Navigation

• ماژول ورود / تب ثبت‌نام Login Module / Register tab

• ماژول ورود / قابلیت فراموشی رمز عبور Login Module / Forgot password feature

• ماژول ورود / وایرفریمینگ Login Module / Wireframing

ماژول ۴ - UI / موبایل / ماژول فیلم‌ها (بخش ۸) Module 4 - UI / Mobile / Movies module (part 8)

• ماژول فیلم‌ها / مقدمه Movies module / Intro

• ماژول فیلم‌ها / ساختار اصلی Movies module / Basic structure

• ماژول فیلم‌ها / فیلترینگ (بخش ۱) Movies module / Filtering (part 1)

• ماژول فیلم‌ها / فیلترینگ (بخش ۲) Movies module / Filtering (part 2)

• ماژول فیلم‌ها / جستجو (بخش ۱) Movies module / Searching (part 1)

• ماژول فیلم‌ها / جستجو (بخش ۲) Movies module / Searching (part 2)

• ماژول فیلم‌ها / جستجو (بخش ۳) Movies module / Searching (part 3)

• ماژول فیلم‌ها / جستجو (بخش ۴) Movies module / Searching (part 4)

• ماژول فیلم‌ها / بلیط‌ها Movies module / Tickets

• ماژول فیلم‌ها / صندلی‌ها Movies module / Seats

• ماژول فیلم‌ها / تأیید Movies module / Confirmation

• ماژول فیلم‌ها / وایرفریمینگ Movies module / Wireframing

• ماژول فیلم‌ها / اصلاحات Movies module / Fixes

ماژول ۴ - UI / موبایل / ماژول سینماها (بخش ۹) Module 4 - UI / Mobile / Cinemas module (part 9)

• ماژول سینماها / مقدمه Cinemas module / Intro

• ماژول سینماها / تب جستجو Cinemas module / Search tab

• ماژول سینماها / وایرفریمینگ Cinemas module / Wireframing

• ماژول سینماها / بازبینی Cinemas module / Review

ماژول ۴ - UI / موبایل / ماژول حساب کاربری (بخش ۱۰) Module 4 - UI / Mobile / Account module (part 10)

• ماژول حساب کاربری / مقدمه Account module / Intro

• ماژول حساب کاربری / جزئیات حساب Account module / Account details

• ماژول حساب کاربری / قابلیت تغییر رمز عبور Account module / Change password feature

• ماژول حساب کاربری / تنظیمات حساب Account module / Account settings

ماژول ۴ - UI / موبایل / ماژول بلیط‌ها (بخش ۱۱) Module 4 - UI / Mobile / Tickets module (part 11)

• ماژول بلیط‌ها / مقدمه Tickets module / Intro

• ماژول بلیط‌ها (همه در یک) Tickets module (all in one)

ماژول ۴ - UI / موبایل / ماژول پیشنهادها (بخش ۱۲) Module 4 - UI / Mobile / Offers module (part 12)

• ماژول پیشنهادها / مقدمه Offers module / Intro

• ماژول پیشنهادها (همه در یک) Offers module (all in one)

• ماژول پیشنهادها / اصلاح کارت و فاصله گذاری Offers module / Card and spacing fix

تبریک می‌گوییم! Congratulations!

• پایان The end