برچسب
برچسب توپُر (Filled) و توخالی (Outlined)
برچسب‌ها برای دسته‌بندی، طبقه‌بندی و نشانه‌گذاری محتوای رابط کاربر استفاده می‌شوند و شامل کلمه یا کلماتی‌‌اند که می‌تواند با آیکون یا بدون آیکون باشد. آن‌ها می‌توانند به‌تنهایی و یا کنار هم استفاده شوند.
دموی تعاملی
کاربرد
برچسب‌ها تنها در ارتباط با کامپوننتی دیگر و برای بروز خصوصیات آن معنادارند و چون می‌توانند مخل تمرکز کاربر شوند، نباید در حالتی با درجهٔ اهمیت بالا قرار بگیرند. بهتر است تعداد برچسب‌هایی که استفاده می‌کنیم در بهینه‌ترین حالت باشند (کم باشند) و تنها برای نمایش مشخصات کلی کامپوننت از آن‌ها استفاده شود.
برچسب‌ها معمولاً کنار این قسمت‌ها استفاده می‌شوند:
- عنوان اصلی صفحات
- کارت‌ها
- کامپوننت‌هایی با مرز مشخص و جدا شده از بقیهٔ اجزای رابط کاربر
یادآوری این نکته لازم است که برچسب‌ها می‌توانند در همهٔ قسمت‌ها استفاده شوند به شرطی که ویژگی‌های یک کامپوننت یا بخش دیگر رابط کاربر را مشخص کنند.
انواع
استایل انواع برچسب‌ها هنگام هاور و فوکوس تغییر نمی‌کند تا کاربر غیرتعاملی‌بودن این کامپوننت را درک کرده و متوجه شود برچسب‌ها صرفاً برای اطلاع‌رسانی استفاده شده‌اند.
برچسب توپُر
مشخصهٔ برچسب‌های توپُر کادر رنگی و متن داخل آن است. این برچسب درجهٔ اهمیت بالاتری نسبت به سایر برچسب‌ها دارد.
برچسب توخالی
برچسب‌های توخالی رنگ زمینه ندارند، با دِسنی نازک از محیط اطراف جدا می‌شوند و شامل متنی ساده‌اند. این برچسب‌ها نسبت به برچسب‌های توپر درجهٔ اهمیت پایین‌تری دارند.
برچسب آیکون‌دار
هر دو نوع برچسب توپر و توخالی می‌توانند آیکون ابتدایی هم‌رنگ متن برچسب داشته باشند.
آناتومی
اینجا می‌توانید ابعاد برچسب‌ها، فاصله‌ها، حاشیه‌ها و اندازهٔ متن و آیکون را ببینید.
رفتار
در راهنمای زیر رفتار کامپوننت در کاربردهای مختلف دیزاین توضیح داده شده است.
نگارش
- در متن برچسب‌ها از علائم نگارشی استفاده نکنید.
- حداکثر ۵ کلمه در برچسب بنویسید.