در این تسک، صفحه لیست سفارشات خدمات مرتبط به سطوح متاورس رنگ در Figma طراحی خواهد شد. این صفحه به شهروندان امکان مشاهده تمامی سفارش‌های ثبت‌شده در سامانه را می‌دهد تا در صورت فعال بودن سفارش، بتوانند آن را مشاهده و در صورت تمایل درخواست انجام آن را قبول نمایند.
ساختار کلی این صفحه از نظر تجربه کاربری مشابه سایر صفحات پنل شهروندی، به‌ویژه صفحه لیست درآمدها خواهد بود و شامل عنوان صفحه، توضیحات، بخش جستجو، فیلترها و جدول اطلاعات سفارشات است.
هدف از این صفحه، نمایش شفاف وضعیت سفارش‌ها، امکان جستجو و فیلتر اطلاعات، نمایش وضعیت هر سفارش و فراهم کردن امکان قبول درخواست توسط شهروندان واجد شرایط است.
طراحی این صفحه باید کاملاً مطابق با Design System متاورس رنگ انجام شده و برای نسخه‌های Light و Dark، فارسی و انگلیسی و همچنین نسخه‌های Desktop و Mobile به‌صورت کاملاً Responsive طراحی گردد.
پیش از طراحی تمامی نسخه‌ها، طرح اولیه جهت بررسی و تأیید کارفرما ارائه شده و پس از اعمال اصلاحات احتمالی، سایر نسخه‌ها طراحی خواهند شد.
وظایف
- طراحی صفحه لیست سفارشات خدمات.
- طراحی هدر صفحه شامل عنوان و توضیحات.
- طراحی بخش جستجو.
- طراحی بخش فیلترها.
- طراحی جدول نمایش سفارشات.
- طراحی وضعیت‌های مختلف سفارش.
- طراحی دکمه «قبول درخواست».
- طراحی تمامی حالت‌های تعاملی صفحه.
- رعایت کامل Design System متاورس رنگ.
بخش‌های صفحه
هدر صفحه
- عنوان صفحه
- توضیحات مربوط به عملکرد صفحه
بخش جستجو
طراحی باکس جستجو جهت جستجو بر اساس:
- شناسه درخواست
- شناسه درخواست‌کننده
بخش فیلترها
طراحی فیلترهای موردنیاز شامل:
- عنوان درخواست
- واحد پرداخت
- وضعیت سفارش
- مرتب‌سازی بر اساس:
- جدیدترین
- قدیمی‌ترین
- بیشترین مبلغ
- کمترین مبلغ
- نزدیک‌ترین زمان انقضا
جدول سفارشات
طراحی جدول با ستون‌های زیر:
- ردیف
- شناسه درخواست
- شناسه درخواست‌کننده
- عنوان درخواست
- سطح شهروندی
- مبلغ پرداخت
- واحد پرداخت
- درصد کمیسیون
- مبلغ کمیسیون
- شناسه قبول‌کننده درخواست
- تاریخ ثبت
- ساعت ثبت
- تاریخ انقضا
- ساعت انقضا
- وضعیت سفارش
- عملیات
وضعیت سفارش
طراحی نمایش وضعیت‌های مختلف سفارش شامل:
- فعال
- در دست اجرا
- تکمیل‌شده
- منقضی‌شده
هر وضعیت باید دارای نمایش بصری مناسب مطابق Design System باشد.
عملیات
برای سفارش‌هایی که وضعیت فعال دارند، در ستون عملیات دکمه «قبول درخواست» نمایش داده شود.
پس از قبول سفارش، وضعیت نمایش سفارش مطابق سناریوی طراحی تغییر کرده و حالت مربوط به سفارش در حال اجرا نمایش داده شود.
مشاهده بیشتر
در انتهای جدول، دکمه مشاهده بیشتر جهت بارگذاری ادامه سفارشات طراحی گردد.
حالت‌های طراحی
موارد زیر برای صفحه طراحی شوند:
- حالت عادی
- حالت Hover
- حالت Focus
- حالت Loading
- حالت بدون اطلاعات (Empty State)
- حالت دارای اطلاعات زیاد
- حالت اعمال جستجو
- حالت اعمال فیلتر
- حالت نمایش وضعیت‌های مختلف سفارش
- حالت دکمه قبول درخواست
الزامات طراحی
- طراحی کاملاً مطابق با Design System متاورس رنگ.
- استفاده از کامپوننت‌های استاندارد پروژه.
- رعایت کامل اصول UX برای صفحات دارای جدول.
- طراحی با قابلیت توسعه برای صفحات مشابه.
- حفظ خوانایی اطلاعات در نمایش حجم بالای داده‌ها.
- طراحی کاملاً Responsive.
نسخه‌های موردنیاز
- نسخه Light
- نسخه Dark
- نسخه فارسی (RTL)
- نسخه انگلیسی (LTR)
- نسخه Desktop
- نسخه Mobile
خروجی مورد نظر
- فایل Figma کاملاً لایه‌بندی‌شده و استاندارد.
- طراحی کامل صفحه لیست سفارشات خدمات.
- طراحی جدول سفارشات با تمامی ستون‌ها.
- طراحی بخش جستجو و فیلترها.
- طراحی تمامی وضعیت‌های سفارش.
- <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" aria-hidden="true" data-rtl-flip="" class="group-hover:entity-accent icon text-token-text-primary inline-block transition-transform duration-150 ease-out group-hover:translate-x-0.5"></svg>طراحی دکمه «قبول درخواست».
- <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" aria-hidden="true" data-rtl-flip="" class="group-hover:entity-accent icon text-token-text-primary inline-block transition-transform duration-150 ease-out group-hover:translate-x-0.5"></svg>طراحی نسخه‌های Light و Dark.
- <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" aria-hidden="true" data-rtl-flip="" class="group-hover:entity-accent icon text-token-text-primary inline-block transition-transform duration-150 ease-out group-hover:translate-x-0.5"></svg>طراحی نسخه‌های فارسی و انگلیسی.
- <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" aria-hidden="true" data-rtl-flip="" class="group-hover:entity-accent icon text-token-text-primary inline-block transition-transform duration-150 ease-out group-hover:translate-x-0.5"></svg>طراحی نسخه‌های Desktop و Mobile.
- <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" aria-hidden="true" data-rtl-flip="" class="group-hover:entity-accent icon text-token-text-primary inline-block transition-transform duration-150 ease-out group-hover:translate-x-0.5"></svg>ارائه طرح اولیه جهت بررسی و تأیید کارفرما و اعمال اصلاحات احتمالی پیش از نهایی‌سازی تمامی نسخه‌ها
ویدیو توضیحات