آموزش Adobe XD و مباحث Ui Ux از صفر تا صد

معرفی آموزش Ui Ux  با محوریت نرم افزار Adobe XD

معرفی و مقایسه رابط کاربری و تجربه کاربری

در ابتدای صحبت‌هایمان، به تعریف ساده‌ای از دو عنصر اساسی در طراحی دیجیتال، یعنی رابط کاربری یا User Interface (UI) و تجربه کاربری یا User Experience (UX) می‌پردازیم و سپس به مقایسه بین آن‌ها خواهیم پرداخت.

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

برای قیاس بین UI و UX، می‌توان گفت که UI به عنوان یک زیرمجموعه از UX عمل می‌کند. به این معنا که یک UI مناسب در کنار یک محتوای مفید و جذاب، می‌تواند به ایجاد یک تجربه کاربری مثبت کمک کند. اما باید توجه داشت که اینکه یک رابط کاربری زیبا به نظر برسد، ممکن است به تنهایی کافی نباشد و برای بهبود تجربه کاربری، نیاز به بیشتر از این داشته باشیم.

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

مزایا و ویژگی های adobe xd

در این قسمت از آموزش صفر تا صد ui و ux به بررسی مزایا و ویژگی های نرم افزار adobe xd می پردازیم.

• طراحی انواع رابط کاربری
• دقت و سرعت بالا
• دسترسی به فضای ذخیره سازی ابری
• سازگاری با فایل های ادوبی
• امکان دسترسی به نسخه های سیستم عامل مختلف
• قابلیت کار با نماد ها
• دارای نمونه پروژه های اولیه
• دارای کتابخانه های گسترده
• امکان تهیه خروجی با فرمت های مختلف

برای آشنایی بیشتر با مزایا و ویژگی های adobe xd می توانید به دانلود آموزش adobe xd و دانلود آموزش ui ux بپردازید.

یک مثال و مقایسه معروف !

حتما شما هم مثال معروفی که در مقایسه این دو با شیشه سس زده میشود را دیده اید! شاید از نظر تجربه کاربری شیشه ایستاده زیبا به نظر برسد ولی برای کاربرد بهتر و تجربه بهتر کاربر برای استفاده از این محصول نیاز است که کلا برعکس شود!

مفاهیم را توی ذهنت سوار کن و توی XD پیاده کن!

بنابراین همانطور که تاکنون حدس زده اید برای آموزش Ui و آموزش Ux ما به یک سری مفاهیم تئوری نیاز داریم که بتوانیم به تجربه کاربری مناسب کاربر محصول خوب با استفاده از آموزش Ux دست پیدا کنیم و همینطور برای رابط کاربری و آموزش Ui نیز باید با مفاهیمی آشنا شویم.

اما از آنجایی که یادگیری تئوری دردی را دوا نمیکند در رسانه آموزشی مکتب تی وی در دوره آموزش Ui Ux تصمیم بر آن شد که به صورت کامل و جامع نرم افزار Adobe XD را هم آموزش دهیم تا مفاهیم فراگرفته شده را در این نرم افزار درجا اجرا کنیم بنابراین شما آموزش Ui و آموزش Ux و آموزش Adobe XD را به صورت یکجا در این دوره آموزش Ui Ux میتوانید دریافت نمایید.

نرم افزار Adobe XD هم همانطور که حتما میدانید پیشرفت های چشم گیری را در زمینه تخصصی طراحی رابط کاربری داشته است و با توجه به همگامی با سایر نرم افزارهای کمپانی ادوبی گوی سبقت را از سایر نرم افزارهای این حوزه ربوده است. بنابراین برای یادگیری کار با adobe xd نیاز به دانلود آموزش adobe xd و شرکت در دوره های آموزش adobe xd از صفر تا صد دارید.

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

میانگین درآمد Ui Ux به عدد و رقم!

به طور کلی درآمد متخصصین Ui Ux در ابتدای راه یعنی بعد از اینکه این دوره آموزش Ui Ux را گذراندید و با استفاده از فایل های تمرینی همراه استاد پورتفولیوی خود را تا حدی تکمیل نمودید میتوانید انتظار حقوق تا سقف 8 میلیون تومان را از شرکت های متفاوت داشته باشید و بعد از حدود 3 سال و افزایش سابقه کار و رزومه این میزان حقوق تا سقف 20 میلیون تومان نیز در بازار کار دیده میشود.

علاوه بر استخدامی میتوان به پروژه های متعدد این حوزه نیز اشاره نمود که برای طراح نجربه کاربری دستمزد حدود 7 میلیونی برای یک سایت 6 صفحه ای دیده میشود و برای طراح رابط کاربری برای همان سایت 6 صفحه ای به طور میانگین دستمزد 5 میلیون تومانی دیده میشود.

کسب درآمد دلاری بعد از دوره آموزش adobe xd

فارغ از تمام این مسائل اگر شما در دوره آموزش کسب درآمد دلاری رسانه آموزشی مکتب تی وی که به عنوان هدیه نیز بعد از تهیه سری کامل متخصص طراحی رابط کاربری در اختیار شما قرار میگیرد نیز شرکت کرده باشید و بتوانید حساب دلاری برای خود تشکیل دهید با توجه به ارزش دلار و همینطور بازار کار خوب این حوزه مخصوصا در اروپای شرقی و کانادا و… میتوانید رقم های بالاتری نیز داشته باشید.

برای یافتن جایگاه کاری و شروع کسب درآمد خود پس از دوره آموزش Ui Ux رسانه آموزشی مکتب تی وی میتوانید برای پروژه ها عبارت ( پروژه های رابط کاربری پونیشا ) را سرچ کنید و برای استخدام هم ( استخدام طراح رابط کاربری ) را سرچ کنید تا یکی از موقعیت هایی که البته به شرط تمرین و تکرار و تکمیل پورتفولیوی خود شماست را به دست آورید.

آموزش Ui Ux رسانه آموزشی مکتب تی وی با محوریت نرم افزار Adobe XD

در این دوره آموزش نرم افزار adobe xd از سری دوره های آموزش Ui همانطور که ذکر شد هرآنچه شما نیاز دارید توسط یک استادی که علاوه بر تدریس خود متخصص در بازار کار بوده و با چالش ها و نیازهای طراحان رابط کاربری آشناست و در یک دوره تعاملی آموزش Ui Ux که طبق استانداردهای مکتب تی وی ضبط شده است توانسته یکی از کامل ترین دوره های آموزش جامع adobe xd مورد نیاز برای وارد شدن به بازار کار طراحی رابط کاربری و تجربه کاربری را پیاده سازی نماید.

این دوره آموزش adobe xd از صفر تا صد به صورت پروژه محوه تمامی ابزارها و تکنیک های طراحی رابط کاربری با Adobe XD را آموزش می دهد. این دوره آموزش ui و ux برای افراد علاقه مند در زمینه طراحی رابط کاربری با Adobe XD مناسب است. هدف این دوره آموزش نرم افزار adobe xd نیز آشنایی با تکنیک های طراحی رابط کاربری ادوبی ایکس دی است.

علاقه مندان جهت فراگیری آموزش نرم افزار adobe xd می توانند در دوره طراحی رابط کاربری با Adobe XD شرکت کنند یا دانلود آموزش adobe xd از صفر تا صد یا دانلود آموزش ui ux اقدام نمایند.

معرفی قسمت های دوره جامع آموزش طراحی رابط کاربری و تجربه کاربری

جهت مشاهده معرفی کامل هر قسمت روی آن کلیک نمایید.

فصل صفر : معرفی

معرفی

در این قسمت از آموزش رابط کاربری و تجربه کاربری در ایکس دی ، به معرفی دوره اعم از نکاتی که در دوره آموزش داده خواهد شد و خود نرم افزار adobe xd و نحوه دانلود آن میپردازیم.

فصل یک : شروع

معرفی

در این قسمت از آموزش تجربه کاربری و آموزش طراحی رابط کاربری با adobe xd ، به معرفی دوره اعم از نکاتی که در دوره آموزش داده خواهد شد و خود نرم افزار adobe xd و نحوه دانلود آن میپردازیم.

1.صفحه شروع

در این قسمت از آموزش طراحی رابط کاربری با Adobe XD ما یک تور سریع در نرم صفحه شروع نرم افزار xd خواهیم داشت و به معرفی قسمت های مختلف از جمله:

• Home page
• اندازه صفحه های مختلف برای شروع
• Add-ones
• Plugins
• Ui kits
• App integration
• انواع محل ذخیره سازی

خواهیم پرداخت.

2.ظاهر داخلی-منوها-ابزارها

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

• پنل properties
• تمام tool ها و properties آنها
• پنل assets
• پنل layers
• پنل plugins
• Hamburger menu
• تب Design
• تب Prototype

تب Share

3.لایه ها

در این قسمت از آموزش صفر تا صد adobe xd به بررسی انواع لایه ها و ویژگی های آنها میپردازیم و در انتها قادر خواهیم بود یک لایه را ایجاد، حذف، تغییرنام، پنهان، قفل، گروه بندی، دوبرابر، تبدیل به component کنیم و از آنها خروجی بگیریم.

4.پلاگین ها

در این قسمت از آموزش نرم افزار adobe xd  یاد میگیریم چگونه به پنل plugins دسترسی داشته باشیم و روش پیدا کردن،نصب، حذف، آپدیت، غیرفعال و فعال کردن و استفاده از پلاگین ها را یاد میگیریم و به معرفی 2 پلاگین جدید میپردازیم.

5.ادغام

در این قسمت از آموزش طراحی رابط کاربری ادوبی ایکس دی به معرفی تب app integrations و انواع برنامه های قابل ادغام با xd میپردازیم و اموزش میبینیم که چگونه فایل ها را برای ادغام در برنامه های دیگر exportable کنیم و همچنین نحوه ادغام طراحی در برنامه zeplin را اموزش میبینیم.

6.Components

در این قسمت از آموزش adobe xd از صفر تا صد  با component ها، نحوه کار با آنها، ویژگی آنها، حذف و اعمال انواع تغییرات بر آنها و انواع componentهای محلی و خارجی آشنا میشویم.

7.مفاهیم پروتوتایپ

در این قسمت از آموزش xd به مفاهیم اصلی و پایه و فواید پروتوتایپ در ui و ux میپردازیم. که شامل موارد زیر میباشد:

• پروتوتایپ چیست
• از چه بخش هایی تشکیل شده
• توضیح هر بخش
• طراحی تعاملی چیست
• دلایل نیاز به پروتوتایپ کردن
• ویژگی های آن
• هزینه های آن
• بررسی روند طراحی
• تعامل با کاربر
• انواع پروتوتایپ
• توضیح پروتوتایپ کاغذی

ابزارهای پروتوتایپ

8.پروتوتایپ

در این قسمت از آموزش ui و ux در تب prototype با پنل interaction و انواع triggerها، actionها و animationها در ایجاد پروتوتایپ آشنا میشنویم و بعد از آشنایی با جریان ها و اسلاید home به ایجاد یک پروتوتایپ ساده میپردازیم.

9.اشتراک گذاری

در این قسمت از آموزش طراحی رابط کاربری با Adobe XD به انواع روش های اشتراک گذاری آنلاین فایل طراحی و ویژگی های آنها میپردازیم و آموزش میبینیم که چگونه فایل را share کنیم، به لینک فایل های share شده دسترسی پیدا کنیم، انها را حذف کنیم، در فایل های share شده کامنت بگذاریم و در کامنت گذاری ها و از پین و منشن کردن استفاده کنیم و همچنین با ویژگی های اشتراک گذاری برای  developer ها آشنا میشویم.

فصل دوم : عکس و وکتورها

1. وارد کردن

در این بخش از آموزش کار با adobe xd  با نحوه import کردن فایل ها در نرم افزار xd آشنا میشویم و آموزش میبینیم که چه فایل هایی قابل import شدن هستند و با انواع روش های وارد کردن فایل ها و به خصوص import کردن فایل های فتوشاپ و ایلاستریتور آشنا میشویم.

2. ماسک

در این قسمت از آموزش نرم افزار adobe xd با چندین روش مختلف برای ایجاد آواتار و یا… از mask کردن استفاده میکنیم و همچنین یاد میگیریم چگونه با text هم ماسک بسازیم.

3. رنگ ها

در این قسمت از آموزش کار با adobe xd با نحوه استفاده از رنگ ها در نرم افزار و ویژگی و خواص استفاده از رنگ ها در طراحی آشنا میشویم.

استفاده از طیف رنگی یا رنگ های کامل را یاد میگیریم و با انواع رنگ های HEX،RGB و HSB آشنا میشویم و در آخر نحوه ذخیره کردن پالت های رنگی را یاد میگیریم.

4. تیرگی

در این قسمت از آموزش رابط کاربری و تجربه کاربری با نحوه استفاده از blur برای جلب توجه کاربر و ویژگی های آشنا میشویم و به بررسی انواع object blur و background blur و نحوه کار با آنها در یک ui میپردازیم.

5. آیکون

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

6. ادیت SVG

در این قسمت از آموزش جامع adobe xd درباره فایل های SVG و نحوه کار با آنها و تفاوت آنها با فایل های PNG و JPG میپردازیم و یاد میگیریم که چگونه فایل های SVG را تغییر رنگ، تغییر شکل و تغییر حالت دهیم و در پایان با همین روش به ایجاد یک تایپوگرافی میپردازیم.

فصل سوم : مفهوم پروتوتایپ

1. Wireframe

در این بخش از آموزش طراحی رابط کاربری با Adobe XD به مفاهیم wireframe میپردازیم و با ویژگی های artboards و grids بیشتر آشنا میشویم و در نهایت به طراحی یک wireframe میپردازیم.

2. Repeat grids

در این قسمت از آموزش رابط کاربری و تجربه کاربری به نحوه ایجاد repeat grids، نحوه کار با آنها و موارد استفاده آنها و نحوه وارد کردن عکس و متن و.. درآنها میپردازیم و درباره نحوه scroll کردن آموزش میبینیم.

3. Overly

در این قسمت از آموزش ui و ux به بررسی یکی از روش های پروتوتایپ یعنی overly میپردازیم و درباره مزایا و نحوه کار با آن آموزش میبینیم.

4. Responsive

در این قسمت از آموزش نرم افزار adobe xd به ویژگی های فایل responsive میپردازیم و آموزش میبینیم چگونه فایل های را برای انواع دستگاه های مختلف بدون مشکل تغییر سایز دهیم.

فصل چهارم : AutoAnimate

1. Auto animate

در این بخش از آموزش صفر تا صد adobe xd  به معرفی ویژگی auto animate و آشنایی اولیه با نحوه کار با این ویژگی میپردازیم.

2. انواع انیمیشن ها

در این قسمت از آموزش طراحی رابط کاربری ادوبی ایکس دی به آشنایی با انواع Easing ها در حالت autoanimate میپردازیم.

3. Auto animate UI

در این قسمت از آموزش رابط کاربری و تجربه کاربری یک رابط کاربری تعاملی با استفاده از autoanimate طراحی خواهیم کرد.

4. چرخونه تصاویر

در این قسمت از آموزش صفر تا صد adobe xd با اسفاده از قابلیت autoanimate  یک چرخونه تصاویر و یا اصطلاحا یک گالری متحرک و تعاملی طراحی خواهیم کرد.

5. جریان حرکت

در این قسمت از آموزش طراحی رابط کاربری با adobe xd به طراحی یک نوار پیشرفت یا اصطلاحا progress bar میپردازیم و به کمک آنها کم و زیاد کردن opacity تصاویر و یا قابلیت زوم کردن را طراحی میکنیم.

6. اسلایدر

در این قسمت از آموزش جامع adobe xd به طراحی یک اسلایدر عکس که معمولا برای هدر سایت ها مورد استفاده قرار میگیرد میپردازیم.

7. After effects

در این قسمت از آموزش کار با adobe xd به نحوه تعامل برنامه xd با برنامه after effects میپردازیم و روش انتقال طراحی از xd به ae را اموزش میبینیم.

8. ویجت

در قسمت 27 از آموزش صفر تا صد ui و ux به طراحی چند ویجت ساده با استفاده از ویژگی autoanimate میپردازیم.

9. فتوشاپ

در قسمت 27 از آموزش صفر تا صد ui و ux با ویژگی parallax  آشنا میشویم و به پیاده سازی این افکت در  یک رابط کاربری با استفاده از ترکیب نرم افزارهای xd و فتوشاپ میپردازیم.

فصل پنجم : Voice Interaction

1. نحوه کار

در این بخش از آموزش نرم افزار adobe xd با قابلیت voice interaction اشنا میشنویم و به نحوه استفاده و کاربرد ان در طراحی رابط کاربری میپردازیم.

2. ترکیب تعامل

در این قسمت از آموزش adobe xd به ترکیب قابلت touch و voice interaction برای طراحی یک رابط کاربری میپردازیم.

3. ضبط صوتی پروتوتایپ

در این قسمت از آموزش رابط کاربری و تجربه کاربری به ضبط یک پروتوتایپ صوتی میپردازیم.

فصل ششم : ارائه دادن

1. پیش نمایش در موبایل

در این بخش از دوره طراحی رابط کاربری ادوبی ایکس دی با نحوه استفاده از گزینه mobile preview و استفاده از نسخه گوشی نرم افزار xd آشنا میشویم.

2. پیش نمایش در صفحه

در این قسمت از آموزش صفر تا صد adobe xd با نحوه استفاده از گزینه desktop preview آشنا میشویم و به بررسی تعدادی تریک در استفاده از flow و جریان ها در پروتوتایپ ها هم میپردازیم.

3. خروجی گرفتن

در این قسمت از آموزش کار با adobe xd به انواع روش های خروجی گرفتن و انواع فرمت های خروجی در نرم افزار xd میپردازیم.

4. خروجی pdf

در این قسمت از آموزش adobe xd از صفر تا صد به صورت اختصاصی به خروجی گرفتن از طراحی با فرمت PDF در  نرم افزار xd میپردازیم.

فصل هفتم : کاربر شناسی

1. جایگاه کاربر

در این بخش از آموزش جامع adobe xd به موضوع جایگاه کاربر در طراحی رابط و تجربه کاربری میپردازیم.

2. کاربرپژوهی

در این قسمت از دوره طراحی رابط کاربری ادوبی ایکس دی با مفهوم کاربرپژوهی و جمع آوری اطلاعات درباره کاربران و ایجاد پرسونا میپردازیم.

3. روانشناسی کاربران

در این قسمت از آموزش صفر تا صد ui و ux درباره روانشناسی کاربران و نحوه شناخت کاربران و ویژگی های آنها به بحث میپردازیم.

فصل هشتم : طراحی محصول

1. جریان کاربری

در این بخش از آموزش ui و ux با جریان کاربری یا user flow آشنا میشویم و به اهمیت آن در طراحی رابط و تجربه کاربری میپردازیم.

2. معماری اطلاعات

در این قسمت از آموزش xd با ویژگی معماری اطلاعات در فرآیند طراحی تجربه کاربری و اهمیت آن آشنا میشویم.

فصل نهم : روانشناسی رنگ ها

روانشناسی رنگ ها

در این بخش از آموزش جامع adobe xd به ماهیت روانشناسی رنگ ها و اهمیت آن در طراحی رابط کاربری میپردازیم.

فصل دهم : طراحی تعاملی

طراحی تعاملی

در این قسمت از آموزش رابط کاربری و تجربه کاربری با طراحی تعاملی و یا به عبارتی interaction design آشنا میشویم و به نحوه استفاده ، اهمیت و ابزارهای کار با این ویژگی میپردازیم.

فصل یازدهم : اصول و قوانین طراحی

1. قوانین تجربه کاربری

در این قسمت از آموزش صفر تا صد adobe xd با اصول اولیه و پایه طراحی تجربه کاربری و اهمیت آنها آشنا میشویم.

2. اصول گشتالت

در این قسمت از آموزش xd با اصول گشتالت و موارد استفاده آنها در طراحی رابط و تجربه کاربری میپردازیم.

فصل دوازدهم : مدل های ذهنی

مدل های ذهنی

در این قسمت از آموزش adobe xd از صفر تا صد به توضیح یکی از انواع مدل های طراحی یعنی مدل های ذهنی و تاثیر آن در طراحی تجربه و رابط کاربری میپردازیم .

فصل سیزدهم : آزمون کاربردپذیری

1. مفهوم آزمون کاربردپذیری

در این قسمت از آموزش طراحی رابط کاربری ادوبی ایکس دی درباره تعریف و مفهوم و فواید ازمون کاربرپذیری صحبت میکنیم.

2. استخدام شرکت کنندگان در تست

در این قسمت از آموزش ui و ux درباره نحوه انتخاب و استخدام شرکت کنندگان در این تست میپردازیم.

3. سوالات تست

در این قسمت از آموزش رابط کاربری و تجربه کاربری درباره سوالاتی که باید در تست پرسیده شود صحبت میکنیم.

4. آماده کردن لیست کارها

در این قسمت از آموزش adobe xd از صفر تا صد لیست کارهای مورد نیاز برای انجام در جلسات تست را بررسی میکنیم.

5. محیط مناسب تست

در این قسمت از آموزش کار با adobe xd محیط و امکانات و شرایط مطبوع برای انجام تست را بررسی میکنیم.

6. انجام تست

در این قسمت از آموزش ui و ux درباره نحوه انجام تست و نکاتی برای بهتر انجام دادن آن صحبت میکنیم.

7. آنالیز داده ها و نتیجه گیری

در این قسمت از آموزش جامع adobe xd درباره جمع آوری، تحلیل و بررسی و گزارش گیری نهایی داده ها صحبت میکنیم.

فصل چهاردهم : نتیجه گیری

نتیجه گیری

در این قسمت از آموزش صفر تا صد ui و ux به رسم همه ویدیوهای آموزشی به یک نتیجه گیری و جمع بندی کلی درباره این دوره اموزش جامع طراحی رابط و تجربه کاربری با نرم افزار xd میپردازیم.