قسمت۱: معرفی بخش های نرم افزار Adobe Xd

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

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

در ابتدای آموزش طراحی رابط کاربری اَپ زمانی که وارد نرم افزار آدوبی XD شدید و یک پروژه خالی باز کردید با صفحه زیر رو به رو می شوید.

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

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

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

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

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

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

زمانی که تنظیمات سمت راست را اسکرول می کنید و به پایین می آوردی قسمت بعدی که در نرم افزار آدوبی xd  مشاهده می کنید قسمت GRUD است. این قسمت می تواند فعال یا غیر فعال کنید در صورتی که فعال کنید و روی گزینه Square قرار داشته باشد صفحه پروژه شما به صورت شبکه بندی شده هست که در قسمت Square Size می توانید اندازه مربع ها رو کوچک یا بزرگ کنید.

در ادامه آموزش طراحی رابط کاربری اپ به قسمت بعدی GRID می پردازیم که در تصویر بعد مشاهده می کنید.

اگر قسمت GRID در نرم افزار را روی Layout قرار دهید صفحه پروژه شما را به صورت ستون هایی که در تصویر بالا مشاهده می کنید تبدیل می کند که می توانید از قسمت های پایین فاصله بین ستون ها ، فاصله ستون ها تا حاشیه ، تعداد ستون ها را تعیین کنید و به مقادیر مورد نیاز تغییر دهید. از قسمت دو مربع پایین برای فاصله های مختلف از بالا و پایین و… تعیین می کند که در فیلم آموزشی به جزئیات پرداخته شده است.

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

حالا برای تعیین این خطوط اگر از سمت بالا و از سمت چپ به حاشیه و کادر پروژه نزدیک شوید المان موس شما تغییر می کند وقتی که تغییر کرد می توانید با زدن دکمه چپ موس و کشیدن به راست یا پایین خط مورد نظر را هرجا که دوست دارید قرار دهید.

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

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

در ابتدا می خواهیم نام اپلیکیشن که Fast Food قرار داده ایم در بالای نرم افزار بنویسیم برای این کار ابتدا باید بر روی ابزار text در سمت چپ نرم افزار کلیک کنیم و بعد هر جا که خودتون نسبت به طراحی رابط کاربری اپلیکیشن تان  مناسب است کلیک کنید و شروع نوشتن کنید.

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

در قسمت ۳ که در تصویر بالا مشاهده می کنید می کنید می توانید نوع فونت ، اندازه ، حالت و تنظیمات دیگر متن در آن قسمت نسبت به اپلیکیشن انجام بدهید.

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

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

در ادامه به معرفی قسمت های مختلف بر اساس شماره می پردازیم.

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

۲- از این قسمت می توانید کادرتان را در وسط تنظیم نمایید و جای دقیق آن را تعیین نمایید.

۳- از این قسمت می توانید اندازه کادر را بر حسب عدد وارد نمایید همچنین کادر هایی که نیاز ندارید را حذف یا اضافه نمایید به عنوان مثال یک قسمتی از نرم افزار هست که کادر سمت راست نیاز ندارد شما می توانید از این قسمت حذف نمایید.

ادامه تنظیمات کادر:

۱- در قسمت اول می توانید میزان ردیوس گوشه های مربع یا مستطیل مورد نظر را تعیین کنید یا به یک خط باشد یا خط های بریده از این قسمت تعیین می شود.

۲- در این قسمت رنگ مورد نظر تون رو کادر قرار می دهید.

۳- در قسمت بعد خط دور را تعیین می کنید یا کلا حذف می کنید با برداشتن تیک کنار آن می توانید خط دور را کاملا حذف نمایید.

۴- در قسمت ۴ شما می توانید سایه برای مربع یا مستطیل مورد نظرتان قرار بدهید.

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

برای ذخیره پروژه از قسمت بالا سمت چپ بر روی منو کلیک کنید و بر روی گزینه save As کلیک نمایید یا از کلیک ترکیبی Shift + Ctrl + s کلیک نمایید.

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

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