量身打造效果與體驗

WinUI 提供了許多美麗的特效、動畫和差異化的手法。 不過，達到使用者對效能和可自定義性的期望，仍然是建立成功應用程式的必要部分。 Windows App SDK 應用程式可以跨越龐大且多元的 Windows 裝置與配置，這些裝置擁有不同的功能與能力。 若要為所有使用者提供包容性體驗，您必須確保應用程式跨裝置進行調整，並遵守使用者喜好設定。 UI 量身打造可以提供有效率的方式來運用裝置的功能，並確保一個愉快且包容的用戶體驗。

UI 量身打造是一個廣泛的類別，包含針對下列區域的高效能、美觀 UI 的工作：

  • 尊重並適應效果的用戶設定
  • 調整動畫的用戶設定
  • 針對特定硬體能力來優化UI

在這裡，我們將討論如何使用上述區域中的視覺層來量身打造您的效果和動畫，但還有其他許多方法可量身打造您的應用程式，以確保絕佳的用戶體驗。 如需如何 針對各種裝置量身打造 UI，並 建立回應式 UI的指引檔。

使用者效果設定

使用者可能會基於各種原因來自定義其 Windows 體驗，應用程式應該尊重並適應這些體驗。 終端使用者可以控制的其中一個方面是變更他們在系統中看到的效果類型。

透明度效果設定

用戶可以自定義的一個這類效果設定是開啟/關閉透明度效果。 這可以在 Windows 的「設定」下的「個人化 > 顏色」下找到，或透過「設定」 > 「輕鬆存取 > 顯示」找到。

設定中的 透明度選項

開啟時，任何使用透明度的效果都會如預期般出現。 這適用於 Acrylic、HostBackdropBrush 或任何未完全不透明的自定義效果圖形。

當關閉時，壓克力材質會自動回復為純色，這是因為 XAML 的壓克力筆刷預設會響應此事件。 在這裡，我們看到未啟用透明度效果時，計算機應用程式會適當地回復為純色：

壓克力計算機 壓克力計算機回應透明度設定

不過，針對任何自定義效果，應用程式必須回應 UISettings.AdvancedEffectsEnabled 屬性或 AdvancedEffectsEnabledChanged 事件，並更換效果/效果圖形，以改用沒有透明度的效果。 以下為下列範例：

public MainPage()
{
   var uisettings = new UISettings();
   bool advancedEffects = uisettings.AdvancedEffectsEnabled;
   uisettings.AdvancedEffectsEnabledChanged += Uisettings_AdvancedEffectsEnabledChanged;
}

private void Uisettings_AdvancedEffectsEnabledChanged(UISettings sender, object args)
{
    // TODO respond to sender.AdvancedEffectsEnabled
}

動畫設定

同樣地，應用程式應該接聽並回應 UISettings.AnimationsEnabled 屬性，以確保根據 [設定] 中的 [輕鬆存取 > 顯示] 中的使用者 > 設定來開啟或關閉動畫。

設定中的動畫選項 

public MainPage()
{
   var uisettings = new UISettings();
   bool animationsEnabled = uisettings.AnimationsEnabled;
   // TODO respond to animations settings
}

運用功能 API

藉由利用 CompositionCapabilities API，您可以偵測給定硬體上有哪些組合功能可用且高效能，並量身打造設計，以確保終端使用者在任何裝置上都能獲得高效能且美觀的體驗。 API 介面提供一種方法來檢查硬體系統功能，以便在各種形式因素上實作適當效果調整。 這可讓您輕鬆地適當地量身打造應用程式，以建立美觀且順暢的用戶體驗。

此 API 提供方法和事件接聽程式，可用來為應用程式 UI 做出效果調整決策。 此功能會偵測系統如何處理複雜的組合和轉譯作業，然後以容易取用的模型傳回資訊，讓開發人員能夠利用。

使用組合功能

CompositionCapabilities 功能已經用於壓克力視覺效果等功能，材質會依據情境和硬體退回到效能更佳的效果。

API 可以在幾個簡單的步驟中新增至現有的程序代碼。

  1. 取得應用程式建構函式中的功能物件。

    _capabilities = new CompositionCapabilities();

  2. 為您的應用程式註冊已變更事件接聽程式的功能。

    _capabilities.Changed += HandleCapabilitiesChanged;

  3. 將內容新增至事件回呼方法，以處理各種功能層級。 這可能或沒有與下面的下一個步驟類似。

  4. 使用效果時，請先檢查 capabilities 物件。 請考慮使用條件式檢查或切換控件語句，視您想要如何量身打造效果而定。

    if (_capabilities.AreEffectsSupported())
{
    // Add incremental effects updates here

    if (_capabilities.AreEffectsFast())
    {
        // Add more advanced effects here where applicable
    }
}

完整的範例程式碼可以在 Windows UI 的 GitHub 倉庫中找到。

快速與慢速效果

根據 CompositionCapabilities API 中提供的 AreEffectsSupported 和 AreEffectsFast 方法的回饋，應用程式可以選擇將昂貴或不支援的效果換成為裝置優化的其他效果。 已知某些效果比其他效果更耗用資源，而且應該謹慎使用，而其他效果可以更自由地使用。 不過，對於所有效果，在鏈結和動畫時應保持謹慎，因為某些情況或組合可能會改變效果圖形的效能表現。 以下是個別效果的大致效能特性規則：

  • 已知會顯著影響效能的效果如下：高斯模糊、陰影遮罩、BackDropBrush、HostBackDropBrush 和圖層視覺效果。 不建議在低階裝置 （功能層級 9.1-9.3）上使用，並且應在高階裝置上謹慎使用。
  • 具有中等效能影響的效果包括色彩矩陣、特定混合效果的混合模式（亮度、色彩、飽和度和色調）、聚光燈、場景照明效果以及（視案例而定）邊框效果。 這些效果可能適用於低端裝置上的特定情境，但在串接和製作動畫時應謹慎使用。 建議將使用 限制為兩個或更少，並只在轉換時產生動畫效果。
  • 所有其他效果的效能影響都很低，並且在動畫和串接過程中的所有合理情境下運作。
  • Last updated on