پوشاننده
پوشاننده روشن (Light) و تیره (Dark)
پوشاننده‌ها بخشی از محتوای رابط کاربر را می‌پوشانند تا تمرکز کاربر را بر محتوایی مشخص بالا ببرند یا از تعامل کاربر با بخشی از رابط کاربر جلوگیری کنند.
کاربرد
همان‌طور که جدا کننده‌ها محتوا را در فضای دو بُعدی از هم متمایز و دسته‌بندی می‌کنند، پوشاننده‌ها در فضای سه بعدی محتوای رابط کاربر را در لایه‌هایی با ارتفاع متفاوت به کاربر ارائه می‌دهند. پوشاننده‌ها می‌توانند بخشی یا تمام سطح رابط کاربر را بپوشانند و علاوه بر پوشاندن محتوای مخل تمرکز، اجازهٔ دسترسی و تغییر آن بخش را از کاربر سلب کنند.
این کامپوننت می‌تواند پس‌زمینهٔ کامپوننت‌های گفتگو محور سیستم مانند مُدال‌ها، پیغام‌های هشدار یا متنی و نمایشگر عکس یا ویدیو باشد و کاربر را به ادامهٔ مسیرِ مشخص یا تأیید مشاهدهٔ پیامِ سیستم ملزم کند. همچنین پوشاننده محتوای وابسته به پیشرفت فرآیندی مشخص (In Progress) را می‌پوشاند و از کنش در این محتوا جلوگیری می‌کند.
انواع
پوشاننده‌های تیره
این پوشاننده‌ها با ۳ درجهٔ شفافیت که از رنگ سیاه تعریف‌شده در دیزاین سیستم پیروی می‌کند، روی محتوای صفحه قرار می‌گیرند. درجهٔ تیرگی بیشتر مختص پس‌زمینهٔ مدال‌ها، پیغام‌های هشدار یا متنی و یا نمایشگر عکس یا ویدیو است و تمام سطح رابط کاربر را پوشش می‌دهد. درجهٔ تیرگی کمتر برای پوشاندن بخشی از رابط کاربر است که ابزار یا کامپوننتی درسطحی بالاتر در آن تغییر ایجاد می‌کند.
پوشاننده‌های روشن
این پوشاننده‌ها از رنگ سفید تعریف‌شده در دیزاین سیستم با درجهٔ شفافیت مشخص پیروی می‌کنند و برای پوشاندن محتوای وابسته به پیشرفت فرآیندی مشخص (بارگذاری یا به‌روزرسانی) مناسب‌اند. معمولاً روی این پوشاننده‌ها نشانگر/ نوار پیشرفت قرار می‌گیرد تا کاربر از وضعیت بارگذاری یا به‌روزرسانی آگاه شود.
رفتار
در راهنمای زیر رفتار کامپوننت در کاربردهای مختلف دیزاین توضیح داده شده است.