تجربه: 2

سن: 18 الی 30

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

جای خالی: 1

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

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

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

شرح تسک

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

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

---

صفحات و اجزای مورد نیاز برای طراحی

1. صفحه انتخاب موقعیت روی نقشه

• نمایش نقشه سه‌بعدی با قابلیت کلیک روی محدوده.

• نمایش Tooltip یا مودال راهنما با متن: «برای انتخاب محدوده مورد نظر کلیک کنید».

• نشانگر (Cursor State) برای حالت انتخاب نقطه اول و رسم محدوده.

• نمایش زنده متراژ انتخابی در پایین صفحه در هنگام حرکت ماوس.

2. مودال ثبت درخواست موقعیت

• عنوان: «ثبت درخواست موقعیت مکانی».

• فیلدهای مورد نیاز:

  • نمایش متراژ نهایی (Read-only)

  • انتخاب نوع شکل (Dropdown: مربع، مستطیل، دایره، شش‌ضلعی)

  • انتخاب نوع کاربری (Dropdown: تجاری، مسکونی، تفریحی، اداری و …)

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

  • فیلد افزودن مبلغ دلخواه

• بخش جمع‌بندی نهایی شامل:

  • متراژ × مبلغ پایه × ضریب ۶×

  • مبلغ نهایی نمایش داده‌شده به‌صورت گرافیکی (Progress Bar یا Highlight)

• دکمه‌ها:

  • «تأیید و ثبت درخواست»

  • «لغو»

3. صفحه یا مودال تأیید نهایی

• نمایش خلاصه اطلاعات درخواست:

  • شکل انتخابی، نوع کاربری، متراژ، مبلغ کل

• نمایش پیغام هشدار:
  «پس از ثبت، مبلغ به‌صورت موقت در حساب شما قفل خواهد شد تا نتیجه رأی‌گیری مشخص شود.»

• دکمه: ثبت نهایی درخواست

4. بخش درخواست‌های ارسالی در پروفایل کاربر

• طراحی تب جدید در پروفایل: درخواست‌های ارسالی

• نمایش لیست درخواست‌ها در قالب کارت:

  • شناسه درخواست

  • موقعیت مکانی (نمایش مختصر نقشه یا آیکون)

  • وضعیت (در انتظار تأیید، تأیید شده، رد شده)

  • مبلغ و متراژ

  • دکمه‌ها:

    • لغو درخواست

    • تنظیم زمان انتشار

    • مشاهده جزئیات

• طراحی مودال جزئیات هر درخواست.

5. بخش تأیید عمومی (نمایش در تصمیمات عمومی)

• کارت نمایش درخواست‌های فعال برای رأی‌گیری.

• نمایش اطلاعات ملک، کاربر، مبلغ پیشنهادی و درصد رأی‌های فعلی.

• دکمه‌ها:

  • «تأیید می‌کنم»

  • «رد می‌کنم»

• نوار پیشرفت رأی‌ها (Progress Bar با حد نصاب ۵٪).

6. صفحه تأیید موفق

• پیام موفقیت پس از تأیید ۵٪ شهردارها:
  «درخواست شما تأیید شد، مالکیت ملک به شما تخصیص یافت.»

• نمایش کارت خلاصه دارایی و دکمه مشاهده در نقشه.

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

• استفاده از سیستم دیزاین رسمی متاورس رنگ و کامپوننت‌های آماده.

• طراحی در دو حالت Light / Dark Mode.

• رعایت کامل اصول ریسپانسیو (Desktop / Tablet / Mobile).

• طراحی تمیز، مینیمال، با تمرکز بر تجربه کاربری ساده و قابل درک.

• استفاده از رنگ‌ها و المان‌های مخصوص بخش اقتصادی پروژه (Finance Palette).

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

• فایل فیگما شامل تمامی صفحات ذکرشده.

• Prototype تعاملی برای شبیه‌سازی فرآیند انتخاب موقعیت تا تأیید نهایی.

• Export دارایی‌ها (Icons, Components, Illustrations).

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

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

✅ همه صفحات مطابق طراحی سیستم فعلی باشند.
✅ تمام حالات (Light / Dark / Responsive) طراحی شوند.
✅ گردش کامل کاربر از انتخاب موقعیت تا مشاهده در پروفایل شبیه‌سازی شود.
✅ در فیگما، کامپوننت‌ها به‌صورت هوشمند (Variants / Auto Layout) طراحی شده باشند.
✅ Prototype قابل استفاده برای تست تیم توسعه باشد.