خیلی وقتها در مسیر طراحی رابط کاربری به فرمهایی نیاز پیدا میکنید که در لیست اشکال هندسی پایه نرمافزار وجود ندارند. مثلا برای طراحی یک نوار ناوبری (Navigation Bar) پایین اپلیکیشن که وسط آن خمیدگی نرمی دارد، نمیتوانید به یک مستطیل ساده اکتفا کنید.
برای ساخت این فرمهای سفارشی باید دست به کار شوید و با ترکیب لایههای پایه، طرح مدنظرتان را خلق کنید. بهترین راه برای رسیدن به این هدف، استفاده از ابزارهای Boolean در ادوبی ایکس دی است که در نرمافزار ایلاستریتور با نام Pathfinder شناخته میشوند.
در صورتی که فیلترشکن شما خاموش است می توانید ویدیو را در همین صفحه(یا در آپارات) و در زیر این پیام ببینید، در غیر اینصورت میتونید در یوتیوب آن را با بالاترین کیفیت مشاهده کنید.
ابزار بولین (Boolean) چیست و چطور کار میکند؟
این ابزار شامل چهار عملگر اصلی برای ترکیب، کسر، اشتراک و حذف اشتراک لایههای هندسی است. وقتی دو یا چند شکل را به صورت همزمان انتخاب میکنید، در پنل اینسپکتور (Inspector Panel) سمت راست صفحه، چهار گزینه برای مدیریت آنها ظاهر میشود.
یادگیری دقیق این چهار عملگر نه تنها در ایکس دی، بلکه در تمام نرمافزارهای دیزاین سرعت کار شما را به شدت بالا میبرد. وقتی این منطق را در یک پلتفرم یاد بگیرید، کار با هر ابزار دیزاین دیگری برایتان بسیار راحتتر میشود و میتوانید به درستی با آنها کار کنید.
قابلیت Add (ترکیب لایهها)
عملگر Add دقیقا اشکال انتخاب شده را با هم جمع میزند و یک شکل واحد و یکپارچه به شما تحویل میدهد. برای مثال با قرار دادن یک مستطیل و یک دایره روی هم و زدن این دکمه، مرزهای داخلی آنها حذف شده و به یک آبجکت یکدست تبدیل میشوند.
اگر پنل لایهها را باز کنید، میبینید که نرمافزار به صورت خودکار آنها را در یک گروه مشخص تنظیم کرده است. مزیت بزرگ این روش این است که با دو بار کلیک روی شکل نهایی، همچنان میتوانید اجزای اولیه را انتخاب کنید، تغییر سایز دهید یا جابهجا کنید.
قابلیت Subtract (کم کردن لایهها)
ابزار Subtract لایه رویی را از لایه زیری کم میکند. در واقع قسمتهایی از لایه زیرین که با لایه بالایی همپوشانی دارند، بریده و پنهان میشوند.
اگر میخواهید یک آیکون ماه (Moon) طراحی کنید، کافی است دو دایره را با کمی فاصله روی هم قرار دهید. سپس هر دو را انتخاب کرده و روی Subtract کلیک کنید تا دایره رویی، بخش اضافه دایره زیرین را برش دهد و فرم هلال ماه شکل بگیرد.
قابلیت Intersect (نگه داشتن بخش مشترک)
عملگر Intersect فقط آن قسمتی از اشکال را نگه میدارد که بین همه لایههای انتخابی مشترک است و بقیه بخشها را به طور کامل حذف میکند.
اگر سه دایره را طوری روی هم قرار دهید که فقط در مرکز با هم تلاقی داشته باشند، با زدن این دکمه یک فرم برگمانند به دست میآورید. از این تکنیک برای ساخت لوگوهای مرتبط با شعله آتش یا طراحی خانههای قطبی اسکیموها استفاده میشود.
قابلیت Exclude (حذف بخش مشترک)
ابزار Exclude دقیقا برعکس عملگر قبلی کار میکند؛ یعنی بخشهای مشترک و همپوشانی شده را خالی کرده و نواحی بیرونی را نگه میدارد. با این کار یک فضای منفی یا سوراخ در وسط اشکال شما ایجاد میشود.
آموزش طراحی آیکون خانه با اشکال پایه
طراحی آیکونها نیازمند درک درست از اجزای تشکیلدهنده آنهاست. به جای اینکه ابزار Pen را بردارید و نقطه به نقطه مسیر بکشید، به فرم کلی آیکون نگاه کنید.
آیکون خانه (Home) در ذهن اکثر کاربران از یک مربع یا مستطیل به عنوان بدنه و یک مثلث به عنوان سقف تشکیل شده است. برای ساخت آن کافی است یک مستطیل رسم کنید، یک مثلث دقیقا بالای آن قرار دهید و با ابزار Add آنها را به یک شکل واحد تبدیل کنید.
برای اضافه کردن جزئیات، میتوانید دو پنجره و یک در روی این فرم اصلی قرار دهید. سپس با انتخاب همه آنها و استفاده از دکمه Subtract، جای در و پنجرهها را از بدنه اصلی خانه توخالی کنید. حتی اضافه کردن دودکش هم با کشیدن یک مستطیل کوچک و استفاده مجدد از گزینه Add به راحتی امکانپذیر است.
طراحی سریع آیکون پروفایل
آیکون پروفایل کاربری از دو فرم بسیار ساده تشکیل شده است: یک دایره کوچک برای سر و یک دایره بزرگتر برای فرم بدن آدمک.
یک دایره رسم کنید و سپس دایره بزرگتری را زیر آن قرار دهید. با استفاده از قابلیت Add این دو را ترکیب کنید. برای اینکه پایین آیکون شما صاف باشد، میتوانید یک مستطیل روی بخش پایینی آدمک بکشید و با عملگر Subtract آن قسمت را برش دهید. در نهایت میتوانید این آدمک را داخل یک دایره دیگر قرار دهید تا فرم استانداردی برای منوی بالای سایتها به دست بیاورید.
اگر در ابتدای مسیر دیزاین هستید و میخواهید این مفاهیم پایه را به صورت اصولی و پروژهمحور یاد بگیرید، پیشنهاد میکنم آموزشهای دوره UI Design Plus در آکادمی LearnUIX را بررسی کنید.
لینک های مفید:
جامعترین دوره آموزش طراحی محصول Product Design Pro X
جامعترین دوره آموزش طراحی رابط کاربر UI Design
جامعترین دوره آموزش طراحی تجربه کاربر UX Design
