چیدمان منظم Ui با خطوط Grid در ایکس دی

مدرس: بردیا بسطامی

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

در این پست چگونگی کمک نرم افزار ادوبی XD رو به شما در این زمینه آموزش میدیم تا کیفیت کار شما استاندارد های لازم رو داشته باشه. گزینه Layout Grid مجموعه ای از ستونها رو در سراسر Artboard در اختیار شما قرار میده تا بتونید چیدمان موردنظرتون رو نسبت به عرض و طول صفحه تراز کنید.

در این آموزش ساعت شنی یاد میگیریم چطور با استفاده از امکان Layout Grid در نرم افزار XD چیدمان اصولی تری رو از اجزا در تصویر داشته باشیم.

  • نرم افزار ایکس دی رو باز می کنیم.
  • ابتدا روی اسم Artboard مون کلیک می کنیم.
  • از قسمت Grid می تونیم به Alignment ها دسترسی داشته باشیم.
  • در حالت اول که Layout نام داره می تونیم Column های پدیدار شده رو ببینیم.
  • این Column ها به ما کمک می کنن تا طراحی سریع تر و همچنین Align های دقیق تری رو داشته باشیم.
  • میبینیم که با تغییر عدد مقابل Column ها تعداد اون ها افزایش یا کاهش پیدا می کنه.
  • همچنین ما قادریم با تغییر پارامتر Gutter Width اندازه اونهارو تغییر بدیم.
  • فاصله اونها هم از راست یا چپ یا طرفین قابل تغییره.
  • ما می تونیم Grid های خودمون رو با کلیک روی گزینه Make Default ذخیره کنیم.
  • یا با انتخاب گزینه Use Default میتونیم به حالت اولیه اون برگردیم.