طراحی اختصاصی UI/UX پنل PWA مدیریت بارنامه شهری زحل

سفارش طراحی UI/UX اختصاصی پنل بارنامه شهری زحل (ZOHAL) ۱. هدف پروژه قصد داریم ظاهر و تجربه کاربری پنل بارنامه شهری زحل را به‌صورت کامل بازطراحی کنیم. پنل فعلی یک سامانه PWA برای مدیریت رانندگان و صدور بارنامه شهری است. هدف ما طراحی یک رابط کاربری بسیار مدرن، شیک، حرفه‌ای، جذاب و زنده است؛ به‌طوری‌که کاربر هنگام ورود به پنل احساس استفاده از یک نرم‌افزار حرفه‌ای و سطح بالا را داشته باشد. نکته مهم: این پروژه صرفاً تغییر رنگ و ظاهر نیست؛ طراحی تجربه کاربری، چیدمان صفحات، کارت‌ها، فرم‌ها، اعلان‌ها، وضعیت‌ها و تمام جزئیات رابط کاربری باید اصولی و اختصاصی انجام شود. ۲. هویت بصری و سبک طراحی - طراحی مدرن و Premium در سطح داشبوردهای حرفه‌ای SaaS - ترکیب رنگ سرمه‌ای تیره، آبی الکتریکی و سفید - استفاده هوشمندانه از گرادینت‌های زیبا و جلوه‌های شیشه‌ای در بخش‌های مناسب - کارت‌های مدرن با گوشه‌های نرم و سایه‌های ظریف - آیکون‌های اختصاصی و یکپارچه - انیمیشن‌های نرم و جذاب هنگام باز شدن صفحات و انجام عملیات - پشتیبانی کامل از زبان فارسی و RTL - طراحی واکنش‌گرا برای موبایل، تبلت و دسکتاپ - طراحی اختصاصی حالت Dark و Light - حفظ سرعت و سبکی رابط کاربری ظاهر پنل باید حس یک محصول تجاری حرفه‌ای و به‌روز را منتقل کند، نه یک قالب آماده و تکراری. ۳. صفحه اصلی و داشبورد داشبورد باید شامل موارد زیر باشد: - نمایش نام و اطلاعات حساب کاربر - تعداد کل رانندگان - تعداد بارنامه‌های صادرشده - تعداد بارهای در حال حمل - تعداد بارهای پایان‌یافته - دسترسی سریع به افزودن راننده، ثبت بارنامه، استعلام سوخت و پروانه‌ها - آخرین فعالیت‌ها و عملیات انجام‌شده - اعلان‌های مهم سامانه - وضعیت اتصال و سلامت سرویس‌ها در صورت دریافت این اطلاعات از سیستم کارت‌های آماری باید طراحی جذاب داشته باشند و در صورت به‌روزرسانی اطلاعات، تغییرات به‌شکل روان نمایش داده شوند. ۴. صفحه مدیریت رانندگان یکی از مهم‌ترین صفحات پنل است. امکانات موردنیاز: - نمایش لیست رانندگان به‌صورت کارت یا جدول مدرن - جست‌وجوی سریع راننده - نمایش وضعیت هر راننده - دسترسی سریع به جزئیات راننده - ویرایش و حذف راننده با تأیید مناسب - نمایش تصویر راننده در صورت وجود اطلاعات تصویر - نمایش اطلاعات کلی راننده و ناوگان مرتبط فرم افزودن راننده فرم افزودن راننده دارای دو فیلد اصلی است: ۱. کد ملی راننده ۲. رمز عبور طراحی فرم باید بسیار شیک و ساده باشد. اعتبارسنجی ورودی‌ها، نمایش خطای هر فیلد، نمایش یا مخفی‌کردن رمز عبور و نمایش وضعیت ارسال درخواست نیز در نظر گرفته شود. ۵. صفحه مدیریت بارها بارها باید در سه دسته مجزا نمایش داده شوند: ۱. بارنامه‌های صادرشده ۲. بارهای در حال حمل ۳. بارهای پایان حمل هر بخش دارای شمارنده اختصاصی باشد. در لیست بارها اطلاعات مهم مثل راننده، تاریخ، شماره بارنامه و وضعیت عملیات نمایش داده شود؛ البته مطابق اطلاعاتی که API سامانه در اختیار پنل قرار می‌دهد. برای وضعیت‌ها از رنگ‌بندی مشخص استفاده شود: - آبی: بارنامه صادرشده - نارنجی: در حال حمل - سبز: پایان حمل - قرمز: دارای خطا یا نیازمند بررسی امکان جست‌وجو، فیلتر و مشاهده جزئیات هر بارنامه نیز در طراحی لحاظ شود. ۶. صفحه استعلام سهمیه سوخت یک صفحه اختصاصی و مدرن برای استعلام سهمیه سوخت طراحی شود. - انتخاب راننده یا ناوگان - نمایش وضعیت استعلام - نمایش اطلاعات سهمیه دریافتی از سامانه - نمایش تاریخ آخرین استعلام - نمایش نتیجه استعلام در یک کارت زیبا و خوانا - نمایش خطاهای احتمالی و امکان تلاش مجدد ۷. صفحه پروانه‌ها یک صفحه اختصاصی برای بررسی و استعلام پروانه‌ها طراحی شود. - نمایش لیست پروانه‌ها - نمایش تاریخ صدور و اعتبار - نمایش شهرداری صادرکننده - نمایش وضعیت اعتبار پروانه - نمایش جزئیات مرتبط با راننده و ناوگان - نمایش تصویر راننده در صورت وجود اطلاعات تصویری - امکان جست‌وجو و فیلتر اطلاعات برای تاریخ‌های نزدیک به انقضا، هشدار بصری مناسب نمایش داده شود. ۸. سیستم اعلان‌ها و پیام‌های هوشمند این بخش برای ما اهمیت بسیار زیادی دارد. تمام عملیات پنل باید بازخورد بصری مناسب داشته باشند. اعلان موفقیت مثلاً: «عملیات با موفقیت انجام شد! اطلاعات راننده با موفقیت دریافت شد.» اعلان خطا مثلاً: «ارتباط با سامانه برقرار نشد. لطفاً چند لحظه دیگر مجدداً تلاش کنید.» اعلان هشدار مثلاً: «توجه! اعتبار پروانه این راننده رو به پایان است.» اعلان در حال پردازش مثلاً: «در حال دریافت اطلاعات از سامانه... لطفاً منتظر بمانید.» سایر حالت‌ها - پیام‌های شناور و Toast مدرن - اعلان‌های اختصاصی برای عملیات مهم - مودال‌های تأیید و هشدار - نوار پیشرفت عملیات - نمایش وضعیت بارگذاری - Skeleton Loading - صفحات خالی با راهنمای کاربر - پیام مناسب هنگام قطع ارتباط با سرور پیام‌ها باید زیبا، واضح، کوتاه و کاربرپسند باشند و کاربر دقیقاً متوجه شود چه اتفاقی افتاده است. ۹. زنده بودن رابط کاربری می‌خواهیم پنل حس یک نرم‌افزار زنده و پویا را داشته باشد: - تغییر نرم وضعیت کارت‌ها - انیمیشن هنگام ثبت موفق - نمایش لحظه‌ای وضعیت درخواست‌ها - لودینگ اختصاصی برای هر عملیات - به‌روزرسانی اطلاعات بدون بارگذاری مجدد کل صفحه، در صورت پشتیبانی بک‌اند - انیمیشن‌های ظریف و بدون ایجاد کندی - نمایش وضعیت اتصال و پردازش عملیات حتما قبل واگذاری پروژه تست میخام