لوگوی توپُر دیزاین سیستم سنّت

برچسب‌

برچسب‌های توپُر (Filled) و توخالی (Outlined)

برچسب‌ها برای دسته‌بندی، طبقه‌بندی و نشانه‌گذاری محتوای رابط کاربر استفاده می‌شوند و شامل کلمه یا کلماتی‌‌اند که می‌تواند با آیکون یا بدون آیکون باشد. آن‌ها می‌توانند به‌تنهایی و یا کنار هم استفاده شوند.

دموی تعاملی

پیش‌نمایش کامپوننت که انواع آن‌ها و تفاوت‌های نمایشی و تعاملی هر کدام را نشان می‌دهد.

عنوان برچسب
گزینه‌ها

کاربرد

برچسب‌ها تنها در ارتباط با کامپوننتی دیگر و برای بروز خصوصیات آن معنادارند و چون می‌توانند مخل تمرکز کاربر شوند، نباید در حالتی با درجهٔ اهمیت بالا قرار بگیرند. بهتر است تعداد برچسب‌هایی که استفاده می‌کنیم در بهینه‌ترین حالت باشند (کم باشند) و تنها برای نمایش مشخصات کلی کامپوننت از آن‌ها استفاده شود.
برچسب‌ها معمولاً کنار این قسمت‌ها استفاده می‌شوند:
- عنوان اصلی صفحات - کارت‌ها - کامپوننت‌هایی با مرز مشخص و جدا شده از بقیهٔ اجزای رابط کاربر یادآوری این نکته لازم است که برچسب‌ها می‌توانند در همهٔ قسمت‌ها استفاده شوند به شرطی که ویژگی‌های یک کامپوننت یا بخش دیگر رابط کاربر را مشخص کنند.

انواع

استایل انواع برچسب‌ها هنگام هاور و فوکوس تغییر نمی‌کند تا کاربر غیرتعاملی‌بودن این کامپوننت را درک کرده و متوجه شود برچسب‌ها صرفاً برای اطلاع‌رسانی استفاده شده‌اند.

برچسب توپُر

برچسب توخالی

برچسب آیکون‌دار

آناتومی

اینجا می‌توانید ابعاد برچسب‌ها، فاصله‌ها، حاشیه‌ها و اندازهٔ متن و آیکون را ببینید.
برچسب
برچسب آیکون‌دار

رفتار

در راهنمای زیر رفتار کامپوننت در کاربردهای مختلف دیزاین توضیح داده شده است.
درست

برچسب هر کامپوننت فقط دسته‌بندی، طبقه‌بندی و یا جزئیات ضروری آن کامپوننت را توضیح می‌دهد، رعایت این نکته باعث می‌شود برچسب‌ها تعداد بهینه نیز داشته باشند. در واقع اگر برچسب‌ها درست انتخاب و نوشته شوند، تعداد آن‌ها نیز خود‌به‌خود کم می‌شود.

نادرست

برای توضیح ویژگی یا جزئیات ضروری یک کامپوننت یا جزئی از رابط کاربر تعداد زیادی برچسب استفاده نکنید.

نادرست

متن برچسب‌ها نباید بریده‌شده یا حذف‌شده (سه‌نقطه) نمایش داده شوند. کلمات را طوری انتخاب کنید که در عین کوتاه‌بودن، منظور را کامل برسانند.

نگارش

- در متن برچسب‌ها از علائم نگارشی استفاده نکنید. - حداکثر ۵ کلمه در برچسب‌ بنویسید.