قسمت۵: آموزش طراحی صفحه Splash در Adobe Xd

52 بازدید
آموزش طراحی صفحه Splash در Adobe Xd

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

در قسمت قبل آموزش طراحی ui اپلیکیشن به آموزش اسکرول و تب prototype پرداختیم.

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

در قسمت های قبل آموزش طراحی ui اپلیکیشن یک پروژه فست فود طراحی کرده ایم همانطور که در تصویر زیر مشاهده می کنید برای طراحی صفحه splash یک آرت بورد جدید ساخته ایم و لوگوی نرم افزار را در وسط صفحه آن قرار داده ایم.

آموزش طراحی ui نرم افزار

برای رنگ آمیزی این صفحه همانطور که در تصویر بالا مشاهده می کنید دارای سه قسمت است که قسمت solid color در قسمت های قبل توضیح داده ایم و در ادامه آموزش طراحی ui اپلیکیشن به معرفی دو قسمت بعدی می پردازیم.

۱- قسمت اول رنگ صفحه را به صورت خطی تغییر می دهد که در فیلم آموزش در ابتدای این پست و همچنین در تصویر بعدی کاملا می توانید مشاهده کنید.

۲- قسمت دوم رنگ را به صورت دایره یا بیضی با هر شعاع و اندازه ای تغییر می دهد که همانطور در تصویر بالا مشاهده می کنید یک دایره به قسمت وسط آرت بورد یا هر جای آن اضافه می شود که می توانید اندازه و حالت آن را تغییر بدهید.

آموزش طراحی ui نرم افزار

همانطور که در تصویر بالا مشاهده می کنید اگر در حالت خطی یا دایره ای باشد شما می توانید چند رنگ را به پروژه اضافه می کنید و همانطور که در تصویر بالا مشخص شده است شما با کلیک روی هر جای خط می توانید یک بلوک رنگی اضافه نمایید و رنگ مورد نظرتان را به پروژه اضافه نمایید.

همانطور که می دانید صفحه Splash در یک اپلیکیشن صفحه ای است که کاربران در ابتدای ورود چند ثانیه آن صفحه را مشاهده می کنند است برای این که زمان این صفحه را تعیین نمایید به ادامه آموزش طراحی ui اپلیکیشن بپردازید.

آموزش طراحی رابط کاربری اپلیکیشن

برای این که زمان تعیین نمایید برای صفحه splash به تب prototype می روید و بر روی آرتبورد splash کلیک می کنید و فلش آبی را به صفحه home یا به صفحه که شما می خواهید زمانی که کاربر وارد اپلیکیشن شد در ابتدا مشاهده کند وصل می کنید. بعد از سمت راست و  قسمت trigger را برای روی time قرار دهید و زمانی که می خواهید کاربر صفحه splash زا مشاهده کند وارد نمایید.

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

آموزش طراحی رابط کاربری اپ

می خواهیم تصویر بالا را جوری طراحی نماییم که زمانی که بر روی دایره نارنجی کوچک کلیک کردیم به دایره بزرگ تبدیل شود اما نه به صورت یکدفعه بلکه ما شکل یا مراحل بزرگ شدن دایره را ببینیم. نکته ای که باید توجه نمایید این است که حتما باید اسم این دو دایره یکی باشد و مثل هم باشد. برای تغییر اسم این دو شکل و مشابه قرار دادن آن باید از قسمت لایه ها استفاده نمایید که در قسمت های قبل آموزش داده شده است.

زمانی که اسم دو لایه را مشابه قرار دادید از قست prototype ارتباط آن دو را به هم وصل می کنید بعد از سمت راست قسمت type بر روی Auto Animate قرار دهید حالا زمانی که اپلیکیشن را اجرا نمایید و بر روی دایره کوچک کلیک نمایید مشاهده می کنید که چگونه به دایره بزرگ تبدیل می شود.

یکی دیگر از کارهای که می توان با استفاده از قسمت Auto Animate انجام داد حذف کردن یک المان با استفاده از درگ و دراپ است.

آموزش طراحی ui نرم افزار

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

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

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

تاجلسه بعدی خدانگهدار!

آیا این مطلب را می پسندید؟
https://modiran.app/?p=1893
برچسب ها:
اشتراک گذاری:
نیایش ملکی
نیایش ملکی
فارغ التحصیل مقطع کارشناسی ارشد رشته مدیریت صنعتی از دانشگاه شهید بهشتی فریلنسر و طراح تجربه و رابط کاربری وبسایت و اپلیکشن. مسلط به فریم وورکهای حل مسئله و سیستم داینامیک. تجربه ی فعالیت در زمینه های مختلف گرافیکی، طراحی و پروژه های داخلی و خارجی با حدود 2 سال تجربه حرفه ای
مطالب بیشتر

باکس دانلود

گزارش خرابی لینک ها
راهنما

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

نظرات

0 نظر در مورد قسمت۵: آموزش طراحی صفحه Splash در Adobe Xd

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

*

code

هیچ دیدگاهی نوشته نشده است.