آموزش adobe xd از صفر تا صد (با نکات و اصول مهم)
adobe xd یکی از جدیدترین نرم افزارهای تولید شده شرکت ادوبی بوده و در سال 2017 نسخه اول آن به بازار عرضه شد. این برنامه مناسب برای طراحان ux و ui می باشد که می توانند در آن اقدام به طراحی واسط کاربری و ساخت Prototype کنند. این نرم‌افزار از واسط کاربری آسان، مخاطب‌پسند و کاربردی برخوردار است و از همه مهم‌تر قابل استفاده در سیستم عامل‌های ویندوز و مک می‌باشد. در واقع این نرم افزار ابزارهای جدیدی نسبت به فتوشاپ دارد که علاوه بر افزایش سرعت، کیفیت کار را نیز بالا میبرد. در واقع این دو را نمیتوان جایگزین هم دانست بلکه مکمل همدیگر هستند. در این مقاله به تفصیل این نرم افزار را معرفی خواهیم کرد.
adobe xd چیست؟
شرکت ادوبی این نرم افزار را این چنین معرفی میکند: Adobe XD سریعترین و مطمئن ترین راه حل طراحی UX در بازار است. عبور از تنگناها ، به سرعت تکرار و مقیاس پذیر برای آینده. امنیت و کنترلی که لازم دارید درست در آنجا ساخته شده است. در واقع XD مخفف کلمه‌های Experience Design بوده و در واقع نرم افزار Adobe XD، یک نرم‌افزار طراحی تجربه کاربری برای برنامه‌های تحت وب و موبایل محسوب می‌شود. ادوبی ایکس دی یک نرم افزار طراحی تجربه کاربری vector-based برای برنامه های تحت وب و موبایل است.
کاربرد‌‌های نرم‌افزار Adobe XD
- نرم‌افزار Adobe XD از پلاگین های انیمیشن سازی و طراحی پشتیبانی میکند.
- همچنین این نرم‌افزار امکان انتقال فایلهای مورد نظرشان را بین نرم‌افزار‌های مختلف شرکت Adobe را فراهم کرده و امکان ذخیره در قالب PDF نیز وجود دارد.
- امکان نمونه‌سازی، طراحی و اشتراک گذاری تجربه کاربری بین کاربران وجود دارد.
ویژگی های Adobe XD
| به کمک ادوبی ایکس دی (Adobe xd) می توانید با چند کلیک نمونه اولیه مورد نظر خود را طراحی کنید | طراحی رابط های گرافیکی زیبا و کاربردی | دارای المان طراحی نمونه های تعاملی |
| ساده سازی فرایند برای طراحی رابط کاربری | تهیه خروجی در انواع فرمت های گرافیکی | قابلیت به اشتراک گذاری آسان طرح ها را دارد |
| پشتیبانی از سیستم عامل ویندوز و مک | توانایی کار با نمادها | دارای پنل عناصر انواع آیکون ها، نمادها و … |
| نرم افزاری مناسب برای طراحی واسط کاربری و تجربه کاربری | سرعت بخشیدن به عملیات | قابلیت ویرایش نمادها، رنگ ها و نوع کتابخانه ها |
| یک ابزاری جامع و پر کاربرد برای طراحی prototype / ui/ ux می باشد | Adobe xd سازگاری کامل با سایر نرم افزارهای ادوبی دارد | توانایی و اصول طراحی رابط کاربری |
| Adobe xd یک نرم افزار مناسب برای مبتدیان طراحی UI/UX | ایجاد افکت های بلور به سادگی | دارای کلیدهای میانبر |
| با فرمت های گرافیکی وکتور سازگاری کامل دارد | ایجاد طرح اولیه از نمای کلی وب سایت و اپلیکیشن | Adobe xd دارای رابط کاربری ساده، کاربر پسند و کاربردی است. |
مقایسه Adobe XD با نرم افزارهای دیگر برای طراحی UI/UX
1- invision studio نرم افزاری است که تنها برای سیستم عامل مک منتشر شده است. این نرم افزار وکتور محور است و کارکردهایی مشابه با adobe xd cc دارد بنابراین شباهت هایی با این نرم افزار دارد. اما ضعف آن در نداشتن نسخه ویندوز است.
2-sketch برخلاف اینکه 9 سالی است وارد بازار شده اما تنها نسخه مک دارد. پلاگین های مختلفی برایش طراحی شده و گذشت زمان باعث شده ابزارها و راهکارهای مورد نیاز طراحان به آن افزوده شود. پس ابزاری کامل برای طراحی ui/ux است.
3- فتوشاپ یکی از گزینه های طراحی ui/ux سایت ها و اپ ها برای کاربران ویندوز بوده است. که البته بخاطر ساختاری لایه ای با محدودیت ها و دشواری های زیادی همراه بوده. Adobe XD تمامی این ضعف ها را برطرف کرده و سرعت بالاتری دارد. به عنوان مثال به فرایند طراحی رابط کاربری در فتوشاپ دقت کنید (کلیک کنید)
مزایای adobe xd اینفوگرافی
دانلود دروس آموزش ادوبی ایکس دی
| درس 1،مقدمه
|
درس 2،محیط برنامه
|
| درس3،محیط برنامه
|
درس 4،اسلایدر
|
| درس5،افزودن آیکون
|
درس 6،منوها
|
| درس7،پیشنهاد شگفت انگیز
|
درس 8،بنر ها
|
| درس9،آخرین محصولات
|
درس10،وبلاگ
|
| درس11،فوتر
|
درس12،داینامیک کردن اسلایدر
|
| درس13،صفحه محصول
|
درس14،صفحه محصول قسمت مشخصات
|
| درس15،صفحه محصول قسمت اطلاعات
|
درس16،صفحه محصولات قسمت نظرات
|
| درس17،طراحی صفحه اول گوگل
|
حتما در کنار این مطلب دانلود کنید: آموزش طراحی سایت با وردپرس از صفر تا صد (رایگان)
دستورات و اصول اولیه مهم
کلیات محیط کاربری Adobe XD
الف. فضای کار (Workspace)
-
Artboard: صفحه طراحی که طرح‌های شما روی آن قرار می‌گیرد.
-
Tools Panel: ابزارهای طراحی مانند انتخاب، مستطیل، متن و قلم.
-
Properties Panel: تنظیمات و ویژگی‌های عناصر انتخاب‌شده.
-
Layers Panel: لیست لایه‌ها و عناصر طراحی.
ب. ایجاد Artboard جدید
۱. از نوار ابزار، ابزار Artboard را انتخاب کنید.
۲. اندازه Artboard را انتخاب کنید (مانند iPhone X، Desktop HD).
۳. روی صفحه کلیک کنید تا Artboard ایجاد شود.
ابزارهای اصلی Adobe XD
الف. ابزار انتخاب (Select Tool)
-
برای انتخاب و جابجایی عناصر استفاده می‌شود.
-
کلید میانبر:
V.
ب. ابزار مستطیل (Rectangle Tool)
-
برای ایجاد مستطیل، دکمه‌ها و کادرها استفاده می‌شود.
-
کلید میانبر:
R.
ج. ابزار متن (Text Tool)
-
برای افزودن متن به طرح استفاده می‌شود.
-
کلید میانبر:
T.
د. ابزار قلم (Pen Tool)
-
برای ایجاد اشکال سفارشی و خطوط استفاده می‌شود.
-
کلید میانبر:
P.
طراحی رابط کاربری
الف. ایجاد دکمه
۱. ابزار Rectangle Tool را انتخاب کنید.
۲. یک مستطیل رسم کنید و رنگ و سایه‌ای به آن اضافه کنید.
۳. ابزار Text Tool را انتخاب کنید و متن دکمه را اضافه کنید.
ب. ایجاد منو
۱. ابزار Rectangle Tool را انتخاب کنید و یک نوار منو ایجاد کنید.
۲. ابزار Text Tool را انتخاب کنید و عناصر منو را اضافه کنید.
ج. ایجاد فرم ورود
۱. ابزار Rectangle Tool را انتخاب کنید و کادرهای ورودی ایجاد کنید.
۲. ابزار Text Tool را انتخاب کنید و برچسب‌ها را اضافه کنید.
نمونه‌سازی تعاملی (Prototyping)
الف. ایجاد لینک بین Artboardها
۱. به بخش Prototype بروید.
۲. روی عنصر مورد نظر کلیک کنید و آن را به Artboard بعدی بکشید.
۳. نوع انتقال (Transition) و انیمیشن را انتخاب کنید.
ب. پیش‌نمایش نمونه‌سازی
۱. روی دکمه Play کلیک کنید تا نمونه‌سازی را مشاهده کنید.
۲. تعاملات و انتقال‌ها را بررسی کنید.
اشتراک‌گذاری و همکاری
الف. اشتراک‌گذاری طرح
۱. به بخش Share بروید.
۲. لینک اشتراک‌گذاری را ایجاد کنید و آن را با دیگران به اشتراک بگذارید.
ب. همکاری تیمی
۱. از ویژگی Coediting برای همکاری هم‌زمان با تیم استفاده کنید.
۲. نظرات و بازخوردها را در طرح اضافه کنید.
سوالات متدوال
1- Adobe XD مناسب چه افرادی است؟
Adobe XD یک ابزار کارآمد برای طراحان تجربه کاربری و مناسب برای هر پروژه طراحی است. هر فرد آماتور یا حرفه ای برای طراحی و تولید هر پروژه بزرگ یا کوچکی، قادر به استفاده از Adobe XD است.
2- محیط کاربری Adobe XD به چه صورت است؟
در Adobe XD شما به دو بخش دیزاین (Design) و پروتوتایپ (Prototype) دسترسی دارید.
در بخش دیزاین شما می توانید آرت بردهای خود را ببینید و با کلیک روی هرکدام به لایه های طراحی آن صفحه دسترسی پیدا کنید.در بخش پروتوتایپ می توانید صفحه ها را به یکدیگر لینک کنید و با کلیک کردن به روی منو به صفحه دیگر منتقل شوید این می تواند بهترین پیش نمایش برای کار شما باشد.
حتما در کنار این مطلب دانلود کنید: آموزش صفر تا صد اصول طراحی رابط کاربری
3- نرم‌افزار Adobe XD را چگونه میتوان دانلود کرد؟
برای دانلود نرم‌افزار Adobe XD نیازی نیست که نسخه‌های کرک شده را دانلود کنید! بله خیالتان راحت برای استفاده از این نرم‌افزار فوق‌العاده فقط باید ویندوز 10 نصب داشته باشید، همچنین حتما باید یک نرم‌افزار تغییر آی‌پی هم فعال داشته باشید چون شرکت Adobe ایران را تحریم کرده است.
در قدم بعدی از وب‌سایت اصلی Adobe نرم‌افزار > Adobe Creative cloud را دانلود کنید و در قدم بعدی از داخل نرم‌افزار Adobe Creative cloud به صورت کاملا اورجینال از سرورهای اصلی خود شرکت Adobe، نرم‌افزار Adobe XD را با خیال راحت نصب کنید.
به عنوان طراح گرافیک و رابط کاربری مهاجرت کردم استرالیا اما خب اینجا خیلی سخت گیرن بخصوص توانایی کار با نرم افزار ادوبی ایکس دی یه باید هست برای کار توی هر کمپانی و شدیدا این نرم افزار خواهان داره اینور آب. چند ماه پیش یه کلاس انلاین ایران شرکت کردم و یه پک دو میلیونی هم خریدم اما باز هم خییلی ناقص بودن. اتفاقی پک اموزشی شما رو دیدم که توی همین صفحه هم تبلیغش هست، دو هفته تمام وقت گذاشتم، اونقد کامل بود و بروز که میتونم بگم تسلط کامل پیدا کردم و الان با حقوق 4 هزار دلاری مشغل بکار شدم توی یه شرکت دولوپر معروف. بینهایت بهتون مدیونم بابت دوره تون ممنون. این آومزشای رایگان هم بگم وقت تلف کردنه. وقت ادما خیلی مهم تر
پاسخممنون خوشحالم که مفید بوده. بله دوره اموزشی مون بصورت سخت گیرانه ای از بین چندین دوره و پک گلچین شده :) اما این ویدوهای رایگان این صفحه هم برای هموطنان عزیزی هست که متاسفانه توان خرید همین دوره ارزان قیمت رو هم ندارن و همین دستورات مبتدی و اموزشهای بیسیک ممکنه کاربردی باشه واسشون
سلام
پاسخبا تشکر از این فایلهای آموزشی
میخواستم بدونم این آموزشهای adobe xd با چه ورژنی انجام میشه؟
لطفا سریع پاسخ بدین
ممنون
راهکار برطرف کردن ارور21 در هنگام نصب کردن ادوبی ایکس بر روی لب تاپ مدل vostro 1015 چی میتونه باشه البته اینم بگم ویندوز 10 آخرین نسخه نصب شده
پاسخقسمت دوازده به بعد آموزش xd رو نمیذارین؟؟
پاسخبا تدریس آقای فرشاد وارسته؟؟
خودش تو ویدیو ۱۲ که شما زدین آخر گفته ادامه داره
کو پس؟؟ :(((((
درود. ویدیوی 12 اخرین ویدیوی این مجموعه هست و بعد از اون محتوایی تولید نشده ضمنا آموزش کامل هست
سلام وقت بخیر. اموزشهای رایگان تون خیلی ناقصه. نه فایل های سورس رو داره که بشه روشون کار کرد نه پلاگین هایی که معرفی میشه نه سورس تصاویر حتی. چه باید کرد و این دوره اصلا تا چه سطحی یاد میده؟
پاسخببینید متاسفانه دوره رایگان هست و نباید انتظار بی نقص بودن و دسترسی به سورس فایل ها رو داشته باشین. ضمنا در مورد سطح دوره باید گفت بیشتر برای کسانی هست که میخوان با نرم افزار اشنا بشن و برای یادگیری حرفه ای یا مهاجرت یا کار درشرکت های معروف یا انجام کار ازاد فریلنسری باید دوره حرفه ای رو خریداری کنید یک بار برای همیشه دو هفته وقت میذارین و صفر تا صد برنامه رو یاد می گیرین کلی روی اینده تون تاثیر داره. از این بابت مطمئن باشید بخصوص بعد از تصاحب فیگما توسط ادوبی!