چیپس
چیپس توپر (Filled) و توخالی (Outlined)
چیپس‌ها عناصری کم‌حجم و کوچک‌اند که اغلب در گروه‌های ۲تایی یا بیشتر کنار هم قرار می‌گیرند و فضای کمی را اشغال می‌کنند. چیپس‌ها انتخاب و فیلتر محتوا، تعیین و حذف دادهٔ ورودی و کنش را در رابط کاربر فراهم می‌کنند.
دموی تعاملی
کاربرد
چیپس‌ها ورود اطلاعات، انتخاب یک یا چند گزینه، فیلتر کردن محتوا یا شروع کنش را برای کاربر میسر می‌کنند. در مقابلِ دکمه که تکی و ثابت در صفحه استفاده می‌شود، چیپس‌ها در صورت نیاز در صفحه ظاهر شده و به شکل‌های زیر از آن‌ها استفاده می‌شود:
چیپس کنش‌پذیر (Action Chip)
برای کنش در محتوای اصلی، چیپس‌های کنش‌پذیر به شکلی پویا در صفحه ظاهر می‌شوند و می‌توانند به لینک تبدیل شوند. چیپس‌های کنش‌پذیر را می‌توان با دکمه‌ای ثابت در صفحه جایگزین کرد.
چیپس انتخابی (Choice Chip)
کاربر با استفاده از این کامپوننت می‌تواند بین تعدادی چیپس، یکی را انتخاب کند. چیپس‌های انتخابی دو نوع تک انتخابی و چند انتخابی دارند.
- چیپس‌های تک انتخابی: جایگزین مناسبی برای منو‌های تک انتخابی، کلید‌های رادیویی و کلید‌های تاگل هستند.
- چیپس‌های چند انتخابی: جایگزین مناسبی برای چک‌باکس‌ها هستند و کاربر می‌تواند چند چیپس را انتخاب کند.
چیپس حذف‌شونده (Removable Chip)
این کامپوننت داده‌های ورودی کاربر را به شکل چیپسی نمایش می‌دهد که کاربر در صورت تمایل می‌تواند آن را حذف کند.
چیپس‌های آیکون‌دار
آیکون‌ها در ابتدای چیپس‌ها قرار می‌گیرند. همهٔ چیپس‌ها می‌توانند آیکون داشته باشند تا کنش مربوط به خودشان را واضح‌تر ابراز کنند. توصیه می‌کنیم در صورت امکان از آیکون‌های SVG و یا از آیکون فونت طراحی‌شده با قواعد سنّت استفاده کنید.
اولویت‌های کاربرد
- چیپس با درجهٔ اهمیت بالا (High Emphasis): برای تأکید و نمایش اهمیت کنش اصلی، باید در چیدمان هر صفحهٔ رابط کاربر از مجموعه چیپس‌هایی با درجهٔ اهمیت بالا استفاده شود.
- چیپس با درجهٔ اهمیت متوسط (Medium Emphasis) و درجهٔ اهمیت پایین (Low Emphasis): در هر صفحهٔ رابط کاربر برای کنش‌هایی که نسبت به کنش اصلی اهمیت کمتری دارند، با توجه به درجهٔ تأکید و اهمیت آن کنش، از این چیپس‌ها استفاده می‌شود.
انواع
چیپس توپر
چیپس‌های توپر با کادری که رنگ زمینه دارد مشخص و با داشتن رنگ اصلی برند در زمینه، از سایر چیپس‌ها متمایز می‌شوند. این نوع چیپس‌ها برای محتوایی با درجهٔ اهمیت بالا استفاده می‌شوند.
چیپس توخالی
چیپس‌های توخالی رنگ زمینه ندارند، با دسنی نازک از محیط اطراف جدا می‌شوند و شامل متنی ساده‌اند. این نوع چیپس‌ها برای محتوایی با درجهٔ اهمیت متوسط و پایین مناسب‌اند. می‌توان با استفاده‌کردن یا نکردن رنگ برند در دسن و متن لیبل این چیپس‌ها میان درجه اهمیت کنش‌های آن‌ها تمایز ایجاد کرد.
آناتومی
اینجا می‌توانید ابعاد چیپس‌ها، فاصله‌ها، حاشیه‌ها و اندازهٔ متن و آیکون را در موقعیت‌های معمولی، آیکون‌دار و حذف‌شونده ببینید.
رفتار
در راهنمای زیر رفتار کامپوننت در کاربردهای مختلف دیزاین توضیح داده شده است.
نگارش
- برای متن چیپس انتخابی و حذف‌شونده حداکثر ۳ کلمه و برای متن چیپس کنش‌پذیر حداکثر ۴ کلمه بنویسید.
- از علائم نگارشی در متن چیپس‌ها استفاده نکنید.