✩داستانش خیلی ساده‌ست: وقتی تعداد آیتم‌ها زیاده، لازم نیست همه رو یک‌جا به کاربر نشون بدیم. محتوا رو بین چند صفحه تقسیم می‌کنیم تا هم صفحه مرتب‌تر باشه، هم پیدا کردن موارد راحت‌تر بشه.🤓
✩ مثلاً یک فروشگاه رو در نظر بگیر که ۵۰۰ تا محصول داره. اگر همه‌ی محصولات توی یک صفحه باشن، هم سایت سنگین‌تر میشه، هم کاربر برای دیدن و بررسی کردنشون خسته میشه. پس می‌تونیم مثلاً توی هر صفحه فقط ۲۰ محصول نمایش بدیم.

✸ حالا اصلاً چرا از Pagination استفاده می‌کنیم؟ 🤔

۱. کاربر راحت‌تر اطلاعات رو می‌بینه
وقتی اطلاعات به بخش‌های کوچیک‌تر تقسیم بشن، بررسی کردنشون خیلی راحت‌تره و کاربر بهتر می‌تونه روی چیزی که دنبالش می‌گرده تمرکز کنه.

۲. سرعت سایت بهتر میشه
نمایش ۱۰ نتیجه خیلی سبک‌تر و سریع‌تر از نمایش ۱۰۰۰ نتیجه توی یک صفحه‌ست، پس صفحه زودتر لود میشه و کاربر هم کمتر معطل می‌مونه.

3. به کاربر میگه کجای مسیر قرار داره.
کاربر متوجه میشه چند صفحه محتوا وجود داره و الان در کدوم صفحه‌ست. این حسِ کنترل و جهت‌یابی، تجربه‌ی کاربری بهتری ایجاد می‌کنه.

4. برای محتواهایی که کاربر دنبال یک چیز مشخصه خیلی کاربردیه.
مثل سایت‌های فروشگاهی، نتایج جست‌وجو، لیست مقاله‌ها، پنل‌های مدیریت و آرشیو محتوا.

✸ معمولاً کجا Pagination می‌بینیم؟

✓لیست محصولات فروشگاه‌های اینترنتی
✓نتایج جست‌وجو در سایت‌ها و اپلیکیشن‌ها
✓صفحه‌ی مقاله‌های یک وبلاگ یا سایت خبری
✓پنل‌های مدیریتی و جدول‌های اطلاعاتی
✓لیست سفارش‌ها، کاربران، پیام‌ها یا تراکنش‌ها
✓آرشیو فیلم، کتاب، دوره یا هر نوع محتوای زیاد

✸ موقع طراحی Pagination به چه چیزهایی دقت کنیم؟

۱. صفحه‌ای که کاربر داخلشه باید مشخص باشه
کاربر باید سریع بفهمه الان در کدوم صفحه قرار داره.
✩ برای این کار، می‌تونیم شماره‌ی صفحه‌ی فعلی رو با رنگ، پس‌زمینه یا استایل متفاوت نشون بدیم.

۲. دکمه‌های «قبلی» و «بعدی» واضح باشن
دکمه‌های قبلی و بعدی کمک می‌کنن کاربر بدون اینکه شماره‌ی خاصی رو انتخاب کنه، راحت بین صفحه‌ها جابه‌جا بشه.
فقط باید حواسمون باشه:
✩ وقتی کاربر توی صفحه‌ی اوله، دکمه‌ی «قبلی» نباید فعال باشه.
✩ وقتی توی صفحه‌ی آخره، دکمه‌ی «بعدی» هم باید غیرفعال بشه یا نمایش داده نشه.

۳. همه‌ی شماره‌صفحه‌ها رو نمایش ندیم
اگر مثلاً ۱۰۰ صفحه محتوا داریم، نمایش دادن همه‌ی شماره‌ها هم فضا رو شلوغ می‌کنه و هم استفاده ازش سخت‌تر میشه.
به‌جاش می‌تونیم از سه‌نقطه استفاده کنی ، این‌طوری کاربر می‌فهمه که صفحات بیشتری وجود داره، اما رابط کاربری همچنان تمیز می‌مونه.

1 2 3 ... 20 بعدی

۴. برای لیست‌های طولانی، رفتن به اول و آخر رو در نظر بگیریم
وقتی تعداد صفحات خیلی زیاده، دکمه‌هایی مثل «صفحه‌ی اول» و «صفحه‌ی آخر» می‌تونن مفید باشن.
مثلاً توی پنل مدیریت سفارش‌ها، ممکنه کاربر بخواد مستقیم بره سراغ جدیدترین یا قدیمی‌ترین سفارش‌ها؛ بدون اینکه مجبور باشه یکی‌یکی صفحه‌ها رو رد کنه.

۵. تعداد آیتم‌های هر صفحه رو با دقت انتخاب کنیم
اگر توی هر صفحه آیتم خیلی کمی نشون بدیم، کاربر باید مدام بین صفحه‌ها رفت‌وآمد کنه.
از اون طرف، اگر تعداد آیتم‌ها خیلی زیاد باشه، صفحه سنگین و شلوغ میشه.
عدد مناسب به نوع محتوا بستگی داره:
✩ برای محصولات فروشگاهی: معمولاً ۱۲، ۲۰ یا ۲۴ آیتم
✩ برای جدول‌ها: ۱۰، ۲۵ یا ۵۰ ردیف
✩ برای مقاله‌ها: معمولاً تعداد کمتر؛ چون هر مقاله فضای بیشتری می‌گیره

۶. نسخه‌ی موبایل رو فراموش نکنیم
توی دسکتاپ فضای بیشتری داریم، اما توی موبایل بهتره صفحه‌بندی ساده‌تر طراحی بشه.
✩ مثلاً به‌جای اینکه کلی شماره نشون بدیم، می‌تونیم از این مدل استفاده کنیم:

‹ قبلی صفحه 3 از 12 بعدی ›

بعضی وقت‌ها هم دکمه‌ی «نمایش بیشتر» انتخاب مناسب‌تریه؛ مخصوصاً وقتی کاربر فقط می‌خواد چند آیتم بیشتر ببینه و نیاز نداره بین صفحه‌های مشخص حرکت کنه.

پست بعدی راجب chip هستش🤓
اگر این پست رو دوست داشتید برام ری اکشن بذارید🥲مرسی

سلام رفقا🥥🩷
امروز می‌خوایم بریم سراغ یک المان کوچیک ولی خیلی پرکاربرد توی طراحی رابط کاربری: چیپ (Chip). 🍟

اینا رو میگم:👀

✸ چیپ (Chip) اصلاً چیه؟
چیپ‌ها المان‌های جمع‌وجوری هستند که یک ورودی، یک ویژگی یا یک «عمل» (Action) رو نمایندگی می‌کنن. چیپ‌ها به کاربر کمک می‌کنن راحت‌تر اطلاعات وارد کنه، گزینه‌ها رو انتخاب کنه، محتوا رو فیلتر کنه یا یک دستور خاص رو اجرا کنه.

✸ ۴ ویژگی اصلی چیپ‌ها:

✩ ظاهرشون معمولاً شبیه یک کپسول هست.
✩ متن داخلشون باید کوتاه باشه.
✩ چیپ‌ها «تعاملی» هستند؛ یعنی کاربر انتظار داره با کلیک روی اون‌ها اتفاقی بیفته.
✩ چیپ‌ها معمولاً به صورت گروهی دیده می‌شن و به‌ندرت تنها ظاهر می‌شن.

✸ آناتومی یک چیپ :
هر چیپ از ترکیب این بخش‌ها ساخته می‌شه:

✩ آیکون ابتدایی (Leading Icon): اختیاری (در سمت شروع چیپ).
✩ برچسب (Label): بخش اصلی و متنی چیپ.
✩ ظرف یا کادر (Container): همون پس‌زمینه‌ی بیضی‌شکل.
✩ آیکون انتهایی (Trailing Icon): اختیاری (در سمت پایان چیپ، مثل ضربدر برای حذف).

✸ انواع و مدل‌های طراحی
طراح‌ها معمولاً از این مدل‌ها استفاده می‌کنن:

۱. توپر (Filled) یا خط‌دار (Outline):
چیپ‌های توپر رایج‌ترن؛ معمولاً وقتی انتخاب می‌شن، از رنگ اصلی (Accent Color) برند استفاده می‌کنن تا متمایز بشن. چیپ‌های خط‌دار (Outline) برای مواقعی خوبن که می‌خوایم ظاهر رابط کاربری ملایم‌تر باشه.

۲. چیپ‌ها با آیکون انتهایی:
آیکون فلش: یعنی با زدنش یک منوی بازشو (Dropdown) ظاهر می‌شه (پرکاربرد در فیلترها).

آیکون ضربدر : یعنی این ورودی قابل حذفه (مثل تگ‌هایی که توی ایمیل یا مخاطبین اضافه می‌کنیم).

آیکون اعداد: میزان مشارکت یا تعداد رو نشون می‌ده (مثل ایموجی‌هایی که برای ری‌اکشن استفاده می‌شن).

۳. چیپ‌هایی که آیکون ابتدایی دارن (مثل هشتگ، آیکون یا آواتار):
بعضی وقت‌ها لازمه چیپ‌ها یک نشانه‌ی بصریِ اضافه داشته باشن. مثلاً چیپ‌هایی که با علامت هشتگ (#) شروع می‌شن، خیلی برای دسته‌بندی و مرتب‌سازی توی شبکه‌های اجتماعی محبوبن.

اما یه چالش جالب! 🧐
وقتی تعداد چیپ‌ها زیاد می‌شه و کنار هم قرار می‌گیرن، این وضعیت برای کاربر خیلی سخت می‌شه که سریع چیزی که می‌خواد رو بین اون‌همه گزینه پیدا کنه.

👀 راه حلش چیه؟

🔎 راه حل: استفاده از آیکون‌های ابتدایی یا آواتارهاست. این نشانه‌های کوچکِ تصویری، به مغز کاربر کمک می‌کنن خیلی سریع‌تر بین گزینه‌ها تمایز قائل بشه و اون چیزی که نیاز داره رو شکار کنه. در واقع این آیکون‌ها مثل یک «راهنما» عمل می‌کنن تا کاربر مجبور نباشه تک‌تک متن‌ها رو با دقت بخونه.🤓

❓ سوال : کجا از چیپ ها استفاده می کنیم؟

✩ فیلتر و مرتب‌سازی: انتخاب سریع ویژگی‌ها برای تغییر محتوای صفحه.