آموزش تکنیک‌های طراحی UI/UX: صفحه اصلی برنامه Chayyel

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

سعید کشاورز کرمانی (سردبیر)

لینک کپی شد!

یکبار دیگر با پستی در مورد تکنیک‌ها و ترفندهای UI/UX برگشتیم. در این مقاله کیس‌استادی Chayyel را بررسی می‌کنیم. این اپلیکیشن یکی از چالش برانگیزترین پروژه‌های ما بوده است.
اگر به این سبک مقالات علاقه دارید می‌توانید مقاله پروژه لوازم را نیز بخوانید:

تِم اپلیکیشن

برای طراحی یک اپلیکیشن معمولا قبل از هر چیز باید در مورد مفهوم رابط کاربری یا همان (UI Concept) نرم‌افزار بحث کرد.
همانطور که در فریم‌های اپلیکیشن مشاهده می‌کنید تمرکز برنامه روی محصولات بازی است و از آنجایی که اکثریت قریب به اتفاق آن بازی‌ها ( چه برای پلی استیشن چه کامپیوتر) تِم تیره دارند، طراحی اپلیکیشن باید این چنین فضایی را منعکس کند.

رنگ های اولیه و ثانویه

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

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

همچنین بهتر است که رنگ ثانویه طراحی نیز از لوگوی اپلیکیشن استخراج شود که در مورد برنامه شایل نارنجی است.

همه این اقدامات برای تبلیغ و تثبیت برند اپلیکیشن در ذهن مخاطب انجام می‌شود و مهمترین عنصر در این راه استفاده رنگ‌ها و الگوهای موجود در برند است.

چند نکته درباره طراحی UX لندینگ پیج

بگذارید با یک مثال شروع کنیم اگر در یک فروشگاه (فیزیکی) درباره بعضی از محصولات آن سوال داشته باشید، شخص مغازه‌دار حاضر است تا به تمامی سوالات شما پاسخ دهد. اما در مورد یک اپلیکیشن چطور؟
کارت‌های محصول و همچنین صفحات یک محصول از مهم‌ترین بخش‌های یک اپلیکیشن برای معرفی محصولات هستند. در واقع ما با طراحی دقیق و حرفه‌ای باید بتوانیم همان کاری را که مغازه‌دار انجام می‌دهد به بهترین شکل انجام داده و مشتری را از سردرگمی خلاص کنیم.
کارت محصولی (product card) که طراحی می‌کنیم باید حاوی اطلاعات اصلی آن محصول خاص باشد و بر تصمیم مشتری تاثیر گذاشته و او را به خریدن آن محصول ترغیب کند.
به طور کلی، کارت محصول باید شامل این موارد باشد:

تصویر محصول
نام محصول
توضیح کوتاه
قیمت محصول
و مهمتر از آن قیمت با تخفیف (همراه با تایمر)

تایمر تخفیف همیشه حس فوریت را به مشتری می‌دهد همین امر بر تصمیم او تأثیر می‌گذارد و در واقع مشتری خود را در حال از دست دادن یک فرصت مهم می‌بیند .
همچنین در این اپلیکیشن به خصوص که یک اپلیکیشن چند فروشنده است، چند مورد دیگر نیز حائز اهمیت هستند. مواردی مثل نام و لوگوی فروشنده و همچنین امتیاز آن فروشنده باید به کاربر نشان داده شود. با بررسی این امتیاز، مشتری می‌تواند حدس بزند که آیا مشتریان دیگر، محصولات این فروشنده را پیشنهاد می‌کنند یا نه، که این امر حس خرید امنی را به مشتری القا میکند.

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

برای اضافه کردن یک ویژگی به طراحی ، ماهیت کسب و کار را در نظر داشته باشید.

یکدست بودن طراحی

بنر بالای صفحه ورودی را در نظر بگیرید. این بنر به طراحی UI این اپلیکیشن حس بازی یا به اصطلاح گیمینگ می‌دهد. اما خبر بد این است که این تصویر متغیر می‌باشد و ادمین این پروژه می‌تواند به راحتی آن را تغییر دهد. همین موضوع می‌تواند یکنواختی (uniformity) طراحی برنامه را به هم بزند. پیشنهاد ما یک تکنیک طراحی عالی برای حفظ یکدست بودن طراحی شماست.

تغییر تصویر بنر به بازی Fortnite. یکنواختی رابط کاربری برنامه حفظ نشده است.

تکنیک در طراحی رابط کاربری (UI trick)

می‌توانید یک لایه محو شده به بنر صفحه اصلی اضافه کنید. پایین بنر را محو کنید تا به رنگ پس‌زمینه صفحه اصلی نزدیک شود. (از گردینت خطی استفاده کنید)

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