Adobe XD را بیشتر بشناسیم ( کار با Adobe XD به زبان ساده )

در شماره های قبل به بررسی ابزارهای Prototyping پرداختیم ، به علت کثرت ابزارها به Adobe XD اشاره نشد . خوب است بدانید که Adobe XD یکی از پراستفاده‌ترین ابزارهای رایگان برای طراحی UI/UX و طراحی نمونه اولیه در دنیای طراحی موبایل است .

در این مقاله به شما کمک می‌کنیم تا با ظرفیت Adobe XD آشنا شوید .

همچنین آغاز کار با آن برای طراحی یک اپلیکیشن اندروید یا ios را بیاموزید .

همه این‌ها بیش از یک ساعت از وقت شما را نخواهد گرفت .

Adobe XD هم برای ویندوز و هم مک‌اواس عرضه شده است .

آغاز کار با Adobe XD :

نسخه رایگان این نرم افزار را می توانید از سایت ادوبی ( تغییر آی پی لازم است ) نصب کنید .

در هنگام نصب نرم افزار می توانیم سطح ، فیلد کاری و نحوه استفاده ( تک کاربره ، گروهی ، … ) از آن را مشخص کنیم .

زمانی که برنامه را اجرا می کنیم با قالب های مختلف برای طراحی روبه رو می شویم .

در قسمت میانی اگر بر روی گزینه Begin Tutorial کلیک بکنیم ادوبی به صورت پیش فرض آموزشی را در اختیار ما قرار می دهد .

در قسمت پایین صفحه می توانیم محیط طراحی و ابعادی که مدنظرمان است را انتخاب کرده و طراحی را آغاز کنیم .

محیط کار Adobe XD :

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

در سمت چپ بالا tool bar قرار دارد و در پایین پنل های مختلف شامل  layer ها ، art board ها و … تعبیه شده است .

در سمت راست هم محیطی برای مدیریت پنلی که روی آن کلیک شده است قرار دارد .

با استفاده از ابزار مدیریتی سمت راست می توانیم برای مثال بک گراند کار را تغییر دهیم .

با استفاده از شکل مربع از قسمت tool bar چند مستطیل می کشیم .

برای مستطیل بالا به عنوان هدر یک بک گراند انتخاب می کنیم .

به صورت درگ اند دراپ آن را به محیط کار اضافه می کنیم .

برای اشکال پایین هدر به صورت دلخواه تصویر اضافه می کنیم .

با استفاده از ابزار text متن مورد نظر را نیز تایپ می کنیم .

چون محیط کار فعلی متناسب با ابعاد موبایل است در پایین صفحه چند شکل دیگر به عنوان home bottun و … طراحی می کنیم .

حال وقت آن رسیده است که از امکان تعاملی بودن Adobe XD استفاده کنید !

برای توضیح بیشتر درباره Instagram یک art board جدید از قسمت tool bar اضافه می کنیم .

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

برای این کار بر روی افزونه ی Prototype کلیک کرده سپس art board مادر را انتخاب می کنیم و از آن فلشی به سمت art board مورد نظر می کشیم .

پس از آن برای اینکه کاملا متوجه عملکرد تعامل بین لایه ها شویم بر روی گزینه Desktop Preview کلیک می کنیم .

در صفحه باز شده بر روی اینستاگرام کلیک می کنیم تا به صفحه دوم منتقل شویم .

به همین صورت برای سایر art board ها هم می توانیم حالت تعاملی ایجاد کنیم .

با استفاده از گزینه share در بالای صفحه می توانیم نتیجه کار را :

با دوستانی که در ادوبی اکانت دارند به اشتراک بگذاریم .

روند کار را به فیلم تبدیل کنیم .

و یا از گزینه های دیگر استفاده کنیم .

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

مزیت نرم افزار Adobe XD است که به صورت رایگان ارائه می‌شود .

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