تجربه: 2

سن: 18 الی 30

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

جای خالی: 1

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

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

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

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

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

تمامی طراحی‌ها باید کاملاً منطبق با Design System متاورس رنگ بوده و برای تمامی نسخه‌های موردنیاز پروژه آماده شوند.

---

وظایف

• طراحی صفحه لیست درآمدهای هر سطح شهروندی.
• نمایش عنوان صفحه بر اساس سطح انتخاب‌شده (برای مثال: لیست درآمدهای سطح خبرنگار).
• طراحی بخش توضیحات ابتدایی صفحه.
• طراحی باکس جستجو.
• طراحی بخش فیلترهای جدول.
• طراحی جدول نمایش اطلاعات درآمدها.
• طراحی حالت‌های مختلف جدول شامل داده‌های کم، داده‌های زیاد و بدون داده.
• طراحی دکمه مشاهده بیشتر (Load More).
• رعایت کامل Design System پروژه.
• آماده‌سازی تمامی حالت‌های تعاملی صفحه.

---

بخش‌های صفحه
هدر صفحه

• عنوان صفحه
• نمایش نام سطح انتخاب‌شده
• متن توضیحات صفحه

---

بخش جستجو

طراحی باکس جستجو جهت جستجو بر اساس:

• شناسه تراکنش
• شناسه شهروندی

---

بخش فیلترها

طراحی فیلترهای موردنیاز شامل:

• فیلتر نوع واحد تراکنش (PSC، ریال و ...)
• فیلتر عنوان تراکنش
• مرتب‌سازی بر اساس:
  • جدیدترین
  • قدیمی‌ترین
  • بیشترین مبلغ
  • کمترین مبلغ

---

جدول اطلاعات

طراحی جدول با ستون‌های زیر:

• ردیف
• شناسه تراکنش
• عنوان تراکنش
• سطح شهروندی
• شناسه شهروندی
• مبلغ تراکنش
• نوع واحد تراکنش
• درصد کمیسیون
• مبلغ کمیسیون
• دریافت‌کننده خدمت
• تاریخ
• ساعت

طراحی جدول باید به گونه‌ای باشد که امکان نمایش تعداد زیادی رکورد را داشته باشد و از نظر بصری کاملاً خوانا و منظم باشد.

---

مشاهده بیشتر

در انتهای جدول، دکمه مشاهده بیشتر جهت بارگذاری رکوردهای بعدی طراحی گردد.

---

حالت‌های طراحی

موارد زیر باید برای صفحه طراحی شوند:

• حالت عادی
• حالت Hover
• حالت Focus
• حالت Loading
• حالت بدون اطلاعات (Empty State)
• حالت دارای اطلاعات زیاد
• حالت اعمال فیلتر
• حالت اعمال جستجو

---

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

• طراحی کاملاً مطابق با Design System متاورس رنگ.
• رعایت تمامی فاصله‌گذاری‌ها، رنگ‌ها، تایپوگرافی و کامپوننت‌های استاندارد پروژه.
• طراحی با قابلیت توسعه برای صفحات مشابه.
• رعایت اصول UX در صفحات دارای جدول و اطلاعات حجیم.
• طراحی کاملاً Responsive.

---

نسخه‌های موردنیاز

• نسخه Light
• نسخه Dark
• زبان فارسی (RTL)
• زبان انگلیسی (LTR)
• نسخه Desktop
• نسخه Mobile

---

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

• فایل Figma صفحه لیست درآمدهای سطح شهروندی.
• طراحی کامل تمامی حالت‌های صفحه.
• طراحی تمامی فیلترها، جستجو و جدول اطلاعات.
• طراحی نسخه‌های Light و Dark.
• طراحی نسخه‌های فارسی و انگلیسی.
• طراحی نسخه Desktop و Mobile.
• استفاده کامل از کامپوننت‌ها و استانداردهای Design System متاورس رنگ.
• ارائه طرح اولیه جهت بررسی و تأیید کارفرما و اعمال اصلاحات احتمالی پیش از نهایی‌سازی تمامی نسخه‌ها.

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

https://drive.google.com/file/d/114NYp_siGaQq8jOHUZPs6CZpf9h_ZYeD/view?usp=sharing

https://docs.google.com/spreadsheets/d/13Ew3OJ0WGnMO_-Ffvz64HdimeGSYqZKg/edit?usp=sharing&ouid=106073007898845100851&rtpof=true&sd=true