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

پوشاننده

پوشاننده‌های روشن (Light) و تیره (Dark)

پوشاننده‌ها بخشی از محتوای رابط کاربر را می‌پوشانند تا تمرکز کاربر را بر محتوایی مشخص بالا ببرند یا از تعامل کاربر با بخشی از رابط کاربر جلوگیری کنند.

کاربرد

همان‌طور که جدا کننده‌ها محتوا را در فضای دو بُعدی از هم متمایز و دسته‌بندی می‌کنند، پوشاننده‌ها در فضای سه‌ بعدی محتوای رابط کاربر را در لایه‌هایی با ارتفاع متفاوت به کاربر ارائه می‌دهند. پوشاننده‌ها می‌توانند بخشی یا تمام سطح رابط‌ کاربر را بپوشانند و علاوه ‌بر پوشاندن محتوای مخل تمرکز، اجازهٔ دسترسی و تغییر آن بخش را از کاربر سلب ‌کنند.
این کامپوننت می‌تواند پس‌زمینهٔ کامپوننت‌های گفتگو محور سیستم مانند مُدال‌ها، پیغام‌های هشدار یا متنی و نمایشگر عکس یا ویدیو باشد و کاربر را به ادامهٔ مسیرِ مشخص یا تأیید مشاهدهٔ پیامِ سیستم ملزم کند. همچنین پوشاننده‌ محتوای وابسته به پیشرفت فرآیندی مشخص (In Progress) را می‌پوشاند و از کنش در این محتوا جلوگیری می‌کند.
Dark dimmer for modal dialogue
کاربرد پوشاننده‌های تیره در پس‌زمینهٔ کامپوننت‌های گفتگو محور سیستم
Light dimmer with progress bar
کاربرد پوشاننده‌های روشن در پوشاندن محتوای وابسته به پیشرفت فرآیندی مشخص

انواع

پوشاننده‌های تیره

پوشاننده‌های روشن

رفتار

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

پوشاننده‌ها می‌توانند دکمهٔ بستن داشته باشند تا کاربر را به سطح پایین‌تر برگردانند.

درست

در پوشاننده‌های پس‌زمینهٔ پیغام‌ هشدار یا متنی، کاربر می‌تواند با ضربه‌زدن یا کلیک‌کردن سطحِ در دسترس دیمر به سطح پایین‌تر رابط کاربر بازگردد.