تجربه: 3

سن: 18 الی 30

محدوده حقوق و دستمزد: قابل مذاکره

جای خالی: 1

طبیعت شغلی : پیمانی

تاریخ ارسال : 2025.11.08

آخرین تاریخ : 2025.12.31

شرح تسک

هدف از این تسک، طراحی رابط کاربری صفحه‌ای در بخش توسعه سطوح (Level Development) است که کاربران (شهروندان) بتوانند انتقادات و پیشنهادات خود را نسبت به عملکرد، قابلیت‌ها و مزایای هر سطح ثبت و مشاهده کنند.

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

بخش‌ها و قابلیت‌های طراحی

1. هدر و معرفی بخش

• عنوان صفحه: «ثبت انتقادات و پیشنهادات شهروندان»

• توضیح مختصر درباره هدف این بخش و تأثیر مشارکت کاربران در توسعه سطوح.

• نمایش سطح فعلی کاربر (مثلاً سطح شهروند، شهردار، نگین سطح و …).

2. فرم ثبت انتقاد یا پیشنهاد

• طراحی فرم شفاف و ساده با المان‌های زیر:

  • فیلد انتخاب نوع نظر: (انتقاد / پیشنهاد) → به‌صورت دکمه رادیویی یا Toggle Switch.

  • فیلد دسته‌بندی موضوع: (کل سطح، مجوزها و دسترسی‌ها، نگین سطح، هدیه همراه سطح، پاداش‌ها و ...)

  • فیلد متنی اصلی: (Textarea بزرگ برای نوشتن نظر یا پیشنهاد).

  • دکمه ثبت نظر: با وضعیت فعال / غیرفعال بر اساس پر شدن فیلدها.

• پس از ارسال، پیام موفقیت نمایش داده شود:
  «نظر شما با موفقیت ثبت شد و پس از بررسی در بخش مربوطه نمایش داده خواهد شد.»

3. بخش نمایش نظرات (لیست انتقادات و پیشنهادات)

صفحه باید دارای دو تب مجزا باشد:

• تب انتقادات

• تب پیشنهادات

در هر تب، لیست کارت‌ها نمایش داده شود. هر کارت نظر شامل موارد زیر باشد:

• تصویر پروفایل یا آواتار کاربر

• نام و سطح کاربر

• تاریخ ثبت نظر

• دسته‌بندی مرتبط (مثلاً: پاداش‌ها / مجوزها و دسترسی‌ها و …)

• محتوای متن نظر

• شمارنده‌ها:

  •  تعداد لایک‌ها

  •  تعداد دیسلایک‌ها

  •  تعداد نظرات ثبت‌شده (ریپلای‌ها)

  •  تعداد بازدید

• وضعیت اجرا: (Badge با رنگ مشخص – اجرا شده / در حال بررسی / در انتظار تأیید)

4. فیلتر و دسته‌بندی بالا صفحه

در بالای تب‌ها، فیلترهایی برای جستجو و تفکیک نظرات قرار گیرد:

• فیلتر بر اساس نوع سطح (شهروند، شهردار، نگین سطح و …)

• فیلتر بر اساس دسته‌بندی موضوع (مجوزها، هدایا، پاداش‌ها و …)

• فیلتر بر اساس وضعیت (همه / در حال بررسی / اجرا شده)

• فیلد جستجوی سریع برای یافتن یک نظر خاص.

5. بخش جزئیات نظر (Modal / Drawer)

با کلیک روی هر کارت نظر، یک مودال یا دراور باز شود که جزئیات کامل آن نظر را نمایش دهد:

• متن کامل انتقاد یا پیشنهاد

• پاسخ‌های ثبت‌شده (در قالب کامنت‌ها)

• وضعیت اجرا و تاریخچه تغییر وضعیت

• بخش افزودن پاسخ یا تعامل از سوی تیم پشتیبانی / مدیر سطح

6. صفحه یا باکس اجرای بازخورد

• در کارت هر نظر یا پیشنهاد، اگر «اجرا شده» باشد، برچسب ویژه نمایش داده شود.

• با کلیک روی این برچسب، مودالی باز شود که توضیح دهد چه تغییری بر اساس آن بازخورد در سیستم اعمال شده است (مثلاً: "پاداش سطح شهروند به‌روزرسانی شد").

7. نسخه موبایل (ریسپانسیو)

• طراحی باید در سه سطح ریسپانسیو انجام شود:

  • Desktop (1440px)

  • Tablet (768px)

  • Mobile (375px)

• تب‌ها به‌صورت Swipeable نمایش داده شوند.

• فرم ارسال در موبایل باید جمع‌وجورتر و با ورودی‌های تمام‌عرض طراحی شود.

الزامات طراحی

• طراحی بر پایه سیستم دیزاین رسمی متاورس رنگ و استفاده از کامپوننت‌های موجود.

• هماهنگی کامل با تایپوگرافی، رنگ‌ها و المان‌های پروژه.

• ایجاد نسخه Light / Dark Mode با رعایت نسبت کنتراست مناسب.

• طراحی در دو زبان فارسی و انگلیسی (Right-to-Left و Left-to-Right).

• ساخت کامپوننت‌های فیگما با Variants و Auto Layout برای استفاده مجدد در سایر صفحات.

• طراحی حالات تعاملی (Hover, Focus, Empty State, Success State).

تحویل‌دادنی‌ها (Deliverables)

• فایل فیگما شامل تمام صفحات، تب‌ها و مودال‌های مورد نیاز.

• Prototype تعاملی برای گردش کار کامل (ارسال، نمایش، فیلتر، مشاهده جزئیات).

• طراحی کامل در دو نسخه Light و Dark.

• نسخه فارسی و انگلیسی در لایه‌های جداگانه.

• ویدیو کوتاه از گردش کار (User Flow Preview).

• Export از آیکون‌ها و دارایی‌های لازم برای توسعه.

معیار پذیرش (Acceptance Criteria)

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

اولویت

بالا — این بخش مستقیماً با تعامل شهروندان و بهبود تجربه کاربری در سطوح مختلف متاورس رنگ در ارتباط است و تأثیر زیادی بر رضایت کاربران و کیفیت سیستم دارد.
-----------------------------------------------------------------------
منابع تسک:

لینک سایت رسمی پروژه :

https://rgb.irpsc.com/fa

دسترسی به سامانه مدیریت بر مدیران :

https://crm.irpsc.com

لینک فیگما بخش های خارجی متارنگ :

https://www.figma.com/design/qyvJ4Sjw4h5gRIrE9KotBY/ui-next?node-id=1957-4055&t=43QGHNIE6h4i1O8I-1