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

آموزش adobe xd
  • پیش گفتار این مقاله
  • ایمان کمالی در 1399/04/02

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

آموزش adobe xd

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

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

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

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

 

 

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

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

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

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

 

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

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

آموزش adobe xd - ایجاد پروژه

 

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

 

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

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

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

 

آموزش adobe xd ایجاد دکمه

 

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

 

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

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

 

آموزش adobe xd افزودن ایکن

 

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

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

 

آموزش adobe xd آیکن دکمه

 

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

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

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

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

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

 

آموزش adobe xd ایجاد artboard

 

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

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

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

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

 

آموزش adobe xd ویراش path

 

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

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

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

 

آموزش adobe xd ویرایش icon

 

 

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

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

 

آموزش Xd ساخت انیمیشن

 

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

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

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

 

آموزش ادوبی xd

 

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

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

 

آموزش adobe xd

 

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

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

 

adobe xd Artboards

 

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

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

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

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

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

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

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

 

prototype در adobe xd

 

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

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

 

آموزش xd

 

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

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

 

artboard ها در xd

 

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

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

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