https://virgool.io/feed/@hamedmoody توسعه دهنده افزونه و قالب وردپرس، علاقمند به رابط کاربری و اینترنت اشیاء fa 2026-06-16 20:26:52 https://files.virgool.io/upload/users/143314/avatar/5evozZ.jpeg?height=120&width=120 https://virgool.io/@hamedmoody https://virgool.io/@hamedmoody/%D8%AA%D9%81%D8%A7%D9%88%D8%AA-adobe-xd-%D9%88-adobe-photoshop-%D8%AF%D8%B1-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D8%B1%D8%A7%D8%A8%D8%B7-%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1%DB%8C-lwcjh3pcxk85 متأسفانه هنوز توسعه دهنده ها یا حتی آگهی های استخدامی رو میبینم که میگه برای طراح رابط کاربری باید به فتوشاپ مسلط باشی! اگه الان شما هم برای طراحی رابط کاربری داری از نرم افزار فتوشاپ استفاده می کنی باید بگم انرژی و وقت زیادی رو از خودت تلف میکنی. برای این حرفم هم دلیل دارم. پس تا انتها همراهی کن...اگه بخوام خیلی خلاصه بگم: نرم افزارAdobe photoshop یک نرم افزار کم امکانات، سنگین و نامناسب برای طراحی رابط و تجربه کاربری یا Ui و Ux هست.به همین صراحت! اما این نکته رو در نظر داشته باشین که فتوشاپ تو خوزه خودش یک غول گرافیکی بی نظریه اما در حوزه رابط کاربری حرفی برای گفتن ندازه که البته دلیل بر ضعفش نیست.نکته: فهم بهتر این ویژگی ها نیاز به اجرای ویدئو داره که چون تو ویرگول امکانش نیست پیشنهاد میکنم به مقاله «تفاوت adobe xd و adobe photoshop» در سایت دانشجویار که قبلا نوشتم مراجعه کنین.سابقه فتوشاپ در طراحی رابط کاربریدر چند سال اخیر طراحان رابط کاربری برای طراحی قالب سایت، موبایل یا به طور کلی رابط کاربری از این نرم افزار استفاده می کردن و حتی کیت های طراحی با فرمت Psd ارائه میشد که حتی یه شغل خیلی معروف هم داشتیم به نام «تبدیل psd به html».اما کم کم حوزه رابط کاربری تخصصی شد و حتی بعدش زمینه جدید تحت عنوان تجربه کاربری به دنیای طراحی اضافه شد به همین دلیل این احساس ایجاد شد که یک نرم افزار تخصصی تو این حوزه که اضافه امکانات و سنگینی و پیچیدگی فتوشاپ رو نداشته باشه باید ساخته بشه که اسمش هم شد project comet که بعد ادوبی این نرم افزار رو خرید و اسمش رو گذاشت Adobe Experience Design که به اختصار بهش میگن Adobe Xd.خب حالا چرا باید برای طراحی رابط کاربری Adobe Photoshopرو بذاریم کنار و از Adobe Xd استفاده کنیم؟سبک تر بودن Xd نسبت به Photoshop در منابع و پروژه هاهمونطور که قطعا میدونین نرم افزار فتوشاپ مخصوص ویرایش عکس ساخته شده و امکانات بی نظیری داره که باعث میشه میزان استفاده از منابع مثل رم و سی پی یو بالا بره اما بالای 95 درصد این امکانات تو طراحی رابط کاربری اصلا کارایی نداره پس چرا باید یه نرم افزار سنگین رو بازکنیم که از 95 درصد امکاناتش استفاده نمیکنیم؟اما Adobe Xd یک نرم افزار خیلی سبک با امکانات مورد نیاز برای طراحی رابط کاربریه که میزان رم و سی پی یوی بسیار کمتری نسبت به فتوشاپ استفاده می کنه، از طرف دیگه اگه یه پروژه رابط کاربری با فتوشاپ و دقیقا همون پروژه رو با ایکس دی طراحی کنین فایل Xd حجم خیلی کمتری نسبت به فایل Photoshop داره پس از لحاظ فضای ذخیره سازی هم Xd خیلی بهینه تره.حجم و پردازش کمتر Adobe Xd نسب به Adobe Photoshopنرم افزار Adobe Xd برداری یا Vector اما فتوشاپ پیکسلی یا Rasterنرم افزار Adobe Xd یک نرم افزار بداری است پس به هر میزان بزرگنمایی در سند انجام بشه به هیچ عنوان از کیفیتش طرح کم نمیشه اما Adobe Photoshop یک نرم افزار پیکسلی یا رستر هست که با زوم بیشتر از 100% کیفیت طرح پیکسلی و کم کیفیت میشود.ویژگی برداری Adobe Xdبا توجه به ذات کار رابط کاربری ما هم نیاز به یک نرم افزار وکتوری داریم نه پیکسلی پس در اینجا هم بهترین گزینه Adobe Xd هست.پشتیبانی Xd از سیستم تکرار یا Repeat Gridدر بحث طراحی رابط کاربری خیلی لازم میشه که المان های ما مثل پست ها، تصاویر، ستون ها و ردیف های جداول و ... تکرار بشن که البته این امکان در فتوشاپ هم با کپی لایه ها امکان پذیره اما اگه فتوشاپ کار کرده باشید مشکل وقتی شروع میشه که میخوایم یه تغییر کوچیک یا بزرگ تو تمام المان ها ایجاد کنیم یا اینکه برای مثلا تمام پست ها تصاویر، متن، نویسنده، تعداد بازدید و ... متفاوت بنویسیم. در فتوشاپ این کار خیلی وقت گیره و البته کپی المان ها طرح رو خیلی سنگین میکنه و رم و پردازش بالایی رو هم به سیستم تحمیل میکنه.اما تو Adobe Xd میشه با استفاده از سیستم شبکه تکرار یا Repeat Grid به راحتی این مشکل رو حل کرد. یعنی: یا یه تغییر تمام المان هامون رو تغییر بدیم و با کشیدن مجموعه ای از تصاویر یا یک فایل متنی شامل اسامی پست های مختلف یا نویسنده های مختلف به راحتی تمام تصاویر و متن ها رو جایگزین کنیم.خاصیت تکرار یا Repeat Grid در Adobe xdمتأسفانه از اونجایی که ویرگول امکان گذاشتن ویدئو رو نداره پیشنهاد میکنم این تفاوت ها رو به صورت انیمشن در پست «تفاوت Adobe Xd و Adobe Photoshop» در سایت دانشجویار مشاهده کنین. مطمئنا به راحتی برای استفاده از Xd قانع میشید.پشتیبانی Xd از انیمیشن تعاملیهمونطور که میدونیم فتوشاپ به صورت خیلی محدود امکان استفاده از انیمیشن رو داره اما امکاناتش محدوده. اما ایکس دی با امکانات انیمیشنی که داره میتونه طرح موبایل یا وب رو انیمیشنی و جذاب تر و واقعی تر کنه همچنین میتونین از توابع زمانی مختلف نحوه اجرای انیمیشن خودتون رو کنترل کنید.انیمیشن تعامل در Adobe Xdامکان ایجاد پروتوتایپ یا نمونه سازی طرحمنظور از تعاملی کردن یعنی طرح ما با کلیک یا لمس ما واکنش نشون بده. مثلا منو رو باز کنه، تصویر اسلاید بشه، انیمیشن اجرا بشه یا به صفحه بعد بره. و پروتوتایپ یک نمونه کامل اولیه از طرح رو به ما ارائه میده یعنی چیزی شبیه به یک اپلیکیشن و یا سایت رو به عنوان طرح رابط کاربری به مشتری ارائه میده و مشتری میتونه با کلیک به بخش های مختلف طرحش بره و انیمیشن های مختلف رو ببینه.ایجاد تعامل با پروتوتایپ یا نمون سازی در Adobe Xdامکان طراحی واکنش گرا یا ریسپانسیو در Adobe Xdقبلا فتوشاپ امکان نمایش طرح رو در دستگاه های مختلف ارائه میداد اما کم کم امکانات مربوط به رابط و تجربه کاربری رو از فتوشاپ حذف و به سمت Xd منتقل کرده. ایکس دی به خوبی از ویژگی ریسپانسیو پشتیبانی میکنه و به راحتی و با صرف زمان بسیار کمتر میتونیم طرح خودمون رو به اندازه های تبلت یا موبایل یا برعکس تبدیل کنیم.قابلیت واکنش گرا یا ریسپانسیو در Adobe Xdویژگی Stacks برای جابجایی و مرتب سازی سریع عناصردر نسخه 30 نرم افزار Adobe Xd امکان فوق العاده Stacks اضافه شد که با این امکان میتونی به راحتی و به سرعت عناصر خودمون رو جابجا کنیم چه در راستای افق و چه در راستای عمود.ویژگی اسکرول افقی و عمودیاین ویژگی هم در نسخه 30 نرم افزار Xd اضافه شد که میشه به راحتی آب خوردن باهاش اسلایدرهای همه رقم ایجاد کرد. یکی از کاربرهای اصلی این مورد میتونه ایجاد طرح نقشه گوگل یا اسنپ باشه که اصطلاحا دارای خاصلیت pan هستن و میتونن در راستا افقی و عمودی اسکرول بشن.پشتیبانی از کامپوننت یا عناصر قابل استفاده مجددبعضی از عناصر زیاد تو طرح استفاده میشن که لازمه یه جا ذخیره بشن و سریع استفاده بشن. گاهی هم پیش میاد یه طرح مادر وجود داره که طرح های مختلفی با کمی تغییر از طرح مادر ایجاد میشه و تغییر تو طرح اصلی باید طرح های کپی شده رو تغییر بده و حتی بشه از این طرح ها تو پروژه های دیگه وارد کرد و استفاده کرد. باید بگم کامپوننت تو Adobe Xd دقیقا همین کار رو برای ما میکنه.پلاگین های مخصوص طراحی در Xdایکس دی قابلیت این رو داره که براش پلاگین نوشته بشه و پلاگین های جذاب زیاد در حوزه طراحی گرفته تا حوزه انیمشن در ایکس دی اما پلاگین های فتوشاپ مخصوص طراحی عکسه و به درد طراحی رابط کاربری نمیخورهویرایش همزمان یا coEditing چند طراح روی یک طرحتیم ادوبی از امکان جدید رونمایی کرده که چند طراح میتونن همزمان به صورت زنده روی یکی طرح کار کرد و بقیه طراح ها به صورت کامل زنده و در لحظه تغییرات و حتی محل موس طراح دیگه رو میبینن که یه ویژگی بی نظیره.امکان ویرایش همزمان یا coEditingاشتراک و بازخوردنرم افزار Adobe Xd این امکان رو میده که طرحی که زدین رو با دوستاتون یا همکار یا حتی کارفرماها به اشتراک بذارین و درباره اون تبادل نظر کنین. این طرح حتی بدون نصب نرم افزار ایکس دی حتی از با مرورگر اینترنت قابل اجراست و از همونجا میتونه به نقاط مشکل دار طرح اشاره و توضیح و اشکال درباره طرح بنویسه. از این بخش هم میتونیم برای ارائه طرح به کدنویس برای کدکردن استفاده کرد.طراح های جدید دیگر برای فتوشاپ عرضه نمی شودبا توجه که هر دو نرم افزار مال شرکت ادوبی هستن قطعا ادوبی تمرکز در حوزه رابط و تجربه کاربری رو روی Adobe Xd متمرکز کرده بنا براین طراح ها هم طرح ها و کیت ها و پروژه هایی که ارائه میدن رو دیگه روی فتوشاپ ارائه نمیدن بنابراین برای استفاده از طرح های به روز هم که شده باید به نرم افزارهای تخصصی رابط و تجربه کاربری مهاجرت کرد.امکان مهاجرت از Adobe Photoshop به Adobe Xd هست؟بله. اگه قراره که به ایکس دی مهاجرت کنین ادوبی قبلا فکرش رو کرده و این امکان رو داده که بتونین پروژه های فتوشاپ، ایلاستریتور و حتی اسکچ رو وارد Adobe Xd کنین و ادامه پروژه رو اونجا ادامه بدین.نمونه پروژه انجام شده در Adobe Xdاینم نمونه پروژه موکاپ شده با Psd که در دوره جامع Adob Xd سایت دانشجویار ارائه شده:طراحی اپلیکیشن iPhone 10 در دوره جامع Adobe Xdسخن پایانیدر نهایت با این برتری های ایکس دی در حوزه رابط و تجربه کاربری نسبت به فتوشاپ تصمیم عاقلانه این باشه که به سمت Adobe Xd مهاجرت کنین چرا که خود سازنده فتوشاپ اینطور خواسته. حامد مودی حامد مودی Sun, 13 Jun 2021 19:51:53 +0430