使用 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
  • 为给定的硬件功能优化 UIOptimizing 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创建响应式 ui的指南文档可用。Guidance 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 属性,并对其做出响应,以确保根据 "设置" 中的用户设置 > 轻松访问 > 显示打开或关闭动画。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 控制语句,具体取决于您希望如何调整效果。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.
  • 具有中等性能影响的影响包括颜色矩阵、特定混合效果 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.