متأسفانه هنوز توسعه دهنده ها یا حتی آگهی های استخدامی رو میبینم که میگه برای طراح رابط کاربری باید به فتوشاپ مسلط باشی! اگه الان شما هم برای طراحی رابط کاربری داری از نرم افزار فتوشاپ استفاده می کنی باید بگم انرژی و وقت زیادی رو از خودت تلف میکنی. برای این حرفم هم دلیل دارم. پس تا انتها همراهی کن...
اگه بخوام خیلی خلاصه بگم: نرم افزارAdobe photoshop یک نرم افزار کم امکانات، سنگین و نامناسب برای طراحی رابط و تجربه کاربری یا Ui و Ux هست.به همین صراحت! اما این نکته رو در نظر داشته باشین که فتوشاپ تو خوزه خودش یک غول گرافیکی بی نظریه اما در حوزه رابط کاربری حرفی برای گفتن ندازه که البته دلیل بر ضعفش نیست.
نکته: فهم بهتر این ویژگی ها نیاز به اجرای ویدئو داره که چون تو ویرگول امکانش نیست پیشنهاد میکنم به مقاله «تفاوت adobe xd و adobe photoshop» در سایت دانشجویار که قبلا نوشتم مراجعه کنین.
در چند سال اخیر طراحان رابط کاربری برای طراحی قالب سایت، موبایل یا به طور کلی رابط کاربری از این نرم افزار استفاده می کردن و حتی کیت های طراحی با فرمت Psd ارائه میشد که حتی یه شغل خیلی معروف هم داشتیم به نام «تبدیل psd به html».
اما کم کم حوزه رابط کاربری تخصصی شد و حتی بعدش زمینه جدید تحت عنوان تجربه کاربری به دنیای طراحی اضافه شد به همین دلیل این احساس ایجاد شد که یک نرم افزار تخصصی تو این حوزه که اضافه امکانات و سنگینی و پیچیدگی فتوشاپ رو نداشته باشه باید ساخته بشه که اسمش هم شد project comet که بعد ادوبی این نرم افزار رو خرید و اسمش رو گذاشت Adobe Experience Design که به اختصار بهش میگن Adobe Xd.
خب حالا چرا باید برای طراحی رابط کاربری Adobe Photoshopرو بذاریم کنار و از Adobe Xd استفاده کنیم؟
همونطور که قطعا میدونین نرم افزار فتوشاپ مخصوص ویرایش عکس ساخته شده و امکانات بی نظیری داره که باعث میشه میزان استفاده از منابع مثل رم و سی پی یو بالا بره اما بالای 95 درصد این امکانات تو طراحی رابط کاربری اصلا کارایی نداره پس چرا باید یه نرم افزار سنگین رو بازکنیم که از 95 درصد امکاناتش استفاده نمیکنیم؟
اما Adobe Xd یک نرم افزار خیلی سبک با امکانات مورد نیاز برای طراحی رابط کاربریه که میزان رم و سی پی یوی بسیار کمتری نسبت به فتوشاپ استفاده می کنه، از طرف دیگه اگه یه پروژه رابط کاربری با فتوشاپ و دقیقا همون پروژه رو با ایکس دی طراحی کنین فایل Xd حجم خیلی کمتری نسبت به فایل Photoshop داره پس از لحاظ فضای ذخیره سازی هم Xd خیلی بهینه تره.
نرم افزار Adobe Xd یک نرم افزار بداری است پس به هر میزان بزرگنمایی در سند انجام بشه به هیچ عنوان از کیفیتش طرح کم نمیشه اما Adobe Photoshop یک نرم افزار پیکسلی یا رستر هست که با زوم بیشتر از 100% کیفیت طرح پیکسلی و کم کیفیت میشود.
با توجه به ذات کار رابط کاربری ما هم نیاز به یک نرم افزار وکتوری داریم نه پیکسلی پس در اینجا هم بهترین گزینه Adobe Xd هست.
در بحث طراحی رابط کاربری خیلی لازم میشه که المان های ما مثل پست ها، تصاویر، ستون ها و ردیف های جداول و ... تکرار بشن که البته این امکان در فتوشاپ هم با کپی لایه ها امکان پذیره اما اگه فتوشاپ کار کرده باشید مشکل وقتی شروع میشه که میخوایم یه تغییر کوچیک یا بزرگ تو تمام المان ها ایجاد کنیم یا اینکه برای مثلا تمام پست ها تصاویر، متن، نویسنده، تعداد بازدید و ... متفاوت بنویسیم. در فتوشاپ این کار خیلی وقت گیره و البته کپی المان ها طرح رو خیلی سنگین میکنه و رم و پردازش بالایی رو هم به سیستم تحمیل میکنه.
اما تو Adobe Xd میشه با استفاده از سیستم شبکه تکرار یا Repeat Grid به راحتی این مشکل رو حل کرد. یعنی: یا یه تغییر تمام المان هامون رو تغییر بدیم و با کشیدن مجموعه ای از تصاویر یا یک فایل متنی شامل اسامی پست های مختلف یا نویسنده های مختلف به راحتی تمام تصاویر و متن ها رو جایگزین کنیم.
متأسفانه از اونجایی که ویرگول امکان گذاشتن ویدئو رو نداره پیشنهاد میکنم این تفاوت ها رو به صورت انیمشن در پست «تفاوت Adobe Xd و Adobe Photoshop» در سایت دانشجویار مشاهده کنین. مطمئنا به راحتی برای استفاده از Xd قانع میشید.
همونطور که میدونیم فتوشاپ به صورت خیلی محدود امکان استفاده از انیمیشن رو داره اما امکاناتش محدوده. اما ایکس دی با امکانات انیمیشنی که داره میتونه طرح موبایل یا وب رو انیمیشنی و جذاب تر و واقعی تر کنه همچنین میتونین از توابع زمانی مختلف نحوه اجرای انیمیشن خودتون رو کنترل کنید.
منظور از تعاملی کردن یعنی طرح ما با کلیک یا لمس ما واکنش نشون بده. مثلا منو رو باز کنه، تصویر اسلاید بشه، انیمیشن اجرا بشه یا به صفحه بعد بره. و پروتوتایپ یک نمونه کامل اولیه از طرح رو به ما ارائه میده یعنی چیزی شبیه به یک اپلیکیشن و یا سایت رو به عنوان طرح رابط کاربری به مشتری ارائه میده و مشتری میتونه با کلیک به بخش های مختلف طرحش بره و انیمیشن های مختلف رو ببینه.
قبلا فتوشاپ امکان نمایش طرح رو در دستگاه های مختلف ارائه میداد اما کم کم امکانات مربوط به رابط و تجربه کاربری رو از فتوشاپ حذف و به سمت Xd منتقل کرده. ایکس دی به خوبی از ویژگی ریسپانسیو پشتیبانی میکنه و به راحتی و با صرف زمان بسیار کمتر میتونیم طرح خودمون رو به اندازه های تبلت یا موبایل یا برعکس تبدیل کنیم.
در نسخه 30 نرم افزار Adobe Xd امکان فوق العاده Stacks اضافه شد که با این امکان میتونی به راحتی و به سرعت عناصر خودمون رو جابجا کنیم چه در راستای افق و چه در راستای عمود.
این ویژگی هم در نسخه 30 نرم افزار Xd اضافه شد که میشه به راحتی آب خوردن باهاش اسلایدرهای همه رقم ایجاد کرد. یکی از کاربرهای اصلی این مورد میتونه ایجاد طرح نقشه گوگل یا اسنپ باشه که اصطلاحا دارای خاصلیت pan هستن و میتونن در راستا افقی و عمودی اسکرول بشن.
بعضی از عناصر زیاد تو طرح استفاده میشن که لازمه یه جا ذخیره بشن و سریع استفاده بشن. گاهی هم پیش میاد یه طرح مادر وجود داره که طرح های مختلفی با کمی تغییر از طرح مادر ایجاد میشه و تغییر تو طرح اصلی باید طرح های کپی شده رو تغییر بده و حتی بشه از این طرح ها تو پروژه های دیگه وارد کرد و استفاده کرد. باید بگم کامپوننت تو Adobe Xd دقیقا همین کار رو برای ما میکنه.
ایکس دی قابلیت این رو داره که براش پلاگین نوشته بشه و پلاگین های جذاب زیاد در حوزه طراحی گرفته تا حوزه انیمشن در ایکس دی اما پلاگین های فتوشاپ مخصوص طراحی عکسه و به درد طراحی رابط کاربری نمیخوره
تیم ادوبی از امکان جدید رونمایی کرده که چند طراح میتونن همزمان به صورت زنده روی یکی طرح کار کرد و بقیه طراح ها به صورت کامل زنده و در لحظه تغییرات و حتی محل موس طراح دیگه رو میبینن که یه ویژگی بی نظیره.
نرم افزار Adobe Xd این امکان رو میده که طرحی که زدین رو با دوستاتون یا همکار یا حتی کارفرماها به اشتراک بذارین و درباره اون تبادل نظر کنین. این طرح حتی بدون نصب نرم افزار ایکس دی حتی از با مرورگر اینترنت قابل اجراست و از همونجا میتونه به نقاط مشکل دار طرح اشاره و توضیح و اشکال درباره طرح بنویسه. از این بخش هم میتونیم برای ارائه طرح به کدنویس برای کدکردن استفاده کرد.
با توجه که هر دو نرم افزار مال شرکت ادوبی هستن قطعا ادوبی تمرکز در حوزه رابط و تجربه کاربری رو روی Adobe Xd متمرکز کرده بنا براین طراح ها هم طرح ها و کیت ها و پروژه هایی که ارائه میدن رو دیگه روی فتوشاپ ارائه نمیدن بنابراین برای استفاده از طرح های به روز هم که شده باید به نرم افزارهای تخصصی رابط و تجربه کاربری مهاجرت کرد.
بله. اگه قراره که به ایکس دی مهاجرت کنین ادوبی قبلا فکرش رو کرده و این امکان رو داده که بتونین پروژه های فتوشاپ، ایلاستریتور و حتی اسکچ رو وارد Adobe Xd کنین و ادامه پروژه رو اونجا ادامه بدین.
اینم نمونه پروژه موکاپ شده با Psd که در دوره جامع Adob Xd سایت دانشجویار ارائه شده:
در نهایت با این برتری های ایکس دی در حوزه رابط و تجربه کاربری نسبت به فتوشاپ تصمیم عاقلانه این باشه که به سمت Adobe Xd مهاجرت کنین چرا که خود سازنده فتوشاپ اینطور خواسته.
