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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

👀 راه حلش چیه؟

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

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

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

✩ انتخاب گزینه‌ها: برای انتخاب از بین یک لیست (مثل مهارت‌ها یا علاقه‌مندی‌ها).

✩ ورودی کاربر (Input Chip): تبدیل متن‌های تایپ‌شده توسط کاربر به یک برچسب قابل مدیریت (مثل افزودن چند گیرنده در ایمیل).

✩ پیشنهادهای هوشمند (Suggestion Chips): کمک به کاربر برای رسیدن به هدفش بدون تایپ کردن (مثلاً پیشنهاد مبلغ برای انتقال پول).

✩ دسته‌بندی (Tags/Hashtags): برای سازماندهی اطلاعات با کلمات کلیدی.