Personalización de efectos & experiencias con la interfaz de usuario de WindowsTailoring effects & experiences using Windows UI

La interfaz de usuario de Windows proporciona muchos efectos atractivos, animaciones y medias de diferenciación.Windows UI provides many beautiful effects, animations, and means for differentiation. Sin embargo, el cumplimiento de las expectativas de los usuarios para el rendimiento y la personalización sigue siendo una parte necesaria de la creación de aplicaciones correctas.However, meeting user expectations for performance and customizability is still a necessary part of creating successful applications. El Plataforma universal de Windows admite una familia grande y diversa de dispositivos, que tienen diferentes características y capacidades.The Universal Windows Platform supports a large, diverse family of devices, which have different features and capabilities. Con el fin de proporcionar una experiencia inclusiva a todos los usuarios, debe asegurarse de que las aplicaciones se escalan en todos los dispositivos y respetan las preferencias del usuario.In order to provide an inclusive experience for all your users, you need to ensure your applications scale across devices and respect user preferences. La personalización de la interfaz de usuario puede proporcionar una manera eficaz de aprovechar las capacidades de un dispositivo y garantizar una experiencia de usuario agradable y inclusiva.UI tailoring can provide an efficient way to leverage a device’s capabilities and ensure a pleasant and inclusive user experience.

La personalización de la interfaz de usuario es una amplia categoría que abarca el trabajo de una interfaz de usuario eficaz y atractiva con respecto a las siguientes áreas:UI tailoring is a broad category encompassing work for performant, beautiful UI with respect to the following areas:

  • Respetar y adaptar a la configuración de usuario para efectosRespecting and adapting to user settings for effects
  • Adaptación de la configuración de usuario para animacionesAccommodating user settings for animations
  • Optimizar la interfaz de usuario para las capacidades de hardware dadasOptimizing UI for the given hardware capabilities

Aquí veremos cómo adaptar sus efectos y animaciones con la capa visual en las áreas anteriores, pero hay muchos otros medios para adaptar la aplicación a fin de garantizar una excelente experiencia del usuario final.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. Los documentos de orientación están disponibles en cómo adaptar la interfaz de usuario para varios dispositivos y crear una interfaz de usuario con capacidad de respuesta.Guidance docs are available on how to tailor your UI for various devices and create responsive UI.

Configuración de efectos de usuarioUser effects settings

Los usuarios pueden personalizar su experiencia con Windows por diversos motivos, las aplicaciones que deben respetar y adaptarse.Users may customize their Windows experience for a variety of reasons, which applications should respect and adapt to. Un área que los usuarios finales pueden controlar es cambiar los tipos de efectos que se usan en su sistema.One area end users can control is changing the types of effects they see used throughout their system.

Configuración de efectos de transparenciaTransparency effects settings

Uno de estos efectos que los usuarios pueden personalizar es activar o desactivar los efectos de transparencia.One such effect setting users can customize is turning transparency effects on/off. Esto puede encontrarse en la aplicación de configuración, en personalización > colores, o a través de la aplicación de configuración > la accesibilidad > presentación.This can be found in the Settings app under Personalization > Colors, or through Settings app > Ease of Access > Display.

Opción de transparencia en configuración

Cuando está activado, los efectos que utilicen la transparencia aparecerán de la manera esperada.When turned on, any effect that uses transparency will appear as expected. Esto se aplica a acrílico, HostBackdropBrush o cualquier gráfico de efecto personalizado que no sea totalmente opaco.This applies to Acrylic, HostBackdropBrush, or any custom effect graph that is not fully opaque.

Cuando está desactivada, el material acrílico se revierte automáticamente a un color sólido, ya que el pincel acrílico de XAML ha escuchado este evento de forma predeterminada.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. Aquí vemos que la aplicación de calculadora se revierte correctamente a un color sólido cuando no están habilitados los efectos de transparencia:Here, we see the calculator app appropriately falling back to a solid color when transparency effects are not enabled:

Calculadora con  calculadora acrílico con la respuesta acrílico a la configuración de transparenciaCalculator with Acrylic Calculator with Acrylic Responding to Transparency Settings

Sin embargo, para cualquier efecto personalizado, la aplicación debe responder a la propiedad UISettings. AdvancedEffectsEnabled o al evento AdvancedEffectsEnabledChanged y desactivar el gráfico efecto/efecto para usar un efecto que no tenga transparencia.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. A continuación se muestra un ejemplo de esto: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
}

Configuración de animacionesAnimations settings

Del mismo modo, las aplicaciones deben escuchar y responder a la propiedad UISettings. AnimationsEnabled para asegurarse de que las animaciones se activan o desactivan en función de la configuración de usuario en la configuración > facilitar el acceso > presentación.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.

Opción de animaciones en configuración

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

Aprovechamiento de la API de funcionalidadesLeveraging the capabilities API

Al aprovechar las API de CompositionCapabilities , puede detectar qué características de composición están disponibles y cómo se aplican a un hardware determinado y adaptar el diseño para garantizar que los usuarios finales obtengan una experiencia eficaz y atractiva en cualquier dispositivo.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. Las API proporcionan un medio para comprobar las capacidades del sistema de hardware con el fin de implementar el escalado de efectos correctos en una variedad de factores de forma.The APIs provide a means to check hardware system capabilities in order to implement graceful effect scaling across a variety of form factors. Esto facilita la adaptación adecuada de la aplicación para crear una experiencia de usuario final atractiva y sin problemas.This makes it easy to appropriately tailor the application to create a beautiful and seamless end user experience.

Esta API proporciona métodos y un agente de escucha de eventos que se puede usar para tomar decisiones de escalado de efectos para la interfaz de usuario de la aplicación.This API provides methods and an event listener that can be used to make effect scaling decisions for the application UI. La característica detecta el grado en que el sistema puede controlar las operaciones complejas de composición y representación y, a continuación, devuelve la información en un modelo fácil de usar que los desarrolladores usan.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.

Uso de las funcionalidades de composiciónUsing composition capabilities

La funcionalidad CompositionCapabilities ya se está aprovechando para características como el material acrílico, donde el material vuelve a un efecto más efectivo en función del escenario y del hardware.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.

La API se puede Agregar al código existente en unos pocos pasos sencillos.The API can be added to existing code in a few easy steps.

  1. Adquiera el objeto Capabilities en el constructor de la aplicación.Acquire the capabilities object in your application’s constructor.

    _capabilities = CompositionCapabilities.GetForCurrentView();
    
  2. Registra un agente de escucha de eventos de cambio de funcionalidad de la aplicación.Register a capabilities changed event listener for your app.

    _capabilities.Changed += HandleCapabilitiesChanged;
    
  3. Agregue contenido al método de devolución de llamada de evento para controlar diversos niveles de funcionalidad.Add content to the event callback method to handle various capabilities levels. Esto puede ser o no similar al siguiente paso siguiente.This may or may not be similar to the next step below.

  4. Al usar efectos, compruebe primero el objeto de funcionalidades.When using effects, check the capabilities object first. Considere la posibilidad de utilizar comprobaciones condicionales o instrucciones de control de conmutador, en función de cómo desee personalizar los efectos.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
        }
    }
    

Puede encontrar código de ejemplo completo en el [repositorio de github](https://github.com/microsoft/WindowsCompositionSamples/tree/master/SampleGallery/Samples/SDK 15063/CompCapabilities)de la interfaz de usuario de Windows.Full example code can be found on the [Windows UI Github repo](https://github.com/microsoft/WindowsCompositionSamples/tree/master/SampleGallery/Samples/SDK 15063/CompCapabilities).

Efectos rápidos frente a efectos lentosFast vs. slow effects

En función de los comentarios de los métodos AreEffectsSupported y AreEffectsFast proporcionados en la API de CompositionCapabilities, la aplicación puede optar por intercambiar efectos costosos o no admitidos para otros efectos de su elección que estén optimizados para el dispositivo.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. Se sabe que algunos efectos tienen un uso más intensivo de los recursos que otros y deben usarse con moderación, y otros efectos se pueden usar con mayor libertad.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. Sin embargo, para todos los efectos, se debe tener cuidado al encadenar y animar, ya que algunos escenarios o combinaciones pueden cambiar las características de rendimiento del gráfico de efectos.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. A continuación se muestra una regla de características de rendimiento Thumb para efectos individuales:Below are some rule of thumb performance characteristics for individual effects:

  • Los efectos que se sabe que tienen un alto impacto en el rendimiento son los siguientes: Desenfoque gausiano, máscara de sombra, BackDropBrush, HostBackDropBrush y visual de capa.Effects that are known to have high performance impact are as follows – Gaussian Blur, Shadow Mask, BackDropBrush, HostBackDropBrush, and Layer Visual. No se recomiendan para dispositivos de Low -End (nivel de características 9.1-9.3)y deben usarse con prudencia en dispositivos de gama alta.These are not recommended for low end devices (feature level 9.1-9.3), and should be used judiciously on high end devices.
  • Entre los efectos con un impacto de rendimiento medio se incluyen la matriz de colores, ciertos efectos de mezcla BlendModes (luminosidad, color, saturación y matiz), SpotLight, SceneLightingEffect y (según el escenario) 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. Estos efectos pueden funcionar con ciertos escenarios en dispositivos de low-end, pero debe tener cuidado al encadenar y animar.These effects may work with certain scenarios on low end devices, but care should be used when chaining and animating. Se recomienda restringir el uso a dos o menos y animar solo en las transiciones.Recommend restricting use to two or less and animating on transitions only.
  • Todos los demás efectos tienen un bajo impacto en el rendimiento y funcionan en todos los escenarios razonables al animar y encadenar.All other effects have low performance impact and work in all reasonable scenarios when animating and chaining.