آموزش adobe xd طراحی checkbox انیمیشنی

درود به همراهان بیت بنگ! در این پست با آموزش adobe xd طراحی checkbox انیمیشنی در خدمت شما هستیم!

در این آموزش می خواهیم یک چک باکس طراحی کنیم!

چک باکس ها می توانند دو حالت فعال یا غیر فعال داشته باشند.

ساده ترین حالت یک چک باکس را حتما پیش از این بسیار دیده اید، یک مربع کوچک که با کلیک بر روی آن یک تیک ظاهر می شود.

در این جا چک باکس ما با تغییر از صفر به یک که 0 به معنای غیر فعال بودن و 1 به معنای فعال بودن است حالت های خود را نشان می دهد.

همچنین رنگ پس زمینه برای حالت غیر فعال قرمز و برای حالت فعال سبز است.

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

ایجاد یک پروژه جدید در Adobe XD

برای آموزش ها در بیت بنگ من معمولا از artboard دلخواه خودم یعنی iPhone/X/XS/11 Pro استفاده می کنم.

شما می توانید هر artboard پیش فرض یا سفارشی که می خواهید ایجاد کنید.

پس از ایجاد پروژه جدید می توانید رنگ پس زمینه را هم به دلخواه انتخاب کنید.

در این آموزش، من برای رنگ پس زمینه از Gradient در adobe xd استفاده می کنم.

ایجاد ساختار  checkbox در Adobe XD

ابتدا می بایست ساختار اولیه چک باکس را طراحی کنیم.

برای این کار من با استفاده از ابزار رسم چهار ضلعی ابتدا یک مستطیل رسم کرده و گوشه های آن را گرد می کنم.

می توانید در زیر تصویر آن را ببینید :

border آبجکتی که ایجاد کردیم را حذف می کنیم.

رنگ پس زمینه را هم به قرمز تغییر می دهیم، من رنگ FF2200 را انتخاب کردم.

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

لایه ای که کپی کردید را انتخاب کرده، مانند تصویر زیر گزینه Object Blur را انتخاب کنید و Opacity آن را به 50 درصد کاهش دهید.

طراحی حالت غیر فعال چک باکس

حالا برای نمایش 0 که غیر فعال بودن چک باکس را نمایش می دهد، یک دایره ایجاد کرده و آن را سمت چپ چک باکس قرار دهید.

رنگ پس زمینه را مانند تصویر زیر غیر فعال کرده و Border آن را 30 پیکسل قرار دهید (بسته به اندازه دایره می توانید Border را تغییر دهید!) :

طراحی حالت فعال چک باکس

در این مرحله یک کپی از artboard اول می گیریم تا حالت فعال را ایجاد کنیم.

در حالت فعال پس زمینه سبز و بجای صفر، 1 را نمایش می دهیم.

برای کپی کردن artboard نام آن را انتخاب کرده و با CTRL+C و CTRL+V یک نسخه جدید از آن ایجاد کنید.

سپس پس زمینه و سایه آن را به رنگ 00FF5C در می آوریم.

دایره ای که نمایان گر 0 است را حذف کرده و با استفاده از ابزار چهارضلعی، 1 را طراحی کرده و در قسمت راست قرار می دهیم :

قدم آخر؛ انیمیت چک باکس

در آخرین مرحله باید با کلیک بر روی چک باکس حالت آن را تغییر دهیم.

برای این کار به محیط Prototype می رویم.

مانند تصویر زیر از منو بالا گزینه prototype را انتخاب کرده و یک INTERACTION را برای چک باکس (در آرت بورد اول) ایجاد می کنیم.

پنل تنظیمات INTERACTION  را مانند تصویر زیر تنظیم نمایید.

سپس از artboard دوم نیز چک باکس را انتخاب کرده و برای تریگر Tap مانند تصویر چک باکس را به حالت اولیه باز گردانید :

حالا می توانیم طرح نهایی را از منو بالا سمت راست و با گزینه Desktop Preview مشاهده کنیم.

امیدوارم از آموزش adobe xd طراحی checkbox انیمیشنی لذت برده باشید.

اگر پرسشی دارید می توانید از بخش دیدگاه ها با ما در میان بگذارید.

شاد و پیروز باشید!