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

نشان و نشانگر

نشان‌های توپُر (Filled)، توخالی (Outlined) و بدون متن (نشانگر | Indicator)

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

کاربرد

کامپوننت نشان برای جلب توجه کاربر و به دو شکل متنی یا بدون متن (نشانگر) استفاده می‌شود. نشان متنی یا شامل عددی است که کمیت تغییر را نمایش می‌دهد و یا شامل کلماتی که وضعیت بخش مورد نظر در رابط کاربر را توصیف می‌کند. مانند «جدید!» و یا ورژن یک تغییر مثل «v1.0.1». نشان‌ها می‌توانند در این مکان‌ها باشند: - کنار آیکون - بعد از لیبلی که باید آن را بشمارند و یا وضعیتش را مشخص کنند. (توصیف کنند) - کنار تصویر کاربر (Avatar) برای نمایش وضعیت اتصال کاربر (آفلاین، آنلاین و در دسترس‌نبودن) زمانی که باید مشخص شود «آخرین تغییر رصد نشده» در کدام بخش اتفاق افتاده و کمیت این تغییر نیز مهم نباشد یا وقتی که فقط جلب توجه کاربر نیاز باشد (مانند نمایش وضعیت اتصال کاربر) از نشان بدون متن استفاده می‌شود. ولی اگر علاوه بر جلب توجه لازم باشد اطلاعاتی به کاربر منتقل شود، باید از نشان متنی استفاده ‌شود مانند تعداد پیام‌های جدید چت که خوانده نشده‌اند.

انواع

نشان‌ توپُر

نشان توخالی

نشان بدون متن (نشانگر)

آناتومی

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

رفتار

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

در صورت لزوم از راهنمای ابزار (Tooltip) برای فهم بهتر کاربر استفاده کنید مثلاً زمانی که نشان کنار یک آیکون استفاده شده ‌است.

درست

تغییرات رخ‌داده در چند کامپوننت رابط کاربر می‌توانند جمعاً در یک گروه نمایش داده شوند و هر کامپوننت نیز تعداد تغییرات خودش را مجزا نمایش دهد.

نادرست

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

نادرست

هر تغییر متمایز در صفحه فقط می‌تواند یک نشان یا نشانگر داشته باشد.

نگارش

- در نشانِ متنی باید از تک کلمه و یا جملهٔ کوتاه (زیر ۲۴ کاراکتر) استفاده شود. - در نشانِ متنی که شامل عدد است می‌توانید از علائم + و - در کنار عدد استفاده کنید.