آموزش adobe xd طراحی دکمه حذف با انیمیشن

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

در طراحی وب انواع دکمه ها و کلید ها نقش مهمی در انجام عملیات های وب سایت ایفا می کنند.

رنگ بندی، آیکن ها و انیمیشن هر دکمه یا کلید در صفحه وب شما باید متناسب با عملکرد آن دکمه باشد.

نمونه نهایی این طراحی و انیمیشن را می توانید در زیر مشاهده کنید :

قدم اول؛ نصب پلاگین Icons 4 Design

از آن جا که در این آموزش از پلاگین Icons 4 Design در adobe xd استفاده می کنیم بنابراین ابتدا می بایست آن را نصب کنید.

آموزش نصب پلاگین در adobe xd را پیش از رفتن به قدم بعدی مطالعه کنید.

پس از نصب این پلاگین می توانیم مرحله بعدی را از سر گیریم.

قدم دوم؛ ایجاد یک دکمه پروژه در adobe xd

Adobe XD را باز کرده و مانند تصویر زیر یک پروژه ایجاد کنید.

برای این تمرین من iPhone X/XS/11 Pro را انتخاب می کنم.

قدم سوم؛ ایجاد یک دکمه به همراه icon در adobe xd

حالا وقت آن است تا دکمه مورد نظر خودمان را به همراه آیکن سطل زباله طراحی و ایجاد کنیم!

برای این کار من از ابزار چهار ضلعی استفاده می کنم.

برای گرد کردن گوشه آبجکت می تانید از این ترفند استفاده کنید!

سپس با استفاده از پلاگینی که نصب کردیم یک آیکن سطل زباله مناسب به دکمه اضاف می کنیم.

می توانید به شکل زیر از قسمت پنل پلاگین به دنبال واژه trash بگردید.

آیکن مناسب را انتخاب و در مرکز دکمه ای که ایجاد کردید قرار دهید.

آیکن باید مشابه تصویر زیر باشد چرا که با خطوط اجزای آن کار داریم!

یک کپی از artboard بگیرید و نام آن را به step2 تغییر دهید.

رنگ پس زمینه دکمه ای که ایجاد کردیم را به سبز تغییر دهید.

رنگ آیکن سطل زباله را نیز تغییر داده و مشکی کنید.

برای تغییر رنگ آیکن روی آن کلیک کرده و رنگ Border آن را تغییر دهید.

نتیجه باید مانند زیر تصویر زیر باشد :

قدم چهارم؛ تنظیم آیکن برای انیمیشن

حالا وقت آن است که آیکن را تغییر دهیم!

می خواهیم سطل زباله زحمت بکشد و زمانی که ما کلیک کردیم در خود را بردارد! 🙂 درست مانند ویدئو نمونه که مشاهده کردید!

بنابراین به سراغ لایه ها در artboard دوم می رویم و لیست اجزای آیکن را باز می کنیم.

همان طور که می بینید این آیکن از چهار path تشکیل شده که می خواهیم با تغییر آن ها شکل مورد نظر خودمان را ایجاد کنیم.

Path2 را انتخاب و به بالا بکشید تا ارتفاع آن زیاد شود و کش بیاید!

سپس Path1 یک را به بالا انتقال دهید، درست مانند تصویر زیر :

حالا می بایست قسمت اضافی را با یک مستطیل هم رنگ پس زمینه بپوشانیم.

برای این کار یک مستطیل ایجاد کرده، رنگ آن را همسان با بک گراند قرار دهید و مانند تصویر زیر به جای مناسب منتقل کنید.

از یک پرانتز “)” برای نشان دادن دست سطل زباله استفاده می کنیم!

برای ایجاد پرانتز از ابزار text در سمت راست استفاده کنید و یا خیلی راحت تر کلید t را فشار دهید.

رنگ آن را کمی روشن تر از خود آیکن قرار داده و مانند تصویر زیر در جای مناسب خود بگذارید.

حالا artboard دوم را کپی کرده و نام artboard جدید را step3 بگذارید.

باید سطل زباله به حالت اولیه برگردانیم، پس مستطیل هم رنگ پس زمینه را حذف و حالت آیکن را مانند artboard اول در آورید.

تا اینجا artboard ها باید مانند تصویر زیر باشد.

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

قدم آخر؛ تنظیمات بخش Prototype

وقت آن است تا دکمه را انیمیت کنیم.

به سراغ محیط Prototype می رویم.

با tap بر روی دکمه باید به حالت بعد در artboard دوم برویم.

دکمه را انتخاب کنید و فلش را کشیده و به artboard دوم وصل کنید.

لازم است مانند تصویر در زیر، Trigger و action تنظیم شده باشند.

همچنین Easing و Duration برای زمان بندی و حالت وقوع تغییر باید تنظیم گردد.

در مرحله بعدی باید بگوییم بعد از زمان مشخصی به حالت artboard سوم برود!

بنابراین Trigger در این جا بر روی Time تنظیم شده است و زمان 0.4 ثانیه برای این کار است.

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

این کار را درست مانند مرحله قبل انجام می دهیم.

حالا می توانید نتیجه کار را مشاهده کنید!

در صورتی که پرسشی در مورد آموزش adobe xd طراحی دکمه حذف با انیمیشن داشتید می توانید آن را در بخش دیدگاه ها با ما در میان بگذارید.

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