خروجی طراحی UI راه‌اندازی ساختمان و عضویت

روش مرجع

این خروجی طبق استاندارد طراحی و تحویل UI تکمیل می‌شود.

فایل طراحی

Tripylon در Figma
File key: P1GMvq87p0UBj76NREjPsN
آخرین Audit: 2026-08-22
وضعیت: مسیر ثبت‌نام، خرید و راه‌اندازی ساختمان تا بازشدن داشبورد نهایی شده است؛ «امکانات ساکنان» و «اطلاعات تکمیلی» نیز تحویل شده‌اند.

نتیجه Audit فعلی

مورد	وضعیت مشاهده‌شده	اقدام
Page اصلی	یک Page با نام `Design`	تفکیک Pageها
فریم‌های قابل‌ویرایش	`Splash`، دو حالت `Intro` و `Mobile`	نام‌گذاری پایدار بر اساس Flow
فریم ورود	`402 × 874 px`	اندازه مرجع مصوب محصول
مرجع وایرفریم	۳۱ تصویر با نام `image 1` تا `image 31`	انتقال به References و Rename
Component محلی	وجود ندارد	استخراج Componentهای پایه از صفحات اول
Component Library	`Toolbar - Top` روی Canvas	بررسی سازگاری با UI محصول
Variable محلی	۱۱ رنگ در Collection عمومی	بازطراحی Collection و Scope
Text Style	وجود ندارد	ساخت پس از تصویب Typography
Effect Style	وجود ندارد	ایجاد فقط در صورت نیاز
فونت	Yekan Bakh، SF Pro و Gilroy	Yekan Bakh فونت نهایی رابط فارسی است
Library متصل	Material 3، Simple Design System و Apple kits	Design System اختصاصی تری‌پیلون مبناست؛ Libraryهای متصل مرجع هستند

بدهی‌های باز

شناسه	بدهی	اولویت	وضعیت
`UI-D-01`	تعیین اندازه مرجع میان `390 × 844` وایرفریم و `402 × 874` Figma	بالا	بسته — `402 × 874`
`UI-D-02`	تعیین Font Family فارسی محصول	بالا	بسته — Yekan Bakh
`UI-D-03`	ساخت یا انتخاب Button، Text Field و Feedback State	بالا	باز
`UI-D-04`	اصلاح نام، Collection و Scope متغیرهای رنگ	بالا	باز
`UI-D-05`	تفکیک Pageهای Foundations، Components، Screens و References	متوسط	باز
`UI-D-06`	تعیین استفاده از Material 3 یا Design System اختصاصی	متوسط	بسته — Design System اختصاصی
`UI-D-07`	طراحی Motion، مدت نمایش و Transition اسپلش	متوسط	برنامه آینده
`UI-D-08`	طراحی Dark Mode و رفتار تصویرهای پس‌زمینه در تم تاریک	متوسط	برنامه آینده
`UI-D-09`	تعریف Typography Scale و Weightهای مجاز Yekan Bakh	بالا	باز

تصمیم‌های بصری

تاریخ	تصمیم	وضعیت
`2026-07-30`	طراحی موبایل و RTL است.	قطعی
`2026-07-30`	حداقل اندازه لمس `44 × 44 px` است.	قطعی
`2026-07-30`	نسخه فعلی Splash ثابت است، پیش از Intro قرار می‌گیرد و Motion آن بعداً طراحی می‌شود.	قطعی
`2026-07-30`	Intro از تصویر تمام‌صفحه با گرادیان تیره در پایین برای خوانایی متن استفاده می‌کند.	قطعی
`2026-07-30`	آیکن اطلاعات روی Intro حفظ می‌شود و باتم‌شیت معرفی نام و قابلیت‌های محصول را باز می‌کند.	قطعی
`2026-07-30`	هنگام بازبودن باتم‌شیت، پس‌زمینه با Blur و Scrim از محتوای فعال جدا می‌شود.	قطعی
`2026-07-30`	تولید صفحه‌های بعدی پس از تثبیت Componentهای ورود انجام می‌شود.	قطعی
`2026-07-30`	اندازه مرجع صفحه‌های موبایل `402 × 874 px` است.	قطعی
`2026-07-30`	Yekan Bakh فونت نهایی رابط فارسی محصول است.	قطعی
`2026-07-30`	Design System اختصاصی تری‌پیلون مبنای Token و Component است؛ Material 3 مبنای محصول نیست.	قطعی
`2026-07-30`	Dark Mode در فاز بعد اضافه می‌شود و خروجی فعلی فقط Light Mode است.	قطعی
`2026-07-31`	مسیر بدون عضویت و دعوت از دو سطح کارت انتخاب و Bottom Sheet بررسی دعوت استفاده می‌کند.	قطعی
`2026-07-31`	مرحله اول ثبت ساختمان با نشانگر کم‌رنگ مرحله، Header معرفی، گروه یکپارچه ورودی واحدها و خلاصه مجموع طراحی می‌شود.	قطعی
`2026-07-31`	انتخاب دوره و بازبینی پرداخت در یک صفحه ادغام و ریز محاسبات با الگوی بصری رسید نمایش داده می‌شود.	قطعی
`2026-08-01`	مالیات رسید فقط از مبلغ اشتراک پس از تخفیف محاسبه و شارژ اولیه پیامک خارج از پایه مالیات نمایش داده می‌شود.	قطعی
`2026-08-01`	صفحه وضعیت پرداخت چهار State مستقل بررسی خودکار، تأخیر و Fallback، موفقیت آماده و شکست قطعی دارد.	قطعی
`2026-08-22`	Dashboard راه‌اندازی پنج بخش دارد؛ امکانات ساکنان و اطلاعات تکمیلی دو بخش مستقل‌اند.	قطعی
`2026-08-22`	مدل‌های رزرو MVP شامل ساعتی، سانس ثابت و روز کامل‌اند؛ تنظیمات پیشرفته پس از راه‌اندازی در داشبورد تکمیل می‌شوند.	قطعی
`2026-08-22`	اطلاعات تکمیلی اختیاری است و پس از تعیین تکلیف هر پنج بخش، کارت راه‌اندازی حذف و داشبورد ساختمان باز می‌شود.	قطعی
`2026-09-12`	ثبت دستی واحد از Bottom Sheet تب‌دار به Flow تمام‌صفحه دومرحله‌ای «مشخصات واحد / افراد واحد» تغییر کرد.	قطعی
`2026-09-12`	سایر مشخصات، قبض و حیوان خانگی در Bottom Sheetهای اختیاری باقی می‌مانند و نقش پیشنهادی اپ حذف شد.	قطعی

تحویل صفحه‌ها

شناسه	وضعیت UX	وضعیت Writing	وضعیت UI	لینک Frame	حالت‌های تکمیل‌شده
`SPLASH-01`	نهایی؛ Motion باز	`Approved`	Static نهایی	Splash	Static
`INTRO-01`	نهایی	`Approved`	نهایی	Default · About Open	Default، About Bottom Sheet
`WF-01`	مسیر اصلی نهایی	`Approved`	مسیر اصلی نهایی	Default · Focused/Filled · Loading	Default، Focus/Filled، Keyboard، Loading
`WF-02`	نهایی	`Approved`	نهایی	OTP Flow Section	Focus، Verifying، Invalid، Expired، Resend Available، Resending، Resend Failed
`WF-03`	نهایی	`Approved`	نهایی	No Invitation Flow Section	Default، Help Sheet، Checking، Empty، Network Error
`WF-04`	مسیر اصلی نهایی؛ Stateهای خطا باز	متن‌های اصلی `Approved`	Filled / Valid نهایی	Basic Information Section	مرحله ۱ از ۲، Filled / Valid
`WF-05`	مسیر اصلی نهایی؛ Stateهای خطا باز	متن‌های اصلی `Approved`	Default / Annual Selected نهایی	Setup Payment Flow	مرحله ۲ از ۲، خلاصه ساختمان، انتخاب دوره، رسید، Self-Declaration
`WF-06`	چهار State اصلی نهایی	`Approved`	نهایی	Payment Status Flow	Pending Auto، Pending Delayed، Success Ready، Failed Definitive
`WF-07`	در انتظار	استخراج نشده	مرجع تصویری	—	—
`HOME-SETUP-01`	مسیر اصلی نهایی	`Approved`	نهایی	Home Setup Card	پیشرفت پنج‌بخشی؛ حذف پس از تعیین تکلیف همه بخش‌ها
`WF-08`	مسیر اصلی نهایی	`Approved`	نهایی	Setup Dashboard	پنج بخش مستقل با ترتیب تکمیل آزاد
`WF-09` تا `WF-16`	نهایی؛ Stateهای خطا باز	متن‌های اصلی `Approved`	Flow دومرحله‌ای نهایی	Units & Residents Flow	Empty، مشخصات واحد، سایر مشخصات، قبض، حیوان خانگی، افراد حقیقی/حقوقی، Import، لیست و دعوت
`WF-17` تا `WF-20`	بازبینی‌شده	`Approved`	Flow موجود؛ همگام‌سازی دسترسی خودکار باز	Building Team Flow	انتخاب مسئولیت، تعیین مسئول، جست‌وجو و ثبت شخص
`WF-21` تا `WF-27`	بازبینی‌شده	`Approved`	Flow موجود؛ اصلاح قواعد محاسبه و Writing باز	Charge & Account Flow	روش تنظیم، محاسبه، قبض متغیر، بازبینی و حساب
`WF-28` تا `WF-31`	نهایی	`Approved`	نهایی	Amenities Flow	انتخاب امکانات، ساعتی، سانسی، روز کامل، مبلغ و مرور نهایی
`WF-31A` و `WF-31B`	نهایی	`Approved`	نهایی	Additional Information Flow	نشانی اختیاری، انتخاب یا بارگذاری تصویر و پایان راه‌اندازی
`WF-32` و `WF-33`	در انتظار	استخراج نشده	مرجع تصویری	—	—
`WF-34` و `WF-35`	در انتظار	استخراج نشده	مرجع تصویری	—	—

SPLASH-01 — وضعیت طراحی

Preview

مشخصات فعلی

Frame: Splash
اندازه مرجع: 402 × 874 px
پس‌زمینه: رنگ یکدست سبز برند و Edge-to-edge
محتوای مرکزی: Wordmark سفید Tripylon و Tagline انگلیسی Property Management
تعامل: ندارد
خروجی در اولین تجربه: انتقال خودکار به INTRO-01
وضعیت Motion: برای مرحله بعد برنامه‌ریزی شده و جزو خروجی فعلی نیست

نکات تحویل

نمایش Status Bar نباید باعث تغییر موقعیت مرکز بصری لوگو شود.
Asset لوگو باید با کیفیت برداری و بدون Raster شدن استفاده شود.
در پیاده‌سازی فعلی Fade ساده فقط در صورت نیاز فنی مجاز است؛ Motion برند پس از طراحی جداگانه جایگزین می‌شود.
مدت نمایش نباید مستقل از آماده‌بودن اپ و صرفاً به‌صورت تأخیر تزئینی تعریف شود.
نسخه Motion آینده باید Reduce Motion سیستم‌عامل را رعایت کند.

INTRO-01 — وضعیت طراحی

Preview

حالت Default

حالت About Open

فریم‌ها

حالت	لینک مستقیم	وضعیت
Default	Intro — Default	نهایی
About Open	Intro — About Bottom Sheet	نهایی

ساختار بصری

Frame مرجع: 402 × 874 px
جهت رابط: RTL
پس‌زمینه: تصویر تمام‌صفحه از کاربر در فضای عمومی ساختمان
هویت برند: لوگوی Tripylon در نیمه بالای صفحه
کنترل اطلاعات: آیکن i در بالای صفحه با رنگ Accent
محتوای اصلی: عنوان دوخطی، توضیح کوتاه و CTA تمام‌عرض در ناحیه پایین
خوانایی: گرادیان تیره و رنگی از پایین تصویر به سمت میانه
CTA اصلی: دکمه «شروع کنید» با سطح روشن و متن هم‌رنگ Accent
About Open: باتم‌شیت سفید با گوشه‌های بالایی گرد، Drag Handle، تیتر مرکزی و محتوای راست‌چین
پس‌زمینه About Open: Blur و Scrim برای حفظ Context و تمرکز روی Sheet

Interaction و تحویل

عنصر	رفتار
دکمه «شروع کنید»	انتقال به `WF-01`
آیکن اطلاعات	بازکردن حالت About Open
باتم‌شیت	نمایش داستان نام و معرفی قابلیت‌ها؛ محتوا در ارتفاع‌های کوتاه‌تر Scroll می‌شود
صفحه زیر باتم‌شیت	تا زمان بسته‌شدن Sheet تعاملی نیست

محتوا و دسترس‌پذیری

متن نهایی هر دو حالت در خروجی UX Writing ثبت شده است.
نام دسترس‌پذیر آیکن اطلاعات «درباره تری‌پیلون» است.
محدوده لمس آیکن اطلاعات و CTA حداقل 44 × 44 px است.
ترتیب خواندن: لوگو، آیکن اطلاعات، عنوان، توضیح و CTA؛ در حالت باز، تمرکز به عنوان باتم‌شیت منتقل می‌شود.
Scroll باتم‌شیت نباید باعث Scroll یا جابه‌جایی صفحه پس‌زمینه شود.

موارد نیازمند تصمیم پیاده‌سازی

نمایش Intro فقط در اولین اجرا یا پس از هر خروج از حساب
بستن باتم‌شیت با لمس Scrim در کنار Swipe Down
رفتار تصویر و Crop در نسبت‌های کوتاه‌تر و بلندتر از Frame مرجع

WF-01 — وضعیت طراحی

Preview

حالت Default

حالت Focused / Filled

حالت Loading

فریم‌ها

حالت	لینک مستقیم	وضعیت
Default	Mobile — Default	نهایی
Focused / Filled	Mobile — Focused/Filled	نهایی
Loading	Mobile — Loading	نهایی

ساختار و رفتار

Frame مرجع: 402 × 874 px
تصویر معماری سیاه‌وسفید به‌صورت تمام‌صفحه و لوگوی تری‌پیلون در بالای صفحه قرار دارند.
فرم، یک کارت سفید شناور با عنوان، توضیح، Floating Text Field، متن حقوقی و CTA است.
در Default، فیلد خالی و CTA غیرفعال است.
در Focus، Label به بالای فیلد منتقل و Border با رنگ Accent نمایش داده می‌شود.
در Filled، شماره حفظ و CTA پس از اعتبارسنجی فعال می‌شود.
با بازشدن کیبورد عددی، کل کارت با فاصله امن بالای کیبورد Float می‌شود؛ تصویر پس‌زمینه ثابت می‌ماند.
با شروع ارسال، کیبورد بسته، ورودی قفل و CTA با Spinner و متن «در حال ارسال کد» نمایش داده می‌شود.
لمس چندباره CTA هنگام Loading نادیده گرفته می‌شود.
ارسال موفق کاربر را به WF-02 منتقل می‌کند.

نکات تحویل به توسعه

شماره موبایل با جهت LTR نمایش داده شود.
اعداد فارسی و انگلیسی پذیرفته و پیش از Validation و ارسال Normalize شوند.
Floating Label باید Label معنایی واقعی برای Screen Reader باشد.
جابه‌جایی کارت با Keyboard Insets واقعی دستگاه و هم‌زمان با Animation کیبورد انجام شود؛ مقدار ثابت مبنا نباشد.
لمس بیرون کارت، کیبورد را می‌بندد ولی مقدار واردشده را حفظ می‌کند.
لینک‌های شرایط استفاده و سیاست حریم خصوصی Target مستقل و قابل Focus دارند.
Loading توسط متن و Spinner اعلام می‌شود و رنگ تنها نشانه وضعیت نیست.
در صفحه‌های کوتاه، فیلد و CTA باید بدون هم‌پوشانی با کیبورد قابل دسترس بمانند.

Componentهای موردنیاز

Component	وضعیت
Mobile number Floating Text Field	الگوی بصری نهایی؛ استخراج Component باز
Primary Button / Disabled	الگوی بصری نهایی؛ استخراج Component باز
Primary Button / Loading	الگوی بصری نهایی؛ استخراج Component باز
Inline Validation	تعریف نشده
Snackbar یا Error Feedback	تعریف نشده

WF-02 — وضعیت طراحی

Preview

منبع تحویل

Section نهایی: OTP Flow
اندازه Section: 3094 × 1086 px
اندازه هر Frame موبایل: 402 × 874 px
همه حالت‌های OTP در همین Section نگهداری و تحویل می‌شوند.

حالت‌های موجود

حالت	Node	وضعیت
Focus / Empty	`165:2323`	نهایی
Verifying	`181:232`	نهایی
Invalid Code	`181:318`	نهایی
Expired Code	`223:442`	نهایی
Resend Available	`219:354`	نهایی
Resending	`227:493`	نهایی
Resend Failed	`227:541`	نهایی
Resent	بازگشت به Countdown همراه پیام گذرا	رفتار نهایی؛ Frame مستقل ندارد

ساختار بصری و Interaction

صفحه Light Mode با پس‌زمینه روشن، لوگوی تری‌پیلون و کارت سفید شناور است.
کنترل بازگشت در سمت راست و متناسب با RTL قرار دارد و به ویرایش شماره موبایل می‌رود.
شماره Mask‌شده با الگوی ۰۹۱۲****۰۸۰ نمایش داده می‌شود.
فیلد OTP یک ورودی منطقی شش‌رقمی با Floating Label است.
کارت در حالت Keyboard Open بالای کیبورد Float می‌شود.
ورود رقم ششم بررسی خودکار را آغاز می‌کند؛ CTA تأیید جداگانه وجود ندارد.
Verifying و Resending با متن و Spinner نمایش داده می‌شوند.
Invalid Code و Expired Code از Token خطا استفاده می‌کنند و پیام Inline دارند.
پایان Countdown، Action «ارسال دوباره کد» را فعال می‌کند.
Resend Failed پیام خطا و Action مستقل «تلاش دوباره» دارد.
Resend موفق پیام گذرای «کد جدید ارسال شد.» را اعلام و Countdown را Reset می‌کند.

نکات تحویل به توسعه

ورودی از Paste کامل، OTP AutoFill و اعداد فارسی و انگلیسی پشتیبانی می‌کند.
کد و شماره موبایل با جهت LTR رندر می‌شوند.
بررسی خودکار فقط پس از تکمیل شش رقم و یک‌بار اجرا می‌شود.
هنگام Request، ورودی مربوط و Action تکراری قفل می‌شوند.
تایمر Resend از زمان معتبر Server محاسبه می‌شود و با Background شدن اپ Reset نمی‌شود.
Countdown Resend با مدت اعتبار OTP یکی نیست.
Back شماره Mask‌شده را تغییر نمی‌دهد و کاربر را به WF-01 برمی‌گرداند.
Statusهای گذرا برای Screen Reader با Live Region مناسب اعلام می‌شوند.
لمس Target کنترل بازگشت و Actionهای Resend حداقل 44 × 44 px است.

Componentهای موردنیاز

Component	وضعیت
OTP Floating Text Field	الگوی بصری نهایی؛ استخراج Component باز
OTP Inline Error	الگوی بصری نهایی؛ استخراج Component باز
OTP Status / Loading	الگوی بصری نهایی؛ استخراج Component باز
Resend Timer / Action	الگوی بصری نهایی؛ استخراج Component باز

WF-03 — وضعیت طراحی

Preview

منبع تحویل

Section نهایی: No Invitation Flow
اندازه هر Frame موبایل: 402 × 874 px
صفحه انتخاب شروع و حالت‌های Bottom Sheet بررسی دعوت در همین Section نگهداری می‌شوند.

حالت‌های موجود

حالت	وضعیت
Default / No Invitation	نهایی
Invitation Help Sheet	نهایی
Checking	نهایی
Empty Result	نهایی
Network Error	نهایی
Invitation Found	رفتار مسیریابی نهایی؛ Frame مستقل ندارد

ساختار بصری و Interaction

صفحه Light Mode با پس‌زمینه روشن، لوگوی تری‌پیلون و سطح محتوای سفید طراحی شده است.
عنوان، انتخاب یکی از مسیرهای شروع را توضیح می‌دهد.
کارت «ثبت ساختمان جدید» با سطح Primary مسیر اصلی و کارت «منتظر دعوت هستم» با Outline مسیر ثانویه است.
کل سطح هر کارت قابل لمس است و آیکن فقط نشانه مکمل محسوب می‌شود.
کارت انتظار دعوت، Bottom Sheet راهنما را باز می‌کند.
Bottom Sheet دارای Drag Handle، کنترل بستن، متن راهنما، CTA اصلی و Action تغییر شماره موبایل است.
هنگام بازبودن Sheet، پس‌زمینه با Blur و Scrim غیرفعال می‌شود.
Checking با Spinner و متن مستقل نمایش داده می‌شود و فقط به انیمیشن متکی نیست.
Empty Result به‌صورت پیام خنثی و Network Error به‌صورت Feedback بازیابی‌پذیر نمایش داده می‌شود.
ارتفاع Sheet با محتوای وضعیت تطبیق دارد؛ تغییر ارتفاع باید بدون پرش ناگهانی Animate شود یا فضای Status از ابتدا رزرو شود.

نکات تحویل به توسعه

نمایش این صفحه فقط پس از پاسخ قطعی «بدون عضویت فعال و بدون دعوت در انتظار» مجاز است.
بررسی دعوت از شماره موبایل احرازشده استفاده می‌کند و شماره Mask‌شده با جهت LTR رندر می‌شود.
هنگام Checking، ارسال درخواست تکراری مسدود می‌شود.
انتخاب «تغییر شماره موبایل» Request جاری را لغو و کاربر را به WF-01 هدایت می‌کند.
در Empty Result، Sheet باز می‌ماند و امکان بررسی دوباره یا تغییر شماره وجود دارد.
در Network Error، CTA با «تلاش دوباره» Request را تکرار می‌کند.
درصورت پیداشدن دعوت، Sheet بسته و Routing براساس نوع و تعداد دعوت‌ها انجام می‌شود.
Sheet با Swipe Down، لمس Scrim و کنترل بستن قابل خروج است.
Focus هنگام بازشدن وارد Sheet و هنگام بسته‌شدن به کارت «منتظر دعوت هستم» بازمی‌گردد.
پیام‌های وضعیت برای Screen Reader با Live Region مناسب اعلام می‌شوند.
محدوده لمس کارت‌ها، کنترل بستن و Actionها حداقل 44 × 44 px است.

Componentهای موردنیاز

Component	وضعیت
Routing Choice Card	الگوی بصری نهایی؛ استخراج Component باز
Invitation Help Bottom Sheet	الگوی بصری نهایی؛ استخراج Component باز
Inline Status / Empty	الگوی بصری نهایی؛ استخراج Component باز
Inline Network Feedback	الگوی بصری نهایی؛ استخراج Component باز

WF-04 — وضعیت طراحی

Preview

منبع تحویل

Section نهایی مسیر اصلی: Basic Information
اندازه Frame موبایل: 402 × 874 px
حالت فعلی تحویل: Filled / Valid در مرحله اول از دو مرحله ثبت ساختمان

ساختار بصری

App Bar شامل کنترل بازگشت در سمت راست، عنوان مرکزی «مشخصات پایه» و Badge کم‌رنگ «مرحله ۱ از ۲» در سمت چپ است.
Badge مرحله Status غیرتعاملی است و با CTA اصلی رقابت بصری ندارد؛ Progress Bar جداگانه نمایش داده نمی‌شود.
Header محتوا شامل آیکن ساختمان روی سطح Accent ملایم، عنوان و توضیح کوتاه است.
نام ساختمان در Text Field تمام‌عرض نمایش داده می‌شود.
ورودی‌های مسکونی، تجاری و اداری داخل یک گروه مشترک با Dividerهای ظریف قرار دارند.
هر ردیف Label، آیکن خطی هم‌وزن و ورودی عددی همراه پسوند «واحد» دارد.
خلاصه مجموع واحدها روی سطح Accent ملایم و CTA «مشاهده قیمت» با سطح Primary در انتهای فرم قرار دارند.
آیکن‌ها باید از یک خانواده، اندازه و Stroke Weight ثابت استفاده کنند؛ رنگ آن‌ها نقش مکمل دارد و حامل مستقل معنا نیست.

Interaction و تحویل به توسعه

کل فرم RTL است؛ مقدارهای عددی با جهت LTR رندر می‌شوند.
فیلدهای تعداد از کیبورد عددی، اعداد فارسی و انگلیسی و مقدار صفر پشتیبانی می‌کنند.
مقدار منفی، اعشاری و غیرعددی نامعتبر است.
مجموع با هر تغییر بدون نیاز به Action جداگانه به‌روز می‌شود.
CTA فقط با نام غیرخالی، سه مقدار معتبر و مجموع حداقل ۲ فعال است.
لمس کنترل بازگشت به مبدأ شروع ثبت ساختمان برمی‌گردد و داده Draft را در صورت وجود حفظ می‌کند.
هنگام بازشدن کیبورد، فیلد Focusشده و پیام Validation آن باید بالای Keyboard Insets قابل مشاهده بمانند.
در ارتفاع‌های کوتاه‌تر، محتوا Scroll می‌شود و خلاصه و CTA نباید روی ورودی‌ها هم‌پوشانی پیدا کنند.
«مشاهده قیمت» فقط یک‌بار Request ذخیره و محاسبه را آغاز می‌کند و تا دریافت نتیجه دوباره فعال نمی‌شود.
تغییر اطلاعات پس از قیمت‌گذاری، قیمت قبلی را نامعتبر و محاسبه مجدد را الزامی می‌کند.
محدوده لمس کنترل بازگشت، ورودی‌ها و CTA حداقل 44 × 44 px است.

حالت‌های موردنیاز

حالت	وضعیت
Filled / Valid	نهایی
Empty / Initial	طراحی نشده
Name Required	طراحی نشده
Invalid Unit Count	طراحی نشده
Total Below Minimum	طراحی نشده
Calculating Price	طراحی نشده
Save / Pricing Failed	طراحی نشده
Return With Draft	رفتار قطعی؛ Frame مستقل ندارد

Componentهای موردنیاز

Component	وضعیت
Step Badge	الگوی Filled / Informational نهایی؛ استخراج Component باز
Task Header with Icon	الگوی بصری نهایی؛ استخراج Component باز
Building Name Text Field	حالت Filled نهایی؛ Stateهای دیگر باز
Unit Count Group / Row	حالت Filled نهایی؛ Validation باز
Total Units Summary	حالت Valid نهایی؛ حالت حداقل نامعتبر باز
Primary CTA	حالت Enabled نهایی؛ Disabled و Loading باز

WF-05 — وضعیت طراحی

Preview

منبع تحویل

Section نهایی: Setup Payment Flow
اندازه Frame موبایل: 402 × 874 px
حالت فعلی تحویل: دوره دوازده‌ماهه انتخاب‌شده، Quote دریافت‌شده و Self-Declaration تأییدشده

ساختار بصری

App Bar با کنترل بازگشت، عنوان «انتخاب اشتراک» و Badge «مرحله ۲ از ۲» است.
کارت بالای صفحه Context پرداخت را با نام ساختمان، تعداد واحد محاسبه‌شده و Action ویرایش مشخص می‌کند.
دوره‌ها به‌صورت گزینه‌های تمام‌عرض هستند؛ State انتخاب‌شده با Surface Accent، Border Primary و Badge مزیت از حالت عادی جدا می‌شود.
محاسبات در یک کارت سفید با لبه‌های نیم‌دایره‌ای بالا و پایین نمایش داده می‌شوند؛ این فرم عمدی است و الگوی رسید پرداخت را تقویت می‌کند.
Dividerهای ظریف ردیف‌های رسید را جدا می‌کنند و ردیف «قابل پرداخت» با Weight و رنگ قوی‌تر تأکید می‌شود.
Self-Declaration پس از رسید و پیش از CTA قرار دارد تا اثر حقوقی آن با Action پرداخت مرتبط بماند.
CTA تمام‌عرض «پرداخت و راه‌اندازی» آخرین Action صفحه است.

Interaction و تحویل به توسعه

انتخاب هر دوره کل کارت آن را به‌عنوان Radio Option فعال می‌کند.
State انتخاب باید برای Assistive Technology با selected یا checked معنایی اعلام شود.
با تغییر دوره، رسید و مبلغ نهایی بدون جهش Layout به‌روز می‌شوند.
قیمت هر دوره باید در کارت همان دوره قابل مشاهده باشد.
مالیات فقط از مبلغ اشتراک پس از تخفیف محاسبه می‌شود؛ ردیف شارژ اولیه پیامک خارج از پایه مالیات است.
لبه‌های تزئینی رسید aria-hidden هستند و در ترتیب Focus قرار نمی‌گیرند.
مبلغ‌ها در کنار واحد «ریال» با جداکننده هزارگان و جهت یکپارچه نمایش داده می‌شوند.
CTA تا انتخاب دوره، معتبربودن Quote و تأیید Self-Declaration غیرفعال است.
پس از لمس CTA، دکمه Loading و همه Actionهای تکرارپذیر تا دریافت Payment Intent مسدود می‌شوند.
ویرایش نام یا تعداد واحدها Quote قبلی را نامعتبر و محاسبه مجدد را الزامی می‌کند.
محدوده لمس همه Actionها، Checkbox و کارت‌های انتخابی حداقل 44 × 44 px است.

حالت‌های موردنیاز

حالت	وضعیت
Annual Selected / Valid	نهایی
Quarterly Selected / Valid	رفتار قطعی؛ Frame مستقل باز
Quote Loading / Skeleton	طراحی نشده
Quote Failed	طراحی نشده
Stale Quote / Recalculating	طراحی نشده
Declaration Unchecked / CTA Disabled	طراحی نشده
Payment Starting	طراحی نشده

Componentهای موردنیاز

Component	وضعیت
Building Context Summary	الگوی بصری نهایی؛ استخراج Component باز
Subscription Period Option	Annual Selected نهایی؛ Stateهای دیگر باز
Payment Receipt	الگوی بصری نهایی؛ Amount Stateها باز
Self-Declaration Checkbox	Checked نهایی؛ Unchecked و Error باز
Primary Payment CTA	Enabled نهایی؛ Disabled و Loading باز

WF-06 — وضعیت طراحی

Preview

منبع تحویل

Section نهایی: Payment Status Flow
اندازه Frame موبایل: 402 × 874 px
Stateهای تحویل‌شده: Pending / Auto Check، Pending / Delayed، Success / Ready، Failed / Definitive

ساختار بصری

همه Stateها App Bar، Hero وضعیت و کارت جزئیات پرداخت یکسان دارند.
آیکن ساعت‌شنی روی Surface Accent حالت بررسی، Check حالت موفق و نشان هشدار روی Surface Error حالت ناموفق را مشخص می‌کنند.
کارت جزئیات سه ردیف ساختمان، مبلغ و شناسه پیگیری دارد؛ Action کپی در کنار شناسه قرار می‌گیرد.
پیام ایمنی روی Surface Accent فقط در Pending نمایش داده می‌شود.
CTA تمام‌عرض در پایین صفحه و فقط در Stateهایی که به Action کاربر نیاز دارند نمایش داده می‌شود.

Stateها و Interaction

State	CTA	رفتار
Pending / Auto Check	ندارد	بررسی خودکار؛ آیکن دارای Motion آرام در پیاده‌سازی
Pending / Delayed	به‌روزرسانی وضعیت	نمایش پس از تأخیر غیرعادی یا خطای موقت؛ Loading هنگام لمس
Success / Ready	ورود به داشبورد	فقط پس از تکمیل Provisioning
Failed / Definitive	پرداخت و راه‌اندازی	شروع Payment Attempt جدید؛ فقط پس از شکست قطعی

تغییر State باید بدون Reload صفحه و بدون ازدست‌رفتن Payment Context انجام شود.
مبلغ و شناسه پیگیری در همه Stateها با Payment Attempt یکسان می‌مانند.
Action کپی محدوده لمس حداقل 44 × 44 px و نام دسترس‌پذیر «کپی شناسه پیگیری» دارد.
پس از کپی، Feedback «شناسه پیگیری کپی شد» نمایش و برای Screen Reader اعلام می‌شود.
ساخت Payment Attempt جدید در Pending مسدود است.

Componentهای موردنیاز

Component	وضعیت
Payment Status Hero	چهار State نهایی؛ Motion پیاده‌سازی باز
Payment Detail Card	الگوی بصری نهایی
Copy Reference Action	الگوی بصری نهایی؛ Feedback State باز
Payment Safety Notice	Pending نهایی
Payment Status CTA	Auto-hidden، Refresh، Dashboard و Retry نهایی

HOME-SETUP-01 — وضعیت طراحی

Preview

منبع تحویل

Frame نهایی: HomePage
Node ID: 531:1488
اندازه Frame موبایل: 402 × 874 px
نمونه جاری: یک بخش از پنج بخش تعیین تکلیف شده و Progress برابر ۲۰٪

ساختار بصری و Interaction

Header شامل Context Switcher مرکزی با Role، نام ساختمان و Caret رو به پایین است.
کنترل بازگشت در صفحه اصلی نمایش داده نمی‌شود.
کارت 370 × 188 px در ابتدای محتوای صفحه اصلی قرار دارد.
عنوان و آیکن هدف در بالای کارت، Progress Bar و شمارنده در میانه، و CTA تمام‌عرض 338 × 54 px در پایین قرار دارند.
Fill نوار برای یک بخش از پنج بخش معادل ۲۰٪ Track داخلی است.
CTA و تمام سطح کارت WF-08 را برای همان Current Building باز می‌کنند.
کارت پس از تعیین تکلیف هر پنج بخش حذف می‌شود و State صددرصد در Home نمایش داده نمی‌شود.

Componentهای موردنیاز

Component	وضعیت
Building Context Switcher	Default نهایی؛ نام طولانی و چند Context باز
Home Setup Card	مسیر اصلی نهایی
Home Setup Progress	Partial نهایی؛ Loading و Error باز
Home Setup CTA	Default نهایی

WF-08 — وضعیت طراحی

Preview

منبع تحویل

Frame نهایی: building information progress
Node ID: 467:726
اندازه Frame موبایل: 402 × 874 px
ساختار جاری: پنج بخش مستقل

ساختار بصری

Toolbar بالای صفحه شامل Status Bar، عنوان «تکمیل راه‌اندازی» و کنترل بازگشت در سمت راست RTL است.
Hero شامل تصویر ساختمان، نام Current Building و توضیح انتخاب آزاد ترتیب بخش‌ها است.
Progress Bar زیر Hero قرار دارد و شمارنده «۱ بخش از ۵ بخش تکمیل شده» را نمایش می‌دهد.
فهرست پنج‌ردیفی شامل واحدها و ساکنان، تیم ساختمان، شارژ و حساب، امکانات ساکنان و اطلاعات تکمیلی است.
هر ردیف شامل آیکن سمت راست، عنوان و توضیح، و Badge وضعیت در سمت چپ است.
Dividerها از محدوده متن و Status عبور نمی‌کنند و ردیف آخر Divider پایانی ندارد.
پیام Informational با Surface سبز روشن و آیکن اطلاعات در پایین فهرست قرار دارد.

Stateها و Interaction

State	نمایش
`COMPLETED`	Badge سبز روشن با متن «تکمیل شده»
`IN_PROGRESS`	Badge خنثی با متن «در حال تکمیل `{percent}٪`»
`NOT_STARTED`	Badge خنثی با متن «تکمیل نشده»
`NOT_APPLICABLE`	Badge خنثی مستقل با متن «در این ساختمان وجود ندارد»
`DEFERRED`	Badge خنثی مستقل با متن «فعلاً تکمیل شده»

تمام سطح ردیف باید Interactive و محدوده لمس آن حداقل 44 px باشد.
Tap هر ردیف کاربر را به Flow متناظر همان بخش می‌برد و ترتیب اجباری وجود ندارد.
Back به صفحه اصلی Current Building برمی‌گردد و Draftهای ثبت‌شده را حفظ می‌کند.
Progress Bar و Badgeها باید علاوه بر رنگ، مقدار متنی قابل‌دسترسی داشته باشند.
نام ساختمان Dynamic است و از Current Context دریافت می‌شود.

Componentهای موردنیاز

Component	وضعیت
Setup Dashboard Hero	الگوی بصری نهایی
Setup Overall Progress	Default نهایی؛ State کامل باز
Setup Section Row	Completed، In Progress و Not Started نهایی
Setup Status Badge	سه State اصلی نهایی؛ Not Applicable و Deferred باز
Setup Deferred Notice	الگوی بصری نهایی
Building Illustration	Asset نهایی؛ رفتار Fallback باز

WF-09 تا WF-16 — واحدها و ساکنان

Preview

منبع تحویل و محدوده

Flow: ایجاد واحدها و ساکنان
Node ID: 597:747
اندازه مرجع Frameها: 402 × 874 px
نماهای پوشش‌داده‌شده: Empty State، ثبت دستی دومرحله‌ای، سایر مشخصات، افزودن قبض، افزودن حیوان خانگی، افزودن فرد حقیقی/حقوقی، Import از Excel، Preview فایل، لیست واحدها و دعوت.
وضعیت سکونت با Segmented Control «دارای ساکن / بدون ساکن» نمایش داده می‌شود و مستقل از وجود مالک است.
مرحله اول یک صفحه کامل برای مشخصات واحد است. شماره یا نام، بلوک، طبقه، نوع، مساحت، وضعیت سکونت و در حالت دارای ساکن تعداد ساکنان را دریافت می‌کند.
«سایر مشخصات»، «افزودن قبض» و «افزودن حیوان خانگی» ردیف‌های Action اختیاری‌اند و Bottom Sheet مستقل باز می‌کنند.
مرحله دوم خلاصه واحد، فهرست افراد، Action افزودن فرد، CTA تأیید و ثبت و Action بازگشت به مرحله اول دارد.
«رابطه با واحد» شامل مالک، مستأجر و ساکن است. مالک و مستأجر می‌توانند هم‌زمان گزینه سکونت را داشته باشند؛ برای ساکن این گزینه تکرار نمی‌شود.
سهم مالکیت فقط برای مالک و با انتخاب واحد دنگ یا درصد نمایش داده می‌شود.
«نقش پیشنهادی در اپ» در این فرم وجود ندارد؛ دسترسی پیش‌فرض از رابطه مشتق و فقط پس از دعوت فعال می‌شود. ارسال دعوت تصمیمی مستقل است.
اطلاعات تکمیلی فرد بین حقیقی و حقوقی تغییر می‌کند.
شماره موبایل خالی Import را مسدود نمی‌کند؛ تشخیص Person تکراری با موبایل نرمال‌شده انجام می‌شود.

WF-17 تا WF-20 — تیم ساختمان

Preview

منبع تحویل و محدوده

Flow: مدیران، هیئت‌مدیره و کارکنان
Node ID: 832:4219
اندازه مرجع Frameها: 402 × 874 px
ساختار جاری دو مرحله دارد: «انتخاب مسئولیت‌ها» و «تعیین مسئول‌ها».
مدیریت، هیئت‌مدیره و کارکنان در یک بخش «تیم ساختمان» قرار دارند؛ OBM-UF-05 صفحه مستقلی ندارد.
BUILDING_ADMIN اجباری و قفل‌شده است. دسترسی‌ها خودکارند و Onboarding فقط خلاصه Informational نمایش می‌دهد.
جست‌وجوی Person موجود و ثبت شخص جدید در یک Context انجام می‌شود.
نقش تک‌مسئول CTA «تأیید مسئول» و نقش چندنفره CTA «تأیید اعضا» دارد.

WF-21 تا WF-27 — برنامه شارژ و حساب ساختمان

Preview

منبع تحویل و محدوده

Flow: تنظیم شارژ و معرفی حساب
Node ID: 908:8021
اندازه مرجع Frameها: 402 × 874 px
مراحل جاری: روش تنظیم، محاسبه مبلغ، قبض‌های متغیر، بازبینی محاسبه و روش دریافت/حساب.
شروع سریع شامل «یکسان»، «گروهی» و «واحدبه‌واحد» است؛ مبلغ اختصاصی واحد بر گروه و مبلغ عمومی اولویت دارد.
محاسبه دقیق برای هر ردیف هزینه، یک مبنای تخصیص، دامنه، تاریخ اثر و سیاست گردکردن می‌گیرد.
آب و هزینه‌های مشابه قبض مستقل‌اند و Snapshot تعداد ساکنان دوره را استفاده می‌کنند.
Preview باید جمع‌ها را Reconcile و دلیل مبلغ هر واحد را Explain کند.
همه مبالغ رابط «تومان» هستند؛ ذخیره برنامه Publish نیست و Schedule فقط Draft می‌سازد.
Success به صفحه اصلی برمی‌گردد و Failure داده‌های Draft و Action تلاش مجدد را حفظ می‌کند.

WF-28 تا WF-31 — امکانات ساکنان

Preview

منبع تحویل و محدوده

Flow: امکانات ساختمان
Node ID: 1108:2501
اندازه مرجع Frameها: 402 × 874 px
ورودی فقط امکاناتی را پوشش می‌دهد که زمان یا روز مشخص را برای یک رزروکننده مسدود می‌کنند.
مدل‌های رزرو MVP سه حالت مستقل دارند: «ساعتی»، «سانس ثابت» و «روز کامل».
در رزرو ساعتی، بازه مجاز و مبلغ هر ساعت؛ در سانسی، چند سانس با شروع/پایان و مبلغ؛ و در روز کامل، روزهای مجاز و مبلغ هر روز ثبت می‌شود.
روز کامل انتخاب تاریخ است و کل آن تاریخ را برای آماده‌سازی، استفاده و نظافت مسدود می‌کند؛ بنابراین معادل سانس نیست.
«استفاده آزاد بدون رزرو» در این Flow وجود ندارد. خدمت بدون تخصیص زمان، مانند تحویل لباس به خشکشویی، در ماژول درخواست خدمات تعریف می‌شود.
محدودیت‌های پیشرفته، استثناهای تقویم و سیاست‌های پیچیده پس از پایان راه‌اندازی در داشبورد قابل تکمیل‌اند.

WF-31A و WF-31B — اطلاعات تکمیلی و پایان راه‌اندازی

Preview

منبع تحویل و محدوده

Flow: اطلاعات تکمیلی
Node ID: 1349:6973
اندازه مرجع Frameها: 402 × 874 px
مرحله ۱ از ۲ نشانی ساختمان را با استان، شهر، نشانی کامل، پلاک و کدپستی دریافت می‌کند.
مرحله ۲ از ۲ امکان انتخاب آواتار یا بارگذاری jpg، png و webp تا حداکثر ۲ مگابایت را می‌دهد.
این بخش اجباری نیست؛ «ردکردن» نیز باید به‌عنوان تعیین تکلیف بخش ذخیره شود تا کاربر در حلقه راه‌اندازی باقی نماند.
با تعیین تکلیف این بخش و چهار بخش دیگر، کارت موقت راه‌اندازی حذف و داشبورد ساختمان باز می‌شود.
نشانی، تصویر و تنظیمات تکمیلی بعداً از داشبورد ساختمان قابل ویرایش‌اند.

الگوهای UI واحدها، تیم و شارژ

Context	الگوی قطعی
وضعیت سکونت واحد	Segmented Control «دارای ساکن / بدون ساکن»؛ نه Switch
ثبت دستی واحد	دو صفحه کامل با Step Indicator؛ مرحله اول مشخصات و مرحله دوم افراد
اطلاعات اختیاری واحد	ردیف Action با وضعیت خلاصه و Bottom Sheet مستقل برای سایر مشخصات، قبض و حیوان خانگی
رابطه سکونت فرد	برای مالک/مستأجر Switch «در این واحد سکونت دارد»؛ برای ساکن بدون کنترل اضافه
سهم مالکیت	ورودی عددی همراه Segmented Control «دنگ / درصد» و جمع قابل‌اعتبارسنجی
انتخاب مسئولیت تیم	Switch فقط برای وجود/عدم وجود مسئولیت؛ ادمین ساختمان Disabled + Checked
دسترسی مسئولیت	Information Bottom Sheet بدون کنترل ویرایش
انتخاب شخص	Search و فرم ثبت سریع در یک صفحه؛ نتیجه‌های موجود پیش از فرم جدید
تک‌مسئول/چندمسئول	Radio یا Single Select برای تک‌مسئول؛ Checkbox و شمارنده برای اعضا
روش شروع سریع	Tab/Segment سه‌حالته «یکسان / گروهی / واحدبه‌واحد»
گروه و استثنا	دو Action مستقل؛ Priority Override در توضیح Inline
قبض متغیر	Bottom Sheet با عنوان «افزودن قبض یا هزینه متغیر»
بازبینی مبلغ	Expandable breakdown با Action «چرا این مبلغ محاسبه شده؟»
نتیجه ذخیره	Success و Failure Sheet/Page؛ در Failure داده‌های فرم حفظ می‌شوند

تمام مبالغ با «تومان» نمایش داده می‌شوند و ورودی عددی Formatting گروه سه‌رقمی دارد.
Sticky CTA فقط پس از اعتبارسنجی Context فعال می‌شود؛ خطای جمع یا واحد بدون مبلغ مانع ادامه است.
Bottom Sheet فیلتر فهرست و Bottom Sheet اطلاعات دسترسی دو Component جدا با عنوان و Actionهای متفاوت‌اند.
اطلاعات کارت، حساب و شبا Mask می‌شوند و Reveal فقط پس از Authorization مجاز است.

موارد باز UI

Typography Scale، Line Height و Weightهای مجاز Yekan Bakh
استخراج Componentها و Tokenهای مصوب در Design System اختصاصی
تعریف رنگ‌ها، تصاویر و کنتراست Dark Mode در فاز بعد
طراحی Stateهای Empty، Validation، Calculating و Save Failed برای WF-04
طراحی Stateهای Quote Loading، Quote Failed، Stale Quote، Quarterly Selected، Declaration Unchecked و Payment Starting برای WF-05
طراحی نمونه کامل‌شده، NOT_APPLICABLE، DEFERRED، Loading و Save Failed برای WF-08
طراحی Stateهای Validation و Save Failed برای امکانات و خطای فرمت/حجم تصویر اطلاعات تکمیلی