تم تاریک
لیست List
لیست یک الگوی نمایش داده است که مجموعهای از آیتمها را با ساختاری مشخص جهت مرور، انتخاب و مدیریت توسط کاربر نمایش میدهد. انتخاب نوع لیست مستقیم به ماهیت دادهها و نیاز کاربر به تعامل (فیلتر، جستوجو، مشاهده بصری) بستگی دارد.
انواع اصلی لیست
الگوهای نمایش لیست در پنل به دو دسته کلی تقسیم میشوند:
۱. لیست کارتی
نمایش آیتمها به صورت کارتهای بصری که معمولا شامل تصویر، عنوان و توضیحات کوتاه هستند.
زمان استفاده
- آیتمها دارای هویت بصری (تصویر یا آیکون اختصاصی) هستند.
- دادهها مختصر بوده و کاربر نیاز به درک سریع و کلی دارد.
- تعداد آیتمها محدود است و نیاز به فیلتر/مرتبسازی پیشرفته وجود ندارد.
ویژگیها و رفتار
- تعامل: کلیک روی هر کارت باعث نمایش جزئیات یا ورود به مرحله بعد (Deep dive) میشود.
- تغییر نما: در صورت استفاده از کارت، توصیه میشود امکان تغییر نمایش به حالت «جدولی» نیز برای کاربر فراهم باشد.
| Do | Don't |
|---|---|
| از متن کوتاه و قابل اسکن استفاده کنید. | از کارت برای دادههای پیچیده و حجیم استفاده نکنید. |
| کلیک روی کارت را به نمایش جزئیات اختصاص دهید. | از کارتها به عنوان سوئیچ (Toggle) خاموش/روشن استفاده نکنید. |
۲. لیست جدولی
دادهها در قالب ردیف و ستون نمایش داده میشوند. این حالت برای دادههای ساختاریافته و حجیم استاندارد است.
دستهبندی جداول
- Simple Table: صرفا برای نمایش دادههای ثابت که نیاز به اکشن یا تعامل خاصی ندارند.
- Table: برای دادههایی که نیازمند مدیریت (Action)، فیلتر، جستوجو و مرتبسازی هستند.
زمان استفاده
- دادهها دارای صفات متعدد (ستونهای مختلف) هستند.
- کاربر نیاز به مقایسه مقادیر، فیلتر کردن یا مرتبسازی (Sorting) دارد.
- نیاز به انجام عملیات گروهی (Bulk Actions) روی آیتمها وجود دارد.
ویژگیها و رفتار
- مدیریت داده: استفاده از Pagination یا Lazy loading برای کنترل بارگذاری دادههای زیاد.
- انتخاب: استفاده از Checkbox برای انتخاب موارد و انجام عملیات دستهجمعی.
| Do | Don't |
|---|---|
| قابلیت مرتبسازی را برای ستونهای کلیدی فراهم کنید. | ستونها را با اطلاعات غیرضروری شلوغ نکنید. |
| وضعیتهای Empty، Loading و Error را طراحی کنید. | از جدول برای نمایش محتوای عمدتا بصری/تصویری استفاده نکنید. |
ملاحظات کلی و پترنهای مرتبط
مدیریت وضعیتها
هر لیستی (چه کارتی و چه جدولی) باید برای ۳ وضعیت بحرانی آماده باشد:
- Loading: نمایش اسکلتون یا لودینگ مناسب هنگام فراخوانی داده.
- Empty State: نمایش پیام راهنما و دکمه فراخوان (CTA) زمانی که دادهای وجود ندارد.
- Error: نمایش خطای ارتباط با سرور و امکان تلاش مجدد (Retry).
تعاملات و امنیت
- برای انجام عملیاتهایی مانند حذف یا ویرایش در داخل لیستها، حتما از پترنهای حذف ریسورس و ویرایش ریسورس پیروی کنید.
- از باز کردن لیستهای طولانی و پیچیده در داخل Modal خودداری کنید، لیستها نیاز به فضای کافی برای نمایش ستونها و فیلترها دارند.
یکپارچگی
- از ترکیب Card و Table برای یک نوع داده مشابه در یک صفحه خودداری کنید، مگر اینکه قابلیت Toggle (تغییر نما) توسط کاربر وجود داشته باشد.