使用 Windows UI 量身打造效果 & 體驗Tailoring effects & experiences using Windows UI

Windows UI 提供許多美觀的效果、動畫和差異化方法。Windows UI provides many beautiful effects, animations, and means for differentiation. 不過,若要在建立成功的應用程式時,符合使用者對效能和自訂能力的預期,仍然是必要的部分。However, meeting user expectations for performance and customizability is still a necessary part of creating successful applications. 通用 Windows 平臺支援一系列具有不同特性和功能的大型多樣化裝置。The Universal Windows Platform supports a large, diverse family of devices, which have different features and capabilities. 若要為您的所有使用者提供內含體驗,您必須確保您的應用程式能在裝置上調整規模,並遵守使用者喜好設定。In order to provide an inclusive experience for all your users, you need to ensure your applications scale across devices and respect user preferences. UI 量身打造可提供有效率的方式來利用裝置的功能,並確保愉快和內含的使用者體驗。UI tailoring can provide an efficient way to leverage a device’s capabilities and ensure a pleasant and inclusive user experience.

UI 量身打造是一種廣泛的類別,包含適用于高效能、美觀的 UI (與下列領域相關):UI tailoring is a broad category encompassing work for performant, beautiful UI with respect to the following areas:

  • 針對效果的使用者設定尊重和適應Respecting and adapting to user settings for effects
  • 適應動畫的使用者設定Accommodating user settings for animations
  • 將指定硬體功能的 UI 優化Optimizing UI for the given hardware capabilities

在此,我們將討論如何使用上述區域中的視覺效果層來量身打造您的效果和動畫,但還有許多其他方法可量身打造您的應用程式,以確保絕佳的終端使用者體驗。Here, we'll cover how to tailor your effects and animations with the Visual Layer in the areas above, but there are many other means to tailor your application to ensure a great end user experience. 您可以使用指導檔,瞭解如何針對各種裝置 量身打造您的 ui ,並 建立回應式 uiGuidance docs are available on how to tailor your UI for various devices and create responsive UI.

使用者效果設定User effects settings

使用者可能會基於各種原因來自訂其 Windows 體驗,應用程式應該遵守並適應。Users may customize their Windows experience for a variety of reasons, which applications should respect and adapt to. 使用者可以控制的其中一個區域,是變更他們在整個系統中看到使用的效果類型。One area end users can control is changing the types of effects they see used throughout their system.

透明度效果設定Transparency effects settings

使用者可以自訂的其中一個效果設定是開啟/關閉透明效果。One such effect setting users can customize is turning transparency effects on/off. 這可以在 [個人化 > 色彩] 下的 [設定] 應用程式中找到,或透過 [設定] > 輕鬆存取 > 顯示。This can be found in the Settings app under Personalization > Colors, or through Settings app > Ease of Access > Display.

設定中的透明度選項

開啟時,任何使用透明度的效果都會如預期般出現。When turned on, any effect that uses transparency will appear as expected. 這適用于 Acrylic、HostBackdropBrush 或任何不是完全不透明的自訂效果圖形。This applies to Acrylic, HostBackdropBrush, or any custom effect graph that is not fully opaque.

當關閉時,acrylic 材質會自動切換回純色,因為 XAML 的 acrylic 筆刷預設會聆聽此事件。When turned off, acrylic material will automatically fall back to a solid color because XAML's acrylic brush has listened to this event by default. 在此,我們會在未啟用透明效果時,看到計算機應用程式適當地切換回純色:Here, we see the calculator app appropriately falling back to a solid color when transparency effects are not enabled:

具有 Acrylic  計算機且 Acrylic 回應透明度設定的計算機Calculator with Acrylic Calculator with Acrylic Responding to Transparency Settings

不過,針對任何自訂效果,應用程式必須回應 UISettings AdvancedEffectsEnabled 屬性或 AdvancedEffectsEnabledChanged 事件,並切換出效果/效果圖形,以使用沒有透明度的效果。However, for any custom effects the application needs to respond to the UISettings.AdvancedEffectsEnabled property or AdvancedEffectsEnabledChanged event and switch out the effect/effect graph to use an effect that has no transparency. 範例如下:An example of this is below:

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
}

動畫設定Animations settings

同樣地,應用程式應該接聽並回應 UISettings AnimationsEnabled 屬性,以確保動畫會根據設定 > 輕鬆存取 > 顯示中的使用者設定來開啟或關閉。Similarly, applications should listen and respond to the UISettings.AnimationsEnabled property to ensure animations are turned on or off based on user settings in Settings > Ease of Access > Display.

設定中的動畫選項

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

運用功能 APILeveraging the capabilities API

藉由運用 CompositionCapabilities api,您可以偵測到哪些組合功能可供使用,並在指定的硬體上進行效能調整,並量身打造設計,以確保使用者在任何裝置上獲得高效能且美觀的體驗。By leveraging the CompositionCapabilities APIs, you can detect which composition features are available and performant on given hardware and tailor the design to ensure end users get a performant and beautiful experience on any device. Api 提供一種方法來檢查硬體系統功能,以在各種外型規格之間執行適當的效果縮放。The APIs provide a means to check hardware system capabilities in order to implement graceful effect scaling across a variety of form factors. 這可讓您輕鬆地適當地調整應用程式,以建立美觀且流暢的使用者體驗。This makes it easy to appropriately tailor the application to create a beautiful and seamless end user experience.

此 API 提供方法和事件接聽程式,可用來對應用程式 UI 做出有效的調整決策。This API provides methods and an event listener that can be used to make effect scaling decisions for the application UI. 這項功能會偵測系統如何處理複雜的組合和轉譯作業,然後將資訊傳回給開發人員使用的簡單模型。The feature detects how well the system can handle complex composition and rendering operations and then returns the information in an easy-to-consume model for developers to utilize.

使用組合功能Using composition capabilities

CompositionCapabilities 功能已運用於 Acrylic 材質之類的功能,其中的材質會根據案例和硬體回復為更具效能的效果。The CompositionCapabilities functionality is already being leveraged for features like Acrylic material, where the material falls back to a more performant effect depending on the scenario and hardware.

您可以透過幾個簡單的步驟,將 API 新增至現有的程式碼。The API can be added to existing code in a few easy steps.

  1. 取得應用程式的函式中的功能物件。Acquire the capabilities object in your application’s constructor.

    _capabilities = CompositionCapabilities.GetForCurrentView();
    
  2. 為您的應用程式註冊功能變更事件接聽程式。Register a capabilities changed event listener for your app.

    _capabilities.Changed += HandleCapabilitiesChanged;
    
  3. 將內容加入至事件回呼方法以處理各種功能層級。Add content to the event callback method to handle various capabilities levels. 這可能會或可能不會類似下一個步驟。This may or may not be similar to the next step below.

  4. 使用效果時,請先檢查功能物件。When using effects, check the capabilities object first. 請考慮使用條件式檢查或 switch control 語句,這取決於您要如何自訂效果。Consider using conditional checks or switch control statements, depending on how you want to tailor the effects.

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

您可以在 [WINDOWS UI Github](https://github.com/microsoft/WindowsCompositionSamples/tree/master/SampleGallery/Samples/SDK 15063/CompCapabilities)存放庫中找到完整的範例程式碼。Full example code can be found on the [Windows UI Github repo](https://github.com/microsoft/WindowsCompositionSamples/tree/master/SampleGallery/Samples/SDK 15063/CompCapabilities).

快速與緩慢效果Fast vs. slow effects

根據在 CompositionCapabilities API 中提供的 AreEffectsSupportedAreEffectsFast 方法提供的意見反應,應用程式可以決定是否要交換針對裝置優化的其他選項效果的昂貴或不支援效果。Based on feedback from the provided AreEffectsSupported and AreEffectsFast methods in the CompositionCapabilities API, the application can decide to swap expensive or unsupported effects for other effects of their choice that are optimized for the device. 已知某些效果的資源比其他更多,因此應謹慎使用,而且可以更輕鬆地使用其他效果。Some effects are known to consistently be more resource intensive than others and should be used sparingly, and other effects can be used more freely. 不過,針對所有效果,請小心在連結和製作動畫時使用,因為某些案例或組合可能會變更效果圖形的效能特性。For all effects, however, care should be used when chaining and animating as some scenarios or combinations may change the performance characteristics of the effect graph. 以下是個別效果的一些經驗法則效能特性:Below are some rule of thumb performance characteristics for individual effects:

  • 已知會有高效能影響的效果如下:高斯模糊、陰影遮罩、BackDropBrush、HostBackDropBrush 和圖層視覺效果。Effects that are known to have high performance impact are as follows – Gaussian Blur, Shadow Mask, BackDropBrush, HostBackDropBrush, and Layer Visual. 針對低終端裝置,不建議使用這些 功能 (功能等級 9.1-9.3) ,而且應該在高階裝置上謹慎使用。These are not recommended for low end devices (feature level 9.1-9.3), and should be used judiciously on high end devices.
  • 以中等效能影響的效果包括色彩矩陣、某些 Blend 效果 BlendModes (亮度、色彩、飽和度和色調) 、焦點、SceneLightingEffect 和 ((視) BorderEffect 的案例而定)。Effects with medium performance impact include Color Matrix, certain Blend Effect BlendModes (Luminosity, Color, Saturation, and Hue), SpotLight, SceneLightingEffect, and (depending on scenario) BorderEffect. 這些影響可能適用于低終端裝置上的特定案例,但請小心在連結和製作動畫時使用。These effects may work with certain scenarios on low end devices, but care should be used when chaining and animating. 建議限制使用於兩個或更少的時間,並只在轉換時製作動畫。Recommend restricting use to two or less and animating on transitions only.
  • 所有其他效果都有低效能影響,並可在製作動畫和連結時的所有合理案例中運作。All other effects have low performance impact and work in all reasonable scenarios when animating and chaining.