共用方式為

壓克力材質

主角圖像

Acrylic 是一種能創造半透明質感的Brush類型。 您可以將壓克力套用到應用程式表面來增加深度，並協助建立視覺階層。

重要 API：AcrylicBrush 類別、Background 屬性、Window.SystemBackdrop 屬性、DesktopAcrylicBackdrop 類別

在淺色主題中的壓克力 在淺色佈景主題中的壓克力

深色主題中的壓克力 深色主題中的壓克力

「Acrylic」和「Fluent Design 系統」

Fluent Design 系統能協助您建立結合光線、深度、動作、材質及縮放比例的現代化前衛 UI。 Acrylic 是 Fluent Design 系統元件，其能將實體紋理 (材質) 與深度加入應用程式。 若要深入瞭解，請參閱 Fluent Design - Material。

壓克力混紡類型

壓克力（Acrylic）的最顯著特徵就是它的透明度。 有兩種壓克力混合類型可變更透過材質可見的內容：

  • 背景壓克力 會顯示目前使用中應用程式背後的桌面桌布和其他視窗，並在慶祝使用者的個人化喜好設定的同時，在應用程式窗口之間新增深度。
  • 應用程式內壓克力能增加應用程式框架內的深度感，讓應用程式能夠聚焦並有層次。

背景壓克力

應用程式內壓克力

避免堆疊多個壓克力表面：多層背景壓克力可能會產生令人分心的視覺錯覺。

使用壓克力的時機

請考慮下列使用模式，以決定如何將壓克力納入您的應用程式。

暫時性表面

  • 針對暫時性UI元素使用 背景壓克力 。

對於具有內容選單、彈出式視窗、非強制回應彈出視窗或輕量解散窗格的應用程式，建議您使用背景壓克力，尤其是當這些介面在主應用程式視窗的框架之外呈現時。 在暫時性案例中使用壓克力有助於維持與觸發暫時性 UI 之內容的視覺關聯性。

桌面背景透過開啟的操作功能表使用背景透明效果顯示

許多 XAML 控制項預設會繪製壓克力效果。 MenuFlyout、AutoSuggestBox、ComboBox 和類似具有輕量關閉功能的彈出視窗在打開時都會使用壓克力效果。

支援UI和垂直窗格

  • 使用 應用程式內壓克力 來支援UI，例如捲動或互動時可能會重疊內容的介面。

如果您在導覽介面上使用應用程式內壓克力，請考慮將內容延伸至壓克力板的下方，以改善應用程式中的流程運作。 使用 NavigationView 會自動為您執行此動作。 不過，為了避免產生條紋效果，請試著不要將多塊壓克力材料邊對邊地放置，因為這可能會在兩個模糊表面之間產生不必要的縫隙。 壓克力是一個能讓您的設計賞心悅目的工具，但若使用方式不正確，便可能會產生視覺上的干擾。

針對能協助區隔應用程式內容的垂直窗格或表面，我們建議使用不透明的背景，而非壓克力。 如果您的垂直窗格會在內容上方開啟 (例如 NavigationView 的 Compact 或 Minimal 模式)，我們建議您使用應用程式內壓克力來協助在使用者開啟此窗格時維持頁面的內容。

備註

呈現壓克力表面會大量佔用 GPU，這可能會提升裝置耗電量並縮短電池使用時間。 當裝置進入「省電模式」時，會自動停用壓克力效果。 使用者可以關閉設定中「透明效果」，以停用所有應用程式的壓克力效果：依次進入個人化顏色。

可用性與適應性

壓克力會自動針對各種不同的裝置與內容調整其外觀。

在高對比模式中，使用者會繼續看見其所選擇的熟悉背景色彩，而非壓克力效果。 此外，背景亞克力與應用程式內亞克力都會顯示為純色。

  • 當使用者在 [設定] > [個人化] > [色彩] 中關閉 透明效果 時。
  • 當「省電模式」啟動時。
  • 當應用程式在低階硬體上執行時。

此外，在下列狀況中，只有背景壓克力會以純色取代其透明度與紋理：

  • 當桌面上的應用程式視窗停用時。
  • 當 Windows 應用程式正在Xbox、HoloLens 或平板電腦模式中執行時。

可讀性考量

請務必確保應用程式呈現的任何文字都符合對比比例（請參閱 無障礙文字需求）。 我們已優化壓克力材質，以確保文字在壓克力上符合對比比例。 我們不建議將輔色文字放置在壓克力表面上，因為這些組合很可能無法在預設 14px 字型大小的情況下通過最低對比率需求。 請嘗試避免將超連結放置在壓克力元素上。 此外，如果您選擇自訂壓克力色彩或不透明度，請牢記對可讀性的影響。

在您的應用程式中套用壓克力

重要

WinUI 和 WinUI for UWP 的背景壓克力塗法會有所不同。

適用於 UWP/UWP 的 WinUI：AcrylicBrush 類別有一個 BackgroundSource 屬性，可以指定你想要背景還是應用程式內的壓克力。 您可以使用 AcrylicBrush 來套用這兩種類型的壓克力。 具體資訊與範例請參閱 AcrylicBrush 類別： Microsoft.UI.Xaml.Media.AcrylicBrush（WinUI for UWP）、 Windows.UI.Xaml.Media.AcrylicBrush（UWP）。

WinUI：AcrylicBrush 類別只支援應用程式內部壓克力效果。 您可以使用 DesktopAcrylicBackdrop 類別來套用背景壓克力。

背景壓克力

要在 WinUI 應用程式中套用背景壓克力，請將該元素 SystemBackdrop 的屬性設為 DesktopAcrylicBackdrop 的實例。 如需詳細資訊，請參閱 在 Windows 11 傳統型應用程式中套用 Mica 或壓克力材質。

這些元素具有 SystemBackdrop 屬性：

應用程式內壓克力

您可以使用 XAML AcrylicBrush 或預先定義的 AcrylicBrush 主題資源，將應用程式內壓克力套用至應用程式的介面。

WinUI 包含一組筆刷主題資源，可尊重應用程式的主題，並視需要回復為純色。 若要繪製特定表面，請將其中一個主題資源套用至元素背景，就像套用任何其他筆刷資源一樣。

<Grid Background="{ThemeResource AcrylicInAppFillColorDefaultBrush}">

備註

您可以在 microsoft-ui-xaml GitHub 存放庫中的 AcrylicBrush 主題資源檔案中檢視這些資源。

對於 UWP 的 WinUI，包含 Background 的資源代表背景壓克力，而 InApp 則指應用內的壓克力。

WinUI 包含了 背景資源以 提供相容性，但它們的行為與 InApp 資源相同。

自訂壓克力筆刷

您可以選擇將色彩色調新增至應用程式的壓克力，以顯示品牌，或提供與頁面上其他元素的視覺平衡。 若要顯示色彩而非灰階，您必須使用下列屬性來定義自己的壓克力筆刷。

  • TintColor︰色彩/色調重疊層。
  • TintOpacity︰色調層的不透明度。
  • TintLuminosityOpacity：控制從背景透過壓克力表面允許的飽和度量。
  • BackgroundSource：（僅適用於 UWP 的 WinUI）這個標記用來指定是要使用背景壓克力還是應用程式內的壓克力。
  • FallbackColor︰在省電模式中取代壓克力效果的純色。 針對背景壓克力，當您的應用程式不在作用中的桌面視窗中時，後備顏色也會取代壓克力。

淺色佈景壓克力色板

深色佈景主題壓克力樣本

亮度不透明度與色調不透明度的比較

若要新增壓克力筆刷，請定義深色、淺色和高對比度主題的三個資源。 在高對比度中，我們建議您使用 SolidColorBrush ，其顏色與深色/淺色AcrylicBrush x:Key 相同。

備註

如果您未指定 TintLuminosityOpacity 值，系統會根據 TintColor 和 TintOpacity 自動調整其值。

<ResourceDictionary.ThemeDictionaries>
    <ResourceDictionary x:Key="Default">
        <AcrylicBrush x:Key="MyAcrylicBrush"
            BackgroundSource="HostBackdrop"
            TintColor="#FFFF0000"
            TintOpacity="0.8"
            TintLuminosityOpacity="0.5"
            FallbackColor="#FF7F0000"/>
    </ResourceDictionary>

    <ResourceDictionary x:Key="HighContrast">
        <SolidColorBrush x:Key="MyAcrylicBrush"
            Color="{ThemeResource SystemColorWindowColor}"/>
    </ResourceDictionary>

    <ResourceDictionary x:Key="Light">
        <AcrylicBrush x:Key="MyAcrylicBrush"
            BackgroundSource="HostBackdrop"
            TintColor="#FFFF0000"
            TintOpacity="0.8"
            TintLuminosityOpacity="0.5"
            FallbackColor="#FFFF7F7F"/>
    </ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>

下列範例示範如何在程序代碼中宣告 AcrylicBrush。

AcrylicBrush myBrush = new AcrylicBrush();
myBrush.TintColor = Color.FromArgb(255, 202, 24, 37);
myBrush.FallbackColor = Color.FromArgb(255, 202, 24, 37);
myBrush.TintOpacity = 0.6;

grid.Fill = myBrush;

可行與禁止事項

  • 應在 暫時性表面的使用壓克力。
  • 請務必 將壓克力延伸至您應用程式的至少一個邊緣，以透過巧妙地混合應用程式周圍的環境來提供順暢的體驗。
  • 請勿 將桌面壓克力放在應用程式的大型背景表面。
  • 請勿 將多個壓克力窗格放在彼此旁邊，因為這會導致不想要的可見接縫。
  • 請勿 將輔色文字放在壓克力表面上。

我們設計壓克力的方式

我們微調了壓克力的關鍵元件，以達到其獨特的外觀和屬性。 我們從半透明、模糊和雜訊開始，將視覺深度和維度新增至平面。 我們加入排除混合模式層，以確保放置在壓克力背景上之 UI 的對比與可讀性。 最後，我們加入色彩色調來提供個人化的可能性。 這些層面會相互搭配，並產生全新且可使用的材質。

壓克力配方
壓克力配方：背景、模糊、排除混合、色彩/色調重疊、雜訊

範例

打開 WinUI 圖庫應用程式，看看背景壓克力顏料的運作

打開 WinUI 圖庫應用程式，看看應用程式內的 AcrylicBrush 正在運作

WinUI 3 資源庫應用程式包含大多數 WinUI 3 控制項和功能的互動式範例。 從 Microsoft Store 取得應用程式，或在 GitHub 上取得原始程式碼

Fluent Design 概觀

  • Last updated on