استاندارد طراحی و تحویل UI در تریپیلون
۱. هدف
این راهنما قرارداد مشترک ساخت و تحویل UI را تعریف میکند. وضعیت واقعی فایل Figma، لینک Frameها و تصمیمهای بصری هر ماژول باید در فایل UI داخل پوشه همان ماژول ثبت شوند.
۲. پیشنیاز شروع
پیش از ساخت صفحه:
- خروجی UX صفحه آماده UI باشد.
- متن Draft یا Approved صفحه وجود داشته باشد.
- Frame مرجع و پلتفرم هدف مشخص باشند.
- حالتهای ضروری صفحه تعیین شده باشند.
- Component و Tokenهای موجود فایل بررسی شده باشند.
- تعارضی که ساختار اصلی را تغییر میدهد باقی نمانده باشد.
۳. سازماندهی فایل Figma
ساختار پیشنهادی برای فایل محصول:
| Page | محتوا |
|---|---|
00 · Cover |
معرفی، مالک، نسخه و لینک مستندات |
01 · Foundations |
رنگ، Typography، فاصله، Radius، Grid و Icon |
02 · Components |
Componentها و Variantهای محصول |
| Pageهای ماژول | Screenها بر اساس Flow یا دامنه |
90 · References |
وایرفریم و تصاویر مرجع |
99 · Archive |
نسخههای کنارگذاشتهشده |
هر فایل میتواند ساختار متناسب خود را داشته باشد، اما نام Page و مسئولیت آن باید روشن باشد.
۴. قرارداد نامگذاری
الگوی Frame:
<Module-or-Flow>/<WF-ID>/<State>
نمونه:
Onboarding/WF-01/Default
Onboarding/WF-01/Validation Error
Onboarding/WF-01/Loading
نامهایی مانند Frame 1، Mobile و image 12 برای خروجی نهایی قابل قبول نیستند.
۵. قرارداد ساخت
- Frameها با Auto Layout ساخته میشوند.
- اندازه مبنا و قواعد Responsive ثبت میشوند.
- رنگ، فاصله و Radius از Variable استفاده میکنند.
- متن از Text Style مصوب استفاده میکند.
- الگوی تکراری Component و نمونه مصرف آن Instance است.
- Component جدید با Variant و Property لازم ساخته میشود.
- آیکن از Component یا SVG اصلی وارد میشود.
- Safe Area، Keyboard و Scroll در موبایل بررسی میشوند.
- اندازه لمس، Focus و ترتیب خواندن کنترل میشوند.
- محتوای واقعی یا حساس در طرح استفاده نمیشود.
۶. حالتهای لازم
| نوع صفحه | حالتهای پایه |
|---|---|
| فرم | Default، Focus، Filled، Validation Error، Loading، System Error |
| فهرست | Loading، Empty، With Data، Partial Error، Offline |
| جزئیات | Loading، Default، Stale Data، Permission Denied |
| پرداخت | Review، Processing، Success، Failed، Unknown/Pending |
| اقدام حساس | Confirmation، Processing، Success، Failed |
این جدول حداقل مشترک است. حالتهای واقعی هر صفحه در خروجی UX ماژول تعیین میشوند.
۷. معیار Review بصری
- سلسلهمراتب عنوان، توضیح، داده و CTA روشن است.
- متن واقعی فارسی قطع یا فشرده نمیشود.
- حداقل اندازه لمس
44 × 44 pxرعایت میشود. - کنتراست متن و کنترلها مناسب است.
- رنگ تنها نشانه وضعیت نیست.
- Focus، Disabled، Error و Loading قابل تفکیکاند.
- Componentها و Tokenها با Design System هماهنگاند.
- Frame با متن خروجی UX Writing یکسان است.
- Layout در اندازه مرجع و حداقل عرض هدف کنترل شده است.
۸. قالب خروجی ماژول
فایل UI هر ماژول حداقل این بخشها را دارد:
- لینک فایل Figma
- تاریخ و نتیجه آخرین Audit
- تصمیمهای بصری قطعی
- بدهیها و سؤالهای باز
- جدول تحویل صفحهها
- لینک مستقیم Frame هر حالت
- Component و Tokenهای جدید یا تغییرکرده
- نکات تحویل به توسعه
قالب جدول:
| شناسه | وضعیت UX | وضعیت Writing | وضعیت UI | لینک Default | حالتهای تکمیلشده |
| --- | --- | --- | --- | --- | --- |
| `WF-01` | Ready | Approved | In Review | ... | Default، Error |
۹. تحویل به توسعه
برای هر صفحه:
- لینک مستقیم Frame نهایی
- Component و Variantهای استفادهشده
- اندازه و رفتار Responsive
- متن نهایی یا کلیدهای محتوا
- حالتها و شرط نمایش
- Interaction و Transition ضروری
- Validation
- Permission و داده موردنیاز
- موارد خارج از محدوده نسخه
۱۰. کنترل کیفیت
- فایل خروجی UI داخل پوشه ماژول است.
- راهنما و خروجی با هم ترکیب نشدهاند.
- Frameها نام پایدار و لینک مستقیم دارند.
- Design System پیش از ساخت دستی بررسی شده است.
- متن، UX و UI همگاماند.
- تمام حالتهای مصوب طراحی شدهاند.
- خروجی برای توسعه قابل استفاده است.