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

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

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

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

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

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

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

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

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

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

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

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

👀 راه حلش چیه؟

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

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

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

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

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

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

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

⚠️ حواست باشه که اینا رو با هم قاطی نکنی🙈👇:
دکمه با چیپ فرق میکنه

⚠️ اشتباه رایج: چیپ با دکمه چه فرقی داره؟
خیلی وقتا این دو تا با هم اشتباه گرفته می‌شن چون قیافه‌شون شبیهه! اما تفاوت اصلی‌شون اینه:
دکمه‌ها برای «اجرا کردن» یک کار مهم یا یک رویداد در اپلیکیشن (مثل دکمه‌ی «ثبت سفارش») طراحی شده.
چیپ‌ها معمولاً برای دسته‌بندی، فیلتر کردن، انتخاب گزینه‌ها یا وارد کردن داده به کار می‌رن و غالباً به صورت گروهی ظاهر می‌شن.

خب، چیپ رو یاد گرفتیم.🍟
امیدوارم این مطلب رو خوب پرزنت کرده باشم براتون 🩷
اگر برات مفید بود، برای دوستای دیزاینرت هم بفرست تا با هم یاد بگیریم.

🤓 مطلب بعدی: قراره بریم سراغ Navigation Bar؛ منتظرش باشید!

سلام رفقا🌸☺️
امروز می‌خوایم بریم سراغ اینکه بدونیم navigation bar چی هست و انواعش رو بشناسیم.
خیلی خیلی مهمه پس تا آخرش همراهم باش💪🤓