آموزش ایکس دی پروژه محور و سریع —- طراحی رابط کاربری با Adobe Xd

بیایید به صورت عملی وارد دنیای طراحی رابط کاربری و تجربه کاربری شویم. آموزش ui و ux با ادوبی ایکس دی! این مجموعه فیلم آموزش Xd خیلی سریع و اصولی شما را وارد دنیای طراحی رابط کاربری می‌کند. ما در اینجا به آموزش نرم افزار ایکس دی برای طراحی ui موبایل می‌پردازیم. اما تفاوتی نمی‌کند که رابط کاربری وب یا موبایل طراحی می‌کنید؛‌ اصول طراحی در Xd یکی است.

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

فرق UI و UX چیست؟

برای درک مفهوم رابط کاربری یا User Interface و فرق آن با تجربه کاربری یا User Experience لطفا این مقاله فرق UI و UX را بخوانید.

چرا آموزش Adobe Xd برای طراحی UI و UX ؟

آیا تا به حال پیش آمده که بخواهید برای یک پروژه نرم‌افزاری حمایت یا پذیرش بگیرید. اغلب از شما یک طرح اولیه یا پروتوتایپ می‌خواهند نه؟

آیا پیش آمده که کارفرمایی کاری را به شما بسپرد و بعد از تحویل کار تازه متوجه شود که طرحی که می‌خواسته از نظر گرافیکی یا ساختار صفحه‌ها با چیزی که شما توسعه داده‌اید، متفاوت است؟

با استفاده از نرم افزار Xd که در این درس فرامی‌گیرید می‌توانید طرح و ساختار اپلیکیشن یا یک وبسایت را در محیط کاملا گرافیکی و ظرف یک مدت خیلی کوتاه کامل کنید.

همیشه پس از تایید نهایی طرح گرافیکی شروع به پیاده‌سازی و کدنویسی آن کنید!

نرم‌افزار Xd (+) محصول کمپانی Adobe است. ابزاری مناسب برای طراحی رابط کاربری یا UI. شما با Xd می‌توانید رابط کاربری (UI) و همچنین تجربه کاربری (UX) را طراحی کنید. علاوه بر این می‌توانید ساختار و پروتوتایپ (Prototype) متحرکی از اپ داشته باشید.

هم می‌توانید وبسایت طراحی کنید و هم نرم‌افزار دسکتاپ و هم اپلیکیشن موبایل.

تفاوتی نمی‌کند که طراح اپلیکیشن گوشی هوشمند باشید و یا وبسایت؛ این دوره امکانات Xd را به شما آموزش می‌دهد که می‌توانید در هر پروژه‌ای به خدمت بگیرید.

ایکس دی یا اسکچ؟

نرم افزارهای متعددی برای طراحی UI و UX وجود دارد. برای مقایسه دو نرم افزار سرآمد Adobe Xd و Sketch این مقاله مقایسه ایکس دی و اسکچ را بخوانید.

آموزش Adobe Xd هم رویش بی نظیر است زیرا

• مدرس آن تجربه کار حرفه‌ای دارد.
• هم مفهوم-محور و هم پروژه-محور است.
• هم شروع سریع و هم درک عمیق را تجربه می‌کنید.

آموزش‌های رایگان این دوره

• تفاوت UI و UX و معرفی نرم‌افزار Xd

• آموزش ساخت پروتوتایپ و انیمیشن در Xd

• معرفی ترفندها، ابزارها و منابع مطالعاتی Xd

• آموزش ایجاد سایه سه بعدی در نرم افزار Adobe Xd

کلیدواژه ها

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

سرفصل مطالب

درس اول:‌ تعریف UI و UX و جایگاه نرم‌افزار Xd
1- نگاهی به چرخه توسعه یک نرم افزار (SDLC)
2- بررسی جایگاه Adobe Xd در چرخه توسعه نرم افزار
3- تفاوت طراحی ساختاری و طراحی ظاهری
4- تاریخچه رشد نیاز به طراحی رابط کاربری
5- تفاوت مفهوم رابط کاربری (UI) و تجربه کاربری (UX)
6- مثالی از جایگاه UI و UX
7- معرفی نرم افزار Xd و تاریخچه تولد آن
8- بررسی الگوریتم کاری نرم افزار Xd
9- ویژگی‌های بارز و مثبت Xd
10- مقایسه Sketch، Figme و Xd

درس دوم: نصب Xd و ایجاد اولین پروژه
1- نصب گام به گام نرم افزار Xd
2- نصب و حذف نصب Adobe Creative Cloud
3- ایجاد اولین پروژه با نرم افزار Xd
4- بررسی ابعاد دستگاه‌ها در material io
5- ذخیره پروژه در فضای ابری و سیستم شخصی

درس سوم: صفر تا صد یک پروژه کوچک برای آشنایی سریع با XD
1- کار با فایل‌ها و اسناد در فضای ابری ادوبی
2- طراحی با وفاداری کم (Low Fidelity Design) شامل:
— ایجاد استخوان‌بندی پروژه (Wireframe)
— کار با ابزار Rectangle
— کار با ابزار Text
— کار با Repeat Grid
3- طراحی با وفاداری بالا (High Fidelity Design) شامل:
— افزودن عکس لوگو
— تنظیم پس زمینه صفحه ورود
— تنظیم رنگ بندی نوشته ها و کادرها
— واریز فهرست داده‌های تصویری از آلبوم
— واریز فهرست داده‌های متنی از فایل txt
4- ایجاد پیش‌نمون (prototype)
— تظیم خانه (Home Artboard)
— انتقال از یک صفحه به صفحه دیگر
– اجرا و آزمایش کیفیت اجرای پروژه روی دسکتاپ
5- اجرا و اشتراک گذاری (Share)
— اجرای پروژه روی دسکتاپ
— ضبط فیلم پروژه با Win + G
— ایجاد لینک اشتراک برای بازبینی (Review)
— ایجاد لینک اشتراک برای تیم توسعه (Development)

درس چهارم: استاندارد کردن طراحی با تعریف کامپوننت (Component)
1- سپردن طراحی یک Artboard تازه برای تمرین
2- توجیه استفاده از کامپوننت‌ها در Xd
3- نحوه تعریف کامپوننت در Xd
4- مدیریت کامپوننت‌ سرشاخه (Master component)
5- رونویسی کامپوننت سرشاخه توسط زیرشاخه
6- تعریف کامپوننت‌های تو در تو

درس پنجم: استاندارد کردن طراحی با تعریف کتابخانه رنگ و فونت
1- توجیه تعریف کتابخانه رنگ و فونت
2- تعریف رنگ (Color) در Xd
3- تعریف Character Style در Xd
4- دوراندیشی در تعریف فونت و رنگ

درس ششم: امکانات ساخت پیش‌نمون (prototype) و انیمیشن‌
1- سپردن طراحی چند عنصر برای تمرین
2- انتقال خودکار از اسپلش به صفحه اصلی با Time
3- پیاده سازی یک زمان سنج (Timer) ساده در Xd
4- انتقال از یک اکتیویتی به اکتیویتی دیگر با کلیک روی یک گزینه
5- معنی Easing و Animation و Action در بخش پیش نمون
6- نمایش منوی کشویی (Navigation Drawer) روی یک اکتیویتی
7- کار با اکشن Overlay و Auto-Animate
8- نمایش دیالوگ روی یک اکتیویتی
9- کار با اکشن Drag برای شبیه سازی زوم روی تصویر

درس هفتم: امکاناتی برای کشف و منابعی برای استفاده
1- امکانات ترسیم گرافیکی در Xd
2- استخراج عکس ها به صورت png و svg
3- نصب و استفاده از پلاگین‌ها
4- منابع راهنما و فایل‌های خودآموز XD
5- یوتیوب برای ایده گرفتن در کارهای مختلف
6- بررسی نمونه کیت وایرفریم‌های آماده (Wireframe)
7- بررسی کیت نمونه انیمشین‌های تبدیل (AutoAniamte)
8- وجود چند پلاگین‌ مفید و همچنین امکان پلاگین‌نویسی
9- حتما استفاده از shortcut ها
10- امکان خروجی گیری مستقیم xml و html در آینده