نشان و نشانگر
نشان توپُر (Filled) و بدون متن (نشانگر | Indicator)
کامپوننت‌های نشان و نشانگر برای جلب توجه کاربران استفاده می‌شوند تا تغییرات رخ‌داده در بخشی از رابط کاربر را درک کنند یا از کمیت تغییرات آگاه شوند. اگر تغییرات آنلاین اتفاق بیفتند، همان لحظه در رابط کاربر ظاهر می‌شوند در غیر این صورت از قبل در محل مورد نظر قرار می‌گیرند.
کاربرد
کامپوننت نشان برای جلب توجه کاربر و به دو شکل متنی یا بدون متن (نشانگر) استفاده می‌شود. نشان متنی یا شامل عددی است که کمیت تغییر را نمایش می‌دهد و یا شامل کلماتی که وضعیت بخش مورد نظر در رابط کاربر را توصیف می‌کند. مانند «جدید!» و یا ورژن یک تغییر مثل «v1.0.1».
نشان‌ها می‌توانند در این مکان‌ها باشند:
- کنار آیکون
- بعد از لیبلی که باید آن را بشمارند و یا وضعیتش را مشخص کنند. (توصیف کنند)
- کنار تصویر کاربر (Avatar) برای نمایش وضعیت اتصال کاربر (آفلاین، آنلاین و در دسترس‌نبودن)
زمانی که باید مشخص شود «آخرین تغییر رصد نشده» در کدام بخش اتفاق افتاده و کمیت این تغییر نیز مهم نباشد یا وقتی که فقط جلب توجه کاربر نیاز باشد (مانند نمایش وضعیت اتصال کاربر) از نشان بدون متن استفاده می‌شود. ولی اگر علاوه بر جلب توجه لازم باشد اطلاعاتی به کاربر منتقل شود، باید از نشان متنی استفاده شود مانند تعداد پیام‌های جدید چت که خوانده نشده‌اند.
انواع
نشان توپُر
نشان‌های توپُر با کادری که رنگ اصلی برند را در زمینه دارند مشخص می‌شوند.
نشان بدون متن (نشانگر)
نشانگر نشان بدون متن است که وضعیت‌های مختلف آن با استفاده از رنگ‌های بامعنا از یکدیگر متمایز می‌شود. مثلاً برای مشخص‌کردن وضعیت اتصال (آنلاین، آفلاین و یا در دسترس‌نبودن) در کنار تصویر کاربر (Avatar).
نشان کنار گزینه‌های منو و هم‌تراز با متن آن‌ها یا بالا گوشهٔ سمت راست، کنار آیکون و آواتار قرار می‌گیرد. در انتخاب نوع نشان باید به استایل بصری رابط کاربر توجه کنید و مطمئن شوید نشان در محلی استفاده شده است که توجه کاربر را به تغییرات رخ‌داده جلب می‌کند.
آناتومی
اینجا می‌توانید ابعاد نشان و نشانگر، فاصله‌ها، حاشیه‌ها و اندازهٔ متن را ببینید.
رفتار
در راهنمای زیر رفتار کامپوننت در کاربردهای مختلف دیزاین توضیح داده شده است.
نگارش
- در نشانِ متنی باید از تک کلمه و یا جملهٔ کوتاه (زیر ۲۴ کاراکتر) استفاده شود.
- در نشانِ متنی که شامل عدد است می‌توانید از علائم + و - در کنار عدد استفاده کنید.