در این تسک، هدف طراحی رابط کاربری صفحهای در بخش توسعه سطوح (Level Development) است که بهصورت شفاف، آخرین بروزرسانیها و تصمیمات رسمی تیم متاورس رنگ در خصوص هر سطح (مثل شهروند، خبرنگار، شهردار، نگین سطح و …) را نمایش دهد.
این صفحه مانند دفترچه تغییرات (Changelog / Update Log) عمل میکند و باید بهصورت زمانی (تایملاین یا لیست مرتبشده بر اساس تاریخ) تغییرات انجامشده را نمایش دهد.
هر تغییر یا تصمیم دارای شناسه توسعه (Development ID) است که با صفحهی انتقادات و پیشنهادات در ارتباط است.
کاربر با کلیک بر روی شناسه، میتواند به صفحهی "توسعه انتقادات و پیشنهادات" هدایت شود تا ببیند کدام بازخورد منجر به این بهبود شده است.
ساختار و بخشهای صفحه
1. هدر و معرفی بخش
-
عنوان اصلی: «بروزرسانیهای 2025 سطوح متاورس رنگ»
-
توضیح کوتاه: «در این بخش، تصمیمات و اقدامات انجامشده برای بهبود عملکرد سطوح مختلف را مشاهده میکنید.»
-
انتخاب سطح از طریق دراپداون یا تبها (مثلاً: شهروند / خبرنگار / شهردار / نگین سطح و …)
-
دکمه فیلتر برای انتخاب بازه زمانی (مثلاً نمایش تغییرات ماه گذشته یا سال جاری)
2. لیست بروزرسانیها / تایملاین تصمیمات
نمایش تغییرات در قالب کارت یا تایملاین عمودی (Vertical Timeline).
هر کارت یا آیتم باید شامل اطلاعات زیر باشد:
-
شناسه توسعه (Dev ID) — لینکدار به صفحه انتقادات و پیشنهادات
-
تاریخ ثبت تغییر
-
عنوان تغییر / اقدام انجامشده (مثلاً: «اضافه شدن قابلیت ارسال گزارش ویدیویی برای خبرنگاران»)
-
توضیح مختصر تغییر (حداکثر دو خط)
-
ثبتکننده / مرجع تصمیم (تیم فنی / شهردار مرکزی / انجمن توسعه سطوح و...)
-
ارجاع به پیشنهاد اصلی: در انتهای کارت نوشته شود:
«این بهبود بر اساس بازخورد ثبتشده در شناسه #P-048 انجام شد.»
و با کلیک بر روی شناسه، به صفحهی مرتبط در ماژول انتقادات و پیشنهادات ارجاع داده شود.
-
برچسب نوع تغییر:
-
“جدید” (New Feature)
-
“بهبود عملکرد” (Improvement)
-
“رفع مشکل” (Fix)
-
“بهروزرسانی جزئی” (Minor Update)
-
“تصمیم ساختاری” (System Decision)
3. نمایش جزئیات هر بروزرسانی (Modal / Drawer)
با کلیک روی هر کارت در تایملاین، مودالی باز شود که شامل اطلاعات کاملتر باشد:
-
شناسه توسعه
-
تاریخ ثبت
-
سطح مرتبط
-
توضیح کامل تغییر
-
لینک مستقیم به بازخورد مرتبط
-
تصویر یا فایل ضمیمه (در صورت وجود)
-
وضعیت: «انجام شده»، «در حال انتشار»، «در انتظار تست»
4. فیلترها و ابزارهای کنترلی
در بالای صفحه ابزارهای زیر قرار گیرد:
-
فیلتر بر اساس نوع تغییر (جدید / رفع مشکل / تصمیم مدیریتی و …)
-
فیلتر بر اساس سطح (شهروند / خبرنگار / شهردار / نگین سطح / کل سطوح)
-
فیلتر بر اساس بازه زمانی
-
فیلتر بر اساس شناسه یا کلمه کلیدی
5. ناوبری بین صفحات مرتبط
در پایین صفحه، بخشی با عنوان «صفحات مرتبط» قرار گیرد:
-
«ثبت انتقادات و پیشنهادات»
-
«درخواستهای در انتظار تصمیم»
-
«توسعههای انجامشده اخیر»
به این ترتیب گردش کار کاربر بین صفحات توسعه بهصورت منسجم حفظ میشود.
6. نسخه موبایل (ریسپانسیو)
-
تایملاین عمودی باید در موبایل بهصورت کارتهای پشتسرهم طراحی شود.
-
شناسه توسعه در موبایل بهصورت لینک کوچک زیر عنوان تغییر نمایش داده شود.
-
فیلترها در منوی Slide-in در دسترس باشند.
الزامات طراحی
-
رعایت کامل سیستم دیزاین متاورس رنگ و همخوانی با سایر صفحات توسعه.
-
طراحی در دو حالت Light / Dark Mode.
-
طراحی نسخههای فارسی (RTL) و انگلیسی (LTR).
-
استفاده از Auto Layout، Variants و Components برای تایملاینها و کارتها.
-
طراحی انیمیشنهای ساده در Prototype (برای باز شدن مودال یا اسکرول تایملاین).
-
استفاده از رنگبندی و آیکونها برای تفکیک نوع بروزرسانیها.
-
افزودن Empty State برای زمانی که بروزرسانیای ثبت نشده است.
تحویلدادنیها (Deliverables)
-
فایل فیگما شامل تمام صفحات و کامپوننتهای طراحیشده
-
Prototype تعاملی گردش کار (مشاهده، فیلتر، کلیک روی شناسه، ارجاع به صفحه مرتبط)
-
نسخه فارسی و انگلیسی (Light / Dark)
-
مستند Design Specification برای تیم فرانتاند (Spacing, Colors, Components)
-
ویدیو کوتاه از تجربه کاربری صفحه
✅ معیار پذیرش (Acceptance Criteria)
-
تایملاین بروزرسانیها بهصورت منظم و قابل فیلتر نمایش داده شود.
-
امکان مشاهده جزئیات هر تصمیم وجود داشته باشد.
-
شناسه توسعه لینکدار و قابل ارجاع به صفحه انتقادات و پیشنهادات باشد.
-
طراحی در هر دو زبان و حالت لایت/دارک کامل باشد.
-
تمام طراحیها با سیستم دیزاین و رنگبندی پروژه هماهنگ باشد.
-
Prototype در فیگما بهصورت کامل آماده و تستشده باشد.
اولویت
بالا — این بخش برای مستندسازی شفاف توسعههای انجامشده در سطوح مختلف، افزایش اعتماد کاربران و ارتباط مستقیم با بازخوردهای شهروندان حیاتی است.
----------------------------------------------------------------------------------------------------------------------
منابع تسک:
لینک فیگما بخش های خارجی متارنگ :
https://www.figma.com/design/qyvJ4Sjw4h5gRIrE9KotBY/ui-next?node-id=1957-4055&t=43QGHNIE6h4i1O8I-1
لینک سایت رسمی پروژه :
https://rgb.irpsc.com/fa
دسترسی به سامانه مدیریت بر مدیران :
https://crm.irpsc.com