آموزش ادوبی ایکس دی (Adobe XD)

دسته بندی: آموزش های ادوبی (Adobe)

آموزش ادوبی ایکس دی

آنچه در این صفحه می خوانید:

ادوبی ایکس دی (Adobe XD) چیست؟

Adobe XD ابزاری برای دیزاین تجربه کاربر (یو ایکس) مبتنی بر وکتور برای برنامه های وب و برنامه های تلفن همراه است که توسط Adobe Inc تهیه و منتشر شده است. این نرم افزار برای MacOS و Windows موجود است، اگرچه نسخه هایی برای iOS و Android وجود دارد که به شما کمک می کند تا پیش نمایش نتیجه کار را مستقیماً در دستگاه های تلفن همراه خود بررسی کنید. XD از Wireframe وب سایت و ایجاد نمونه های اولیه از طریق تعامل پشتیبانی می کند.

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

تاریخچه ادوبی ایکس دی (Adobe XD)

ادوبی اولین بار اعلام کرد که آن ها در کنفرانس Adobe MAX در اکتبر سال 2015 در حال تهیه نرم افزار طراحی و رابط کاربری جدید با عنوان "Project Comet" هستند. اولین نسخه بتا عمومی برای MacOS با عنوان "Adobe Experience Design CC" برای هر کسی که دارای حساب Adobe بود منتشر شد. بتا Adobe XD در تاریخ 13 دسامبر 2016 برای ویندوز 10 منتشر شد. در تاریخ 18 اکتبر 2017، Adobe اعلام کرد Adobe XD از بتا خارج نشده است.

ویژگی های ادوبی ایکس دی (Adobe XD)

Adobe XD رابط کاربری برای برنامه های تلفن همراه و وب را ایجاد می کند، بسیاری از ویژگی های XD قبلاً یا در سایر برنامه های ادوبی مانند Illustrator یا فتوشاپ استفاده از آنها سخت یا وجود نداشت را فراهم می کند. Adobe XD با کیت های UI برای iOS ،Microsoft Windows و Google Material Design طراحی شده است.

Design

  • کامپوننت هایی با پشتیبانی زیاد: طراحی با عناصر قابل استفاده مجدد که نیاز به یافتن و ویرایش هر نمونه از دارایی را در سند از بین می برد. هر ویژگی از نمونه جزئی را شخصی سازی کنید و همچنان توانایی فشار خودکار تغییرات از کامپوننت اصلی را حفظ کنید.
  • تغییر اندازه رسپانسیو: به راحتی گروه هایی از اشیا یا اجزای سازنده را برای صفحه نمایش در اندازه های مختلف تغییر دهید و مکان قرارگیری و مقیاس پذیری را حفظ کنید. تنظیمات دستی سریع را برای شخصی سازی انجام دهید.
  • پنل دارایی: با افزودن آنها به پنل دارایی ها، که به طور خودکار شامل اجزای سازنده می شود، رنگ ها و سبک های کاراکتر را به راحتی برای استفاده مجدد در دسترس قرار دهید. هر نوع رنگ یا شخصیت را در پنل ویرایش کنید و تغییرات در سراسر سند به روز می شوند.
  • تکرار شبکه ای: یک مورد را در طرح خود مانند لیست مخاطب یا گالری عکس انتخاب کنید و هر بار که می خواهید تکرار کنید، تمام سبک ها و فاصله های شما دست نخورده باقی می مانند. یک بار عنصر را به روز کنید و تغییرات شما در همه جا بروزرسانی می شود.
  • وارد کردن فایل هایSketch ،Photoshop و Illustrator: دارایی ها و طرح ها را از برنامه های Adobe مورد علاقه خود درست در XD باز کنید، و آنها به طور خودکار به فایل های XD تبدیل می شوند، بنابراین لازم نیست از ابتدا شروع کنید.
  • ابزارهای وکتور بهینه سازی شده: با مجموعه متمرکز از ابزارهای رسم و شکل، اپراتورهای بولین و ویژگی های ویرایش وکتور کار کنید که برای ایجاد وایر فریم ها، نمادها و سایر عناصر بصری بهینه شده اند.
  • طراحی دقیق: تجربه خود را با راهنماهای artboard، شبکه های چیدمان و ویژگی های اندازه گیری نسبی تنظیم کنید.
  • خروجی گرفتن دسته ای: عناصر را برای صادرات سریع علامت گذاری کنید، دسته ای از آنها را برای سیستم عامل مورد نظر خود صادر کنید یا آنها را در مشخصات دیزاین برای دانلود توسعه دهندگان در نظر بگیرید.

Prototype

  • جریان وایر نمونه اولیه: برای برقراری ارتباط جریان و مسیر برنامه های چند صفحه ای، از حالت طراحی به حالت نمونه اولیه تغییر دهید و مقادیر متصل را وصل کنید. برای تعریف تجربه ای که می خواهید ایجاد و به اشتراک بگذارید، از طیف محرکها و اقدامات استفاده کنید.
  • انیمیشن خودکار: ریز تعامل خودکار در سراسر بورد هنری که ایجاد کرده اید. وقتی یک عنصر را کپی می کنید و خصوصیات آن را تغییر می دهید (مانند اندازه، موقعیت و یا رنگ)،XD اختلافات را ایجاد می کند تا به طور خودکار انیمیشن تولید کند.
  • نمونه سازی صوتی: با نمونه های اولیه خود در تعامل باشید. محرک های صوتی و پخش گفتار به شما امکان می دهد کاربران را به خارج از صفحه ببرید.
  • برنامه های دسکتاپ و تجربیات بازی: نمونه اولیه با وفاداری بالا با استفاده از کلید های میانبر و صفحه کلیدهای بازی به عنوان محرک ها، تجربه می کند.
  • پشتیبانی پوششی: پشتیبانی سریع از منوها، گفتگوها، صفحه کلیدهای مجازی و سایر عناصر بصری که محتوای شما را پوشش می دهند اضافه کنید.
  • تنظیم موقعیت ثابت: عناصر را در همان موقعیت تنظیم کنید تا در حالت پیمایش بیننده قرار بگیرند. این ویژگی نمونه اولیه برای هدرهای ثابت، پاورقی ها و موارد دیگر بسیار عالی است.
  • انتقال به موقع: کنترل بیشتری بر زمان بندی انتقال خود بین کارت های هنری داشته باشید. با تأخیر در جلوه های خودکار محو شدن، اسپینرها، لودرها، میله های پیشرفت و موارد دیگر انیمیشن های حلقه ایجاد کنید.
  • پیش نمایش های روی دستگاه iOS و Android: پیش نمایش طرح ها و همه تعامل های دستگاه های مورد نظر خود را با برنامه تلفن همراه XD مشاهده کنید. در دسکتاپ تغییراتی ایجاد کنید و سپس آنها را بر روی وفاداری و قابلیت استفاده در دستگاه های خود تست کنید.

Share

  • راه های آسان برای به اشتراک گذاشتن با ذینفعان یا توسعه دهندگان: طرح ها و نمونه های اولیه خود را مستقیماً از XD به اشتراک بگذارید. به روزرسانی مطالب اشتراکی شده شما سریع و آسان است. به علاوه، چندین روش برای مدیریت و کنترل دسترسی به آنچه که به اشتراک گذاشته اید وجود دارد.
  • دعوت نامه های خصوصی: با دعوت خصوصی از افراد ذینفع، نام کاربری خود را محدود کنید. در کنترل این نکته که چه کسی نمونه های اولیه را بررسی و اظهار نظر می کند و چه کسی به مشخصات طراحی دسترسی دارد، کنترل کنید.
  • بررسی و اظهارنظر مبتنی بر وب برای ذینفعان: برای به دست آوردن بازخورد در مورد الگوهای خود، پیوندهای اشتراکی ایجاد کنید یا آنها را در Behance یا صفحه وب جاسازی کنید. داوران می توانند به طور مستقیم درباره نمونه های اولیه و قسمت های خاص طراحی شما از وب یا تلفن همراه اظهار نظر کنند. هنگام اظهار نظر، به شما اطلاع داده می شود و می توانید پاسخ دهید تا به آنها بگویید که تغییرات ایجاد شده است.
  • مشخصات طراحی وب مبتنی بر توسعه دهندگان: با ارسال پیوند با مشخصات به طور خودکار تولید شده از نمونه اولیه تعاملی، فرآیند توسعه را سرعت بخشید. مشخصات شامل ترتیب و جریان آرشیوها، رنگ ها، سبک های شخصیت، اندازه گیری ها و قطعه های کد CSS است که توسعه دهندگان می توانند در پایه کد خود کپی کنند. توسعه دهندگان همچنین می توانند نظرات اضافه کنند و دارایی را استخراج و بارگیری کنند.
  • ضبط فعل و انفعالات نمونه اولیه به عنوان فیلم: هنگامی که بوسیله پیش نمایش کلیک می کنید،می توانید فایل MP4 را ضبط کنید تا با تیم یا ذینفعان خود به اشتراک بگذارید. این قابلیت فقط در نسخه macOS فعال است.

Collaborate

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

Create a design system

  • اسناد ابری: کار خود را به عنوان سند ابری ذخیره کنید تا سریعاً با همکاران به اشتراک گذاشته شوید و از آن به عنوان منبع حقیقت واحد خود استفاده کنید. XD به طور خودکار اسناد ابری را به روز می کند تا هرگز کار خود را از دست ندهید.
  • دارایی های مرتبط: با افزودن عناصر طراحی به پانل دارایی از هر سند ابری مشترک، یکپارچه همکاری کنید.
  • مدیریت به روز رسانی دارایی: هنگامی که تغییراتی در دارایی مرتبط انجام شد، به شما اطلاع داده می شود و گزینه پذیرش به روزرسانی ها را خواهید داشت.

مقایسه Adobe XD با Sketch

در دنیای دیجیتال امروز، خلاقیت و طراحی دیجیتال را چگونه می توانید بهترین تعریف کنید؟ بیشتر ما به جواب مناسب نزدیک می شویم. انتظار می رود طراحان این روزها در طراحی های خود ترکیبی از خلاقیت و دیجیتالی شدن را نشان دهند. پیش نیاز طراحان برای دستیابی به این هدف، ابزار طراحی مناسب است. با در نظر گرفتن طراحی UI/UX، بیایید Adobe XD و Sketch را عمیق تر بررسی کنیم و دریابیم که آنها نسبت به یکدیگر چه مزایایی دارند:

رابط کاربری: اولین نگاه به Adobe XD و طراح UI ممکن است تغییرات زیادی در مقایسه با Sketch پیدا نکند. اگرچه Adobe دکمه ها و منوهای تاریک تری را قبول نکرد، از دید طراح، Adobe با صفحه های لایه ای بلندتر و ویژگی های کاریزماتیک، در سمت راست صفحه، همانطور که در Sketch مشاهده می شود، ارائه می شود. Adobe در نظر گرفته شده است که رویکرد کاربرپسند تر است و یادگیری و درک آن بسیار آسان است.

Repeat Grid: یکی از ویژگی های منحصر به فرد Repeat Grid است. این ویژگی زمانی که مجبور به طراحی صفحات یا صفحه هایی با لیست عناصر تکرار شونده هستید، صرفه جویی در زمان بسیار زیادی برای طراحان را فراهم می کند. هرگونه تغییر مورد نیاز فقط در عنصر موجود در شبکه تکراری که بطور خودکار در بقیه عناصر اعمال می شود قابل انجام است. این واقعاً لذت طراحی است.

نمونه سازی اولیه: همانطور که در ابتدا ذکر شد، مشتریان همیشه ترجیح می دهند بدانند محصول آنها در مرحله طراحی کجاست. نمونه اولیه، نمونه ای از تصویر واضح است که به مشتری می دهد. در حالی که Adobe XD را با Sketch با توجه به این پارامتر مقایسه می کنیم، Adobe امکان تولید نمونه های اولیه تعاملی را از طریق قابلیت طراحی وکتور خود ارائه می دهد که به راحتی در سراسر وب قابل اشتراک است. با این حال، Sketch برای انجام این فعالیت به خدمات پلاگین ها نیاز دارد.

شبکه های وکتور: با توجه به نمونه سازی اولیه، شبکه وکتور وسیله اضافی است که با ابزار Adobe XD در دسترس است و به طراح کمک می کند نمونه های اولیه تعاملی را تولید کند. فرصتی برای بازی با نقشه های وکتور به احتمال زیاد طراح UI را مجذوب خود می کند زیرا این امکان با Sketch در دسترس نیست.

طراحی رسپانسیو: این ویژگی که به زودی در Sketch معرفی می شود، در حال حاضر گزینه برجسته Adobe XD، برای برنامه نیتیو است. طراحی این روزها بر اساس برنامه های کاربردی کراس پلتفرم و سازگاری با چندین دستگاه و اندازه صفحه نمایش تصور می شود. برای افزایش روزافزون تعداد کاربرانی که مرتباً بین دستگاه هایی با اندازه صفحه نمایش متفاوت هستند، طراحی رسپانسیو با اندازه های مختلف دستگاه یکپارچه سازگار هستند. حال به عنوان طراح اگر مجبورید بار دیگر و مجدداً همان طراحی را ایجاد کنید تا آن را برای صفحه نمایش های مختلف بهینه کنید، طراحی رسپانسیو پاسخ صحیح است.

پشتیبانی آفلاین: هم Sketch و هم Adobe XD پشتیبانی آفلاین را برای طراحان گسترش می دهند.

پشتیبانی قابل استفاده مجدد از نمادها: نمادها تغییر طراحی در طراحی هستند. این روزها نمادهای ابتکاری گسترده ای توسط طراحان استفاده می شود تا تجربه نهایی کاربر را ارائه دهد. ابزارهای حمایتی مانند Sketch و Adobe XD نیز از استفاده از نمادها پشتیبانی می کنند. در حالی که Sketch از استفاده از نمادهای قابل استفاده مجدد با تغییر اندازه واکنش پذیر پشتیبانی می کند، Adobe XD فقط از نمادهای اساسی و فاقد امکانات تغییر اندازه واکنش پذیر پشتیبانی می کند.

سیستم های عامل: سیستم های عامل مانند همیشه نقش مهمی در عملکرد هر ابزار یا برنامه ای دارند. در مورد Adobe XD و Sketch نیز نقش تعیین کننده ای دارند. در حالی که Sketch فقط در سیستم عامل MAC کار می کند، Adobe XD با سیستم عامل MAC و همچنین سیستم عامل های ویندوز 10 خوب کار می کند.

آیا این نوشته را دوست داشتید؟