نرم افزار Adobe Xd چیست؟

نرم افزار Adobe Xd یا Adobe Experience Design در سال ۲۰۱۶ از طرف کمپانی بزرگ Adobe برای سیستم عامل ویندوز و مکیناش عرضه شد. این نرم افزار مخصوص طراحان رابط و تجربه کاربری تولید شده و نواقص نرم افزا دیگر خود را یعنی Adobe Photoshop را در حوزه تجربه و رابط کاربری رفع کرده است. ایکس دی به تازگی جایگاه خود را در بین طراحان رابط کاربری پیدا کرده و مرتب در حال بروزرسانی و ارتقاء امکانات خود بوده و هست.

چرا باید از Adobe Xd به جای Photoshop استفاده کنیم؟

سوالی که خیلی پرسیده می شود این است که وقتی نرم افزار معروف و پر قدرت فتوشاپ هست چرا از Adobe Xd استفاده کنیم؟ پاسخ: درست است که فتوشاپ نرم افزار قدرتمند و محبوب بین طراحان و عکاسان است اما فراموش نکنین که عملکرد و امکانات این فتوشاپ برای طراحی رابط و تجربه کاربری ساخته نشده و نقص هایی در فتوشاپ برای رابط و تجربه کاربری وجود دارد و به همین دلیل است که شرکت ادوبی نرم افزاری جدا برای رابط و تجربه کاربری ارائه داده است.

از تفاوت بین این دو نرم افزار می توان به طور خلاصه به موارد زیر اشاره کرد (اما برای اطلاعات بیشتر مقاله زیر را نیز می توانید مطالعه کنید):

بیشتر بخوانید: تفاوت adobe xd و adobe photoshop

حجم کم و سرعت زیاد نسبت به فتوشاپ: فتوشاپ به دلیل داشتن امکانات زیاد(فیلترها، تنظیمات رنگ، سه بعدی و … ) دارای حجم زیاد است که پردازش بالای سیستم را می طلبد اما Adobe Xd به دلیل اینکه به خیلی از این امکانات نیازی ندارد دارای حجم کم بوده و سرعت بالا نسبت به فتوشاپ دارد.

ویرایش همزمان: برای کاربران Adobe Xd که روی یک فایل میخواهند کار کنند این امکان فراهم است که همزمان طراحی کنند و همه افراد به صورت زنده و در لحظه تغییرات سایر افراد هم مشاهده کنند.

شبکه تکرار یا Repeat grid: تکرار المان های طراحی در فتوشاپ کاری وقت گیر است و باعث افزایش حجم و کاهش سرعت می شود اما Adobe Xd با بهره گیری از سیستم شبکه تکرار این مشکل فتوشاپ را رفع کرده و در یک لحظه می توان تمام المان ها تغییر داد.(مشاهده نمونه)

انیمیشن: با توجه به اینکه انیمیشن (ویکی پدیا) بخش جدایی ناپذیر تجربه کاربری است و از طرفی ایجاد انیمیشن مخصوصا انیمیشن تعاملی در فتوشاپ به صورت محدود انجام می شود، ادوبی ایکس دی با قابلیت انیمیشن مناسب برای تجربه کاربری از ادوبی جلوتر است.

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

جابجایی و مرتب سازی سریع با ویژگی stacks: این امکان به طراح اجازه می دهد تا به راحتی عناصر مد نظر خود را جابجا و مرتب سازی کند به این صورت که به طور خودکار مکان سایر عناصر هم در جایگاه جدید خود قرار می گیرند اما در فتوشاپ این مرتب سازی بسیار زمان بر و حوصله سر بر است.

تعامل با سایر ابزارها: Adobe Xd می تواند فایل های ایلاستریتور، فتوشاپ، اسکچ و افترافکتز را باز کند بعلاوه می تواند به سایر نرم افزارهای مرتبط مثل مایکروسافت تیم، جیرا و زپلین متصل شود. در ضمن امکان انتقال پروژه از مکینتاش به ویندوز هم به راحتی امکان پذیر است.

کامپوننت: یکی از بخش های جالب Adobe Xd بخش کامپوننت است که قبلا با عنوان سمبل شناخته می شد به این ترتیب می توانید عنصر خود را ایجاد و در تمام بخش پروژه یا پروژه های خود استفاده و آن را سفارشی کنید و کامپوننت استفاده شده در تمام پروژه را یکباره ویرایش کنید.

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

پلاگین ها: با توجه به اینکه هر توسعه دهنده می تواند برای Adobe Xd پلاگین بنویسد. ایکس دی دامنه وسیعی از پلاگین های مختلف و کاربردی را دارد که از طراحی گرفته تا انیمیشن و نمونه سازی را شامل می شود.

اشتراک و بازخورد: کاربران Adobe Xd این امکان را دارند که پروژه خود را به اشتراک بگذارند و از کاربران و یا تیم خود بازخورد بگیرند.

نمونه پروژه های دوره آموزش جامع Adobe Xd

در این دوره در کنار معرفی و کار با ابزار چند پروژه کوچک هم پیاده سازی شده که چند نمونه از پروژه ها را می تواند مشاهده کنید اما برای مشاهده کامل تر به صفحات بخش مقدماتی و بخش پیشرفته دوره مراجعه کنید:

پیشخوان پنل کاربری طراحی شده با Adobe Xd
پیشخوان پنل کاربری طراحی شده با Adobe Xd
طراحی صفحه فرود (Landing Page) در Adobe Xd
طراحی صفحه فرود (Landing Page) در Adobe Xd

نمونه کار دانشجویان دوره

مراحل یادگیری دوره آموزش جامع Adobe Xd

اگر خواسته باشیم مراحل این دوره را به طور خلاصه بیان کنیم شامل مراحل زیر است(برای جزئیات بیشتر سرفصل های دوره را مطالعه کنید):

  1. در ابتدا کمی درباره رابط و تجربه کاربری و  خواهیم گفت و به سراغ معرفی و دلیل برتری و همچنین حالت های نصب نرم افزار Adobe Xd خواهیم رفت.
  2. کلیه ابزار مرتبط با طراحی به همراه تکنیک های استفاده از آن بررسی و در قالب مثال های کاربردی استفاده می شوند.
  3. به سراغ طراحی نمونه کامل یک صفحه فرود یا Landing page خواهیم رفت و چالش های آن را بررسی می کنیم.
  4. مبانی پروتوتایپ و انیمیشن ها در Adobe Xd را به همراه مثال و پس از آن چند تکنیک انیمیشن را بررسی میکنیم.
  5. به بررسی استاندارد طراحی رابط کاربری iPhone X در Adobe Xd خواهیم پرداخت و چند صفحه از پروژه «اپلیکیشن آکادمی ادوبی» را طراحی خواهیم کرد.
  6. در پایان برای ارائه طرح آماده می شویم، طرح را ضبط کرده، موکاپ و برای بازخورد به اشتراک خواهیم گذاشت.
طریقه استفاده از موکاپ ها برای طرح نرم افزار
طریقه استفاده از موکاپ ها برای طرح نرم افزار

سرفصل های آموزش جامع Adobe Xd

فصل اول: مقدمات

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

فصل دوم: طراحی در Adobe Xd

  • ابزار چهارضلعی و تنظیمات آن
  • مفهوم لایه ها و گروه بندی
  • رنگ محتوا و حاشیه
  • سایه ها
  • ساخت وایرفریم ساده پنل کاربری تنها با چهارضلعی
  • ابزار بیضی و ساخت اصولی نمودار دایره ای
  • ابزار چندضلعی و ستاره
  • ابزار خط و رسم چند آیکون
  • ویژگی چیدمان و توزیع لایه ها
  • ابزار متن و پاراگراف
  • رفع مشکل چیدمان و اعداد در زبان فارسی
  • استفاده از فونت آیکون FontAwesome
  • آرت بورد و سیستم ستونی و مربعی
  • درهم آمیزی لایه ها
  • ابزار قلم و رسم نمودار منحنی
  • تبدیل شکل ها و متن به مسیر
  • وارد کردن پروژه فتوشاپ
  • وارد کردن پروژه اسکچ
  • وارد کردن پروژه ایلاستریتور
  • وارد کردن تصاویر
  • حالت های ترکیبی لایه ها
  • ویرایش مستقیم عکس در فتوشاپ
  • طراحی پست با ساختار کاشی
  • شبکه تکرار
  • طراحی پیشخوان پنل کاربری بخش منو
  • طراحی پیشخوان پنل کاربری بخش نقشه و نمودار منحنی
  • طراحی پیشخوان پنل کاربری بخش آخرین دیدگاه ها
  • طراحی پیشخوان پنل کاربری بخش جدول سفارشات
  • استفاده از Svg
  • ویژگی بلور یا تار(blur)
  • تکنیک سایه درونی با استفاده از Blur و Mask
  • ویژگی Padding
  • استفاده از Stack برای مرتب سازی و جابجایی سریع(جدید)
  • استفاده از Scroll افقی و عمودی(جدید)
  • رنگ ها در پنل Assets
  • استایل های متن در پنل Assets
  • کامپوننت چیست؟
  • طراحی و ایجاد کامپوننت به همراه سفارشی سازی
  • مدیریت وضعیت های کامپوننت
  • استفاده از کامپوننت برای وضعیت هاور در منو
  • کامپوننت های تور در تو یا فرزند
  • استفاده از کتابخانه CC
  • استفاده از کلود و مدیریت نسخه پروژه
  • مدیریت پلاگین یا افزونه ها
  • درباره کیت های طراحی یا Ui Kits
  • تعامل های نرم افزاری با adobe xd
  • واکنشگرا کردن طرح و تبدیل به تبلت و موبایل و برعکس

فصل سوم: پروژه طراحی لندینگ پیج (landing page) یا صفحه فرود

  • صفحه لندینگ چیست؟
  • طراحی بخش هدر
  • طراحی منوی کناری
  • طراحی بخش «چرا ادوبی ایکس دی»
  • طراحی پروژه های دوره
  • طراحی بخش دیدگاه
  • طراحی بخش برترین دانشجویان
  • طراحی بخش فوتر
  • نقشه پیشرفته با ویژگی Scroll (جدید)

فصل چهارم: پروتوتایپ و انیمیشن در Adobe Xd

  • پروتوتایپ یا نمونه اولیه چیست؟
  • ایجاد اولین پروتوتایپ
  • حفظ موقعیت اسکرول در صفحه
  • انیمیشن خودکار
  • تکنیک های انیمیشن خودکار
  • انیمیشن خودکار صفحه راهنما
  • توابع زمانی و شتاب انیمیشن
  • انیمیشن اسکرول در صفحه
  • لایه رویی یا overlay
  • اجرای فایل صوتی
  • عملیات درگ و دراپ ماوس
  • تکنیک اسلاید جلو و عقب
  • صفحه کلید و دسته بازی
  • اجرای فرمان صوتی
  • میکرو اینتراکشن چیست؟
  • میکرو اینتر اکشن با قابلیت استفاده مجدد
  • ساخت منوی کشویی با قابلیت استفاده مجدد
  • تکنیک انیمیشن خطی (linear) با مدت زمان طولانی

فصل پنجم: تکنیک های انیمیشن در Adobe Xd

  • تکنیک انیمیشن نمودار سهمی
  • تکنیک انیمیشن ضربان قلب
  • تکنیک انیمیشن تشکرنامه دریبل
  • تکنیک انیمیشن حداکثر تخفیف

فصل ششم: طراحی اپلیکیشن آیفون ۱۰

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

فصل هفتم: ارائه و خروجی طرح در Adobe Xd

  • تهیه و ضبط ویدئوی ارائه طرح
  • لینک و تنظیمات اشتراک و بازخورد
  • تعریف موکاپ و معرفی ابزارهای آنلاین
  • آموزش کار با موکاپ Psd
  • آموزش کار با موکاپ Psd متحرک
  • تبدیل ویدئوی ارائه به موکاپ

آخرین تغییرات و بروزرسانی ها

۲۸ مهر ۱۳۹۹

اضافه شدن تکنیک پیشرفته انیمیشن خطی (linear) با مدت زمانی طولانی جهت ایجاد انیمیشن در پخش کننده صوتی

۳۰ خرداد ۱۳۹۹

اضافه شدن ویژگی جدید Stacks برای مرتب سازی و جابجایی لایه ها و گروه ها

اضافه شدن سیستم Scroll جدید افقی و عمودی

انجام پروژه نقشه پیشرفته در ایکس دی با استفاده از ویژگی جدید Scroll

پشتیبانی دوره به چه شکل هست؟

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

این دوره برای چه کسانی مناسب است؟

  • طراحان رابط و تجربه کاربری که به دنبال ابزار برای پیاده سازی طرح خود هستند.
  • طراحان رابط کاربری که به دنبال نرم افزاری سبک برای طراحی هستند.
  • طراحان رابط کاربری که همچنان با فتوشاپ و ایلاستریتور کار میکنند!

این دروه برای چه کسانی مناسب نیست؟

  • این دوره برای افرادی که میخواهند طرح رابط کاربری را به کد تبدیل کنند مناسب نیست.
  • افرادی که به دنبال مفاهیم رابط و تجربه کاربری هستند چرا که این دوره فقط ابزار ادوبی ایکس را در بر میگیرد نه مفاهیم ui و ux را

سوالات متداول

نرم افزار Adobe Xd چیست؟

نرم افزار Adobe Xd یا Adobe Experience Design در سال ۲۰۱۶ از طرف کمپانی بزرگ Adobe برای سیستم عامل ویندوز و مکیناش عرضه شد. این نرم افزار مخصوص طراحان رابط و تجربه کاربری تولید شده و نواقص نرم افزا دیگر خود را یعنی Adobe Photoshop را در حوزه تجربه و رابط کاربری رفع کرده است. ایکس دی به تازگی جایگاه خود را در بین طراحان رابط کاربری پیدا کرده و مرتب در حال بروزرسانی و ارتقاء امکانات خود بوده و هست

چرا باید از Adobe Xd به جای Photoshop استفاده کنیم؟

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

دوره Adobe Xd برای چه کسانی مناسب است؟

طراحان رابط و تجربه کاربری که به دنبال ابزار برای پیاده سازی طرح خود هستند، طراحان رابط کاربری که به دنبال نرم افزاری سبک برای طراحی هستند، طراحان رابط کاربری که همچنان با فتوشاپ و ایلاستریتور کار میکنند!

پشتیبانی دوره Adobe Xd به چه شکل هست؟

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

چطور از فتوشاپ به Adobe Xd مهاجرت کنیم؟

این دو نرم افزار از یک شرکت هستند و خبر خوب این که ایکس دی فرمت psd رو به عنوان فایل ورودی قبول می کند و به راحتی می توانید پروژه psd خود را به xd تبدیل کنید.

در دوره Adobe Xd تبدیل طرح به کد هم آموزش داده شده؟

خیر این دوره صرفا کار با ابزار ادوبی ایکس هست و صرفا به مباحث طراحی، پروتوتایپ، انیمیشن و ارائه می پردازیم بعبارتی کارهایی که صرفا یک طراح رابط کاربری از ایکس دی انتظار دارد را مورد بحث قرار می دهیم.