برای شروع مسیر طراحی رابط کاربری، تسلط بر شکل های مختلف و تنظیمات آنها در ادوبی ایکس‌دی یک نیاز کاملا پایه و اساسی محسوب میشه. خیلی از دکمه‌ها، کارت‌ها و فرم‌هایی که در اپلیکیشن‌های روزمره می‌بینید، با همین اشکال هندسی ساده ساخته شدن. در این مقاله تمام ریزه‌کاری‌های مربوط به ابزار لاین، مستطیل و پالیگان رو با هم بررسی می‌کنیم تا بتونید با سرعت و دقت بیشتری طراحی‌های خودتون رو انجام بدید.
ویدیوی آموزش Shape و Stroke در Adobe XD
این ویدیو آموزش ابزارهای رسم شکل در Adobe XD است؛ از خط و مستطیل تا چندضلعی، تنظیم حاشیه و گرد کردن گوشه‌ها. اگر فیلترشکن خاموش است، نسخه آپارات را همین‌جا ببینید؛ نسخه YouTube هم از دکمه زیر در دسترس است.
نحوه کار با ابزار لاین و تنظیمات آن
ابزار لاین که در منوی سمت چپ قرار داره، با کلید میانبر L فعال میشه و برای رسم خطوط صاف به کار میره. برای کشیدن یک خط، فقط کافیه یک نقطه رو کلیک کنید و موس رو بکشید.
اگر می‌خواید خط شما کاملا مستقیم یا با زاویه ۴۵ درجه رسم بشه، باید کلید Shift رو همزمان با کشیدن خط نگه دارید. در پنل تنظیمات سمت راست (بخش Appearance) می‌تونید رنگ این خط رو تغییر بدید یا ضخامت اون رو با وارد کردن عدد دلخواه، کم و زیاد کنید. با نگه داشتن کلید Shift و زدن فلش‌های بالا یا پایین کیبورد، می‌تونید ضخامت رو ده‌تا ده‌تا تغییر بدید.
ساخت خطوط نقطه چین در ایکس‌دی
برای نقطه چین کردن یک خط، باید در پنل تنظیمات سراغ مقادیر Dash و Gap برید. اگر به عنوان مثال مقدار Dash رو روی ۵ و مقدار Gap رو هم روی ۵ تنظیم کنید، یک نقطه چین منظم روی خط اعمال میشه.
برای اینکه لبه‌های این نقطه چین‌ها حالت گرد و نرم‌تری داشته باشن، کافیه استایل سر خط رو روی حالت Rounded Cap قرار بدید. این کار باعث میشه طراحی شما ظاهر بسیار مدرن‌تری پیدا کنه.
تسلط بر ابزار مستطیل و گرد کردن گوشه‌ها
بیشترین ابزاری که در ادوبی ایکس‌دی استفاده میشه ابزار رکتنگل یا همون مستطیله. شما با انتخاب این ابزار و درگ کردن می‌تونید هر شکل چهارضلعی رو بسازید و اگر کلید Shift رو نگه دارید، یک مربع کاملا دقیق و متناسب به دست میارید.
برای گرد کردن گوشه‌های مستطیل، دایره‌های کوچکی در داخل گوشه‌های شکل ظاهر میشن که با کشیدن اون‌ها به سمت داخل، لبه‌ها نرم میشن. اگر می‌خواید فقط یک گوشه خاص رو به صورت مستقل گرد کنید، کافیه کلید Alt رو نگه دارید و همون گوشه رو تغییر بدید.
تنظیمات حاشیه و استروک
در قسمت Border پنل تنظیمات، می‌تونید رنگ حاشیه مستطیل رو مشخص کنید. ادوبی ایکس‌دی سه حالت مختلف برای قرارگیری حاشیه در نظر گرفته: اینر استروک (حاشیه داخلی)، اوتر استروک (حاشیه بیرونی) و سنتر استروک که حاشیه رو بین فضای داخل و خارج شکل تقسیم می‌کنه.
رسم چندضلعی و ساخت ستاره با پالیگان
ابزار پالیگان با میانبر Y برای رسم مثلث و اشکال چندوجهی کاربرد داره. در حین رسم این شکل، اگر فلش‌های بالا یا پایین کیبورد رو بزنید، می‌تونید تعداد اضلاع رو به صورت زنده کم یا زیاد کنید.
برای ساخت نشان‌های گارانتی یا شکل ستاره، یک نقطه کوچک در لبه‌های داخلی چندضلعی وجود داره که اگر اون رو به سمت مرکز بکشید، شکل شما به سرعت تبدیل به یک ستاره میشه. این ویژگی نیاز به رسم دستی چنین فرم‌هایی رو کاملا از بین می‌بره.
انجام محاسبه ریاضی خودکار در پنل ابعاد
نرم‌افزار ادوبی ایکس‌دی این قابلیت رو داره که محاسبات ریاضی رو مستقیما در فیلدهای طول و عرض انجام بده. اگر فرض کنیم ارتفاع یک دکمه ۵۳۸ پیکسله و می‌خواید اون رو دقیقا نصف کنید، نیازی به ماشین حساب ندارید.
کافیه در فیلد Height عدد موجود رو با علامت /۲ ترکیب کنید و اینتر بزنید. ایکس‌دی سریعا خودش محاسبه رو انجام میده و ارتفاع رو نصف می‌کنه؛ این ترفند برای ضرب و سایر عملیات‌ها هم در دسترسه و سرعت کارتون رو به شدت بالا می‌بره.
این مهارت‌ها کجا به کار می‌آیند؟
ابزارهای این درس برای رسم شکل، تنظیم خط و حاشیه و ساخت چندضلعی در Adobe XD به کار می‌روند. می‌توانید با آنها اجزای ظاهری مانند دکمه یا آیکان بسازید؛ انتخاب شکل مناسب، چیدمان و کاربرد آن در رابط کاربر به دانش طراحی نیاز دارد.
ادامه مسیر
- قسمت قبل: شروع و Artboard — قسمت ۱
- قسمت بعد: Text — قسمت ۳
- Shape در Figma
آشنایی با ابزار، تنها بخشی از مسیر یادگیری است. برای یادگیری تخصصی طراحی رابط کاربر (UI)، سرفصل‌ها و پروژه‌های دوره UI Design Plus را ببینید. این دوره علاوه بر آموزش ابزار، اصول طراحی، تمرین‌های عملی و پروژه‌های طراحی رابط کاربر را پوشش می‌دهد.
