معرفی adobe xd و adobe photoshop

اگه  هنوز از Adobe Photoshop برای طراحی رابط کاربری سایت یا نرم افزارخودتون استفاده می کنید باید بگم شما انرژی زیادی از خودتون رو تلف میکنین در صورتیکه میتونین این انرژی رو صرف طراحی بیشتر و بهتر رابط کاربری تون کنین.

در یک جمله نرم افزار Adobe Photoshop یک نرم افزار کم امکانات، سنگین و نامناسب برای طراحی رابط و تجربه کاربریه! اما این نکته رو در نظر داشته باشید که این نرم افزار در حوزه خودش یک غول گرافیکی بی نظیرهدر عوض میتونین از نرم افزار دیگه این شرکت یعنی Adobe Xd که مخصوص طراحی رابط و تجربه کاربری تولید شده استفاده کنین.( آموزش Adobe Xd کاربردی و پروژه محور )

نکته
مقاله پیشنهادی: adobe xd چیست

سابقه Adobe Photoshop در طراحی رابط کاربری

در سال های اخیر فتوشاپ انتخاب اصلی طراحان برای ساخت قالب وبسایت، موبایل و به طور کلی طراحی رابط کاربری بود در صورتی که این نرم افزار مخصوص ویرایش عکس ساخته شده است. و حتی کیت های طراحی با فرمت psd ارائه می شود و حتی شغلی داشتیم تحت عنوان «تبدیل psd به html»

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

تفاوت های adobe xd و adobe photoshop

در این قسمت تفاوت هایی که ما را قانع می کند تا به سراغ Adobe Xd برویم را معرفی میکنیم:

سبک تر بودن نرم افزار و حتی فایل های پروژه های Xd نسبت به photoshop

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

در ضمن امکان تبدیل پروژه فتوشاپ و ایلاستریترو به ایکس دی به راحتی ممکن است.

Xd وکتوری(برداری) و photoshop پیکسلی(raster)

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

نکته
همچنین بخوانید: لایه ها در فتوشاپ

پشتیبانی xd از سیستم تکرار یا repeat grid

در طراحی رابط کاربری ما نیاز به تکرار برخی عناصر داریم مثلا تکرار پست ها، تکرار ردیف جدول ها و … که در adobe photoshop این امکان با کپی کردن لایه و جاگذاری ممکن است اما در زمان تغییر هر چند اندکی در طرحی که تکرار کرده ایم طراح باید زمان زیادی را درگیر تغییر یک تغییر کوچک باشد اما امکان تکرار عناصر(لایه یا گروه) در adobe xd بسیار ساده است و می توان به راحتی لیست و یا گالری تصویر ایجاد و آن را ویرایش کرد اما در فتوشاپ این کار کمی وقت گیر و سنگین است.

پشتیبانی xd از انیمیشن تعاملی

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

پشتیبانی xd از پروتوتایپ یا نمونه سازی

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

حتی میتوان این تعامل را با دستورات صوتی هم انجام داد و یا در جواب عمل کاربر مثلا کلیک کاربر صوت مورد نظر را پخش کرد.

امکان طراحی واکنش گرا در xd

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

ویژگی Stacks برا جابجایی و مرتب سازی سریع عناصر

ویژگی جدید Stacks که در نسخه 30 ایکس دی عرضه شد تغییر فوق العاده ای در این نرم افزار بود. با استفاده از این ویژگی جابجایی عناصر در راستا افقی و عمودی بسیار راحت شده و با درگ ساده ماوس قابل انجام است بعلاوه تغییر اندازه در هر عنصر بدون بهم ریختگی سایر عناصر انجام می شود.

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

ویژگی اسکرول افقی و عمودی

این ویژگی هم در نسخه 30 ایکس دی معرفی شد که خیلی از کارهای اضافه ای که طراح ها با استفاده از AutoAnimate برای تولید عناصر مثل اسلاید و یا کراوسل انجام می دادند را حذف کرد و طراحی این مدل عناصر را برای طراح ها راحت و سریع کرد. از جمله ویجت هایی که میتوان با استفاده از این ویژگی طراحی کرد نقشه قابل تعامل و اصلاحا قابل pan شدن است که میتوان در راستای افقی و عمودی نقشه را اسکرول نمود.

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

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

پلاگین های مخصوص طراحی در xd

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

نکته
همچنین بخوانید: نصب adobe xd

ویرایش همزمان چند طراح روی یک طرح

تیم ادوبی ایکس دی روی طرح ویرایش همزمان چند طراح روی یک طرح کار کرده و این امکان را فراهم کرده که فعلا در نسخه بتا است. با این کار طراحان تغییرات توسط سایر طراحان را به صورت زنده مشاهده می کنند.

اشتراک و بازخورد در xd

در ایکس دی این امکان فراهم شده تا شما طرح خود را با دوستان و یا همکاران و یا حتی کارفرما به اشتراک بگذارین و درباره آن بحث و تبادل نظر کنید.

انتقال امکانات رابط و تجربه کاربری از فتوشاپ به xd

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

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