طراحی رابط کاربری با نرم افزار Adobe Xd

دسته بندی ها : آموزش طراحی سایت 17 مرداد 1398 تیم تولید محتوا

آموزش طراحی رابط کاربری با Adobe Xd

Adobe XD ابزاری مبتنی بر vector (تصاویر برداری) است که در سال 2016 توسط کمپانی adobe inc به منظور طراحی رابط  کاربری (UI) برای وب ، سیستم عامل های اندروید و ios منتشر شد .
این برنامه برای mac os , android , windows و ios در دسترس است . این برنامه با استفاده از تصویر های وکتور یک رابط کاربری (ui) اولیه و آسانی را برای ما ایجاد می کند .
نمونه این برنامه که تنها برای سیستم عامل mac os در دسترس است sketch نام دارد که کاربرد یکسانی همچون Adobe Xd دارد و برای طراحی رابط کاربری ساخته شده است .

ساخت پروژه طراحی رابط کاربری با Adobe Xd

برای شروع کار کافیست که Adobe Xd را باز کرده و سپس یک صفحه ایجاد کنید . شما میتوانید بین سه گزینه ios , web و android یک پروژه ایجاد کنید . البته قسمت  custom size هم موجود است که برای طراحی رابط کاربری به اندازه ی دلخواه است .
سپس بعد از انتخاب یکی از سه گزینه بالا ، باید مقدار اندازه ی صفحه را برای طرحی رابط کاربری خود تنظیم کنید ، به عنوان مثال بعد از انتخاب سیستم عامل ios شما باید نوع گوشی apple خود را انتخاب کنید تا اپروژه رابط کاربری شما به اندازه ی صفحه نمایشگر گوشی که انتخاب کرده اید ایجاد شود .

آموزش طراحی رابط کاربری با Adobe Xd :

طراحی-رابط-کاربری-با-Adobe-Xd

طبق تصویر بالا شما یک پروژه برای خود ایچاد می کنید (صفحه ای با ابعاد دستگا موردنظر)

محیط کاری Adobe XD

طراحی-رابط-کاربری-با-Adobe-Xd

طراحی-رابط-کاربری-با-Adobe-Xd

تب های design و prototype

بعد از ایجاد پروژه طراحی رابط کاربری ، شما در بالای صفحه ، 2 تب به نام های Design و prototype مشاهده خواهید کرد .

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

ابزار های Adobe XD

طراحی-رابط-کاربری-با-Adobe-Xd

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

  • کادر قرمز : این بخش مربوط به ابزار های Adobe Xd است ، مانند اشکال ، pen ، نوشته ، خط و … که شما میتوانید با آن ها طراحی رابط کاربری خود را در تب design انجام دهید .
  • کادر آبی  : این بخش مربوط به ویژگی های آبجکت(عنصر) هایی است که شما توسط ابزار ها آن ها را ایجاد کرده اید و در این بخش میتوانید این ویژگی ها را تغییر دهید مانند اندازه ، رنگ ، شفافیت ، نوع فونت و … .

خروجی گرفتن از طراحی رابط کاربری با Adobe Xd

و در مرحله آخر پس از طراحی رابط کاربری خود در adobe Xd ، گزینه Export یا Ctrl + E را فشار دهید .

طراحی-رابط-کاربری-با-Adobe-Xd

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

طراحی-رابط-کاربری-با-Adobe-Xd

همانطور که در تصویر بالا مشاهده میکنید :

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

طراحی رابط کاربری با Adobe Xd به این صورت است که مشاهده کردید برای دیدن دیگر مقالات ما با سایت وب سایت سورس آباد همراه باشید.

تیم تولید محتوا سورس آباد
تیم تولید محتوا

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

راه آسان‌تری برای ارتباط با کاربران‌مان پیدا کرده‌ایم :) عضویت در کانال

نظرات کاربران

لطفاً براي ارسال دیدگاه، ابتدا وارد حساب كاربري خود بشويد

لینک کوتاه :

عضویت در خبرنامه ویژه مشتریان سیگما پلاس

با عضویت در خبرنامه ویژه سیگما پلاس از آخرین جشنواره های سایت باخبر شوید!