در این تسک، صفحه ثبت انتقادات، پیشنهادات و نظرات شهروندان مرتبط به سطوح متاورس رنگ در Figma طراحی خواهد شد. هدف از این صفحه ایجاد بستری تعاملی برای دریافت بازخورد شهروندان درباره امکانات، قابلیت‌ها، خدمات و عملکرد هر یک از بخش‌های سامانه متاورس رنگ است.
در این صفحه، شهروندان واجد شرایط می‌توانند پیشنهادات، انتقادات و نظرات خود را ثبت کرده و سایر شهروندان نیز قادر خواهند بود آن‌ها را مشاهده، لایک، دیس‌لایک، نظر ثبت کرده و میزان تأثیرگذاری هر پیشنهاد را مشخص نمایند.
نمایش اطلاعات به‌صورت کارت (Card Based UI) انجام خواهد شد و از طراحی جدولی استفاده نمی‌شود. صفحه باید دارای تجربه کاربری مدرن، خوانا و مناسب برای نمایش تعداد زیاد پیشنهادات باشد.
طراحی این صفحه باید کاملاً مطابق با Design System متاورس رنگ انجام شده و برای نسخه‌های Light و Dark، فارسی و انگلیسی و همچنین Desktop و Mobile به‌صورت Responsive طراحی گردد.
پیش از طراحی تمامی نسخه‌ها، نمونه اولیه جهت بررسی و تأیید کارفرما ارائه شده و پس از اعمال اصلاحات، سایر نسخه‌ها تکمیل خواهند شد.
وظایف
-
طراحی صفحه ثبت انتقادات، پیشنهادات و نظرات.
-
طراحی بخش معرفی و توضیحات صفحه.
-
طراحی فرم ثبت پیشنهاد جدید.
-
طراحی کارت نمایش پیشنهادات ثبت‌شده.
-
طراحی سیستم فیلترینگ.
-
طراحی سیستم رأی‌دهی.
-
طراحی نمایش نظرات هر پیشنهاد.
-
طراحی فرم ثبت پاسخ و نظر.
-
طراحی تمامی حالت‌های تعاملی صفحه.
-
رعایت کامل Design System متاورس رنگ.
بخش‌های صفحه
هدر صفحه
طراحی بخش ابتدایی صفحه شامل:
-
عنوان صفحه
-
توضیحات عملکرد صفحه
-
معرفی هدف ثبت پیشنهادات و انتقادات
فرم ثبت پیشنهاد
در ابتدای صفحه، فرم ثبت پیشنهاد طراحی گردد.
فیلدهای فرم شامل:
-
انتخاب دسته‌بندی
-
عنوان پیشنهاد
-
توضیحات
-
بارگذاری تصویر
-
بارگذاری فایل
-
دکمه ثبت
دسته‌بندی پیشنهادات
امکان انتخاب یکی از دسته‌های زیر برای ثبت پیشنهاد:
-
اطلاعات اولیه
-
مجوزات
-
دسترسی‌ها
-
نگین
-
هدیه همراه
-
پاداش‌ها
-
سایر موارد
شرایط ثبت پیشنهاد
در طراحی صفحه مشخص شود که تنها شهروندانی که به سطح مربوطه یا سطوح بالاتر دست یافته‌اند، امکان ثبت پیشنهاد، انتقاد و نظر برای آن سطح را خواهند داشت.
نمایش پیشنهادات
پیشنهادات به‌صورت کارت‌های مجزا طراحی شوند.
هر کارت شامل اطلاعات زیر باشد:
-
شناسه پیشنهاد
-
شناسه شهروند پیشنهاددهنده
-
تصویر شهروند
-
نام یا شناسه شهروند
-
تاریخ ثبت
-
دسته‌بندی
-
عنوان پیشنهاد
-
خلاصه توضیحات
-
تعداد بازدید
-
تعداد لایک
-
تعداد دیس‌لایک
-
تعداد نظرات
-
دکمه مشاهده نظرات
طراحی کارت‌ها باید کاملاً مدرن، خوانا و مناسب نمایش اطلاعات زیاد باشد.
مشاهده نظرات
با انتخاب گزینه مشاهده نظرات، بخش نظرات همان پیشنهاد به‌صورت Accordion یا Expandable باز شود.
در این بخش نمایش داده شود:
-
لیست نظرات شهروندان
-
تصویر نویسنده نظر
-
شناسه شهروند
-
متن نظر
-
تاریخ ثبت
-
تعداد لایک
-
تعداد دیس‌لایک
ثبت نظر
در انتهای بخش نظرات، فرم ثبت نظر طراحی گردد.
فیلدهای موردنیاز:
سیستم رأی‌دهی
برای پیشنهادات و نظرات امکان انجام عملیات زیر طراحی شود:
طراحی وضعیت‌های فعال و غیرفعال این دکمه‌ها نیز انجام گردد.
بخش فیلترها
طراحی سیستم فیلترینگ شامل موارد زیر:
فیلتر بر اساس دسته‌بندی
-
اطلاعات اولیه
-
مجوزات
-
دسترسی‌ها
-
نگین
-
هدیه همراه
-
پاداش‌ها
-
سایر موارد
مرتب‌سازی
-
جدیدترین
-
قدیمی‌ترین
-
بیشترین لایک
-
بیشترین بازدید
-
بیشترین تعداد نظرات
مشاهده بیشتر
در انتهای لیست پیشنهادات، دکمه مشاهده بیشتر جهت بارگذاری پیشنهادات بعدی طراحی گردد.
حالت‌های طراحی
موارد زیر طراحی شوند:
-
حالت عادی
-
Hover
-
Focus
-
Active
-
Loading
-
Empty State
-
بدون پیشنهاد
-
بدون نظر
-
اعمال فیلتر
-
ثبت موفق پیشنهاد
-
ثبت موفق نظر
-
خطای بارگذاری
-
خطای ارسال اطلاعات
الزامات طراحی
-
طراحی کاملاً مطابق با Design System متاورس رنگ.
-
استفاده از کامپوننت‌های استاندارد پروژه.
-
طراحی کاملاً Responsive.
-
طراحی مناسب برای حجم بالای پیشنهادات.
-
رعایت اصول UX در سیستم‌های Community و Feedback.
-
قابلیت توسعه برای افزودن امکانات آینده.
-
رعایت ساختار استاندارد Auto Layout در Figma.
-
استفاده از کامپوننت‌ها و Variants جهت مدیریت حالت‌های مختلف.
نسخه‌های موردنیاز
-
Light Mode
-
Dark Mode
-
نسخه فارسی (RTL)
-
نسخه انگلیسی (LTR)
-
Desktop
-
Mobile
خروجی مورد نظر
-
فایل Figma کاملاً لایه‌بندی‌شده.
-
طراحی کامل صفحه ثبت انتقادات، پیشنهادات و نظرات.
-
طراحی فرم ثبت پیشنهاد.
-
طراحی کارت‌های نمایش پیشنهادات.
-
طراحی فرم ثبت نظر.
-
طراحی سیستم نمایش نظرات به‌صورت Accordion.
-
طراحی سیستم رأی‌دهی (لایک و دیس‌لایک).
-
طراحی سیستم فیلترینگ.
-
طراحی نسخه‌های Light و Dark.
-
طراحی نسخه‌های فارسی و انگلیسی.
-
طراحی نسخه‌های Desktop و Mobile.
-
رعایت کامل Design System متاورس رنگ.
ویدیو توضیحات: