تسلط بر آموزش الاینمنت در ادوبی ایکس دی کلید رسیدن به یک رابط کاربری تمیز و مهندسی شده است. چیدمان درست عناصر مختلف در کنار هم به شما کمک می‌کنه تا یک طرح زیبا و کاملا حرفه‌ای داشته باشید. در این مقاله از سایت Learnuix می‌خوایم بررسی کنیم چطور با استفاده از ابزارهای پنل الاینمنت، سرعت کارمون رو در دیزاین محصول بالاتر ببریم و ساختار خاصی به طرح‌هامون بدیم
ویدیوی آموزش Alignment در Adobe XD
این ویدیو کار با ابزارهای Alignment و Distribute در Adobe XD را آموزش می‌دهد؛ ترازکردن شکل‌ها و یکسان‌کردن فاصله بین آن‌ها. اگر فیلترشکن خاموش است، نسخه آپارات را همین‌جا ببینید؛ نسخه YouTube هم از دکمه زیر در دسترس است.
ادوبی ایکس دی برای تراز کردن عناصر، همیشه اشکال کوچکتر رو نسبت به اشکال بزرگتر جابجا می‌کنه. در برنامه‌هایی مثل فتوشاپ شما باید حتما یک سلکشن ایجاد کنید تا نرم‌افزار مبنای تراز کردن رو متوجه بشه و در راستای اون سلکشن عمل کنه. اما در محیط ایکس دی اگر یک دایره کوچک و یک مربع بزرگ رو انتخاب کنید و روی تراز وسط کلیک کنید، این دایره است که به سمت مرکز مربع حرکت می‌کنه و مربع سر جای خودش ثابت می‌مونه.
برای اینکه فاصله بین چندین شکل به صورت دقیق و برابر تنظیم بشه، باید از گزینه‌های توزیع یا Distribute در محورهای افقی و عمودی استفاده کنید. نرم‌افزار در این حالت شکل اول و شکل آخر رو سر جای خودشون نگه می‌داره و بقیه عناصر رو در فضای خالی بین این دوتا به صورت مساوی پخش می‌کنه. این ویژگی خصوصا وقتی در حال ساخت منوها یا لیست‌های دکمه هستید، خیلی به کارتون میاد و فواصل رو با یک کلیک یکپارچه می‌کنه.
استفاده از کلید آلت (Alt) سریع‌ترین روش برای چک کردن فاصله‌ها بدون نیاز به جابجایی عناصر در صفحه است. کافیه روی یکی از لایه‌ها کلیک کنید، کلید آلت رو روی کیبورد بگیرید و نشانگر موس رو به سمت عناصر دیگه حرکت بدید. با این کار، اعداد دقیق فاصله به پیکسل برای شما نمایش داده میشه. اگر موس رو خارج از محدوده اشکال ببرید، فاصله همون لایه تا لبه‌های آرتبوردتون محاسبه و نمایش داده میشه.
زمانی که یک لایه رو با موس می‌گیرید و حرکت می‌دید، ایکس دی به صورت خودکار با خطوط راهنما بهتون میگه که این شکل الان نسبت به اشکال دیگه در چه وضعیتی قرار داره. مثلا اگر سه تا دایره داشته باشید و یکی رو حرکت بدید، سیستم هوشمند بهتون اخطار میده که الان فاصله این سه تا با هم برابر شده. رعایت نکردن این راستاها و فاصله‌ها، باعث میشه طرح شما ساختار خودش رو از دست بده و جلوه بصری بسیار بدی برای کاربر داشته باشه.
آشنایی با ابزار، تنها بخشی از مسیر یادگیری است. برای یادگیری تخصصی طراحی رابط کاربر (UI)، سرفصل‌ها و پروژه‌های دوره UI Design Plus را ببینید. این دوره علاوه بر آموزش ابزار، اصول طراحی، تمرین‌های عملی و پروژه‌های طراحی رابط کاربر را پوشش می‌دهد.
کاربرد تراز و فاصله‌گذاری در طراحی رابط کاربر
در این درس، نحوه کار با ابزارهای تراز و توزیع فاصله در Adobe XD را تمرین می‌کنید. این ابزارها تنظیمات را اجرا می‌کنند؛ تصمیم‌گیری درباره چیدمان و فاصله مناسب، بخشی از دانش طراحی رابط کاربر است.
