تم تاریک

راهنمای انتخاب کامپوننت Decision Tree ​

این راهنما به شما کمک می‌کند تا بر اساس سناریوی کاربری و نوع تعامل مورد نیاز، مناسب‌ترین کامپوننت یا پترن را از دیزاین سیستم سرخآب انتخاب کنید.

۱. نمایش اطلاعات به کاربر ​

زمانی که هدف سیستم، نمایش داده‌ها یا بازخوردها به کاربر است:

۱.۱ نمایش لیست منابع ​

  • داده‌های ساده و بصری: از Card List استفاده کنید.
  • داده‌های حجیم و ساختاریافته: از Table استفاده کنید.
  • داده‌های نیازمند مدیریت (سورت/فیلتر): از Table به همراه Filter Bar استفاده کنید.

۱.۲ نمایش پیام‌های بازخورد ​

  • تایید عملیات یا خطای گذرا: از Toast Message استفاده کنید.
  • هشدار حیاتی یا نیاز به تایید صریح: از Modal یا Dialog استفاده کنید.

۱.۳ مشاهده جزئیات یک آیتم ​

  • اطلاعات گسترده و عمیق: هدایت به Detail Page اختصاصی.
  • مرور سریع بدون خروج از لیست: استفاده از Side Panel (Drawer) یا Expandable Row.

۲. دریافت ورودی از کاربر ​

زمانی که کاربر قصد تولید داده یا انجام عملیاتی را دارد:

۲.۱ فرم‌های ورود داده (ساخت و ویرایش) ​

  • تغییرات جزئی و سریع: استفاده از Inline Form.
  • فرآیندهای پیچیده: استفاده از Full Page Form.
  • فرآیندهای مرحله‌ای و خطی: استفاده از پترن Wizard / Stepper.

۲.۲ اجرای عملیات ​

  • اکشن اصلی صفحه: دکمه Primary در بخش Subheader.
  • اکشن‌های فرعی یا گروهی: استفاده از Button Group یا Dropdown Menu.

۳. ناوبری و ساختار ​

زمانی که کاربر نیاز به جابجایی در سطوح مختلف محصول دارد:

  • بین محصولات آروان: استفاده از Global Sidebar.
  • درون یک محصول (بین بخش‌ها): استفاده از Product Sidebar (In-sidebar).
  • درون یک صفحه (زیربخش‌ها): استفاده از Tabs.
  • درک عمق مسیر طی شده: استفاده از Breadcrumb.

۴. پیکربندی و تنظیمات ​

۴.۱ تنظیمات ساده (تکی) ​

  • روشن/خاموش: از Switch استفاده کنید.
  • انتخاب یک مورد از لیست کوتاه: از Radio Group یا Segmented Control.
  • انتخاب چند مورد: از Checkbox Group.
  • انتخاب بازه عددی: از Slider.

۴.۲ تنظیمات فرم‌محور ​

  • ترکیب چندین فیلد: استفاده از Settings Form (دسته‌بندی شده با Section).

۵. حالات خاص و وضعیت‌ها ​

برای مدیریت تجربه کاربر در شرایط غیرمعمول سیستم:

  • نبود داده برای نمایش: استفاده از پترن Empty State (شامل تصویرسازی و CTA).
  • زمان انتظار بارگذاری: استفاده از Skeleton (برای جداول) یا Spinner (برای دکمه‌ها).
  • بروز خطای سیستمی: استفاده از Error State به همراه دکمه Retry.

بایدها و نبایدها ​

  • Do: برای جداول با بیش از ۵ ستون، حتما ستون نام را پین (Fix) کنید.
  • Don't: برای نمایش کمتر از ۳ آیتم ساده، از ساختار سنگین Table استفاده نکنید.