الگوهای ترکیب، دستور آشپزی، قالب صفحه، و راهنمای نوشتار
معرفی
کامپوننت یک قطعه است، الگو یک تصمیم است. این بخش جایی است که تصمیم‌هایی مستند می‌شوند که هیچ کامپوننتی به‌تنهایی مالکشان نیست: کدام نوع overlay، چه چیزی وقتی داده نیست، چطور یک صفحه در موبایل بازچین می‌شود.
الگو — یک تصمیم که چند کامپوننت را کنار هم می‌گذارد؛ همین‌جا
بلاک — یک صفحه‌ی کامل و کارکننده که کپی می‌کنید؛ در گالری بلاک‌ها
اگر چیزی که می‌خواهید یک صفحه‌ی کامل است، اول سراغ بلاک بروید. الگو را وقتی بخوانید که می‌خواهید بدانید چرا آن بلاک این‌طور چیده شده.
همهٔ الگوها
الگوهای بنیادین
چیدماناجزای سطح پایینی که قالب‌های صفحه رویشان ساخته شده‌اند — PageContainer (عرض از نوع صفحه) › PageHeader › PageSection، داخل ProductFrame؛ در صفحهٔ محصول فقط PageSection، درون CustomPage
ناوبریالگوهای ناوبری پرتو — منوی اصلی ProductFrame، ناوبری محلی با Tabs و NavMenu، Breadcrumb، و اصول طراحی ناوبری
مودالیتی (Modality)راهنمای انتخاب — دیالوگ در برابر شیت در برابر آلرت‌دیالوگ در برابر کانفرم‌دیالوگ در برابر پاپ‌اور و دراپ‌داون
اعلام تغییرات محصولهمهٔ نسخه‌ها با تیترهای کوتاه و همیشه باز؛ اولویت روشن، تصویر اختیاری و بودجهٔ اعلان
الگوهای فرمراهنمای طراحی فرم‌های قابل استفاده، دسترس‌پذیر، و سازگار با RTL در پرتو
الگوهای بارگذاریراهنمای طراحی حالت‌های loading در پرتو — Skeleton، Spinner، و Progressive Loading
حالت‌های خالیراهنمای حالت‌های خالی — صفر نتیجه، فهرست خالی، صفحهٔ خالی و مسیر گم‌شده؛ هر کدام یک پاسخ دارد و در صفحه قالب آن را می‌کشد
الگوهای خطاراهنمای نمایش خطاها در پرتو — API errors، validation، و حالت‌های سیستمی
الگوهای ریسپانسیوراهنمای ساختاردهی رابط کاربری برای نمایش صحیح در موبایل، تبلت، و دسکتاپ
دستور آشپزی
فرم با اعتبارسنجیاعتبارسنجی فیلدها و خطای ذخیره در FormPage و FormRow با React Hook Form، aria-invalid و اعلام خطا
جدول با مرتب‌سازیالگوی جدول داده‌ای با ستون‌های قابل مرتب‌سازی و نشانگر aria-sort
قالب صفحه
انتخاب قالب صفحههر صفحهٔ محصول یک قالب است — فهرست، جزئیات، فرم، تنظیمات، داشبورد یا صفحهٔ کمکی — و قالب عرض، سرِ صفحه، جای اقدام‌ها و حالت‌ها را تعیین می‌کند
ترکیب داشبوردالگوی ساخت صفحه داشبورد سوشال لیسنینگ با ترکیب کامپوننت‌های موجود
صفحه تحلیلالگوی ساخت صفحه تحلیل اینفلوئنسر با ترکیب کامپوننت‌های دامنه‌ای
صفحه جدول دادهالگوی ساخت صفحه لیست با جستجو، فیلتر، مرتب‌سازی، و صفحه‌بندی
جای فیلترها — سایدبار فیلتر یا نوار ابزارفیلترهای هر صفحه فقط در یکی از دو جا هستند — سایدبار فیلتر در ستون دوم قاب، با همه‌چیز داخلش، یا چند فیلتر کشویی در نوار ابزار بالای فهرست؛ یک پاسخ برای هر نوع صفحه
محتوای اجتماعی
مدل محتوای اجتماعییک مدل برای هر موجودیت (پست، نظر، حساب) و مبدل‌هایی که داده‌های API را یک بار به آن تبدیل می‌کنند
نوشتار و کیفیت
محتوا و لحننوشتن متن رابط محصول پرتو به فارسی رسمی — دکمه، پیام، برچسب، عدد، تاریخ، املا، واژگان و یادداشت انتشار.
اشتباهات رایجالگوهایی که باید از آن‌ها پرهیز کنید — بر اساس مشکلات واقعی در محصولات پرتو
دسته‌بندی
گروه
چه چیزی است
الگوهای بنیادین
تصمیم‌های فرابخشی که روی هر صفحه‌ای اعمال می‌شوند — از چیدمان تا حالت‌های غیرعادی
دستور آشپزی
راهنمای یک ترکیب مشخص از چند کامپوننت
قالب صفحه
ترکیب یک صفحه‌ی کامل؛ کدِ کارکننده‌اش در گالری بلاک‌ها است
نوشتار و کیفیت
لحن و واژگان، و اشتباه‌هایی که نباید تکرار شوند
نکات مشترک
هر صفحه‌ای که داده نشان می‌دهد، پنج حالت دارد، نه یکی. بارگذاری، خالی، خطا، ناقص (بخشی آمد، بخشی نه)، و موفق. حالت ناقص همان است که بیشتر از همه فراموش می‌شود: صفحه‌ی چهارم از دوازده شکست خورده، درحالی‌که سه صفحه‌ی اول روی صفحه‌اند. در این حالت داده‌ی قبلی را نگه دارید و خطا را inline نشان دهید — کل صفحه را با یک ErrorState جایگزین نکنید.
دو حالت هم‌زمان نمایش داده نمی‌شوند
ترتیب همیشه یکی است: اسکلتون → سپس داده، خالی، یا خطا. هرگز اسکلتون و حالت خالی با هم. و «صفر نتیجه» خطا نیست —
برای آن حالت خالی به کار ببرید، نه ErrorState.
نکته‌ی دوم: DataTable در پرتو سمت سرور صفحه‌بندی می‌شود. هیچ‌چیزی را از صفحه‌ی جاری استنتاج نکنید — نه تعداد کل، نه شمارش فیلترها، نه مرتب‌سازی. آن‌ها را سرور می‌دهد.