تجربه: 2

سن: 18 الی 30

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

جای خالی: 1

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

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

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

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

هدف از این توسعه، فراهم کردن امکان فیلتر کردن شهروندان بر اساس ۱۳ سطح شهروندی موجود در سامانه متاورس رنگ است تا کاربران بتوانند تنها شهروندان دارای سطح موردنظر خود را مشاهده نمایند.

در این طراحی، یک بخش فیلتر در بالای لیست شهروندان قرار خواهد گرفت که کاربر با انتخاب هر سطح، لیست کارت‌های شهروندان به‌صورت لحظه‌ای بر اساس همان سطح به‌روزرسانی شده و تنها شهروندان دارای آن سطح نمایش داده شوند.

طراحی این قابلیت می‌بایست کاملاً مطابق با سیستم دیزاین متاورس رنگ انجام شده و در نسخه‌های Light و Dark، فارسی و انگلیسی و همچنین به‌صورت Responsive برای نسخه‌های Desktop و Mobile طراحی گردد.

پیش از طراحی تمامی نسخه‌ها، طرح اولیه جهت بررسی و تأیید کارفرما ارائه شده و پس از اعمال اصلاحات احتمالی، سایر نسخه‌ها طراحی خواهند شد.

وظایف

• طراحی بخش فیلتر سطوح در صفحه لیست شهروندان.
• طراحی منوی انتخاب سطح شهروندی.
• نمایش تمامی ۱۳ سطح شهروندی در بخش فیلتر، از جمله:
  • شهروند
  • خبرنگار
  • توسعه‌دهنده
  • و سایر سطوح تعریف‌شده در سامانه
• طراحی حالت پیش‌فرض فیلتر (نمایش تمامی شهروندان).
• طراحی وضعیت انتخاب هر سطح.
• طراحی وضعیت باز و بسته بودن منوی فیلتر.
• طراحی نحوه نمایش کارت‌های شهروندان پس از اعمال فیلتر.
• نمایش تنها شهروندان متعلق به سطح انتخاب‌شده.
• طراحی حالت بدون نتیجه (در صورت نبود شهروند در سطح انتخابی).
• طراحی تمامی حالت‌های Hover، Active، Focus و Disabled کامپوننت فیلتر.
• رعایت کامل سیستم دیزاین متاورس رنگ.
• ارائه طرح اولیه جهت تأیید کارفرما و اعمال اصلاحات پیش از طراحی نسخه‌های نهایی.

---

بخش‌های اجرایی
طراحی رابط کاربری

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

طراحی کامپوننت‌ها

• Dropdown یا Select انتخاب سطح.
• آیتم‌های سطوح شهروندی.
• وضعیت انتخاب‌شده.
• وضعیت بدون نتیجه.

طراحی تجربه کاربری (UX)

• دسترسی سریع به فیلتر سطوح.
• اعمال فیلتر با حداقل تعداد کلیک.
• حفظ خوانایی و یکپارچگی صفحه پس از فیلتر شدن کارت‌ها.
• هماهنگی کامل با سایر بخش‌های سیستم دیزاین.

طراحی ریسپانسیو

• نسخه Desktop.
• نسخه Mobile.
• تطبیق کامل فیلتر در تمامی ابعاد نمایشگر.

طراحی نسخه‌های مختلف

• نسخه Light.
• نسخه Dark.
• نسخه فارسی (RTL).
• نسخه انگلیسی (LTR).

---

خروجی مورد نظر

• فایل Figma کاملاً لایه‌بندی‌شده و استاندارد.
• طراحی نسخه Desktop.
• طراحی نسخه Mobile.
• طراحی نسخه Light.
• طراحی نسخه Dark.
• طراحی نسخه فارسی (RTL).
• طراحی نسخه انگلیسی (LTR).
• طراحی تمامی حالت‌های تعاملی کامپوننت فیلتر.
• رعایت کامل سیستم دیزاین متاورس رنگ.
• ارائه طرح اولیه جهت تأیید کارفرما و اعمال اصلاحات قبل از تکمیل تمامی نسخه‌ها.

ویدیو توضیحات:

https://drive.google.com/file/d/1YT6wUfKrypSfzEu6Gey0tRkuckzN4TK_/view?usp=sharing